@thejaredwilcurt/csslop 0.0.39 → 0.0.41

package/README.md

@@ -35,7 +35,7 @@ These were the latest and greatest models at the time. Since then I've mostly us
 
 **AI's used during maintenance:**
 
-As new tests are created upstream I use whatever the latest models are, like "Claude 5 High Thinking".
+As new tests are created upstream I use whatever the latest models are and document them in the release notes.
 
 These tools were prompted to pass the tests in the `/copiedTests` folder that came from `keithamus/css-minify-tests`.
 

package/package.json

@@ -2,15 +2,15 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "description": "Experimental CSS minification",
   "scripts": {
-    "prestart": "node ./scripts/prestart.js",
+    "prestart": "node ./scripts/pre/start.js",
     "start": "vite",
     "preview": "vite preview",
-    "prebuild": "node ./scripts/prebuild.js",
+    "prebuild": "node ./scripts/pre/build.js",
     "build": "vite build",
-    "postbuild": "node ./scripts/postbuild.js",
+    "postbuild": "node ./scripts/post/build.js",
     "copy": "node ./scripts/copyTests.js",
     "test": "node ./tests/index.test.js",
     "real": "node ./tests/realworld.test.js",
@@ -22,28 +22,25 @@
     "outdated": "npm outdated",
     "proto": "proto pin node latest --resolve --tool-native && proto pin npm latest --resolve --tool-native && git status"
   },
-  "dependencies": {
-    "@csstools/css-calc": "^3.4.0"
-  },
   "devDependencies": {
     "@codemirror/autocomplete": "^6.20.3",
     "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/view": "^6.43.12",
+    "@codemirror/view": "^6.43.13",
     "@eslint/js": "^10.0.1",
     "@node-projects/css-parser": "^5.2.0",
     "@stylistic/eslint-plugin": "^5.10.0",
     "codemirror": "^6.0.2",
-    "eslint": "^10.10.0",
+    "eslint": "^10.11.0",
     "eslint-config-tjw-base": "^5.0.0",
     "eslint-config-tjw-import-x": "^1.0.1",
     "eslint-config-tjw-jsdoc": "^2.0.1",
     "eslint-plugin-import-x": "^4.17.0",
-    "eslint-plugin-jsdoc": "^64.5.2",
+    "eslint-plugin-jsdoc": "^64.5.4",
     "fflate": "^0.8.3",
     "globals": "^17.12.0",
     "pretty-ms": "^9.3.1",
     "real-world-css-libraries": "^1.0.8",
-    "vite": "^8.3.0"
+    "vite": "^8.3.1"
   },
   "author": "The Jared Wilcurt",
   "homepage": "https://github.com/TheJaredWilcurt/csslop#readme",
@@ -60,11 +57,11 @@
   "devEngines": {
     "runtime": {
       "name": "node",
-      "version": "26.9.0"
+      "version": "26.10.0"
     },
     "packageManager": {
       "name": "npm",
-      "version": "12.0.2"
+      "version": "12.1.0"
     }
   }
 }

package/src/rules/custom-properties.js

@@ -2,6 +2,9 @@
  * @file Custom property value whitespace and comment processing for CSS minification.
  */
 
+import { tokenizeCssValue } from '../parser/tokenizer.js';
+import { formatCompactNumber } from '../value/shared.js';
+
 /**
  * Removes spaces after commas only inside parenthesized groups (function
  * calls like `var()`, `calc()`), leaving top-level comma spacing intact.
@@ -34,15 +37,89 @@ function removeSpacesAfterCommasInsideFunctions (value) {
 }
 
 /**
- * Strips leading zeros from decimal numbers in a custom property value
- * (e.g. `0.5` becomes `.5`, `-0.02em` becomes `-.02em`).
+ * The token types whose text begins with a number, and so may hold digits that
+ * are written out longer than they need to be.
+ *
+ * @type {Set<string>}
+ */
+const NUMERIC_TOKEN_TYPES = new Set(['number', 'dimension', 'percentage']);
+
+/**
+ * Splits a numeric token into the decimal number it states and the unit
+ * written on it. A number carrying a scientific exponent does not match, since
+ * its digits cannot be restated without reading the exponent along with them,
+ * and neither does a whole number, which has no zeros to shed.
+ *
+ * @type {RegExp}
+ */
+const DECIMAL_NUMBER_TOKEN = /^([+-]?(?:\d+\.\d+|\.\d+))([a-zA-Z%]*)$/;
+
+/**
+ * Restates a numeric token as the shortest way of writing the same number,
+ * dropping the zeros that lead the decimal point and the ones that trail the
+ * digits behind it (`-0.020em` becomes `-.02em`). A token that is not a plain
+ * decimal, or whose number is only expressible in scientific notation, is left
+ * exactly as it was written.
+ *
+ * @param  {string} tokenText  The text of a number, dimension, or percentage token.
+ * @return {string}            The shortest way of writing that same token.
+ */
+function shortenNumericToken (tokenText) {
+  const decimalNumber = tokenText.match(DECIMAL_NUMBER_TOKEN);
+  if (!decimalNumber) {
+    return tokenText;
+  }
+  const [, number, unit] = decimalNumber;
+  const shortened = formatCompactNumber(number);
+  // A number too small or too large to write out plainly comes back in
+  // scientific notation, which reads as a different token once a unit follows
+  if (shortened.includes('e')) {
+    return tokenText;
+  }
+  return shortened + unit;
+}
+
+/**
+ * Reports whether two token lists say the same thing, which is what tells a
+ * rewritten value apart from one whose tokens have run together. Shortening
+ * the numbers of `1.0.0` would leave `10`, a single number where two stood.
+ *
+ * @param  {Array}   tokens           The tokens the value was read as.
+ * @param  {Array}   rewrittenTokens  The tokens the rewritten value reads as.
+ * @return {boolean}                  Whether the rewrite left every token boundary in place.
+ */
+function hasSameTokenBoundaries (tokens, rewrittenTokens) {
+  if (tokens.length !== rewrittenTokens.length) {
+    return false;
+  }
+  return tokens.every((token, index) => {
+    return token.type === rewrittenTokens[index].type;
+  });
+}
+
+/**
+ * Writes every number in a custom property value the shortest way it can be
+ * written. A custom property holds an arbitrary token sequence, so the value
+ * is walked token by token: only the tokens that state a number are rewritten,
+ * leaving strings, urls, and hash tokens exactly as the author wrote them.
  *
  * @param  {string} value  The custom property value string.
- * @return {string}        The value with leading zeros removed from decimals.
+ * @return {string}        The value with its numbers shortened.
  */
-function stripLeadingZerosFromDecimals (value) {
-  // Match a boundary (start, whitespace, comma, open-paren), optional sign, then leading zeros before a decimal
-  return value.replace(/(^|\s|,|\()(-?)0+(\.\d+)/g, '$1$2$3');
+function shortenNumbers (value) {
+  const tokens = tokenizeCssValue(value);
+  const rewritten = tokens
+    .map((token) => {
+      if (!NUMERIC_TOKEN_TYPES.has(token.type)) {
+        return token.text;
+      }
+      return shortenNumericToken(token.text);
+    })
+    .join('');
+  if (!hasSameTokenBoundaries(tokens, tokenizeCssValue(rewritten))) {
+    return value;
+  }
+  return rewritten;
 }
 
 /**
@@ -69,7 +146,7 @@ function processCustomPropertyComments (value) {
  * Collapses whitespace in a custom property value while preserving
  * token boundaries. Each whitespace sequence is reduced to a single
  * space, spaces after commas inside function calls are removed, and
- * leading zeros on decimal numbers are stripped.
+ * every number is written the shortest way it can be.
  *
  * @param  {string} value  The raw custom property value string.
  * @return {string}        The minified custom property value.
@@ -79,8 +156,8 @@ function collapseCustomPropertyWhitespace (value) {
   let collapsed = value.replace(/\s+/g, ' ');
   // Remove spaces after commas only inside function calls (e.g. var(--bar, 1.5) → var(--bar,1.5))
   collapsed = removeSpacesAfterCommasInsideFunctions(collapsed);
-  // Strip leading zeros from decimals (e.g. 0.5 → .5, -0.02em → -.02em)
-  collapsed = stripLeadingZerosFromDecimals(collapsed);
+  // Shorten decimals (e.g. 0.5 → .5, -0.020em → -.02em)
+  collapsed = shortenNumbers(collapsed);
   return collapsed;
 }
 export {

package/src/rules/optimize.js

@@ -1351,6 +1351,74 @@ const MERGE_AT_LATER_RULE = 'later';
  */
 const MERGE_AT_EARLIER_RULE = 'earlier';
 
+/**
+ * Reports whether an entry of a rule's body is a declaration whose standing in
+ * the cascade can be read off the property it writes. Anything else a body may
+ * hold, such as a nested rule, is never shadowed by a declaration beside it.
+ *
+ * @param  {object}  entry  An entry of a rule's declaration list.
+ * @return {boolean}        True when the entry is a property declaration.
+ */
+function isPropertyDeclaration (entry) {
+  return entry.type === 'declaration' && Boolean(entry.property);
+}
+
+/**
+ * Finds which declaration decides each leaf property once a list of
+ * declarations is read as one rule's body. Within a rule, an important
+ * declaration beats a non-important one, and between two of equal weight the
+ * last one written wins.
+ *
+ * @param  {Array} declarations  The declarations of the combined rule, in the order they would be written.
+ * @return {Map}                 Map of leaf property name to the declaration that decides it.
+ */
+function findDecidingDeclarations (declarations) {
+  const decidingDeclarations = new Map();
+  const importantDeclarations = new Set();
+  for (const declaration of declarations) {
+    if (!isPropertyDeclaration(declaration)) {
+      continue;
+    }
+    const isImportant = isImportantDeclaration(declaration);
+    if (isImportant) {
+      importantDeclarations.add(declaration);
+    }
+    for (const leafProperty of expandToOverridableProperties(declaration.property)) {
+      const decidingDeclaration = decidingDeclarations.get(leafProperty);
+      const outranksIt = (
+        !decidingDeclaration ||
+        isImportant ||
+        !importantDeclarations.has(decidingDeclaration)
+      );
+      if (outranksIt) {
+        decidingDeclarations.set(leafProperty, declaration);
+      }
+    }
+  }
+  return decidingDeclarations;
+}
+
+/**
+ * Reports whether anything a rule brings to a merge still decides a property
+ * of the combined rule. A declaration that loses every property it writes to
+ * another declaration of the same rule is dropped from the merged rule, so
+ * where the merged rule sits cannot change how it reads.
+ *
+ * @param  {object}  rule                  The rule contributing the entries.
+ * @param  {Map}     decidingDeclarations  The deciding declaration of each leaf property of the merged rule.
+ * @return {boolean}                       True when the rule still decides something after the merge.
+ */
+function decidesAnythingAfterMerge (rule, decidingDeclarations) {
+  return (rule.declarations || []).some((entry) => {
+    if (!isPropertyDeclaration(entry)) {
+      return entry.type !== 'whitespace' && entry.type !== 'comment';
+    }
+    return [...expandToOverridableProperties(entry.property)].some((leafProperty) => {
+      return decidingDeclarations.get(leafProperty) === entry;
+    });
+  });
+}
+
 /**
  * Decides where two rules with the same selector can be combined. Merging them
  * always makes one set of declarations cross whatever separates the two rules,
@@ -1358,6 +1426,12 @@ const MERGE_AT_EARLIER_RULE = 'earlier';
  * the merged rule goes wherever the set that moved keeps its old standing.
  * Nothing separates adjacent rules, so those always merge.
  *
+ * The declarations one rule loses to the other are the exception: they are
+ * dropped from the merged rule, so the merged rule belongs wherever the
+ * declarations that outlive the merge already were, and nothing has to cross
+ * anything at all. That is what lets `.a{color:red!important}` swallow a later
+ * `.a{color:tan}` across a rule that also writes `color`.
+ *
  * @param  {object}      overrideIndex    The index of what each position writes to.
  * @param  {object}      earlierRule      The first of the two rules with this selector.
  * @param  {object}      laterRule        The second of the two rules with this selector.
@@ -1367,7 +1441,20 @@ const MERGE_AT_EARLIER_RULE = 'earlier';
  */
 function chooseMergePlacement (overrideIndex, earlierRule, laterRule, earlierPosition, laterPosition) {
   const rulesAreAdjacent = earlierPosition === laterPosition - 1;
-  if (rulesAreAdjacent || !overrideIndex.blocksRelocation(earlierRule, earlierPosition)) {
+  if (rulesAreAdjacent) {
+    return MERGE_AT_LATER_RULE;
+  }
+  const decidingDeclarations = findDecidingDeclarations([
+    ...(earlierRule.declarations || []),
+    ...(laterRule.declarations || [])
+  ]);
+  if (!decidesAnythingAfterMerge(laterRule, decidingDeclarations)) {
+    return MERGE_AT_EARLIER_RULE;
+  }
+  if (!decidesAnythingAfterMerge(earlierRule, decidingDeclarations)) {
+    return MERGE_AT_LATER_RULE;
+  }
+  if (!overrideIndex.blocksRelocation(earlierRule, earlierPosition)) {
     return MERGE_AT_LATER_RULE;
   }
   if (!overrideIndex.blocksRelocation(laterRule, earlierPosition)) {