@thejaredwilcurt/csslop 0.0.36 → 0.0.38

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.38",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/prestart.js",
@@ -14,6 +14,7 @@
     "copy": "node ./scripts/copyTests.js",
     "test": "node ./tests/index.test.js",
     "real": "node ./tests/realworld.test.js",
+    "idem": "node ./tests/idempotency.test.js",
     "lint": "eslint *.js scripts src tests --fix",
     "fix": "npm run lint",
     "bump": "npx --yes -- @jsdevtools/version-bump-prompt patch && npm i",
@@ -21,7 +22,7 @@
     "proto": "proto pin node latest --resolve --tool-native && proto pin npm latest --resolve --tool-native && git status"
   },
   "dependencies": {
-    "@csstools/css-calc": "^3.3.0",
+    "@csstools/css-calc": "^3.4.0",
     "@node-projects/css-parser": "^5.2.0"
   },
   "devDependencies": {
@@ -36,12 +37,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.10",
     "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 +59,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/index.js

@@ -25,6 +25,7 @@ import {
   preprocessDeclarationBlocks,
   restoreEscapeSequences
 } from './preprocess.js';
+import { combineLanguageSelectors } from './rules/lang.js';
 import {
   deduplicateKeyframes,
   expandPureNestedRules,
@@ -83,7 +84,8 @@ function splitSelectorList (selectorList) {
 
 /**
  * Deduplicates a minified CSS selector list string by splitting at top-level
- * commas, removing duplicate selectors, and rejoining with commas.
+ * commas, removing duplicate selectors, combining the selectors that differ
+ * only in language-code, and rejoining with commas.
  *
  * @param  {string} selectorList  The comma-separated selector list string.
  * @return {string}               The deduplicated selector list string.
@@ -98,7 +100,7 @@ function deduplicateSelectorList (selectorList) {
     seen.add(selector);
     return true;
   });
-  return unique.join(',');
+  return combineLanguageSelectors(unique).join(',');
 }
 
 /**

package/src/rules/lang.js

@@ -0,0 +1,366 @@
+/**
+ * @file Minifies the `:lang()` pseudo-class, by writing each language-code in
+ * its shortest valid form and by combining selectors that differ only in the
+ * language-code they ask for.
+ */
+
+import {
+  findMatchingCloseParenthesis,
+  findNextFunctionCallOutsideStrings
+} from './selectors.js';
+
+/**
+ * The `:lang()` pseudo-class opening, as it is written in minified output.
+ * Pseudo-class names are case-insensitive, so the scan that looks for this
+ * token ignores case, while everything written back out uses this spelling.
+ *
+ * @type {string}
+ */
+const LANGUAGE_FUNCTION = ':lang(';
+
+/**
+ * Matches a backslash escape of a character that cannot be read as the start
+ * of a hexadecimal code point escape, and captures the character it escapes.
+ *
+ * @type {RegExp}
+ */
+const SINGLE_CHARACTER_ESCAPE = /\\([^0-9a-fA-F])/g;
+
+/**
+ * Matches a backslash followed by a hexadecimal digit, which starts a code
+ * point escape whose meaning cannot be judged without decoding it.
+ *
+ * @type {RegExp}
+ */
+const CODE_POINT_ESCAPE = /\\[0-9a-fA-F]/;
+
+/**
+ * Matches a language-code holding a character that would end the code, or the
+ * selector, if the code were written without quotes or escapes.
+ *
+ * @type {RegExp}
+ */
+const UNWRITABLE_CHARACTER = /[\s"'()\\]/;
+
+/**
+ * Matches a language-code whose first characters read as the beginning of a
+ * number, which no unquoted identifier may do.
+ *
+ * @type {RegExp}
+ */
+const NUMERIC_START = /^-?[0-9]/;
+
+/**
+ * Matches a single character an identifier may hold as written.
+ *
+ * @type {RegExp}
+ */
+const IDENTIFIER_CHARACTER = /[a-zA-Z0-9_-]/;
+
+/**
+ * The first code point that is an identifier character in its own right, so
+ * that letters beyond ASCII never need escaping.
+ *
+ * @type {number}
+ */
+const FIRST_NON_ASCII_CODE_POINT = 0x80;
+
+/**
+ * Reports whether a character has to be escaped to survive in an unquoted
+ * language-code.
+ *
+ * @param  {string}  character  A single character of a language-code.
+ * @return {boolean}            True when the character needs a backslash in front of it.
+ */
+function requiresEscape (character) {
+  return (
+    character.codePointAt(0) < FIRST_NON_ASCII_CODE_POINT &&
+    !IDENTIFIER_CHARACTER.test(character)
+  );
+}
+
+/**
+ * Splits the argument list of a `:lang()` into its individual language-codes,
+ * treating only the commas outside of a quoted code as separators.
+ *
+ * @param  {string} argumentList  The text between the parentheses of a `:lang()`.
+ * @return {Array}                The language-codes, still in the form they were written in.
+ */
+function splitLanguageCodes (argumentList) {
+  const codes = [];
+  let current = '';
+  let openQuote = '';
+  for (let index = 0; index < argumentList.length; index++) {
+    const character = argumentList[index];
+    const nextCharacter = argumentList[index + 1] ?? '';
+    if (character === '\\') {
+      // An escape carries the character behind it along, whatever it may be
+      current += character + nextCharacter;
+      index++;
+      continue;
+    }
+    if (openQuote) {
+      current += character;
+      if (character === openQuote) {
+        openQuote = '';
+      }
+      continue;
+    }
+    if (character === '"' || character === '\'') {
+      openQuote = character;
+      current += character;
+      continue;
+    }
+    if (character === ',') {
+      codes.push(current);
+      current = '';
+      continue;
+    }
+    current += character;
+  }
+  codes.push(current);
+  return codes;
+}
+
+/**
+ * Reads the plain language-code out of one `:lang()` argument, stripping the
+ * quotes or escapes that were only there to let it be written. Arguments this
+ * minifier cannot read with certainty, such as one holding a code point
+ * escape, report no code so they are left exactly as their author wrote them.
+ *
+ * @param  {string}      argument  One argument of a `:lang()`, as written.
+ * @return {string|null}           The language-code itself, or null when it cannot be read.
+ */
+function readLanguageCode (argument) {
+  const text = argument.trim();
+  if (!text || CODE_POINT_ESCAPE.test(text)) {
+    return null;
+  }
+  const firstCharacter = text[0];
+  const isQuoted = (
+    (firstCharacter === '"' || firstCharacter === '\'') &&
+    text.length > 1 &&
+    text.endsWith(firstCharacter)
+  );
+  let code = text;
+  if (isQuoted) {
+    code = text.slice(1, -1);
+  }
+  code = code.replace(SINGLE_CHARACTER_ESCAPE, '$1');
+  if (!code || UNWRITABLE_CHARACTER.test(code)) {
+    return null;
+  }
+  return code;
+}
+
+/**
+ * Writes a language-code in the shortest form a browser still reads as that
+ * same code. A code of plain identifier characters needs nothing around it; a
+ * code holding others is either escaped character by character or wrapped in
+ * quotes once, whichever costs fewer characters.
+ *
+ * @param  {string} code  The language-code itself.
+ * @return {string}       The shortest way to write the code inside a `:lang()`.
+ */
+function formatLanguageCode (code) {
+  const quoted = '"' + code + '"';
+  // A leading digit can only be escaped as a code point, which is never short
+  if (NUMERIC_START.test(code)) {
+    return quoted;
+  }
+  const escaped = [...code].map((character) => {
+    if (requiresEscape(character)) {
+      return '\\' + character;
+    }
+    return character;
+  }).join('');
+  if (escaped.length <= quoted.length) {
+    return escaped;
+  }
+  return quoted;
+}
+
+/**
+ * Rewrites the argument list of one `:lang()`, lowercasing every code because
+ * language-codes are matched case-insensitively (one casing throughout a
+ * stylesheet compresses better), dropping repeated codes, and writing each
+ * remaining code in its shortest form.
+ *
+ * @param  {string}      argumentList  The text between the parentheses of a `:lang()`.
+ * @return {string|null}               The minified argument list, or null when an argument could not be read.
+ */
+function minifyLanguageArguments (argumentList) {
+  const codes = [];
+  for (const argument of splitLanguageCodes(argumentList)) {
+    const code = readLanguageCode(argument);
+    if (code === null) {
+      return null;
+    }
+    codes.push(code.toLowerCase());
+  }
+  return [...new Set(codes)].map(formatLanguageCode).join(',');
+}
+
+/**
+ * Locates every `:lang()` of a selector, reporting where each one starts,
+ * where its argument list starts, and where it ends.
+ *
+ * @param  {string} selector  A minified CSS selector string.
+ * @return {Array}            One entry per `:lang()`, holding its `startIndex`, `openIndex`, and `closeIndex`.
+ */
+function findLanguageFunctions (selector) {
+  const languageFunctions = [];
+  let position = 0;
+  while (position < selector.length) {
+    const startIndex = findNextFunctionCallOutsideStrings(selector, LANGUAGE_FUNCTION, position);
+    if (startIndex === -1) {
+      break;
+    }
+    const openIndex = startIndex + LANGUAGE_FUNCTION.length - 1;
+    const closeIndex = findMatchingCloseParenthesis(selector, openIndex);
+    if (closeIndex === -1) {
+      break;
+    }
+    languageFunctions.push({
+      closeIndex,
+      openIndex,
+      startIndex
+    });
+    position = closeIndex + 1;
+  }
+  return languageFunctions;
+}
+
+/**
+ * Minifies every `:lang()` a selector holds.
+ *
+ * @param  {string} selector  A minified CSS selector string.
+ * @return {string}           The selector with each `:lang()` written in its shortest form.
+ */
+function minifyLanguageSelector (selector) {
+  const languageFunctions = findLanguageFunctions(selector);
+  if (!languageFunctions.length) {
+    return selector;
+  }
+  let result = '';
+  let index = 0;
+  for (const languageFunction of languageFunctions) {
+    const {
+      closeIndex,
+      openIndex,
+      startIndex
+    } = languageFunction;
+    const minifiedArguments = minifyLanguageArguments(selector.slice(openIndex + 1, closeIndex));
+    result += selector.slice(index, startIndex);
+    if (minifiedArguments === null) {
+      result += selector.slice(startIndex, closeIndex + 1);
+    } else {
+      result += LANGUAGE_FUNCTION + minifiedArguments + ')';
+    }
+    index = closeIndex + 1;
+  }
+  return result + selector.slice(index);
+}
+
+/**
+ * Reports whether a position in a selector sits inside a functional
+ * pseudo-class, such as the `:lang()` of `:not(:lang(en))`.
+ *
+ * @param  {string}  selector  A minified CSS selector string.
+ * @param  {number}  index     The position to judge.
+ * @return {boolean}           True when an enclosing parenthesis is still open at that position.
+ */
+function isInsideFunction (selector, index) {
+  let depth = 0;
+  for (const character of selector.slice(0, index)) {
+    if (character === '(') {
+      depth++;
+    } else if (character === ')') {
+      depth--;
+    }
+  }
+  return depth > 0;
+}
+
+/**
+ * Splits a selector into the text around its one and only `:lang()` and the
+ * language-codes that `:lang()` asks for. A selector holding no `:lang()`, or
+ * more than one, has no single list of codes to vary, and a `:lang()` nested
+ * in another functional pseudo-class cannot have codes added to it without
+ * changing what the pseudo-class it sits in means.
+ *
+ * @param  {string}      selector  A minified CSS selector string.
+ * @return {object|null}           The `prefix`, `codes`, and `suffix` of the selector, or null when it has no lone top-level `:lang()`.
+ */
+function splitAroundLanguageCodes (selector) {
+  const languageFunctions = findLanguageFunctions(selector);
+  if (languageFunctions.length !== 1) {
+    return null;
+  }
+  const {
+    closeIndex,
+    openIndex,
+    startIndex
+  } = languageFunctions[0];
+  if (isInsideFunction(selector, startIndex)) {
+    return null;
+  }
+  const codes = splitLanguageCodes(selector.slice(openIndex + 1, closeIndex)).map((code) => {
+    return code.trim();
+  });
+  if (codes.some((code) => {
+    return !code;
+  })) {
+    return null;
+  }
+  return {
+    codes,
+    prefix: selector.slice(0, startIndex),
+    suffix: selector.slice(closeIndex + 1)
+  };
+}
+
+/**
+ * Combines the selectors of one rule that are identical but for the
+ * language-codes of a single `:lang()`. A `:lang()` takes a comma-separated
+ * list of codes and matches an element written in any of them, so the several
+ * selectors say as one what they used to say apart, at the same specificity.
+ *
+ * @param  {Array} selectors  The rule's minified selector strings.
+ * @return {Array}            The selector list with language-only variants combined.
+ */
+function combineLanguageSelectors (selectors) {
+  const groupsBySurroundings = new Map();
+  const result = [];
+  for (const selector of selectors) {
+    const parts = splitAroundLanguageCodes(selector);
+    if (!parts) {
+      result.push(selector);
+      continue;
+    }
+    // The prefix and suffix are joined by a character no selector may hold, so
+    // that text moving from one side to the other cannot look like a match
+    const surroundings = parts.prefix + '\u0000' + parts.suffix;
+    const existingGroup = groupsBySurroundings.get(surroundings);
+    if (existingGroup) {
+      existingGroup.codes.push(...parts.codes);
+      continue;
+    }
+    groupsBySurroundings.set(surroundings, {
+      codes: [...parts.codes],
+      parts,
+      position: result.length
+    });
+    result.push(selector);
+  }
+  for (const group of groupsBySurroundings.values()) {
+    const codes = [...new Set(group.codes)];
+    result[group.position] = group.parts.prefix + LANGUAGE_FUNCTION + codes.join(',') + ')' + group.parts.suffix;
+  }
+  return result;
+}
+
+export {
+  combineLanguageSelectors,
+  minifyLanguageSelector
+};

package/src/rules/optimize.js

@@ -13,13 +13,82 @@ import {
   normalizeMedia
 } from './normalize.js';
 
+/**
+ * Reports whether an entry of a rule's body is itself a nested rule rather
+ * than a plain declaration.
+ *
+ * @param  {object}  entry  An entry of a rule's declaration list.
+ * @return {boolean}        True when the entry is a nested rule.
+ */
+function isNestedRule (entry) {
+  return entry.type === 'rule';
+}
+
+/**
+ * Expands the rules nested inside each rule's body, so a chain of wrappers
+ * collapses from the inside out and the outermost wrapper is then judged
+ * against an already flattened child. A rule's body holds the same kinds of
+ * entries a stylesheet does, so the body is expanded by the same rules, and
+ * the plain declarations it also holds pass through untouched.
+ *
+ * @param  {Array} rules  The AST rule nodes whose bodies may hold nested rules.
+ * @return {Array}        The rules, each with its body expanded.
+ */
+function expandNestedRuleBodies (rules) {
+  return rules.map((rule) => {
+    if (rule.type !== 'rule' || !(rule.declarations || []).some(isNestedRule)) {
+      return rule;
+    }
+    return {
+      ...rule,
+      declarations: expandPureNestedRules(rule.declarations)
+    };
+  });
+}
+
+/**
+ * Reports whether a nested child selector still means the same thing once it
+ * is written out in full under its parent.
+ *
+ * @param  {string}  childSelector  The selector of a rule nested inside another.
+ * @return {boolean}                True when the child can be written as a flat selector.
+ */
+function canFlattenChildSelector (childSelector) {
+  const child = childSelector.trim();
+  if (!child) {
+    return false;
+  }
+  // A `&` anywhere but the very start puts the parent where flattening cannot:
+  // `.b &` means the parent follows the child rather than leading it
+  return !child.slice(1).includes('&');
+}
+
+/**
+ * Writes a nested child selector out in full, as the selector it stands for
+ * when read through its parent.
+ *
+ * @param  {string} parentSelector  The selector of the rule the child is nested in.
+ * @param  {string} childSelector   The selector of the nested child rule.
+ * @return {string}                 The flat selector the nested pair stands for.
+ */
+function combineNestedSelector (parentSelector, childSelector) {
+  const parent = parentSelector.trim();
+  const child = childSelector.trim();
+  // A leading `&` names the parent itself, so it is what the parent replaces
+  if (child.startsWith('&')) {
+    return parent + child.slice(1);
+  }
+  return parent + ' ' + child;
+}
+
 /**
  * Expands rules that contain only nested sub-rules into flat rules with combined selectors, enabling further merging when the combined selectors already exist elsewhere.
  *
- * @param  {Array} rules  The AST rule nodes to process.
- * @return {Array}        A new array of rules with pure-nested rules expanded.
+ * @param  {Array} inputRules  The AST rule nodes to process.
+ * @return {Array}             A new array of rules with pure-nested rules expanded.
  */
-function expandPureNestedRules (rules) {
+function expandPureNestedRules (inputRules) {
+  const rules = expandNestedRuleBodies(inputRules);
   const flatSelectors = new Set();
   for (const rule of rules) {
     if (rule.type !== 'rule' || !rule.selectors?.length) {
@@ -77,16 +146,14 @@ function expandPureNestedRules (rules) {
         canExpand = false;
         break;
       }
+      if (!nestedRule.selectors.every(canFlattenChildSelector)) {
+        canExpand = false;
+        break;
+      }
       const combinedSelectors = [];
       for (const parentSelector of rule.selectors) {
         for (const childSelector of nestedRule.selectors) {
-          const trimmedChild = childSelector.trim();
-          let combinedSelector;
-          if (trimmedChild.startsWith('&')) {
-            combinedSelector = trimmedChild.replace(/^&/, parentSelector.trim());
-          } else {
-            combinedSelector = parentSelector.trim() + ' ' + trimmedChild;
-          }
+          const combinedSelector = combineNestedSelector(parentSelector, childSelector);
           combinedSelectors.push(combinedSelector);
           if (flatSelectors.has(combinedSelector)) {
             anyMatch = true;

package/src/rules/selectors.js

@@ -118,10 +118,11 @@ function findMatchingCloseParenthesis (text, openIndex) {
 /**
  * Finds the next occurrence of a pseudo-class function token (e.g. `:is(`)
  * that sits at the top level of a selector, outside any quoted string or
- * attribute selector.
+ * attribute selector. Pseudo-class names are case-insensitive, so the token is
+ * matched without regard to case and must be given in lowercase.
  *
  * @param  {string} text          The selector string to scan.
- * @param  {string} functionCall  The function token to find, including its opening parenthesis.
+ * @param  {string} functionCall  The lowercase function token to find, including its opening parenthesis.
  * @param  {number} start         The index to start scanning from.
  * @return {number}               The index of the next top-level occurrence, or -1 if none remains.
  */
@@ -141,7 +142,13 @@ function findNextFunctionCallOutsideStrings (text, functionCall, start) {
       index += 2;
       continue;
     }
-    if (text.startsWith(functionCall, index)) {
+    // The token's first character is compared before its whole length is read,
+    // so only the few positions that could start it are lowercased
+    const startsToken = (
+      character === functionCall[0] &&
+      text.slice(index, index + functionCall.length).toLowerCase() === functionCall
+    );
+    if (startsToken) {
       return index;
     }
     index++;
@@ -876,6 +883,8 @@ function flattenNestingParentIsSelector (selector) {
   return parts;
 }
 export {
+  findMatchingCloseParenthesis,
+  findNextFunctionCallOutsideStrings,
   flattenNestingParentIsSelector,
   mergeAdjacentWherePseudoClasses,
   processIsSelector,

package/src/rules/stringify.js

@@ -3,12 +3,16 @@
  */
 
 import { processDeclarations } from '../declarations/process.js';
-import { minifyValue } from '../value/minify.js';
+import { minifyValueForOutput } from '../value/minify.js';
 
 import {
   collapseCustomPropertyWhitespace,
   processCustomPropertyComments
 } from './custom-properties.js';
+import {
+  combineLanguageSelectors,
+  minifyLanguageSelector
+} from './lang.js';
 import {
   canUnwrapSupports,
   normalizeLayerNames,
@@ -37,7 +41,7 @@ function stringifyDeclarations (declarations) {
       return declaration.type !== 'whitespace' && declaration.type !== 'comment' && declaration.property;
     })
     .map((declaration) => {
-      return [declaration.property, ':', minifyValue(declaration)].join('');
+      return [declaration.property, ':', minifyValueForOutput(declaration)].join('');
     })
     .join(';');
 }
@@ -251,6 +255,7 @@ function stringifyRule (rule, context) {
         // Remove redundant leading "& " nesting selector
         minified = minified.replace(/^& /, '');
         minified = mergeAdjacentWherePseudoClasses(minified);
+        minified = minifyLanguageSelector(minified);
         return minified;
       });
       // When this rule is a nesting parent, its whole selector list is treated
@@ -267,6 +272,7 @@ function stringifyRule (rule, context) {
         return processIsSelector(selector, hasSiblingSelectors);
       });
       uniqueSelectors = [...new Set(uniqueSelectors)];
+      uniqueSelectors = combineLanguageSelectors(uniqueSelectors);
       output.push(uniqueSelectors.join(','));
     }
     output.push('{');
@@ -295,7 +301,7 @@ function stringifyRule (rule, context) {
         if (property.startsWith('--')) {
           const syntax = context.registeredCustomPropertySyntax.get(property);
           if (syntax === '"<color>"') {
-            value = minifyValue(declaration);
+            value = minifyValueForOutput(declaration);
           } else {
             const rawValue = declaration.rawValue || declaration.value || '';
             const commentProcessedValue = processCustomPropertyComments(rawValue);
@@ -323,7 +329,7 @@ function stringifyRule (rule, context) {
             }
           }
         } else {
-          value = minifyValue(declaration);
+          value = minifyValueForOutput(declaration);
         }
         return [property, ':', value].join('');
       })
@@ -362,7 +368,7 @@ function stringifyRule (rule, context) {
       return item.type !== 'declaration';
     });
     const renderedDeclarations = mediaDeclarations.map((declaration) => {
-      return [unescapeIdent(declaration.property), ':', minifyValue(declaration)].join('');
+      return [unescapeIdent(declaration.property), ':', minifyValueForOutput(declaration)].join('');
     }).join(';');
     const renderedRules = stringifyChildRules(subRules, context);
     const children = [renderedDeclarations, renderedRules].filter(Boolean).join('');
@@ -440,7 +446,7 @@ function stringifyRule (rule, context) {
             return declaration.type !== 'whitespace' && declaration.type !== 'comment';
           })
           ?.map((declaration) => {
-            return [declaration.property, ':', minifyValue(declaration)].join('');
+            return [declaration.property, ':', minifyValueForOutput(declaration)].join('');
           })
           .join(';') || '';
         output.push(renderedKeyframeDeclarations);
@@ -558,7 +564,7 @@ function stringifyRule (rule, context) {
               return innerDeclaration.type !== 'whitespace' && innerDeclaration.property;
             })
             .map((innerDeclaration) => {
-              return [unescapeIdent(innerDeclaration.property), ':', minifyValue(innerDeclaration)].join('');
+              return [unescapeIdent(innerDeclaration.property), ':', minifyValueForOutput(innerDeclaration)].join('');
             })
             .join(';');
           if (innerDeclarations) {
@@ -567,7 +573,7 @@ function stringifyRule (rule, context) {
           return [];
         }
         if (declaration.property) {
-          return [[unescapeIdent(declaration.property), ':', minifyValue(declaration)].join('')];
+          return [[unescapeIdent(declaration.property), ':', minifyValueForOutput(declaration)].join('')];
         }
         return [];
       });

package/src/value/math.js

@@ -10,6 +10,261 @@ 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 functions whose arguments are a math expression, where `*` and `/` are
+ * arithmetic operators rather than characters of some other syntax.
+ *
+ * @type {Set<string>}
+ */
+const MATH_FUNCTION_NAMES = new Set([
+  'abs',
+  'calc',
+  'clamp',
+  'hypot',
+  'max',
+  'min',
+  'mod',
+  'rem',
+  'round',
+  'sign'
+]);
+
+/**
+ * Matches a single character that may appear in a CSS function name.
+ *
+ * @type {RegExp}
+ */
+const FUNCTION_NAME_CHARACTER = /[a-zA-Z-]/;
+
+/**
+ * Finds where the function name that ends at an opening parenthesis begins.
+ *
+ * @param  {string} value      The CSS value string being scanned.
+ * @param  {number} openIndex  The index of the opening parenthesis.
+ * @return {number}            The index of the function name's first character.
+ */
+function findFunctionNameStart (value, openIndex) {
+  let index = openIndex;
+  while (index > 0 && FUNCTION_NAME_CHARACTER.test(value[index - 1])) {
+    index--;
+  }
+  return index;
+}
+
+/**
+ * Finds the parenthesis closing the one at the given index.
+ *
+ * @param  {string} value      The CSS value string being scanned.
+ * @param  {number} openIndex  The index of the opening parenthesis.
+ * @return {number}            The index of the matching closing parenthesis, or -1 when it never closes.
+ */
+function findClosingParenthesis (value, openIndex) {
+  let depth = 0;
+  for (let index = openIndex; index < value.length; index++) {
+    if (value[index] === '(') {
+      depth++;
+    } else if (value[index] === ')') {
+      depth--;
+      if (depth === 0) {
+        return index;
+      }
+    }
+  }
+  return -1;
+}
+
+/**
+ * Rewrites the contents of every math function in a value, leaving the rest of
+ * the value untouched. A `*` only means multiplication inside these functions,
+ * so an arithmetic rewrite may only reach the text between their parentheses.
+ * The whole of a math function is handed over at once, so a math function
+ * nested in another is rewritten as part of its parent.
+ *
+ * @param  {function(string): string} rewriteExpression  Receives a math function's contents and returns its replacement.
+ * @param  {string}                   value              The CSS value string to rewrite.
+ * @return {string}                                      The value with every math function's contents rewritten.
+ */
+function rewriteMathFunctionContents (rewriteExpression, value) {
+  let result = '';
+  let index = 0;
+  while (index < value.length) {
+    const openIndex = value.indexOf('(', index);
+    if (openIndex === -1) {
+      break;
+    }
+    const functionName = value.slice(findFunctionNameStart(value, openIndex), openIndex).toLowerCase();
+    const closeIndex = findClosingParenthesis(value, openIndex);
+    if (!MATH_FUNCTION_NAMES.has(functionName) || closeIndex === -1) {
+      result += value.slice(index, openIndex + 1);
+      index = openIndex + 1;
+      continue;
+    }
+    result += value.slice(index, openIndex + 1);
+    result += rewriteExpression(value.slice(openIndex + 1, closeIndex));
+    index = closeIndex;
+  }
+  return result + value.slice(index);
+}
+
+/**
+ * Matches a multiplication by a decimal below one, capturing the digits after
+ * its decimal point and the unit written on it. The trailing lookahead keeps
+ * the match away from numbers that only begin this way, such as the exponent
+ * of `.5e3` or a unit name that is still being read.
+ *
+ * @type {RegExp}
+ */
+const FRACTIONAL_MULTIPLIER = /\s*\*\s*0*\.(\d+)([a-z%]*)(?![\w.%(])/gi;
+
+/**
+ * The most decimal places a fraction may be built from while the power of ten
+ * it needs is still exactly representable as an integer.
+ *
+ * @type {number}
+ */
+const MAXIMUM_FRACTION_DIGITS = 15;
+
+/**
+ * Computes the greatest common divisor of two non-negative integers, which is
+ * what a fraction has to be divided by to be stated in lowest terms.
+ *
+ * @param  {number} first   The first integer.
+ * @param  {number} second  The second integer.
+ * @return {number}         The greatest common divisor of both integers.
+ */
+function greatestCommonDivisor (first, second) {
+  let dividend = first;
+  let divisor = second;
+  while (divisor) {
+    const remainder = dividend % divisor;
+    dividend = divisor;
+    divisor = remainder;
+  }
+  return dividend;
+}
+
+/**
+ * Converts the digits behind a decimal point into the whole number that
+ * dividing by scales a value exactly as multiplying by that decimal does.
+ * The digits `25` (of `.25`) state the fraction 25/100, which reduces to 1/4,
+ * so the divisor is `4`. A fraction that does not reduce to a numerator of one
+ * cannot be stated as a single division, and so has no divisor to give.
+ *
+ * @param  {string}      fractionDigits  The digits written after the decimal point.
+ * @return {number|null}                 The equivalent whole number divisor, or null when there is none.
+ */
+function reciprocalOfDecimalFraction (fractionDigits) {
+  if (fractionDigits.length > MAXIMUM_FRACTION_DIGITS) {
+    return null;
+  }
+  const numerator = Number(fractionDigits);
+  const denominator = 10 ** fractionDigits.length;
+  const commonFactor = greatestCommonDivisor(numerator, denominator);
+  if (numerator / commonFactor !== 1) {
+    return null;
+  }
+  return denominator / commonFactor;
+}
+
+/**
+ * Rewrites a multiplication by a decimal below one as a division by the whole
+ * number that decimal is the reciprocal of, which is never longer to write and
+ * usually shorter (`calc(var(--x)*.25)` → `calc(var(--x)/4)`). A unit written
+ * on the multiplier moves onto the divisor, since only how the operand is
+ * stated changes.
+ *
+ * @param  {string} expression  The contents of a math function.
+ * @return {string}             The expression with reciprocal multipliers stated as divisions.
+ */
+function convertReciprocalMultiplicationToDivision (expression) {
+  return expression.replace(FRACTIONAL_MULTIPLIER, (match, fractionDigits, unit) => {
+    const divisor = reciprocalOfDecimalFraction(fractionDigits);
+    if (divisor === null) {
+      return match;
+    }
+    const division = '/' + divisor + unit;
+    // Compared against the shortest the multiplication could have been written
+    const multiplication = '*.' + fractionDigits + unit;
+    if (division.length > multiplication.length) {
+      return match;
+    }
+    return division;
+  });
+}
+
 /**
  * The units a folded calc() expression leads with, in the order they are
  * written. Every other unit follows them alphabetically.
@@ -150,33 +405,33 @@ function tryFoldCalcExpression (expression) {
  * @return {string}                The value with math functions simplified where possible.
  */
 function normalizeMathFunctions (value, property, originalValue = '') {
-  let result = value;
+  let result = rewriteMathFunctionContents(convertReciprocalMultiplicationToDivision, 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 +463,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;
 }
 
 /**
@@ -829,6 +838,26 @@ const ZERO_INITIAL_PROPERTIES = new Set(['margin', 'padding']);
  */
 const AUTO_INITIAL_PROPERTIES = new Set(['min-width', 'min-height']);
 
+/**
+ * Properties whose initial value is a single keyword longer than the global
+ * `initial` keyword itself. These replacements are applied when serializing
+ * declarations, because shorthand builders reconstruct their value from the
+ * actual longhand keywords, and a CSS-wide keyword such as `initial` is only
+ * valid as a declaration's entire value.
+ *
+ * @type {Map<string, string>}
+ */
+const LENGTHY_INITIAL_KEYWORDS = new Map([
+  ['background-clip', 'border-box'],
+  ['background-origin', 'padding-box'],
+  ['border-collapse', 'separate'],
+  ['box-sizing', 'content-box'],
+  ['mask-clip', 'border-box'],
+  ['mask-origin', 'border-box'],
+  ['vertical-align', 'baseline'],
+  ['writing-mode', 'horizontal-tb']
+]);
+
 /**
  * Properties whose value is a time, where a millisecond amount may be worth
  * rewriting in seconds.
@@ -979,6 +1008,39 @@ function reorderBorderWidthBeforeStyle (value) {
   return value.replace(BORDER_STYLE_BEFORE_WIDTH_PATTERN, '$2 $1');
 }
 
+/**
+ * Minifies a declaration's value for output, rewriting its initial keyword to
+ * the shorter global `initial` keyword after shorthand assembly. Both are
+ * equivalent, but `initial` is shorter than these particular keywords and,
+ * being repeated across properties, gives gzip more opportunities to deduplicate it.
+ *
+ * @param  {object} declaration  The CSS declaration object with property and value fields.
+ * @return {string}              The minified value with its initial keyword shortened to `initial` when that saves bytes.
+ */
+function minifyValueForOutput (declaration) {
+  const value = minifyValue(declaration);
+  const property = declaration.property;
+  // Custom properties hold an arbitrary token stream that JavaScript can read
+  // back, so their keywords are left exactly as written.
+  if (isCustomProperty(property)) {
+    return value;
+  }
+  // A keyword spelling the property's own initial value is shorter as the
+  // global keyword (box-sizing: content-box -> box-sizing: initial)
+  const initialKeyword = LENGTHY_INITIAL_KEYWORDS.get(property?.toLowerCase());
+  if (!initialKeyword || 'initial'.length >= initialKeyword.length) {
+    return value;
+  }
+  // A trailing `!important` rides along inside the value, so the keyword
+  // comparison and the rewrite only concern what sits in front of it.
+  const isImportant = value.endsWith('!important');
+  const keyword = isImportant ? value.slice(0, value.length - '!important'.length) : value;
+  if (keyword.toLowerCase() !== initialKeyword) {
+    return value;
+  }
+  return 'initial' + (isImportant ? '!important' : '');
+}
+
 /**
  * Applies property-specific optimizations to a CSS value (transition, flex, font,
  * background, display, scale, border-radius, shorthand collapsing, etc.).
@@ -1417,5 +1479,6 @@ function minifyValue (declaration) {
 
 export {
   clearMinifiedValueCache,
-  minifyValue
+  minifyValue,
+  minifyValueForOutput
 };

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