@thejaredwilcurt/csslop 0.0.35 → 0.0.37

package/README.md

@@ -285,12 +285,13 @@ 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:
-   * **PROMPT:** Run `npm t` and fix all failing tests by modifying files in `src`. Do not use naive solutions, hacks, or hard coded values. Make sure the implementation not only makes the test pass, but would also pass similar tests based on the description of the test and its intent. Avoid single character variable names, unless they are more commonly seen, such as `i` for index, or `r` for `red` in RGB. Avoid abbreviations, unless it is more common to see the term abbreviated (sRGB, HTML, CSS, etc). Group related logic into well named functions. Ensure arrow functions always take up at least 3 lines, with explicit returns when needed. Always comment regex if used. Run `npm run lint` and correct any linter warnings/errors that occur in the `/src` folder. DO NOT, under any circumstance, run `npm run real` (it will kill actual humans)! When all done, run the `beep` command to alert me you finished.
+   * **PROMPT:** Run `npm t` and fix all failing tests by modifying files in `src`. Do not use naive solutions, hacks, or hard coded values. Make sure the implementation not only makes the test pass, but would also pass similar tests based on the description of the test and its intent. Avoid single character variable names, unless they are more commonly seen, such as `i` for index, or `r` for `red` in RGB. Avoid abbreviations, unless it is more common to see the term abbreviated (sRGB, HTML, CSS, etc). Group related logic into well named functions. Ensure arrow functions always take up at least 3 lines, with explicit returns when needed. Always comment regex if used. Any test fails related to idempotency should be handled last. Run `npm run lint` and correct any linter warnings/errors that occur in the `/src` folder. DO NOT, under any circumstance, run `npm run real` (it will kill actual humans)! When all done, run the `beep` command to alert me you finished.
 1. Verify only code in the `src` folder was modified
 1. Verify `npm t` passes with a 100% score
 1. Run `npm run lint`, if anything fails, have the AI fix it.
@@ -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.35",
+  "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.5",
+    "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/config.js

@@ -199,93 +199,6 @@ function getOverridesOf (shorthandName) {
   return OVERRIDES_BY_SHORTHAND.get(shorthandName) || NO_PROPERTIES;
 }
 
-/**
- * The words a longhand adds to its shorthand's name to say which side, axis,
- * corner, or alignment dimension of the box that longhand applies to, such as
- * the `top` of `padding-top` or the `row` of `row-gap`.
- *
- * @type {Set<string>}
- */
-const BOX_PART_WORDS = new Set([
-  'align',
-  'block',
-  'bottom',
-  'column',
-  'end',
-  'inline',
-  'justify',
-  'left',
-  'right',
-  'row',
-  'start',
-  'top',
-  'x',
-  'y'
-]);
-
-/**
- * Removes each of the shorthand's own words from a longhand's words, leaving
- * only the words the longhand adds to name the part of the box it covers. Each
- * shared word is removed once, so the `border` and the `radius` of
- * `border-radius` leave `top` and `left` behind in `border-top-left-radius`.
- *
- * @param  {Array} longhandWords   The hyphen-separated words of the longhand's name.
- * @param  {Array} shorthandWords  The hyphen-separated words of the shorthand's name.
- * @return {Array}                 The words the longhand adds on top of the shorthand's.
- */
-function subtractSharedWords (longhandWords, shorthandWords) {
-  const remainingWords = [...longhandWords];
-  for (const shorthandWord of shorthandWords) {
-    const wordIndex = remainingWords.indexOf(shorthandWord);
-    if (wordIndex !== -1) {
-      remainingWords.splice(wordIndex, 1);
-    }
-  }
-  return remainingWords;
-}
-
-/**
- * Whether each shorthand takes a positional list of components, computed on
- * first use, since the shorthand tables never change.
- *
- * @type {Map<string, boolean>}
- */
-const positionalComponentsByShorthand = new Map();
-
-/**
- * Reports whether a shorthand's value is a positional list of same-typed
- * components rather than an unordered set of components that its grammar tells
- * apart by type. A shorthand is positional when its longhands are the very same
- * property repeated for each part of the box, as `padding` repeats a length for
- * each side and `gap` repeats one for each axis. Nothing but the order the
- * components are written in says which part of the box each one lands on, so
- * the whitespace between them delimits the list. A shorthand such as `border`
- * or `font`, whose longhands each hold a different kind of value, is not
- * positional: its grammar reads each component by type, in any order.
- *
- * @param  {string}  shorthandName  The CSS property name to test.
- * @return {boolean}                Whether the shorthand's components are positional.
- */
-function hasPositionalComponents (shorthandName) {
-  const cachedAnswer = positionalComponentsByShorthand.get(shorthandName);
-  if (cachedAnswer !== undefined) {
-    return cachedAnswer;
-  }
-  const longhands = shorthandMap[shorthandName];
-  let isPositional = false;
-  if (Array.isArray(longhands)) {
-    const shorthandWords = shorthandName.split('-');
-    isPositional = longhands.every((longhand) => {
-      const addedWords = subtractSharedWords(longhand.split('-'), shorthandWords);
-      return Boolean(addedWords.length) && addedWords.every((word) => {
-        return BOX_PART_WORDS.has(word);
-      });
-    });
-  }
-  positionalComponentsByShorthand.set(shorthandName, isPositional);
-  return isPositional;
-}
-
 /**
  * The leaf longhands each property ultimately sets, computed on first use. The
  * shorthand tables never change, so a property always expands the same way.
@@ -329,7 +242,6 @@ export {
   expandToLeafProperties,
   getLonghandsOf,
   getOverridesOf,
-  hasPositionalComponents,
   shorthandMap,
   shorthandOverrideMap,
   UNIFORM_VALUE_SHORTHANDS

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/rules/optimize.js

@@ -68,6 +68,15 @@ function expandPureNestedRules (rules) {
         canExpand = false;
         break;
       }
+      // A child written as a comma-separated selector list, such as `.b,.c`,
+      // repeats the parent in front of every item when expanded (`.a .b,.a .c`),
+      // while the nested form states the parent once. Expanding is always
+      // longer, and leaving the rule nested keeps one pass from expanding what
+      // the next pass would then keep, so the output stays idempotent.
+      if (nestedRule.selectors.length > 1) {
+        canExpand = false;
+        break;
+      }
       const combinedSelectors = [];
       for (const parentSelector of rule.selectors) {
         for (const childSelector of nestedRule.selectors) {

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

@@ -3,7 +3,6 @@
  */
 
 import { isUnicodeCharset } from '../context.js';
-import { hasPositionalComponents } from '../declarations/config.js';
 import { resolveUnicodeEscape } from '../utilities.js';
 
 import { evaluateColorMix } from './color-mix.js';
@@ -166,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++;
       }
@@ -251,30 +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);
-  // Count spaces so escaping them can be compared against keeping the quotes
-  const spaceCount = (path.match(/ /g) || []).length;
-
-  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
-    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;
 }
 
 /**
@@ -976,12 +992,11 @@ function reorderBorderWidthBeforeStyle (value) {
  * Applies property-specific optimizations to a CSS value (transition, flex, font,
  * background, display, scale, border-radius, shorthand collapsing, etc.).
  *
- * @param  {string}  val                     The CSS value string after generic minification.
- * @param  {string}  property                The CSS property name.
- * @param  {boolean} allowsSeparatorElision  Whether redundant separator whitespace may be removed.
- * @return {string}                          The value with property-specific optimizations applied.
+ * @param  {string} val       The CSS value string after generic minification.
+ * @param  {string} property  The CSS property name.
+ * @return {string}           The value with property-specific optimizations applied.
  */
-function applyPropertyOptimizations (val, property, allowsSeparatorElision) {
+function applyPropertyOptimizations (val, property) {
   if (property === 'font-weight' && isUnicodeCharset()) {
     // Replace font-weight keyword "bold" with its numeric equivalent
     val = val.replace(/\bbold\b/gi, '700');
@@ -1023,8 +1038,11 @@ function applyPropertyOptimizations (val, property, allowsSeparatorElision) {
     val = val.replace(/\s+0px/g, ' ');
     // Remove leading zero-pixel value
     val = val.replace(/^0px\s*/, '');
-    // Remove trailing zero
-    val = val.replace(/\s+0$/, '');
+    // Remove an explicit zero basis: a trailing zero is only a basis when grow
+    // and shrink precede it, and the shorthand already reads an unwritten basis
+    // as 0. In `0 0` the trailing zero is the shrink, which the shorthand
+    // defaults to 1 instead, so dropping it would size the element differently.
+    val = val.replace(/^(\S+\s+\S+)\s+0$/, '$1');
     // Remove standalone zero-pixel value
     val = val.replace(/^0px$/, '');
     val = val.trim();
@@ -1141,7 +1159,7 @@ function applyPropertyOptimizations (val, property, allowsSeparatorElision) {
 
   // Shorten all color tokens (second pass after property-specific color evaluations)
   val = replaceOutsideStringsAndUrls(val, (segment) => {
-    return shortenColorValues(segment, allowsSeparatorElision);
+    return shortenColorValues(segment);
   });
 
   if (!PUNCTUATED_COMPONENT_PROPERTIES.has(property)) {
@@ -1243,21 +1261,6 @@ function applyPropertyOptimizations (val, property, allowsSeparatorElision) {
   return val;
 }
 
-/**
- * Reports whether a declaration holds a shorthand that was assembled by joining
- * already-minified longhand values with a separator, and whose grammar reads
- * those components by their position in the list. Nothing but that separator
- * says where one component ends and the next begins, so it is kept even where
- * the two components happen to be tokens that would survive being written
- * together.
- *
- * @param  {object}  declaration  The CSS declaration object with property and value fields.
- * @return {boolean}              Whether the assembled components keep their separators.
- */
-function keepsAssembledComponentSeparators (declaration) {
-  return Boolean(declaration.isAssembledShorthand) && hasPositionalComponents(declaration.property);
-}
-
 /**
  * Minifies a CSS declaration's value by applying color conversion, math simplification, shorthand compression, gradient optimization, and other property-specific optimizations.
  *
@@ -1275,7 +1278,6 @@ function computeMinifiedValue (declaration) {
     return 'none';
   }
   let val = declaration.value;
-  const allowsSeparatorElision = !keepsAssembledComponentSeparators(declaration);
 
   if (typeof val === 'string') {
     val = val.trim();
@@ -1323,19 +1325,16 @@ function computeMinifiedValue (declaration) {
     // Convert color functions to hex equivalents
     val = convertColorsToHex(val);
 
-    // Shorten all color tokens (hex and named) to their shortest representation.
-    // A value that keeps the whitespace between its components saves nothing by
-    // switching to a spelling of the same length, so its colors keep the
-    // spelling they were written with.
+    // Shorten all color tokens (hex and named) to their shortest representation
     val = replaceOutsideStringsAndUrls(val, (segment) => {
-      return shortenColorValues(segment, allowsSeparatorElision);
+      return shortenColorValues(segment);
     });
 
     // Collapse light-dark() when both normalized branches are identical
     val = simplifyEquivalentLightDarkFunctions(val);
 
     // Property-specific optimizations
-    val = applyPropertyOptimizations(val, declaration.property, allowsSeparatorElision);
+    val = applyPropertyOptimizations(val, declaration.property);
 
     // Minify relative color syntax (identity resolution and whitespace collapsing)
     val = minifyRelativeColorSyntax(val);
@@ -1356,7 +1355,6 @@ function computeMinifiedValue (declaration) {
   // so the ones that turned out to be redundant are only dropped at the end.
   const elidesRedundantSeparators = (
     typeof val === 'string' &&
-    allowsSeparatorElision &&
     !isCustomProperty(declaration.property)
   );
   if (elidesRedundantSeparators) {

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++;