@thejaredwilcurt/csslop 0.0.37 → 0.0.38

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.37",
+  "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,7 +37,7 @@
     "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.9",
+    "eslint-plugin-jsdoc": "^64.3.10",
     "fflate": "^0.8.3",
     "globals": "^17.12.0",
     "pretty-ms": "^9.3.1",

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

@@ -83,6 +83,188 @@ function keepSeparatorAfterDissolvedFunction (replacer) {
   };
 }
 
+/**
+ * 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.
@@ -223,7 +405,7 @@ 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, keepSeparatorAfterDissolvedFunction((match, inner) => {

package/src/value/minify.js

@@ -838,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.
@@ -988,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.).
@@ -1426,5 +1479,6 @@ function minifyValue (declaration) {
 
 export {
   clearMinifiedValueCache,
-  minifyValue
+  minifyValue,
+  minifyValueForOutput
 };