@thejaredwilcurt/csslop 0.0.36 → 0.0.37

package/README.md

@@ -285,8 +285,9 @@ Two different cases:
 ## Updating tests
 
 1. All test changes must occur [upstream](https://github.com/keithamus/css-minify-tests), be written by a human, and be merged in to the `css-minify-tests` repo.
-1. After that, delete the `package-lock.json` and `node_modules` folder.
-1. Then run `npm i && npm run copy` to download the latest tests and copy them to this repo.
+1. Clone down a copy of that repo next to the cloned copy of this one (sibling folders)
+1. Make sure the `css-minify-tests` clone is on the `main` branch and up-to-date (`git pull origin main`)
+1. Then run `npm run copy` in the CSSLOP repo to copy the test from `css-minify-tests` to the `copiedTests` folder in this repo.
 1. `git add -A && git commit -m "Updated tests"`
 1. Then run `npm t` to see if any tests fail
 1. If they fail, give an AI this prompt:
@@ -298,9 +299,7 @@ Two different cases:
 1. `npm run bump`
 1. `git add -A && git commit -m "Fix newly added tests" && git push`
 1. Merge the code into `main` on GitHub
-1. Do a new release on GitHub
-1. `git checkout main && git pull origin main && git pull`
-1. `npm run publish`
+1. Do a new release on GitHub, this will also release to npm
 
 
 ## Code Organization prompt:

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/prestart.js",
@@ -36,12 +36,12 @@
     "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.3.6",
+    "eslint-plugin-jsdoc": "^64.3.9",
     "fflate": "^0.8.3",
     "globals": "^17.12.0",
     "pretty-ms": "^9.3.1",
     "real-world-css-libraries": "^1.0.8",
-    "vite": "^8.2.2"
+    "vite": "^8.3.0"
   },
   "author": "The Jared Wilcurt",
   "homepage": "https://github.com/TheJaredWilcurt/csslop#readme",
@@ -58,7 +58,7 @@
   "devEngines": {
     "runtime": {
       "name": "node",
-      "version": "26.8.1"
+      "version": "26.8.2"
     },
     "packageManager": {
       "name": "npm",

package/src/declarations/process.js

@@ -97,7 +97,8 @@ function keepDeclaration (survivors, declaration) {
   } else {
     survivors.positionsByProperty.set(declaration.property, [position]);
   }
-  if (declaration.property.startsWith('-')) {
+  // Custom properties (`--*`) are named by their author, not vendor-prefixed
+  if (declaration.property.startsWith('-') && !declaration.property.startsWith('--')) {
     survivors.vendorPrefixedPositions.push(position);
   }
 }
@@ -137,19 +138,39 @@ function findLastPositionOfProperty (survivors, property) {
 }
 
 /**
- * Finds the surviving vendor-prefixed declaration that last set the prefixed
- * form of a property, such as `-webkit-transform` for `transform`. Only the
- * prefixed declarations are visited, rather than every survivor.
+ * Finds the surviving vendor-prefixed declarations that set a prefixed form of
+ * a property, such as `-webkit-transform` for `transform`, including legacy
+ * spellings like `-webkit-box-flex` for `flex`. Only the prefixed declarations
+ * are visited, rather than every survivor.
  *
  * @param  {object} survivors  The surviving-declaration bookkeeping.
  * @param  {string} property   The unprefixed property name.
- * @return {number}            The position of the matching declaration, or -1 when absent.
+ * @return {Array}             The positions of the matching declarations, in source order.
  */
-function findLastVendorPrefixedPosition (survivors, property) {
-  for (let entry = survivors.vendorPrefixedPositions.length - 1; entry >= 0; entry--) {
-    const position = survivors.vendorPrefixedPositions[entry];
-    if (survivors.slots[position].property.endsWith(property)) {
-      return position;
+function findVendorPrefixedPositions (survivors, property) {
+  return survivors.vendorPrefixedPositions.filter((position) => {
+    return survivors.slots[position].property.endsWith(property);
+  });
+}
+
+/**
+ * Finds the surviving declaration that last set the unprefixed property a
+ * vendor-prefixed declaration spells in prefixed form, such as `transform`
+ * for `-moz-transform`.
+ *
+ * @param  {object} survivors     The surviving-declaration bookkeeping.
+ * @param  {string} propertyName  The vendor-prefixed property name.
+ * @return {number}               The position of the matching declaration, or -1 when absent.
+ */
+function findUnprefixedTwinPosition (survivors, propertyName) {
+  for (const [property, positions] of survivors.positionsByProperty) {
+    const isUnprefixedTwin = (
+      !property.startsWith('-') &&
+      positions.length &&
+      propertyName.endsWith(property)
+    );
+    if (isUnprefixedTwin) {
+      return positions[positions.length - 1];
     }
   }
   return -1;
@@ -183,15 +204,24 @@ function deduplicateDeclarations (declarations) {
 
     const minifiedValue = minifyValue(declaration);
 
+    // A vendor-prefixed property that repeats the value of its unprefixed
+    // form is dead code for browsers that read the unprefixed one
+    if (propertyName.startsWith('-') && !propertyName.startsWith('--')) {
+      const twinPosition = findUnprefixedTwinPosition(survivors, propertyName);
+      if (twinPosition !== -1 && minifyValue(survivors.slots[twinPosition]) === minifiedValue) {
+        continue;
+      }
+    }
+
     const previousPosition = findLastPositionOfProperty(survivors, propertyName);
 
-    // An unprefixed property with the same value also replaces its prefixed form
-    let prefixedPosition = -1;
+    // An unprefixed property with the same value also replaces every prefixed form of it
+    let prefixedPositions = [];
     if (!propertyName.startsWith('-')) {
-      prefixedPosition = findLastVendorPrefixedPosition(survivors, propertyName);
+      prefixedPositions = findVendorPrefixedPositions(survivors, propertyName);
     }
 
-    if (prefixedPosition !== -1) {
+    for (const prefixedPosition of prefixedPositions) {
       const prefixedValue = minifyValue(survivors.slots[prefixedPosition]);
       if (minifiedValue === prefixedValue) {
         dropDeclaration(survivors, prefixedPosition);

package/src/value/math.js

@@ -10,6 +10,79 @@ import {
   roundCompactNumber
 } from './shared.js';
 
+/**
+ * Characters that start a token able to sit directly against a value that
+ * precedes them, so no whitespace is needed to keep the two tokens apart:
+ * whitespace already separates, and openers like `#`, `!`, or any bracket or
+ * punctuation mark their own token's start. Mirrors the tokenizer's notion of
+ * tokens marking their own start, with `/` on top since it delimits a size
+ * from a position in layered shorthands.
+ *
+ * @type {Set<string>}
+ */
+const SELF_DELIMITING_FOLLOWERS = new Set([
+  ' ',
+  '\t',
+  '\n',
+  '\r',
+  '\f',
+  '#',
+  '!',
+  '"',
+  '\'',
+  '(',
+  ')',
+  '[',
+  ']',
+  '{',
+  '}',
+  ',',
+  ':',
+  ';',
+  '/'
+]);
+
+/**
+ * Reports whether a math function's replacement glues itself to the character
+ * following the matched function, merging two values into one token. A
+ * replacement that keeps its function form ends with a parenthesis, which
+ * closes itself; only a bare resolved value needs the whitespace that the
+ * parenthesis padding removal took away.
+ *
+ * @param  {string}  replacement         The string the math function resolved to.
+ * @param  {string}  followingCharacter  The character directly after the matched function.
+ * @return {boolean}                     Whether a separating space must be restored.
+ */
+function mergesWithFollowingCharacter (replacement, followingCharacter) {
+  if (replacement.endsWith(')') || !followingCharacter) {
+    return false;
+  }
+  return !SELF_DELIMITING_FOLLOWERS.has(followingCharacter);
+}
+
+/**
+ * Wraps a math-function replacer so a function that dissolves into a bare
+ * value does not lose the whitespace separating it from the value behind it.
+ * The values were once told apart by where the function's parentheses sat, so
+ * when the parentheses go, the separator has to stay.
+ *
+ * @param  {function(string, ...(string|number|undefined)): string} replacer  The replacement callback for `String.prototype.replace`.
+ * @return {function(string, ...(string|number|undefined)): string}           A replacer that keeps the trailing separator intact.
+ */
+function keepSeparatorAfterDissolvedFunction (replacer) {
+  return (match, ...rest) => {
+    const replacement = replacer(match, ...rest);
+    // A replace callback's trailing arguments are the match offset and the full string
+    const fullText = rest[rest.length - 1];
+    const matchOffset = rest[rest.length - 2];
+    const followingCharacter = fullText[matchOffset + match.length];
+    if (mergesWithFollowingCharacter(replacement, followingCharacter)) {
+      return replacement + ' ';
+    }
+    return replacement;
+  };
+}
+
 /**
  * The units a folded calc() expression leads with, in the order they are
  * written. Every other unit follows them alphabetically.
@@ -153,30 +226,30 @@ function normalizeMathFunctions (value, property, originalValue = '') {
   let result = value;
 
   // Unwrap calc(1 / (1 / x)) → x (double-reciprocal identity)
-  result = result.replace(/calc\(\s*1\s*\/\s*\(\s*1\s*\/\s*([^()]+)\s*\)\s*\)/gi, (match, inner) => {
+  result = result.replace(/calc\(\s*1\s*\/\s*\(\s*1\s*\/\s*([^()]+)\s*\)\s*\)/gi, keepSeparatorAfterDissolvedFunction((match, inner) => {
     return inner.trim();
-  });
+  }));
   // Flatten calc(calc(a) ± b) → calc(a ± b)
-  result = result.replace(/calc\(\s*calc\(([^()]+)\)\s*([+-])\s*([^()]+)\s*\)/gi, (match, inner, operator, tail) => {
+  result = result.replace(/calc\(\s*calc\(([^()]+)\)\s*([+-])\s*([^()]+)\s*\)/gi, keepSeparatorAfterDissolvedFunction((match, inner, operator, tail) => {
     return 'calc(' + inner + ' ' + operator + ' ' + tail + ')';
-  });
+  }));
   // Unwrap calc(calc(x)) → calc(x)
-  result = result.replace(/calc\(\s*calc\(([^()]+)\)\s*\)/gi, (match, inner) => {
+  result = result.replace(/calc\(\s*calc\(([^()]+)\)\s*\)/gi, keepSeparatorAfterDissolvedFunction((match, inner) => {
     return 'calc(' + inner + ')';
-  });
+  }));
 
   // Simplify min()/max() expressions using @csstools/css-calc
-  result = result.replace(/\b(min|max)\(([^()]+)\)/gi, (match) => {
+  result = result.replace(/\b(min|max)\(([^()]+)\)/gi, keepSeparatorAfterDissolvedFunction((match) => {
     try {
       const simplified = calc(match);
       return typeof simplified === 'string' ? simplified : match;
     } catch {
       return match;
     }
-  });
+  }));
 
   // Simplify calc() expressions using constant folding and @csstools/css-calc
-  result = result.replace(/calc\(([^()]+)\)/gi, (match, inner) => {
+  result = result.replace(/calc\(([^()]+)\)/gi, keepSeparatorAfterDissolvedFunction((match, inner) => {
     // Collapse whitespace inside calc expression
     const compactInner = inner.replace(/\s+/g, ' ').trim();
     // Preserve percent-times-number expressions (e.g. 50%*2 or 2*50%) — just strip inner spaces
@@ -208,7 +281,7 @@ function normalizeMathFunctions (value, property, originalValue = '') {
     } catch {
       return match;
     }
-  });
+  }));
 
   // When calc() folded to an absolute-length unit (pt, pc, in, cm, mm, q), convert to pixels
   if (originalValue.includes('calc(') && /^-?(?:\d+|\d*\.\d+)(pt|pc|in|cm|mm|q)$/i.test(result)) {

package/src/value/minify.js

@@ -165,6 +165,11 @@ function splitValueSegments (value) {
         end = consumeQuoted(end);
         continue;
       }
+      // An escaped character is url data, never the parenthesis that ends it
+      if (value[end] === '\\') {
+        end += 2;
+        continue;
+      }
       if (value[end] === '(') {
         depth++;
       }
@@ -250,38 +255,42 @@ function restoreSpaceBeforeMathOperators (value) {
   });
 }
 
+/**
+ * Escapes the characters an unquoted url() token cannot hold, so the path can
+ * drop its quotes. A backslash already escaping a character is left alone, so
+ * a path that arrived escaped is never escaped a second time.
+ *
+ * @param  {string} path  The url path, without surrounding quotes.
+ * @return {string}       The path with every bare space and parenthesis escaped.
+ */
+function escapeUrlPathCharacters (path) {
+  // Match each space and parenthesis that no escaping backslash precedes
+  return path.replace(/(?<!\\)([ ()])/g, '\\$1');
+}
+
 /**
  * Chooses the shortest valid representation for the path inside a `url(...)`
- * token, weighing an unquoted form, an escaped single space, and a quoted form.
+ * token, weighing an unquoted form — its spaces and parentheses escaped —
+ * against a quoted form. Quotation marks can only ever appear in the quoted
+ * form, so a path holding one always keeps its wrapper.
  *
  * @param  {string} path  The resolved url path, without surrounding quotes.
  * @return {string}       The shortest valid url() content string.
  */
 function formatUrlPath (path) {
-  // Parentheses and quote characters are invalid inside an unquoted url() token
-  const hasQuoteForcingCharacters = /[()"']/.test(path);
-  // An escaped space is already the shortest representation of a space, so it
-  // is counted apart from unescaped ones to keep from being escaped twice
-  const escapedSpaceCount = (path.match(/\\ /g) || []).length;
-  // A space only needs escaping when no escaping backslash precedes it
-  const unescapedSpaceCount = (path.match(/(?<!\\) /g) || []).length;
-  const spaceCount = escapedSpaceCount + unescapedSpaceCount;
-
-  if (hasQuoteForcingCharacters || spaceCount >= 2) {
-    // Escape any embedded double quotes so the double-quoted wrapper stays valid
-    return '"' + path.replace(/"/g, '\\"') + '"';
+  // Escape any embedded double quotes so the double-quoted wrapper stays valid
+  const quotedForm = '"' + path.replace(/"/g, '\\"') + '"';
+  // Match a quotation mark, which an unquoted url() token cannot hold
+  if (/["']/.test(path)) {
+    return quotedForm;
   }
-
-  if (spaceCount === 1) {
-    // A lone space is one byte shorter to escape than to wrap the value in
-    // quotes, and one that arrived already escaped stays exactly as it is
-    if (!unescapedSpaceCount) {
-      return path;
-    }
-    return path.replace(/(?<!\\) /g, '\\ ');
+  const unquotedForm = escapeUrlPathCharacters(path);
+  // Each escaped character costs one backslash, so dropping the two quotation
+  // marks pays off whenever at most one character needs escaping
+  if (unquotedForm.length < quotedForm.length) {
+    return unquotedForm;
   }
-
-  return path;
+  return quotedForm;
 }
 
 /**

package/src/value/syntax.js

@@ -29,6 +29,13 @@ function findMatchingParenthesis (value, openParenIndex) {
       continue;
     }
 
+    // An escaped character is data rather than a delimiter, even outside a
+    // quoted string, as in the `\)` of an unquoted url()
+    if (character === '\\') {
+      index += 2;
+      continue;
+    }
+
     if (character === '"' || character === '\'') {
       activeQuote = character;
       index++;