@thejaredwilcurt/csslop 0.0.15 → 0.0.17

package/README.md

@@ -14,13 +14,13 @@
 
 * Use the tests from the open source, 3rd-party, CSS minification auditing library [css-minify-tests](https://github.com/keithamus/css-minify-tests).
 * Have AI completely generate the library logic to pass all tests.
-* Have me (an experienced library author) validate the outcomes and [make upstream corrections](https://github.com/keithamus/css-minify-tests/issues?q=author%3ATheJaredWilcurt) to the tests library.
+* Have me (an experienced library author) validate the outcomes and [make upstream corrections and improvements](https://github.com/keithamus/css-minify-tests/issues?q=author%3ATheJaredWilcurt) to the tests library.
 
 **The Results:**
 
 * All tests pass.
 * Several new tests were created upstream, and some existing tests were improved/fixed upstream (all manually by me, no AI used).
-* The `src` folder is 100% vibe coded, and despite passing all tests, is almost certainly not worth using. Though if you do, and you find issues, you can report them and I might tell the AI's to fix it.
+* The `src` folder is 100% vibe coded, and despite passing all tests, is almost certainly not worth using. Though if you do, and you find issues, you can isolate the problem and [compare against the correct output of real minifiers](https://TheJaredWilcurt.com/playground), then use that to create a [new test upstream](https://github.com/keithamus/css-minify-tests/issues) for the AI's to be forced to pass.
 * No AI generated code exists outside of the `src` folder, this README, for example, is 100% human crafted.
 
 **AI's used:**
@@ -278,7 +278,7 @@ Two different cases:
 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 ensure the linter passes when done. 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. 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.
@@ -289,3 +289,22 @@ Two different cases:
 1. Do a new release on GitHub
 1. `git checkout main && git pull origin main && git pull`
 1. `npm run publish`
+
+
+## Code Organization prompt:
+
+```
+1. Check the files in the `/src` folder. If any of them are over 1000 lines long, look across the file for commonalities that could be grouped and moved to a separate file and/or folder. When creating new files, if a new organizational approach is used, re-evaluate how other files are organized and reorganize them, or their contents, into new files to match the new organizational structure, as needed.
+1. After organizing check that no tests are failing with `npm t`. If any are, fix them by modifying files in `src`.
+1. During any of your edits:
+   * Do not use naive solutions, hacks, or hard coded values.
+   * Make sure implementations 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.
+1. After all other code edits, run `npm run lint` and ensure the linter passes.
+1. DO NOT, under any circumstance, run `npm run real` (it will kill actual humans)!
+1. When all done, run the `beep` command to alert me you finished.
+```

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/prestart.js",
@@ -11,7 +11,8 @@
     "prebuild": "node ./scripts/prebuild.js",
     "build": "vite build",
     "postbuild": "node ./scripts/postbuild.js",
-    "copy": "node ./scripts/copyTests.js",
+    "copy": "node ./scripts/copyTestsFromNodeModules.js",
+    "copy-repo": "node ./scripts/copyTestsFromRepo.js",
     "test": "node ./tests/index.test.js",
     "real": "node ./tests/realworld.test.js",
     "lint": "eslint *.js scripts src tests --fix",
@@ -20,7 +21,7 @@
     "publisho": "npm publish --access=public"
   },
   "dependencies": {
-    "@csstools/css-calc": "^3.2.1",
+    "@csstools/css-calc": "^3.3.0",
     "@node-projects/css-parser": "^5.2.0"
   },
   "devDependencies": {
@@ -31,12 +32,12 @@
     "@stylistic/eslint-plugin": "^5.10.0",
     "codemirror": "^6.0.2",
     "css-minify-tests": "github:keithamus/css-minify-tests",
-    "eslint": "^10.5.0",
+    "eslint": "^10.8.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": "^63.0.12",
+    "eslint-plugin-jsdoc": "^63.2.2",
     "fflate": "^0.8.3",
     "globals": "^17.7.0",
     "pretty-ms": "^9.3.0",

package/src/index.js

@@ -26,6 +26,7 @@ import {
   expandPureNestedRules,
   factorCommonParents,
   mergeByDeclarations,
+  mergeIdenticalNestedRules,
   mergeLayerRules,
   mergeMediaRules,
   mergeSelectorRules,
@@ -248,7 +249,8 @@ export const minifyCSS = function (input) {
     const nestedRules = nestFlatRules(declarationMergedRules);
     const nonEmptyRules = removeEmptyRules(nestedRules);
     const factoredRules = factorCommonParents(nonEmptyRules);
-    const finalRules = nestFlatRules(factoredRules);
+    const nestedFinalRules = nestFlatRules(factoredRules);
+    const finalRules = mergeIdenticalNestedRules(nestedFinalRules);
 
     for (const rule of finalRules) {
       output.push(stringifyRule(rule, context));

package/src/rules/optimize.js

@@ -44,7 +44,10 @@ function expandPureNestedRules (rules) {
     const isPureNested = nonWhitespace.length > 0 && nonWhitespace.every((declaration) => {
       return declaration.type === 'rule';
     });
-    if (!isPureNested) {
+    // A comma-separated parent selector list behaves like :is() for specificity,
+    // so expanding it into descendant combinations (e.g. #a,.b → #a .c,.b .c)
+    // would change specificity. Only single-selector parents can expand safely.
+    if (!isPureNested || rule.selectors.length !== 1) {
       result.push(rule);
       continue;
     }
@@ -443,6 +446,295 @@ function mergeByDeclarations (rules) {
   return result;
 }
 
+/**
+ * Splits a selector list on top-level commas, respecting parentheses and
+ * brackets so commas inside `:is(...)` or `[attr="a,b"]` are not split.
+ *
+ * @param  {string} selectorList  The selector list string.
+ * @return {Array}                The individual selector strings.
+ */
+function splitSelectorListTopLevel (selectorList) {
+  const selectors = [];
+  let current = '';
+  let depth = 0;
+  for (const character of selectorList) {
+    if (character === '(' || character === '[') {
+      depth++;
+    } else if (character === ')' || character === ']') {
+      depth--;
+    }
+    if (character === ',' && depth === 0) {
+      selectors.push(current.trim());
+      current = '';
+    } else {
+      current += character;
+    }
+  }
+  selectors.push(current.trim());
+  return selectors;
+}
+
+/**
+ * Advances past a CSS identifier (name) starting at the given index.
+ *
+ * @param  {string} text   The selector text.
+ * @param  {number} start  The index to start scanning from.
+ * @return {number}        The index just after the identifier.
+ */
+function skipSelectorName (text, start) {
+  let index = start;
+  // Advance over identifier characters (letters, digits, hyphen, underscore)
+  while (index < text.length && (/[a-zA-Z0-9_-]/).test(text[index])) {
+    index++;
+  }
+  return index;
+}
+
+/**
+ * Finds the index of the closing parenthesis matching the one at openIndex.
+ *
+ * @param  {string} text       The text to scan.
+ * @param  {number} openIndex  Index of the opening parenthesis.
+ * @return {number}            Index of the matching close parenthesis, or text length.
+ */
+function findMatchingParenthesisIndex (text, openIndex) {
+  let depth = 0;
+  for (let index = openIndex; index < text.length; index++) {
+    if (text[index] === '(') {
+      depth++;
+    } else if (text[index] === ')') {
+      depth--;
+      if (depth === 0) {
+        return index;
+      }
+    }
+  }
+  return text.length;
+}
+
+/**
+ * Compares two specificity tuples [ids, classes, types] lexicographically.
+ *
+ * @param  {Array}  first   The first specificity tuple.
+ * @param  {Array}  second  The second specificity tuple.
+ * @return {number}         Negative, zero, or positive per standard comparison.
+ */
+function compareSpecificity (first, second) {
+  for (let index = 0; index < 3; index++) {
+    if (first[index] !== second[index]) {
+      return first[index] - second[index];
+    }
+  }
+  return 0;
+}
+
+/**
+ * Computes the CSS specificity of a single complex selector as an
+ * [ids, classes, types] tuple. The nesting selector `&` is ignored because its
+ * contribution comes from the shared parent when comparing sibling selectors.
+ * Functional pseudo-classes `:is()`, `:not()`, `:has()`, and `:matches()` add
+ * the maximum specificity of their arguments; `:where()` adds nothing.
+ *
+ * @param  {string} selector  A single complex selector string.
+ * @return {Array}            The [ids, classes, types] specificity tuple.
+ */
+function computeSpecificity (selector) {
+  const specificity = [0, 0, 0];
+  const text = selector.trim();
+  let index = 0;
+  while (index < text.length) {
+    const character = text[index];
+    if (character === '#') {
+      specificity[0]++;
+      index = skipSelectorName(text, index + 1);
+    } else if (character === '.') {
+      specificity[1]++;
+      index = skipSelectorName(text, index + 1);
+    } else if (character === '[') {
+      specificity[1]++;
+      // Advance to just past the matching closing bracket
+      let bracketDepth = 0;
+      while (index < text.length) {
+        if (text[index] === '[') {
+          bracketDepth++;
+        } else if (text[index] === ']') {
+          bracketDepth--;
+          if (bracketDepth === 0) {
+            index++;
+            break;
+          }
+        }
+        index++;
+      }
+    } else if (character === ':') {
+      if (text[index + 1] === ':') {
+        specificity[2]++;
+        index = skipSelectorName(text, index + 2);
+      } else {
+        const nameStart = index + 1;
+        const nameEnd = skipSelectorName(text, nameStart);
+        const name = text.slice(nameStart, nameEnd).toLowerCase();
+        if (text[nameEnd] === '(') {
+          const closeIndex = findMatchingParenthesisIndex(text, nameEnd);
+          const inner = text.slice(nameEnd + 1, closeIndex);
+          if (name === 'where') {
+            // :where() contributes zero specificity
+          } else if (name === 'is' || name === 'not' || name === 'has' || name === 'matches') {
+            const innerMax = maxSelectorSpecificity(inner);
+            specificity[0] += innerMax[0];
+            specificity[1] += innerMax[1];
+            specificity[2] += innerMax[2];
+          } else {
+            specificity[1]++;
+          }
+          index = closeIndex + 1;
+        } else {
+          // Legacy single-colon pseudo-elements count as pseudo-elements
+          if (name === 'before' || name === 'after' || name === 'first-line' || name === 'first-letter') {
+            specificity[2]++;
+          } else {
+            specificity[1]++;
+          }
+          index = nameEnd;
+        }
+      }
+    } else if (character === '*' || character === '&') {
+      // Universal selector and nesting selector add no counted specificity here
+      index++;
+    } else if ((/[a-zA-Z]/).test(character)) {
+      specificity[2]++;
+      index = skipSelectorName(text, index);
+    } else {
+      // Combinators and whitespace do not affect specificity
+      index++;
+    }
+  }
+  return specificity;
+}
+
+/**
+ * Returns the maximum specificity tuple across a comma-separated selector list,
+ * matching how a comma-separated group behaves as `:is()`.
+ *
+ * @param  {string} selectorList  The selector list string.
+ * @return {Array}                The maximum [ids, classes, types] tuple.
+ */
+function maxSelectorSpecificity (selectorList) {
+  let maximum = [0, 0, 0];
+  for (const selector of splitSelectorListTopLevel(selectorList)) {
+    const specificity = computeSpecificity(selector);
+    if (compareSpecificity(specificity, maximum) > 0) {
+      maximum = specificity;
+    }
+  }
+  return maximum;
+}
+
+/**
+ * Builds a normalized signature of a rule's declaration body, or null when the
+ * rule contains anything other than plain declarations (e.g. nested rules).
+ *
+ * @param  {object}      rule  The AST rule node.
+ * @return {string|null}       The sorted "property:value" signature, or null.
+ */
+function nestedRuleBodySignature (rule) {
+  const declarations = (rule.declarations || []).filter((declaration) => {
+    return declaration.type !== 'whitespace' && declaration.type !== 'comment';
+  });
+  if (declarations.length === 0) {
+    return null;
+  }
+  const isAllPlainDeclarations = declarations.every((declaration) => {
+    return declaration.type === 'declaration' && declaration.property;
+  });
+  if (!isAllPlainDeclarations) {
+    return null;
+  }
+  return declarations
+    .map((declaration) => {
+      return declaration.property + ':' + (declaration.value || '').trim();
+    })
+    .sort()
+    .join(';');
+}
+
+/**
+ * Determines whether two nested rules can be merged into a shared selector list.
+ * They must have identical declaration bodies and the same specificity level,
+ * since comma-separated nested selectors share the highest specificity of the
+ * group (like `:is()`).
+ *
+ * @param  {object}  first   The first nested rule.
+ * @param  {object}  second  The second nested rule.
+ * @return {boolean}         Whether the two nested rules may be merged.
+ */
+function nestedRulesMergeable (first, second) {
+  if (!first.selectors?.length || !second.selectors?.length) {
+    return false;
+  }
+  const firstSignature = nestedRuleBodySignature(first);
+  if (firstSignature === null || firstSignature !== nestedRuleBodySignature(second)) {
+    return false;
+  }
+  const firstSpecificity = maxSelectorSpecificity(first.selectors.join(','));
+  const secondSpecificity = maxSelectorSpecificity(second.selectors.join(','));
+  return compareSpecificity(firstSpecificity, secondSpecificity) === 0;
+}
+
+/**
+ * Recursively merges consecutive nested rules within a declaration list when
+ * they share identical bodies and specificity, combining their selector lists.
+ *
+ * @param  {Array} declarations  The declaration/nested-rule entries of a parent rule.
+ * @return {Array}               The declaration list with mergeable nested rules combined.
+ */
+function mergeConsecutiveNestedRules (declarations) {
+  const recursed = declarations.map((declaration) => {
+    if (declaration.type === 'rule' && declaration.declarations) {
+      return { ...declaration, declarations: mergeConsecutiveNestedRules(declaration.declarations) };
+    }
+    return declaration;
+  });
+
+  const result = [];
+  for (const declaration of recursed) {
+    const previous = result[result.length - 1];
+    if (
+      declaration.type === 'rule' &&
+      previous &&
+      previous.type === 'rule' &&
+      nestedRulesMergeable(previous, declaration)
+    ) {
+      result[result.length - 1] = {
+        ...previous,
+        selectors: [...previous.selectors, ...declaration.selectors]
+      };
+      continue;
+    }
+    result.push(declaration);
+  }
+  return result;
+}
+
+/**
+ * Merges mergeable nested rules within every rule's body across the stylesheet,
+ * recursing into `@media` and `@layer` blocks. Top-level rules are not merged
+ * here, since only nested (comma-grouped) selectors share specificity.
+ *
+ * @param  {Array} rules  The AST rule nodes to process.
+ * @return {Array}        The rules with mergeable nested rules combined.
+ */
+function mergeIdenticalNestedRules (rules) {
+  for (const rule of rules) {
+    if (rule.type === 'rule' && rule.declarations) {
+      rule.declarations = mergeConsecutiveNestedRules(rule.declarations);
+    } else if ((rule.type === 'media' || rule.type === 'layer') && rule.rules) {
+      rule.rules = mergeIdenticalNestedRules(rule.rules);
+    }
+  }
+  return rules;
+}
+
 /**
  * Merges rules with identical normalized selectors by combining their declarations. Non-rule entries (like `@media`) break the merge window.
  *
@@ -630,6 +922,7 @@ export {
   expandPureNestedRules,
   factorCommonParents,
   mergeByDeclarations,
+  mergeIdenticalNestedRules,
   mergeLayerRules,
   mergeMediaRules,
   mergeSelectorRules,

package/src/rules/stringify.js

@@ -361,6 +361,50 @@ function processIsSelector (selector) {
   return [':is(' + parts.join(',') + ')'];
 }
 
+/**
+ * Flattens a top-level `:is()` selector into its individual parts when the rule
+ * acts as a nesting parent. A nesting parent's entire selector list is treated
+ * as `:is()` when computing the specificity of its nested children, so lifting
+ * the parts out of an inner `:is()` does not change specificity. The `:is()` is
+ * kept when any part contains a pseudo (`:`), since such selectors may be
+ * unsupported and rely on `:is()` for forgiving parsing.
+ *
+ * @param  {string} selector  A minified CSS selector string.
+ * @return {Array}            The flattened selector parts, or the original selector.
+ */
+function flattenNestingParentIsSelector (selector) {
+  if (!selector.startsWith(':is(')) {
+    return [selector];
+  }
+  let depth = 0;
+  let closingIndex = -1;
+  for (let index = 4; index < selector.length; index++) {
+    if (selector[index] === '(') {
+      depth++;
+    } else if (selector[index] === ')') {
+      if (depth === 0) {
+        closingIndex = index;
+        break;
+      }
+      depth--;
+    }
+  }
+  // The :is() must span the entire selector to be safely liftable
+  if (closingIndex !== selector.length - 1) {
+    return [selector];
+  }
+  const parts = splitParametersByComma(selector.slice(4, -1)).map((part) => {
+    return part.trim();
+  });
+  const hasPotentiallyUnsupportedPart = parts.some((part) => {
+    return part.includes(':');
+  });
+  if (hasPotentiallyUnsupportedPart) {
+    return [selector];
+  }
+  return parts;
+}
+
 /**
  * Removes spaces after commas only inside parenthesized groups (function
  * calls like `var()`, `calc()`), leaving top-level comma spacing intact.
@@ -548,6 +592,15 @@ function stringifyRule (rule, context, nested = false) {
         minified = mergeAdjacentWherePseudoClasses(minified);
         return minified;
       });
+      // When this rule is a nesting parent, its whole selector list is treated
+      // as :is() for the children's specificity, so a top-level :is() can be
+      // safely lifted into the list without altering specificity.
+      const isNestingParent = (rule.declarations || []).some((declaration) => {
+        return declaration.type === 'rule';
+      });
+      if (isNestingParent) {
+        uniqueSelectors = uniqueSelectors.flatMap(flattenNestingParentIsSelector);
+      }
       uniqueSelectors = uniqueSelectors.flatMap(processIsSelector);
       uniqueSelectors = [...new Set(uniqueSelectors)];
       const headingSet = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
@@ -639,8 +692,11 @@ function stringifyRule (rule, context, nested = false) {
 
   if (rule.type === 'media') {
     const normalizedMedia = normalizeMedia(rule.media);
+    // A custom-media reference is a parenthesized dashed-ident like (--modern);
+    // no space is needed after @media when the query begins with such a token.
+    const isCustomMediaReference = normalizedMedia.startsWith('(--');
     let separator;
-    if (nested && normalizedMedia.startsWith('(')) {
+    if ((nested && normalizedMedia.startsWith('(')) || isCustomMediaReference) {
       separator = '';
     } else {
       separator = ' ';
@@ -905,6 +961,18 @@ function stringifyRule (rule, context, nested = false) {
     return '';
   }
 
+  if (rule.type === 'custom-media') {
+    // Collapse whitespace, strip spaces around commas, and tighten parentheses
+    const condition = (rule.media || '')
+      .replace(/\s+/g, ' ')
+      .replace(/\s*,\s*/g, ',')
+      .replace(/\(\s+/g, '(')
+      .replace(/\s+\)/g, ')')
+      .trim();
+    const conditionSeparator = condition ? ' ' : '';
+    return '@custom-media ' + rule.name + conditionSeparator + condition + ';';
+  }
+
   if (rule.type === 'at-rule') {
     return stringifyAtRule(rule, context);
   }

package/src/value/colors.js

@@ -916,26 +916,6 @@ function convertOklabToHex (L, a, b, alpha) {
   return rgbaToHex(r, g, bl, alpha !== undefined ? alpha : 1);
 }
 
-/**
- * Handle color(from ...) relative color syntax for simple identity cases.
- *
- * @param  {string}      expr  The color(from ...) expression string.
- * @return {string|null}       A hex color string if the relative color is a simple identity transform, or null otherwise.
- */
-function evaluateRelativeColor (expr) {
-  // Match: color(from <base-color> srgb r g b [/ <alpha>]) identity transform pattern
-  const match = expr.match(/^color\(\s*from\s+(.+?)\s+srgb\s+r\s+g\s+b(?:\s*\/\s*([\d.]+%?))?\s*\)$/i);
-  if (!match) {
-    return null;
-  }
-  const baseColor = parseColor(match[1]);
-  if (!baseColor) {
-    return null;
-  }
-  const alpha = parseAlphaString(match[2], baseColor[3]);
-  return rgbaToHex(baseColor[0], baseColor[1], baseColor[2], alpha);
-}
-
 export {
   hslToRgbChannels,
   rgbaToHex,
@@ -945,7 +925,6 @@ export {
   parseHex,
   evaluateColorMix,
   convertOklabToHex,
-  evaluateRelativeColor,
   shortestColor,
   srgbToOklab,
   oklabToSrgb,

package/src/value/light-dark.js

@@ -0,0 +1,188 @@
+/**
+ * @file Simplifies CSS light-dark functions whose light and dark values are equivalent.
+ */
+
+import { findMatchingParenthesis } from './syntax.js';
+
+/**
+ * Determines whether a character can appear inside a CSS identifier.
+ *
+ * @param  {string}  character  A single character.
+ * @return {boolean}            True when the character is identifier-like.
+ */
+function isIdentifierCharacter (character) {
+  if (!character) {
+    return false;
+  }
+  const codePoint = character.charCodeAt(0);
+  const isUppercaseLetter = codePoint >= 65 && codePoint <= 90;
+  const isLowercaseLetter = codePoint >= 97 && codePoint <= 122;
+  const isDigit = codePoint >= 48 && codePoint <= 57;
+  return isUppercaseLetter || isLowercaseLetter || isDigit || character === '_' || character === '-';
+}
+
+/**
+ * Detects a `light-dark(` function call at the provided position.
+ *
+ * @param  {string}  value  The CSS value being scanned.
+ * @param  {number}  index  The candidate start index.
+ * @return {boolean}        True when a light-dark function starts at index.
+ */
+function startsLightDarkFunction (value, index) {
+  if (value.slice(index, index + 11).toLowerCase() !== 'light-dark(') {
+    return false;
+  }
+  return !isIdentifierCharacter(value[index - 1]);
+}
+
+/**
+ * Splits a CSS function argument list at top-level commas while respecting
+ * nested parentheses and quoted strings.
+ *
+ * @param  {string} argumentString  The raw content between function parentheses.
+ * @return {Array}                  The top-level argument strings.
+ */
+function splitTopLevelFunctionArguments (argumentString) {
+  const argumentsList = [];
+  let currentArgument = '';
+  let depth = 0;
+  let index = 0;
+  let activeQuote = '';
+
+  while (index < argumentString.length) {
+    const character = argumentString[index];
+    if (activeQuote) {
+      currentArgument += character;
+      if (character === '\\') {
+        if (index + 1 < argumentString.length) {
+          currentArgument += argumentString[index + 1];
+          index += 2;
+          continue;
+        }
+      } else if (character === activeQuote) {
+        activeQuote = '';
+      }
+      index++;
+      continue;
+    }
+
+    if (character === '"' || character === '\'') {
+      activeQuote = character;
+      currentArgument += character;
+      index++;
+      continue;
+    }
+
+    if (character === '(') {
+      depth++;
+      currentArgument += character;
+      index++;
+      continue;
+    }
+
+    if (character === ')') {
+      if (depth > 0) {
+        depth--;
+      }
+      currentArgument += character;
+      index++;
+      continue;
+    }
+
+    if (character === ',' && depth === 0) {
+      argumentsList.push(currentArgument.trim());
+      currentArgument = '';
+      index++;
+      continue;
+    }
+
+    currentArgument += character;
+    index++;
+  }
+
+  argumentsList.push(currentArgument.trim());
+  return argumentsList;
+}
+
+/**
+ * Simplifies `light-dark(a,b)` to `a` when both top-level arguments are identical
+ * after prior minification has normalized them.
+ *
+ * @param  {string} value  The CSS value to simplify.
+ * @return {string}        The value with redundant light-dark functions removed.
+ */
+function simplifyEquivalentLightDarkFunctions (value) {
+  let result = '';
+  let index = 0;
+
+  const consumeQuoted = (start) => {
+    const quote = value[start];
+    let end = start + 1;
+    while (end < value.length) {
+      if (value[end] === '\\') {
+        end += 2;
+        continue;
+      }
+      if (value[end] === quote) {
+        end++;
+        break;
+      }
+      end++;
+    }
+    return end;
+  };
+
+  const startsUrl = (start) => {
+    return value.slice(start, start + 4).toLowerCase() === 'url(';
+  };
+
+  while (index < value.length) {
+    if (value[index] === '"' || value[index] === '\'') {
+      const end = consumeQuoted(index);
+      result += value.slice(index, end);
+      index = end;
+      continue;
+    }
+
+    if (startsUrl(index)) {
+      const end = findMatchingParenthesis(value, index + 3);
+      if (end === -1) {
+        result += value.slice(index);
+        break;
+      }
+      result += value.slice(index, end + 1);
+      index = end + 1;
+      continue;
+    }
+
+    if (startsLightDarkFunction(value, index)) {
+      const openParenIndex = index + 10;
+      const closingParenIndex = findMatchingParenthesis(value, openParenIndex);
+      if (closingParenIndex === -1) {
+        result += value.slice(index);
+        break;
+      }
+
+      const argumentString = value.slice(openParenIndex + 1, closingParenIndex);
+      const argumentsList = splitTopLevelFunctionArguments(argumentString);
+      if (argumentsList.length === 2) {
+        const firstArgument = simplifyEquivalentLightDarkFunctions(argumentsList[0]);
+        const secondArgument = simplifyEquivalentLightDarkFunctions(argumentsList[1]);
+        if (firstArgument === secondArgument) {
+          result += firstArgument;
+        } else {
+          result += value.slice(index, openParenIndex + 1) + firstArgument + ',' + secondArgument + ')';
+        }
+        index = closingParenIndex + 1;
+        continue;
+      }
+    }
+
+    result += value[index];
+    index++;
+  }
+
+  return result;
+}
+
+export { simplifyEquivalentLightDarkFunctions };

package/src/value/minify.js

@@ -8,7 +8,6 @@ import { resolveUnicodeEscape } from '../utilities.js';
 import {
   convertOklabToHex,
   evaluateColorMix,
-  evaluateRelativeColor,
   hslToRgbChannels,
   hwbToRgbChannels,
   parseHex,
@@ -16,18 +15,24 @@ import {
   shortestColor
 } from './colors.js';
 import { minifyGradients } from './gradients.js';
+import { simplifyEquivalentLightDarkFunctions } from './light-dark.js';
 import {
   normalizeMathFunctions,
   simplifyStandaloneCalc
 } from './math.js';
 import { namedColors } from './named-colors.js';
 import { isQuotesNoneEquivalent } from './quotes.js';
+import {
+  evaluateRelativeColor,
+  minifyRelativeColorSyntax
+} from './relative-colors.js';
 import {
   collapseShorthandParts,
   normalizeScaleComponent,
   parseAlphaString,
   roundCompactNumber
 } from './shared.js';
+import { findMatchingParenthesis } from './syntax.js';
 import { minifyTransformValue } from './transforms.js';
 import { optimizeUnicodeRange } from './unicode-range.js';
 
@@ -172,6 +177,115 @@ function replaceOutsideStringsAndUrls (value, replacer) {
   return result;
 }
 
+/**
+ * Chooses the shortest valid representation for the path inside a `url(...)`
+ * token, weighing an unquoted form, an escaped single space, and a quoted form.
+ *
+ * @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, '\\"') + '"';
+  }
+
+  if (spaceCount === 1) {
+    // A lone space is one byte shorter to escape than to wrap the value in quotes
+    return path.replace(/ /g, '\\ ');
+  }
+
+  return path;
+}
+
+/**
+ * Produces the shortest valid contents for a single `url(...)` token from the
+ * raw text between its parentheses, stripping a leading current-directory
+ * indicator and normalizing quoting.
+ *
+ * @param  {string} rawContent  The trimmed text found between the url parentheses.
+ * @return {string}             The minified url() content.
+ */
+function minifyUrlContent (rawContent) {
+  const wasQuoted = rawContent.startsWith('"') || rawContent.startsWith('\'');
+  let path = rawContent;
+  if (wasQuoted) {
+    const quote = rawContent[0];
+    if (rawContent.length >= 2 && rawContent.endsWith(quote)) {
+      path = rawContent.slice(1, -1);
+    }
+  }
+
+  // Remove a leading current-directory indicator (`./`); browsers resolve it implicitly
+  path = path.replace(/^\.\//, '');
+
+  return formatUrlPath(path);
+}
+
+/**
+ * Rewrites every `url(...)` token in a CSS value to its shortest valid form,
+ * skipping any quoted strings so an embedded `url(` inside a string is ignored.
+ *
+ * @param  {string} value  The CSS value string potentially containing url() tokens.
+ * @return {string}        The value with all url() tokens minified.
+ */
+function minifyUrls (value) {
+  let result = '';
+  let index = 0;
+
+  const consumeQuoted = (start) => {
+    const quote = value[start];
+    let end = start + 1;
+    while (end < value.length) {
+      if (value[end] === '\\') {
+        end += 2;
+        continue;
+      }
+      if (value[end] === quote) {
+        end++;
+        break;
+      }
+      end++;
+    }
+    return end;
+  };
+
+  const startsUrl = (start) => {
+    return value.slice(start, start + 4).toLowerCase() === 'url(';
+  };
+
+  while (index < value.length) {
+    if (value[index] === '"' || value[index] === '\'') {
+      const end = consumeQuoted(index);
+      result += value.slice(index, end);
+      index = end;
+      continue;
+    }
+
+    if (startsUrl(index)) {
+      const closingParenIndex = findMatchingParenthesis(value, index + 3);
+      if (closingParenIndex === -1) {
+        result += value.slice(index);
+        break;
+      }
+      const inner = value.slice(index + 4, closingParenIndex).trim();
+      result += 'url(' + minifyUrlContent(inner) + ')';
+      index = closingParenIndex + 1;
+      continue;
+    }
+
+    result += value[index];
+    index++;
+  }
+
+  return result;
+}
+
 /**
  * Normalizes whitespace, quotes, and unicode escapes in a CSS value string.
  *
@@ -744,6 +858,7 @@ function minifyValue (declaration) {
   if (typeof val === 'string') {
     val = val.trim();
     val = normalizeWhitespaceAndQuotes(val, declaration.property);
+    val = minifyUrls(val);
 
     // Instead of unconditionally removing spaces around + and - and *, handle math vs non-math
     // Collapse spaces around division operator
@@ -802,8 +917,14 @@ function minifyValue (declaration) {
     // Shorten all color tokens (hex and named) to their shortest representation
     val = replaceOutsideStringsAndUrls(val, shortenColorValues);
 
+    // Collapse light-dark() when both normalized branches are identical
+    val = simplifyEquivalentLightDarkFunctions(val);
+
     // Property-specific optimizations
     val = applyPropertyOptimizations(val, declaration.property);
+
+    // Minify relative color syntax (identity resolution and whitespace collapsing)
+    val = minifyRelativeColorSyntax(val);
   }
 
   // Gradient optimizations

package/src/value/relative-colors.js

@@ -0,0 +1,336 @@
+/**
+ * @file Evaluates and minifies CSS relative color syntax.
+ */
+
+import {
+  parseColor,
+  rgbaToHex,
+  shortestColor
+} from './colors.js';
+import { parseAlphaString } from './shared.js';
+
+/**
+ * Handle color(from ...) relative color syntax for simple identity cases.
+ *
+ * @param  {string}      expr  The color(from ...) expression string.
+ * @return {string|null}       A hex color string if the relative color is a simple identity transform, or null otherwise.
+ */
+function evaluateRelativeColor (expr) {
+  // Match: color(from <base-color> srgb r g b [/ <alpha>]) identity transform pattern
+  const match = expr.match(/^color\(\s*from\s+(.+?)\s+srgb\s+r\s+g\s+b(?:\s*\/\s*([\d.]+%?))?\s*\)$/i);
+  if (!match) {
+    return null;
+  }
+  const baseColor = parseColor(match[1]);
+  if (!baseColor) {
+    return null;
+  }
+  const alpha = parseAlphaString(match[2], baseColor[3]);
+  return rgbaToHex(baseColor[0], baseColor[1], baseColor[2], alpha);
+}
+
+/**
+ * Canonical channel keyword order for each relative-color function. When the
+ * channel expressions in a `<func>(from <color> ...)` match this order exactly,
+ * the function reproduces the base color unchanged (an identity transform).
+ *
+ * @type {{[key: string]: Array<string>}}
+ */
+const RELATIVE_COLOR_CHANNELS = {
+  rgb: ['r', 'g', 'b'],
+  rgba: ['r', 'g', 'b'],
+  hsl: ['h', 's', 'l'],
+  hsla: ['h', 's', 'l'],
+  hwb: ['h', 'w', 'b'],
+  lab: ['l', 'a', 'b'],
+  oklab: ['l', 'a', 'b'],
+  lch: ['l', 'c', 'h'],
+  oklch: ['l', 'c', 'h']
+};
+
+/**
+ * Finds the closing parenthesis matching the opening one at the given index,
+ * accounting for nested parentheses.
+ *
+ * @param  {string} value      The string being scanned.
+ * @param  {number} openIndex  Index of the opening parenthesis.
+ * @return {number}            Index of the matching close parenthesis, or -1.
+ */
+function findClosingParenthesis (value, openIndex) {
+  let depth = 1;
+  let index = openIndex + 1;
+  while (index < value.length) {
+    const character = value[index];
+    if (character === '(') {
+      depth++;
+    } else if (character === ')') {
+      depth--;
+      if (depth === 0) {
+        return index;
+      }
+    }
+    index++;
+  }
+  return -1;
+}
+
+/**
+ * Splits a string on top-level whitespace while treating each parenthesized
+ * group as part of a single token, keeping nested function arguments intact.
+ *
+ * @param  {string} text  The text to split.
+ * @return {Array}        The list of top-level tokens.
+ */
+function splitTopLevelWhitespace (text) {
+  const tokens = [];
+  let current = '';
+  let depth = 0;
+  for (let index = 0; index < text.length; index++) {
+    const character = text[index];
+    if (character === '(') {
+      depth++;
+      current += character;
+    } else if (character === ')') {
+      if (depth > 0) {
+        depth--;
+      }
+      current += character;
+      // Match any single whitespace character at the top level
+    } else if (depth === 0 && /\s/.test(character)) {
+      if (current) {
+        tokens.push(current);
+        current = '';
+      }
+    } else {
+      current += character;
+    }
+  }
+  if (current) {
+    tokens.push(current);
+  }
+  return tokens;
+}
+
+/**
+ * Splits a relative-color body into its channel portion and its optional alpha
+ * portion at the top-level `/` separator.
+ *
+ * @param  {string} body  The body of a relative color, after the base color.
+ * @return {Array}        A two-element array of [channelsPart, alphaPart|null].
+ */
+function splitRelativeAlpha (body) {
+  let depth = 0;
+  for (let index = 0; index < body.length; index++) {
+    const character = body[index];
+    if (character === '(') {
+      depth++;
+    } else if (character === ')') {
+      if (depth > 0) {
+        depth--;
+      }
+    } else if (character === '/' && depth === 0) {
+      return [body.slice(0, index).trim(), body.slice(index + 1).trim()];
+    }
+  }
+  return [body.trim(), null];
+}
+
+/**
+ * Removes redundant leading zeros from a plain numeric token (e.g. `0.6` → `.6`).
+ *
+ * @param  {string} token  A candidate numeric token.
+ * @return {string}        The token with redundant leading zeros stripped.
+ */
+function stripLeadingZeroFromNumber (token) {
+  // Match an optional sign, redundant leading zeros, then a decimal fraction
+  const match = token.match(/^(-?)0*(\.\d+)$/);
+  if (match) {
+    return match[1] + match[2];
+  }
+  return token;
+}
+
+/**
+ * Determines whether a channel expression is a single value that can safely
+ * leave a surrounding calc() wrapper: a channel keyword or a plain number.
+ *
+ * @param  {string}  token  The simplified channel expression.
+ * @return {boolean}        Whether the token can stand alone without calc().
+ */
+function isBareChannelToken (token) {
+  // A run of letters (a channel keyword) or a plain signed number
+  return (/^[a-z]+$/i).test(token) || (/^-?(?:\d*\.\d+|\d+)$/).test(token);
+}
+
+/**
+ * Simplifies a single relative-color channel expression by resolving arithmetic
+ * identities inside calc() and unwrapping calc() when it holds a lone value.
+ *
+ * @param  {string} channel  The raw channel expression.
+ * @return {string}          The simplified channel expression.
+ */
+function simplifyRelativeChannel (channel) {
+  const calcMatch = channel.match(/^calc\((.*)\)$/is);
+  if (!calcMatch) {
+    return channel;
+  }
+  let inner = calcMatch[1].trim();
+  let previous;
+  do {
+    previous = inner;
+    // Drop multiply-by-one on the right, e.g. "s*1" → "s"
+    inner = inner.replace(/\*\s*1(?![\d.])/g, '');
+    // Drop multiply-by-one on the left, e.g. "1*s" → "s"
+    inner = inner.replace(/(?<![\d.])1\s*\*/g, '');
+    // Drop divide-by-one, e.g. "l/1" → "l"
+    inner = inner.replace(/\/\s*1(?![\d.])/g, '');
+    // Drop an additive or subtractive zero, e.g. "l + 0" or "l - 0" → "l"
+    inner = inner.replace(/\s*[+-]\s*0(?![\d.])/g, '');
+    // Drop a leading additive zero, e.g. "0 + l" → "l"
+    inner = inner.replace(/^0\s*\+\s*/g, '');
+    inner = inner.trim();
+  } while (inner !== previous);
+  if (isBareChannelToken(inner)) {
+    return inner;
+  }
+  return 'calc(' + inner + ')';
+}
+
+/**
+ * Determines whether simplified channel expressions match the canonical channel
+ * keyword order, indicating an identity transform.
+ *
+ * @param  {Array}   channels   The simplified channel expressions.
+ * @param  {Array}   canonical  The canonical channel keyword order.
+ * @return {boolean}            Whether the channels are an identity pass-through.
+ */
+function channelsMatchCanonical (channels, canonical) {
+  if (channels.length !== canonical.length) {
+    return false;
+  }
+  for (let index = 0; index < channels.length; index++) {
+    if (channels[index].toLowerCase() !== canonical[index]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Resolves an identity relative color to its shortest concrete representation
+ * when the base color can be parsed to concrete channel values.
+ *
+ * @param  {string}      baseColor  The base color token.
+ * @param  {string|null} alpha      The alpha token, or null when absent.
+ * @return {string|null}            The shortest color string, or null when unresolvable.
+ */
+function resolveRelativeIdentity (baseColor, alpha) {
+  const parsed = parseColor(baseColor);
+  if (!parsed) {
+    return null;
+  }
+  let alphaValue = parsed[3];
+  if (alpha !== null) {
+    alphaValue = alpha.endsWith('%') ? parseFloat(alpha) / 100 : parseFloat(alpha);
+    if (Number.isNaN(alphaValue)) {
+      return null;
+    }
+  }
+  return shortestColor(parsed[0], parsed[1], parsed[2], alphaValue);
+}
+
+/**
+ * Joins the parts of a relative color back together, omitting whitespace after a
+ * closing parenthesis (which already delimits adjacent tokens) and appending the
+ * alpha value after a `/` when present.
+ *
+ * @param  {Array}       parts  The ordered parts, starting with the `from` keyword.
+ * @param  {string|null} alpha  The alpha token, or null when absent.
+ * @return {string}             The joined relative-color body.
+ */
+function joinRelativeColorParts (parts, alpha) {
+  let result = parts[0];
+  for (let index = 1; index < parts.length; index++) {
+    if (result.endsWith(')')) {
+      result += parts[index];
+    } else {
+      result += ' ' + parts[index];
+    }
+  }
+  if (alpha !== null) {
+    result += '/' + alpha;
+  }
+  return result;
+}
+
+/**
+ * Rewrites a single relative-color function body to its shortest form, resolving
+ * identity transforms to a concrete color and otherwise minifying whitespace and
+ * numeric tokens.
+ *
+ * @param  {string} functionName  The lowercased color function name.
+ * @param  {string} inner         The text between the function parentheses.
+ * @return {string}               The minified relative-color function string.
+ */
+function rewriteRelativeColor (functionName, inner) {
+  // Strip the leading `from` keyword, allowing it to abut the base color
+  const body = inner.replace(/^\s*from\b\s*/i, '').trim();
+  const [channelsPart, alphaRaw] = splitRelativeAlpha(body);
+  const tokens = splitTopLevelWhitespace(channelsPart);
+  if (tokens.length < 2) {
+    return functionName + '(' + inner + ')';
+  }
+  const baseColor = tokens[0];
+  const channels = tokens.slice(1).map(simplifyRelativeChannel);
+  const alpha = alphaRaw === null ? null : stripLeadingZeroFromNumber(alphaRaw);
+
+  const canonicalChannels = RELATIVE_COLOR_CHANNELS[functionName];
+  if (canonicalChannels && channelsMatchCanonical(channels, canonicalChannels)) {
+    const identity = resolveRelativeIdentity(baseColor, alpha);
+    if (identity) {
+      return identity;
+    }
+  }
+
+  const parts = ['from', baseColor, ...channels];
+  return functionName + '(' + joinRelativeColorParts(parts, alpha) + ')';
+}
+
+/**
+ * Minifies every relative-color function (`<func>(from ...)`) in a CSS value,
+ * resolving identity transforms and collapsing redundant whitespace. The
+ * `color(from ...)` form is intentionally left to `evaluateRelativeColor`.
+ *
+ * @param  {string} value  The CSS value string potentially containing relative colors.
+ * @return {string}        The value with relative colors minified.
+ */
+function minifyRelativeColorSyntax (value) {
+  let result = '';
+  let index = 0;
+  while (index < value.length) {
+    // Match a relative-color function name immediately followed by "(from"
+    const match = value.slice(index).match(/^(rgba?|hsla?|hwb|lab|lch|oklab|oklch)\(\s*from\b/i);
+    const previousCharacter = index > 0 ? value[index - 1] : '';
+    // Skip matches that are part of a longer identifier (e.g. the "lch" in "oklch")
+    const precededByIdentifier = (/[a-z0-9-]/i).test(previousCharacter);
+    if (match && !precededByIdentifier) {
+      const functionName = match[1].toLowerCase();
+      const openParenIndex = index + match[1].length;
+      const closingParenIndex = findClosingParenthesis(value, openParenIndex);
+      if (closingParenIndex !== -1) {
+        const inner = value.slice(openParenIndex + 1, closingParenIndex);
+        result += rewriteRelativeColor(functionName, inner);
+        index = closingParenIndex + 1;
+        continue;
+      }
+    }
+    result += value[index];
+    index++;
+  }
+  return result;
+}
+
+export {
+  evaluateRelativeColor,
+  minifyRelativeColorSyntax
+};

package/src/value/syntax.js

@@ -0,0 +1,56 @@
+/**
+ * @file Provides syntax-aware CSS string scanning utilities.
+ */
+
+/**
+ * Finds the closing parenthesis for an opening parenthesis while respecting
+ * nested parentheses and quoted strings.
+ *
+ * @param  {string} value           The CSS text being scanned.
+ * @param  {number} openParenIndex  The index of the opening `(` character.
+ * @return {number}                 The closing `)` index, or -1 if unmatched.
+ */
+function findMatchingParenthesis (value, openParenIndex) {
+  let depth = 1;
+  let index = openParenIndex + 1;
+  let activeQuote = '';
+
+  while (index < value.length) {
+    const character = value[index];
+    if (activeQuote) {
+      if (character === '\\') {
+        index += 2;
+        continue;
+      }
+      if (character === activeQuote) {
+        activeQuote = '';
+      }
+      index++;
+      continue;
+    }
+
+    if (character === '"' || character === '\'') {
+      activeQuote = character;
+      index++;
+      continue;
+    }
+
+    if (character === '(') {
+      depth++;
+      index++;
+      continue;
+    }
+
+    if (character === ')') {
+      depth--;
+      if (depth === 0) {
+        return index;
+      }
+    }
+    index++;
+  }
+
+  return -1;
+}
+
+export { findMatchingParenthesis };