@thejaredwilcurt/csslop 0.0.44 → 0.0.46

package/README.md

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/pre/start.js",
@@ -23,9 +23,9 @@
     "proto": "proto pin node latest --resolve --tool-native && proto pin npm latest --resolve --tool-native && git status"
   },
   "devDependencies": {
-    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/autocomplete": "^6.20.4",
     "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/view": "^6.43.14",
+    "@codemirror/view": "^6.43.15",
     "@eslint/js": "^10.0.1",
     "@node-projects/css-parser": "^5.2.0",
     "@stylistic/eslint-plugin": "^5.10.0",
@@ -35,7 +35,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": "^65.3.11",
+    "eslint-plugin-jsdoc": "^65.4.0",
     "fflate": "^0.8.3",
     "globals": "^17.13.0",
     "pretty-ms": "^10.0.0",

package/src/declarations/border.js

@@ -5,7 +5,10 @@
 import { splitTopLevelComponents } from '../parser/source-search.js';
 import { minifyValue } from '../value/minify.js';
 import { namedColors } from '../value/named-colors.js';
-import { collapseShorthandParts } from '../value/shared.js';
+import {
+  collapseShorthandParts,
+  hasSubstitutedParts
+} from '../value/shared.js';
 
 import {
   BORDER_EDGE_PROPERTIES,
@@ -107,16 +110,14 @@ function findLastDeclarationIndex (declarations, property) {
 }
 
 /**
- * Rewrites a `border-width` + `border-style` + `border-color` trio whose color
- * differs per edge into a `border` shorthand built from the first color, followed
- * by a `border-color` override that restores the per-edge colors. The rewrite is
- * only applied when the resulting pair is shorter than the three longhands.
+ * Rewrites a border trio into a shorthand and overrides for components that
+ * differ by edge. Only shorter rewrites with uniform importance are used.
  *
  * @param  {Array}  declarations  The declarations of a single rule.
  * @param  {object} context       The minification context with the stylesheet's reset properties.
  * @return {Array}                The declarations, with the trio rewritten when it is shorter.
  */
-function collapseBorderTrioWithPerEdgeColor (declarations, context) {
+function collapseBorderTrioWithPerEdgeOverrides (declarations, context) {
   // The `border` shorthand also resets `border-image`, so the trio stays as it
   // is when another rule of the stylesheet relies on that value.
   if (resetsPropertyDeclaredElsewhere('border', collectDeclaredProperties(declarations), context)) {
@@ -132,6 +133,18 @@ function collapseBorderTrioWithPerEdgeColor (declarations, context) {
   if (!hasWholeTrio) {
     return declarations;
   }
+  const hasCompetingBorderWrites = declarations.some((declaration) => {
+    const property = declaration.property || '';
+    if (BORDER_TRIO_PROPERTIES.includes(property)) {
+      return declarations.filter((entry) => {
+        return entry.property === property;
+      }).length !== 1;
+    }
+    return property === 'border' || (property.startsWith('border-') && !property.startsWith('border-image'));
+  });
+  if (hasCompetingBorderWrites) {
+    return declarations;
+  }
 
   const trioValues = trioIndexes.map((index) => {
     return minifyValue(declarations[index]);
@@ -150,28 +163,38 @@ function collapseBorderTrioWithPerEdgeColor (declarations, context) {
   const [width, style, color] = trioValues.map((value) => {
     return value.replace('!important', '').trim();
   });
-  const colorComponents = splitTopLevelComponents(color);
-  const isSingleComponent = (value) => {
-    return splitTopLevelComponents(value).length === 1;
-  };
-  const canBuildShorthand = (
-    isSingleComponent(width) &&
-    isSingleComponent(style) &&
-    colorComponents.length > 1
-  );
-  if (!canBuildShorthand) {
+  const componentsByProperty = [width, style, color].map(splitTopLevelComponents);
+  const hasPerEdgeComponents = componentsByProperty.some((components) => {
+    return components.length > 1;
+  });
+  const allComponents = componentsByProperty.flat();
+  if (!hasPerEdgeComponents || hasSubstitutedParts(allComponents)) {
     return declarations;
   }
-  const usesCssWideKeyword = [width, style, ...colorComponents].some((value) => {
+  const usesCssWideKeyword = allComponents.some((value) => {
     return CSS_WIDE_KEYWORDS.has(value.toLowerCase());
   });
   if (usesCssWideKeyword) {
     return declarations;
   }
 
-  const borderValue = buildBorderShorthandValue(width, style, colorComponents[0]) + importantSuffix;
-  const colorValue = color + importantSuffix;
-  const rewrittenLength = ('border:' + borderValue + ';border-color:' + colorValue).length;
+  const [widthComponents, styleComponents, colorComponents] = componentsByProperty;
+  const borderValue = buildBorderShorthandValue(
+    widthComponents.length === 1 ? width : '',
+    styleComponents.length === 1 ? style : '',
+    colorComponents[0]
+  ) + importantSuffix;
+  const overrides = BORDER_TRIO_PROPERTIES.flatMap((property, index) => {
+    if (componentsByProperty[index].length === 1) {
+      return [];
+    }
+    return [{
+      property,
+      value: trioValues[index]
+    }];
+  });
+  const replacement = [{ property: 'border', value: borderValue }, ...overrides];
+  const rewrittenLength = measureDeclarations(replacement);
   const longhandLength = (
     'border-width:' + trioValues[0] +
     ';border-style:' + trioValues[1] +
@@ -185,16 +208,7 @@ function collapseBorderTrioWithPerEdgeColor (declarations, context) {
   const insertionIndex = Math.min(...trioIndexes);
   return declarations.flatMap((declaration, index) => {
     if (index === insertionIndex) {
-      return [
-        {
-          property: 'border',
-          value: borderValue
-        },
-        {
-          property: 'border-color',
-          value: colorValue
-        }
-      ];
+      return replacement;
     }
     if (replacedIndexes.has(index)) {
       return [];
@@ -216,8 +230,8 @@ function classifyBorderEdgeComponent (component) {
   if (BORDER_STYLE_KEYWORDS.has(keyword)) {
     return 'border-style';
   }
-  // Match a number with an optional unit, which is how a length is written
-  const isLength = /^[+-]?(?:\d+|\d*\.\d+)[a-z]*$/i.test(component);
+  // Match a number, optional exponent, and optional length unit.
+  const isLength = /^[+-]?(?:\d+|\d*\.\d+)(?:e[+-]?\d+)?[a-z]*$/i.test(component);
   if (BORDER_WIDTH_KEYWORDS.has(keyword) || isLength || LENGTH_FUNCTION_PATTERN.test(component)) {
     return 'border-width';
   }
@@ -411,6 +425,6 @@ function splitBorderEdgesIntoTrio (declarations) {
 }
 
 export {
-  collapseBorderTrioWithPerEdgeColor,
+  collapseBorderTrioWithPerEdgeOverrides,
   splitBorderEdgesIntoTrio
 };

package/src/declarations/process.js

@@ -7,7 +7,7 @@ import { hasInvalidQuotesCount } from '../value/quotes.js';
 
 import { absorbBackgroundLonghandsIntoShorthand } from './background.js';
 import {
-  collapseBorderTrioWithPerEdgeColor,
+  collapseBorderTrioWithPerEdgeOverrides,
   splitBorderEdgesIntoTrio
 } from './border.js';
 import {
@@ -449,7 +449,7 @@ function processDeclarations (declarations, context) {
   result = foldLonghandOverridesIntoShorthands(result, context);
   result = hoistCssWideKeywordsIntoShorthands(result, context);
   result = splitBorderEdgesIntoTrio(result);
-  result = collapseBorderTrioWithPerEdgeColor(result, context);
+  result = collapseBorderTrioWithPerEdgeOverrides(result, context);
 
   return orderDeclarations(result);
 }

package/src/index.js

@@ -23,24 +23,13 @@ import {
 import { preprocessDeclarationBlocks } from './preprocess.js';
 import { combineLanguageSelectors } from './rules/lang.js';
 import { normalizeRuleSelectors } from './rules/normalize.js';
-import {
-  deduplicateKeyframes,
-  expandPureNestedRules,
-  factorCommonParents,
-  mergeByDeclarations,
-  mergeIdenticalNestedRules,
-  mergeLayerRules,
-  mergeMediaRules,
-  mergeSelectorRules,
-  nestFlatRules,
-  removeEmptyRules,
-  removeFullyOverriddenSelectors,
-  removeOverriddenMultiSelectorProperties
-} from './rules/optimize.js';
+import { optimizeRuleList } from './rules/optimize.js';
+import { combineLegacyAnySelectors } from './rules/selectors.js';
 import {
   removeRedundantLayerStatementSemicolon,
   stringifyRule
 } from './rules/stringify.js';
+import { removeInvalidSelectorRules } from './rules/validate.js';
 import {
   clearMinifiedValueCache,
   minifyValue
@@ -64,7 +53,7 @@ function deduplicateSelectorList (selectorList) {
     seen.add(selector);
     return true;
   });
-  return combineLanguageSelectors(unique).join(',');
+  return combineLanguageSelectors(combineLegacyAnySelectors(unique)).join(',');
 }
 
 /**
@@ -199,6 +188,7 @@ export const minifyCSS = function (input) {
   const context = createMinifyContext();
 
   if (ast?.stylesheet?.rules) {
+    ast.stylesheet.rules = removeInvalidSelectorRules(ast.stylesheet.rules);
     // Every later pass reads selectors, so they are written the one canonical
     // way before any of them runs.
     normalizeRuleSelectors(ast.stylesheet.rules);
@@ -227,24 +217,7 @@ export const minifyCSS = function (input) {
     );
     ast.stylesheet.rules = filterRedundantCharsets(ast.stylesheet.rules);
 
-    ast.stylesheet.rules = expandPureNestedRules(ast.stylesheet.rules);
-    ast.stylesheet.rules = mergeLayerRules(ast.stylesheet.rules, mergeSelectorRules);
-    ast.stylesheet.rules = mergeMediaRules(ast.stylesheet.rules, mergeSelectorRules);
-    ast.stylesheet.rules = deduplicateKeyframes(ast.stylesheet.rules);
-
-    const mergedRules = mergeSelectorRules(ast.stylesheet.rules);
-    const overrideCleanedRules = removeOverriddenMultiSelectorProperties(mergedRules);
-    const selectorPrunedRules = removeFullyOverriddenSelectors(overrideCleanedRules);
-    const preCleanedRules = removeEmptyRules(selectorPrunedRules);
-    const declarationMergedRules = mergeByDeclarations(preCleanedRules);
-    const nestedRules = nestFlatRules(declarationMergedRules);
-    const nonEmptyRules = removeEmptyRules(nestedRules);
-    // Nesting is what reveals that two rules style the same thing: until their
-    // descendants have moved inside them, the rules only share a declaration.
-    const nestingMergedRules = mergeByDeclarations(nonEmptyRules);
-    const factoredRules = factorCommonParents(nestingMergedRules);
-    const nestedFinalRules = nestFlatRules(factoredRules);
-    const finalRules = mergeIdenticalNestedRules(nestedFinalRules);
+    const finalRules = optimizeRuleList(ast.stylesheet.rules);
 
     for (const rule of finalRules) {
       output.push(stringifyRule(rule, context));

package/src/parser/source-search.js

@@ -162,8 +162,8 @@ function startsUrlToken (source, index) {
 
 /**
  * Finds the first of several delimiter characters that is written at the top
- * level of the text, meaning it is not escaped, quoted, or nested inside a
- * group.
+ * level of the text, meaning it is not escaped, quoted, inside a comment, or
+ * nested inside a group.
  *
  * @param  {string} source      The raw CSS text being scanned.
  * @param  {string} delimiters  The delimiter characters to look for.
@@ -174,6 +174,11 @@ function findTopLevelDelimiter (source, delimiters, startIndex) {
   let index = startIndex;
   while (index < source.length) {
     const character = source[index];
+    if (character === '/' && source[index + 1] === '*') {
+      const closingIndex = source.indexOf('*/', index + 2);
+      index = closingIndex === -1 ? source.length : closingIndex + 2;
+      continue;
+    }
     if (character === '\\') {
       index += 2;
       continue;

package/src/rules/optimize.js

@@ -11,12 +11,17 @@ import {
   findMatchingParenthesis,
   splitTopLevelCommaList
 } from '../parser/source-search.js';
+import { tokenizeCssValue } from '../parser/tokenizer.js';
 import { escapeRegexString } from '../utilities.js';
 
 import {
   normalizeLayerNames,
   normalizeMedia
 } from './normalize.js';
+import {
+  containsPseudoElement,
+  isUniversallyRecognizableSelector
+} from './selectors.js';
 
 /**
  * Reports whether an entry of a rule's body is itself a nested rule rather
@@ -44,13 +49,67 @@ function expandNestedRuleBodies (rules) {
     if (rule.type !== 'rule' || !(rule.declarations || []).some(isNestedRule)) {
       return rule;
     }
+    const declarations = expandPureNestedRules(rule.declarations);
+    const canFlattenSelf = selectorsShareSpecificity(rule.selectors) && !rule.selectors.some(containsPseudoElement);
+    let encounteredNestedContent = false;
+    const flattened = declarations.flatMap((entry) => {
+      const isSelfRule = entry.type === 'rule' && entry.selectors?.length === 1 && entry.selectors[0].trim() === '&';
+      if (canFlattenSelf && isSelfRule && !encounteredNestedContent) {
+        return entry.declarations || [];
+      }
+      if (entry.type !== 'declaration' && entry.type !== 'whitespace' && entry.type !== 'comment') {
+        encounteredNestedContent = true;
+      }
+      if (entry.type === 'rule' && rule.selectors.length === 1) {
+        entry.selectors = entry.selectors.map((selector) => {
+          return shortenRepeatedNestingSelector(rule.selectors[0], selector);
+        });
+      }
+      return [entry];
+    });
     return {
       ...rule,
-      declarations: expandPureNestedRules(rule.declarations)
+      declarations: flattened
     };
   });
 }
 
+/**
+ * Replaces repetitions of a simple class or ID beside a leading nesting
+ * selector. Token comparisons keep longer names and escaped text intact.
+ *
+ * @param  {string} parentSelector  The sole parent selector.
+ * @param  {string} childSelector   The nested selector.
+ * @return {string}                 The shorter equivalent selector.
+ */
+function shortenRepeatedNestingSelector (parentSelector, childSelector) {
+  const parentTokens = tokenizeCssValue(parentSelector);
+  const isClass = parentTokens.length === 2 && parentTokens[0].text === '.' && parentTokens[1].type === 'ident';
+  const isIdentifier = parentTokens.length === 1 && parentTokens[0].type === 'hash';
+  if (!isClass && !isIdentifier) {
+    return childSelector;
+  }
+  const childTokens = tokenizeCssValue(childSelector);
+  if (childTokens[0]?.text !== '&') {
+    return childSelector;
+  }
+  let index = 1;
+  let result = '&';
+  while (index < childTokens.length) {
+    const matchesParent = parentTokens.every((token, position) => {
+      return childTokens[index + position]?.text === token.text;
+    });
+    if (!matchesParent) {
+      break;
+    }
+    result += '&';
+    index += parentTokens.length;
+  }
+  return result + childTokens.slice(index).map((token) => {
+    return token.text;
+  }).join('');
+}
+
 /**
  * Reports whether a nested child selector still means the same thing once it
  * is written out in full under its parent.
@@ -203,6 +262,9 @@ function createNestedSelectorMatcher (parentSelector) {
 
   return (childSelector) => {
     const child = childSelector.trim();
+    if (child === parent) {
+      return '&';
+    }
     if (child.startsWith(parent + ':') || child.startsWith(parent + '::')) {
       return '&' + child.slice(parent.length);
     }
@@ -437,6 +499,26 @@ function factorCommonParents (rules) {
   let index = 0;
   while (index < rules.length) {
     const rule = rules[index];
+    if (rule.type === 'rule' && rule.selectors?.length > 1) {
+      const candidateParent = extractLeadingCompound(rule.selectors[0]) || rule.selectors[0];
+      if (candidateParent) {
+        const matchNestedSelector = createNestedSelectorMatcher(candidateParent);
+        const childSelectors = rule.selectors.map(matchNestedSelector);
+        const allMatch = childSelectors.every((selector) => {
+          return selector !== null;
+        });
+        const wrapperLength = candidateParent.length + 2 + childSelectors.join(',').length;
+        if (allMatch && !containsPseudoElement(candidateParent) && wrapperLength < rule.selectors.join(',').length) {
+          result.push({
+            type: 'rule',
+            selectors: [candidateParent],
+            declarations: [{ ...rule, selectors: childSelectors }]
+          });
+          index++;
+          continue;
+        }
+      }
+    }
     // Only single-selector style rules can act as a factoring candidate.
     if (rule.type !== 'rule' || rule.selectors?.length !== 1) {
       result.push(rule);
@@ -491,6 +573,42 @@ function factorCommonParents (rules) {
   return result;
 }
 
+/**
+ * Shares a descendant prefix through `:is()` when a nesting wrapper did not
+ * save enough space to factor the parent out of the selector list.
+ *
+ * @param {object} rule  The style rule whose selector list may be shortened.
+ */
+function factorSelectorBranches (rule) {
+  if (rule.type !== 'rule' || !rule.selectors?.length) {
+    return;
+  }
+  for (const parent of [...rule.selectors]) {
+    const prefix = parent + ' ';
+    const branches = rule.selectors.filter((selector) => {
+      return selector.startsWith(prefix);
+    });
+    const children = branches.map((selector) => {
+      return selector.slice(prefix.length);
+    });
+    if (children.length < 2 || !children.every(isUniversallyRecognizableSelector) || !selectorsShareSpecificity(children)) {
+      continue;
+    }
+    const grouped = prefix + ':is(' + children.sort().join(',') + ')';
+    if (grouped.length >= branches.join(',').length) {
+      continue;
+    }
+    const branchSet = new Set(branches);
+    const firstIndex = rule.selectors.indexOf(branches[0]);
+    rule.selectors = rule.selectors.flatMap((selector, index) => {
+      if (index === firstIndex) {
+        return [grouped];
+      }
+      return branchSet.has(selector) ? [] : [selector];
+    });
+  }
+}
+
 /**
  * Merges adjacent `@media` rules that share an identical normalized query string and deduplicates their child selector rules.
  *
@@ -1469,7 +1587,7 @@ function chooseMergePlacement (overrideIndex, earlierRule, laterRule, earlierPos
  * @param  {Array} rules  The AST rule nodes to merge.
  * @return {Array}        A new array of rules with same-selector rules combined.
  */
-function mergeSelectorRules (rules) {
+function mergeSelectorRulePass (rules) {
   // A rule merged at the later of the two positions moves to the end of the
   // output. Its old slot is emptied instead of spliced out so that every
   // recorded position stays valid, and the position map locates that slot
@@ -1524,6 +1642,24 @@ function mergeSelectorRules (rules) {
   });
 }
 
+/**
+ * Reconsiders blocked pairs after merges relocate the rules that blocked them.
+ * Each productive pass removes a rule, so this reaches a fixed point without
+ * rerunning parsing or unrelated optimizations.
+ *
+ * @param  {Array} rules  The sibling rules to merge.
+ * @return {Array}        Rules with all currently safe same-selector merges.
+ */
+function mergeSelectorRules (rules) {
+  let previousRules = rules;
+  let mergedRules = mergeSelectorRulePass(previousRules);
+  while (mergedRules.length < previousRules.length) {
+    previousRules = mergedRules;
+    mergedRules = mergeSelectorRulePass(previousRules);
+  }
+  return mergedRules;
+}
+
 /**
  * Merges `@layer` blocks with the same name by combining their child rules, deduplicates layer statements, and merges selector rules within each block.
  *
@@ -1847,6 +1983,37 @@ function removeOverriddenMultiSelectorProperties (rules) {
   return rules;
 }
 
+/**
+ * Applies the structural optimization pipeline to a stylesheet or grouping
+ * block, so merging at-rules does not leave their children unoptimized.
+ *
+ * @param  {Array} rules  The sibling AST entries.
+ * @return {Array}        The optimized sibling entries.
+ */
+function optimizeRuleList (rules) {
+  let result = expandPureNestedRules(rules);
+  result = mergeLayerRules(result, mergeSelectorRules);
+  result = mergeMediaRules(result, mergeSelectorRules);
+  result = deduplicateKeyframes(result);
+  for (const rule of result) {
+    if (rule.rules) {
+      rule.rules = optimizeRuleList(rule.rules);
+    }
+  }
+  result = mergeSelectorRules(result);
+  result = removeOverriddenMultiSelectorProperties(result);
+  result = removeFullyOverriddenSelectors(result);
+  result = removeEmptyRules(result);
+  result = mergeByDeclarations(result);
+  result = nestFlatRules(result);
+  result = removeEmptyRules(result);
+  result = mergeByDeclarations(result);
+  result = factorCommonParents(result);
+  result = nestFlatRules(result);
+  result.forEach(factorSelectorBranches);
+  return mergeIdenticalNestedRules(result);
+}
+
 export {
   deduplicateKeyframes,
   expandPureNestedRules,
@@ -1857,6 +2024,7 @@ export {
   mergeMediaRules,
   mergeSelectorRules,
   nestFlatRules,
+  optimizeRuleList,
   removeEmptyRules,
   removeFullyOverriddenSelectors,
   removeOverriddenMultiSelectorProperties

package/src/rules/selectors.js

@@ -719,9 +719,50 @@ function flattenNestingParentIsSelector (selector) {
   return parts;
 }
 
+/**
+ * Replaces matching legacy any-functions only when multiple vendor variants
+ * supply the same selector. A lone vendor-specific selector stays scoped to
+ * the browsers that understand it.
+ *
+ * @param  {Array} selectors  Selectors with identical declarations.
+ * @return {Array}            The selectors with redundant legacy forms combined.
+ */
+function combineLegacyAnySelectors (selectors) {
+  const legacyFunctions = [':-moz-any(', ':-webkit-any(', ':matches('];
+  const groups = new Map();
+  const entries = selectors.map((selector) => {
+    let canonical = selector;
+    const variants = new Set();
+    for (const functionCall of legacyFunctions) {
+      let position = findNextFunctionCallOutsideStrings(canonical, functionCall, 0);
+      while (position !== -1) {
+        variants.add(functionCall);
+        canonical = canonical.slice(0, position) + ':is(' + canonical.slice(position + functionCall.length);
+        position = findNextFunctionCallOutsideStrings(canonical, functionCall, position + 4);
+      }
+    }
+    let group = groups.get(canonical);
+    if (!group) {
+      group = new Set();
+      groups.set(canonical, group);
+    }
+    const variant = variants.size === 1 ? [...variants][0] : null;
+    if (variant) {
+      group.add(variant);
+    }
+    return { selector, canonical, variant };
+  });
+  return [...new Set(entries.map((entry) => {
+    return entry.variant && groups.get(entry.canonical).size > 1 ? entry.canonical : entry.selector;
+  }))];
+}
+
 export {
+  combineLegacyAnySelectors,
+  containsPseudoElement,
   findNextFunctionCallOutsideStrings,
   flattenNestingParentIsSelector,
+  isUniversallyRecognizableSelector,
   mergeAdjacentWherePseudoClasses,
   processIsSelector
 };

package/src/rules/stringify.js

@@ -3,8 +3,15 @@
  */
 
 import { processDeclarations } from '../declarations/process.js';
-import { splitTopLevelCommaList } from '../parser/source-search.js';
+import {
+  skipParenthesizedGroup,
+  skipQuotedString,
+  splitTopLevelCommaList,
+  startsUrlToken
+} from '../parser/source-search.js';
+import { tokenizeCssValue } from '../parser/tokenizer.js';
 import { minifyValueForOutput } from '../value/minify.js';
+import { elideRedundantSeparators } from '../value/tokens.js';
 
 import {
   collapseCustomPropertyWhitespace,
@@ -24,6 +31,7 @@ import {
 } from './normalize.js';
 import { resolvePropertyDescriptors } from './property.js';
 import {
+  combineLegacyAnySelectors,
   flattenNestingParentIsSelector,
   mergeAdjacentWherePseudoClasses,
   processIsSelector
@@ -110,6 +118,67 @@ function minifyFunctionPrelude (prelude) {
   return functionName + '(' + minifiedParameters.join(',') + ')';
 }
 
+/**
+ * Removes comments between namespace tokens while leaving strings, URLs, and
+ * escaped characters intact.
+ *
+ * @param  {string} prelude  The namespace prelude as written.
+ * @return {string}          The prelude with comments replaced by separators.
+ */
+function removeNamespaceComments (prelude) {
+  let result = '';
+  let index = 0;
+  while (index < prelude.length) {
+    if (prelude.startsWith('/*', index)) {
+      const closingIndex = prelude.indexOf('*/', index + 2);
+      index = closingIndex === -1 ? prelude.length : closingIndex + 2;
+      result += ' ';
+      continue;
+    }
+    let end = index + 1;
+    if (prelude[index] === '"' || prelude[index] === '\'') {
+      end = skipQuotedString(prelude, index);
+    } else if (prelude[index] === '\\') {
+      end = Math.min(index + 2, prelude.length);
+    } else if (startsUrlToken(prelude, index)) {
+      end = skipParenthesizedGroup(prelude, index + 3);
+    }
+    result += prelude.slice(index, end);
+    index = end;
+  }
+  return result;
+}
+
+/**
+ * Unwraps quoted namespace URLs and removes token separators without changing
+ * whitespace or escapes inside the namespace name's string.
+ *
+ * @param  {string} prelude  The optional namespace prefix and its URL.
+ * @return {string}          The minified namespace statement.
+ */
+function stringifyNamespace (prelude) {
+  const tokens = tokenizeCssValue(removeNamespaceComments(prelude)).filter((token) => {
+    return token.type !== 'whitespace';
+  });
+  const parts = ['@namespace'];
+  for (let index = 0; index < tokens.length; index++) {
+    const token = tokens[index];
+    const isQuotedUrl = (
+      token.type === 'function' &&
+      token.text.toLowerCase() === 'url(' &&
+      tokens[index + 1]?.type === 'string' &&
+      tokens[index + 2]?.text === ')'
+    );
+    if (isQuotedUrl) {
+      parts.push(tokens[index + 1].text);
+      index += 2;
+    } else {
+      parts.push(token.text);
+    }
+  }
+  return elideRedundantSeparators(parts.join(' ')) + ';';
+}
+
 /**
  * Stringifies a generic `at-rule` AST node into minified CSS, with specialized
  * prelude minification for `@function` rules and generic whitespace handling
@@ -257,6 +326,7 @@ function stringifyRule (rule, context) {
         minified = minifyLanguageSelector(minified);
         return minified;
       });
+      uniqueSelectors = combineLegacyAnySelectors(uniqueSelectors);
       // 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.
@@ -464,6 +534,10 @@ function stringifyRule (rule, context) {
     return '@charset ' + rule.charset + ';';
   }
 
+  if (rule.type === 'namespace') {
+    return stringifyNamespace(rule.namespace);
+  }
+
   if (rule.type === 'import') {
     let importStatement = rule.import;
     // Unwrap url() with a quoted string to just the quoted string

package/src/rules/validate.js

@@ -0,0 +1,145 @@
+/**
+ * @file Rejects malformed selector syntax before rules can be merged.
+ */
+
+import {
+  findMatchingBracket,
+  findMatchingParenthesis,
+  splitTopLevelCommaList
+} from '../parser/source-search.js';
+import { tokenizeCssValue } from '../parser/tokenizer.js';
+
+/**
+ * Reads an attribute name, optional matcher, value, and case flag.
+ *
+ * @param  {string}  attribute  The contents of the brackets.
+ * @return {boolean}            Whether the attribute has a valid token sequence.
+ */
+function isValidAttribute (attribute) {
+  const tokens = tokenizeCssValue(attribute).filter((token) => {
+    return token.type !== 'whitespace';
+  });
+  let index = 0;
+  if ((tokens[0]?.type === 'ident' || tokens[0]?.text === '*') && tokens[1]?.text === '|') {
+    index = 2;
+  } else if (tokens[0]?.text === '|') {
+    index = 1;
+  }
+  if (tokens[index]?.type !== 'ident') {
+    return false;
+  }
+  index++;
+  if (index === tokens.length) {
+    return true;
+  }
+  if (['~', '|', '^', '$', '*'].includes(tokens[index]?.text)) {
+    index++;
+  }
+  if (tokens[index]?.text !== '=') {
+    return false;
+  }
+  index++;
+  if (tokens[index]?.type !== 'ident' && tokens[index]?.type !== 'string') {
+    return false;
+  }
+  index++;
+  if (tokens[index]?.type === 'ident' && ['i', 's'].includes(tokens[index].text.toLowerCase())) {
+    index++;
+  }
+  return index === tokens.length;
+}
+
+/**
+ * Checks that each language range is a single identifier or quoted string.
+ *
+ * @param  {string}  argumentsText  The language function's contents.
+ * @return {boolean}                Whether every argument has valid syntax.
+ */
+function isValidLanguageList (argumentsText) {
+  const argumentsList = splitTopLevelCommaList(argumentsText);
+  return argumentsList.length > 0 && argumentsList.every((argument) => {
+    const tokens = tokenizeCssValue(argument.trim());
+    return tokens.length === 1 && (tokens[0].type === 'ident' || tokens[0].type === 'string');
+  });
+}
+
+/**
+ * Detects invalid tokens without interpreting data inside strings, escapes,
+ * or forgiving selector lists as syntax of the surrounding selector.
+ *
+ * @param  {string}  selector  A single selector.
+ * @return {boolean}           Whether its checked syntax is valid.
+ */
+function isValidSelector (selector) {
+  const tokens = tokenizeCssValue(selector);
+  let offset = 0;
+  for (let index = 0; index < tokens.length; index++) {
+    const token = tokens[index];
+    if (token.text === '[' || token.type === 'function') {
+      const isAttribute = token.text === '[';
+      const openingIndex = isAttribute ? offset : offset + token.text.length - 1;
+      const closingIndex = isAttribute ?
+        findMatchingBracket(selector, openingIndex) :
+        findMatchingParenthesis(selector, openingIndex);
+      if (closingIndex === -1) {
+        return false;
+      }
+      const inner = selector.slice(openingIndex + 1, closingIndex);
+      const functionName = token.text.slice(0, -1).toLowerCase();
+      if (isAttribute && !isValidAttribute(inner)) {
+        return false;
+      }
+      if (functionName === 'lang' && !isValidLanguageList(inner)) {
+        return false;
+      }
+      if (functionName === 'not' || functionName === 'has') {
+        if (!splitTopLevelCommaList(inner).every(isValidSelector)) {
+          return false;
+        }
+      }
+      while (offset < closingIndex) {
+        offset += tokens[index].text.length;
+        index++;
+      }
+      offset += tokens[index].text.length;
+      continue;
+    }
+    if (token.text === '|' && tokens[index + 1]?.text === '|') {
+      return false;
+    }
+    if (token.text === ':') {
+      let followingIndex = index + 1;
+      if (tokens[followingIndex]?.text === ':') {
+        followingIndex++;
+      }
+      const following = tokens[followingIndex];
+      if (following?.type !== 'ident' && following?.type !== 'function') {
+        return false;
+      }
+    }
+    offset += token.text.length;
+  }
+  return true;
+}
+
+/**
+ * Removes an entire unforgiving selector list if any branch is malformed.
+ *
+ * @param  {Array} rules  Stylesheet or nested body entries.
+ * @return {Array}        Entries that cannot poison a valid rule during merging.
+ */
+function removeInvalidSelectorRules (rules) {
+  return rules.filter((rule) => {
+    return !rule.selectors || rule.selectors.every(isValidSelector);
+  }).map((rule) => {
+    if (rule.rules) {
+      rule.rules = removeInvalidSelectorRules(rule.rules);
+    }
+    if (rule.declarations) {
+      rule.declarations = removeInvalidSelectorRules(rule.declarations);
+    }
+    return rule;
+  });
+}
+
+export { removeInvalidSelectorRules };

package/src/value/font.js

@@ -0,0 +1,111 @@
+/**
+ * @file Token-aware font shorthand minification.
+ */
+
+import { CSS_WIDE_KEYWORDS } from '../declarations/config.js';
+import { tokenizeCssValue } from '../parser/tokenizer.js';
+
+/**
+ * Keywords that would change a quoted family into a generic family.
+ *
+ * @type {Set<string>}
+ */
+const GENERIC_FAMILY_NAMES = new Set([
+  'serif', 'sans-serif', 'monospace', 'cursive', 'fantasy', 'system-ui',
+  'math', 'emoji', 'fangsong', 'ui-serif', 'ui-sans-serif', 'ui-monospace',
+  'ui-rounded'
+]);
+
+/**
+ * Removes family quotes only when their contents form ordinary identifiers.
+ *
+ * @param  {string} text  A family string token.
+ * @return {string}       The shortest safe spelling.
+ */
+function shortenFamilyString (text) {
+  const inner = text.slice(1, -1);
+  if (inner.includes('\\') || inner.trim() !== inner) {
+    return text;
+  }
+  const tokens = tokenizeCssValue(inner);
+  const isIdentifierList = tokens.length && tokens.every((token) => {
+    if (token.type === 'whitespace') {
+      return true;
+    }
+    const keyword = token.text.toLowerCase();
+    return token.type === 'ident' && !CSS_WIDE_KEYWORDS.has(keyword) && keyword !== 'default';
+  });
+  if (!isIdentifierList || GENERIC_FAMILY_NAMES.has(inner.toLowerCase())) {
+    return text;
+  }
+  return inner;
+}
+
+/**
+ * Locates a size before rewriting optional components. A substituted or
+ * calculated prefix is left intact because its component boundaries may not
+ * be knowable until the browser resolves it.
+ *
+ * @param  {Array}  tokens  The font tokens.
+ * @return {number}         The size index, or -1 if the prefix is ambiguous.
+ */
+function findFontSizeIndex (tokens) {
+  for (let index = 0; index < tokens.length; index++) {
+    const token = tokens[index];
+    if (token.type === 'function') {
+      return -1;
+    }
+    // An oblique font style may state an angle before the font size.
+    const isAngle = token.type === 'dimension' && /(?:deg|grad|rad|turn)$/i.test(token.text);
+    if (token.type === 'dimension' && !isAngle) {
+      return index;
+    }
+    // Match absolute and relative size keywords, not family-name substrings.
+    const isSizeKeyword = token.type === 'ident' &&
+      /^(?:xx-small|x-small|small|medium|large|x-large|xx-large|xxx-large|smaller|larger)$/i.test(token.text);
+    if (isSizeKeyword || token.type === 'percentage' || (token.type === 'number' && Number(token.text) === 0)) {
+      return index;
+    }
+  }
+  return -1;
+}
+
+/**
+ * Normalizes optional font components before the size, leaving the family and
+ * line height in their respective grammar positions.
+ *
+ * @param  {string} value  The font shorthand.
+ * @return {string}        The minified shorthand.
+ */
+function minifyFontShorthand (value) {
+  const tokens = tokenizeCssValue(value);
+  const sizeIndex = findFontSizeIndex(tokens);
+  if (sizeIndex === -1) {
+    return value;
+  }
+  return tokens.map((token, index) => {
+    if (index < sizeIndex) {
+      if (token.type === 'ident') {
+        const keyword = token.text.toLowerCase();
+        if (keyword === 'normal') {
+          return '';
+        }
+        if (keyword === 'bold') {
+          return '700';
+        }
+      } else if (token.type === 'number' && token.text === '400') {
+        return '';
+      }
+    }
+    if (index > sizeIndex && token.type === 'string') {
+      const family = shortenFamilyString(token.text);
+      if (family !== token.text && tokens[index - 1]?.type !== 'whitespace' && tokens[index - 1]?.text !== ',') {
+        return ' ' + family;
+      }
+      return family;
+    }
+    return token.text;
+  }).join('').trim();
+}
+
+export { minifyFontShorthand };

package/src/value/minify.js

@@ -22,6 +22,7 @@ import {
   rgbaToHex,
   shortestColor
 } from './colors.js';
+import { minifyFontShorthand } from './font.js';
 import { minifyGradients } from './gradients.js';
 import { simplifyEquivalentLightDarkFunctions } from './light-dark.js';
 import {
@@ -45,7 +46,10 @@ import {
   roundCompactNumber
 } from './shared.js';
 import { minifySvgDataUri } from './svg-data-uri.js';
-import { elideRedundantSeparators } from './tokens.js';
+import {
+  elideRedundantSeparators,
+  shortenDimensionNumbers
+} from './tokens.js';
 import { minifyTransformValue } from './transforms.js';
 import { optimizeUnicodeRange } from './unicode-range.js';
 
@@ -480,7 +484,7 @@ function normalizeWhitespaceAndQuotes (val, property) {
   });
 
   // Strip quotes from simple strings (like "Custom", "image.png"), but not for content where quoted strings are semantically distinct
-  if (property !== 'content' && property !== 'font-feature-settings' && property !== 'font-variation-settings') {
+  if (property !== 'content' && property !== 'font' && property !== 'font-feature-settings' && property !== 'font-variation-settings') {
     // Match a boundary (start, whitespace, comma, open-paren), then a quoted simple value (alphanumeric, dots, slashes, hyphens), then a boundary lookahead
     val = val.replace(/(^|\s|,|\()("|')([a-zA-Z0-9_./-]+)\2(?=\s|,|$|\)|!)/g, (match, before, quote, inner) => {
       // Keep quotes around CSS generic font-family keywords — unquoted they mean something different
@@ -988,6 +992,11 @@ const LENGTHY_INITIAL_KEYWORDS = new Map([
   ['background-clip', 'border-box'],
   ['background-origin', 'padding-box'],
   ['border-collapse', 'separate'],
+  ['border-color', 'currentcolor'],
+  ['border-top-color', 'currentcolor'],
+  ['border-right-color', 'currentcolor'],
+  ['border-bottom-color', 'currentcolor'],
+  ['border-left-color', 'currentcolor'],
   ['box-sizing', 'content-box'],
   ['mask-clip', 'border-box'],
   ['mask-origin', 'border-box'],
@@ -1115,7 +1124,7 @@ const BORDER_STYLE_KEYWORD_SOURCE = 'solid|dashed|dotted|double|groove|ridge|ins
  *
  * @type {string}
  */
-const BORDER_WIDTH_SOURCE = 'thin|medium|thick|[+-]?(?:\\d+|\\d*\\.\\d+)[a-z]*|(?:calc|min|max|clamp)\\([^()]*\\)';
+const BORDER_WIDTH_SOURCE = 'thin|medium|thick|[+-]?(?:\\d+|\\d*\\.\\d+)(?:e[+-]?\\d+)?[a-z]*|(?:calc|min|max|clamp)\\([^()]*\\)';
 
 /**
  * Matches a `border` value that states its line style in front of its line
@@ -1408,10 +1417,12 @@ function applyPropertyOptimizations (val, property, urlTokens) {
     return rgbaToHex(r, r, r, parseAlphaString(alphaStr));
   });
 
-  // Shorten all color tokens (second pass after property-specific color evaluations)
-  val = replaceOutsideStringsAndUrls(val, (segment) => {
-    return shortenColorValues(segment);
-  });
+  // Font families may contain color names, but never color values.
+  if (property !== 'font' && property !== 'font-family') {
+    val = replaceOutsideStringsAndUrls(val, (segment) => {
+      return shortenColorValues(segment);
+    });
+  }
 
   if (!PUNCTUATED_COMPONENT_PROPERTIES.has(property)) {
     // Restore space after close-paren when followed by an alphanumeric, hash, or hyphen
@@ -1420,17 +1431,7 @@ function applyPropertyOptimizations (val, property, urlTokens) {
   val = restoreSpaceBeforeMathOperators(val);
 
   if (property === 'font') {
-    // Split font shorthand on whitespace
-    const parts = val.split(/\s+/);
-    // Find the font-size part: contains a digit and a recognized CSS length/percentage unit
-    const sizeIndex = parts.findIndex((part) => {
-      return /\d/.test(part) && /(?:px|em|rem|%|pt|pc|vw|vh|vmin|vmax|ch|ex|cm|mm|in|lh|rlh)/i.test(part);
-    });
-    if (sizeIndex > 0) {
-      val = [...parts.slice(0, sizeIndex).filter((part) => {
-        return part !== 'normal' && part !== '400';
-      }), ...parts.slice(sizeIndex)].join(' ');
-    }
+    val = minifyFontShorthand(val);
   }
 
   if (property === 'background' && val !== 'none') {
@@ -1577,18 +1578,22 @@ function computeMinifiedValue (declaration) {
     // character budget a number is written within
     if (/^[+-]?(?:\d+|\d*\.\d+)([a-z%]+)?$/i.test(val)) {
       const [, rawNumber, rawUnit = ''] = val.match(/^([+-]?(?:\d+|\d*\.\d+))([a-z%]+)?$/i);
-      val = formatResolvedNumber(rawNumber) + rawUnit;
+      const scientificValue = isCustomProperty(declaration.property) ? val : shortenDimensionNumbers(val);
+      const roundedNumber = formatResolvedNumber(rawNumber);
+      const losesPrecision = Number(roundedNumber) !== Number(rawNumber);
+      // Preserve tiny dimensions whose significant digits would otherwise be
+      // rounded away before their shorter exponent form can be considered.
+      val = losesPrecision && scientificValue !== val ? scientificValue : roundedNumber + rawUnit;
     }
 
     val = lowercaseHexColors(val);
 
-    // Convert color functions to hex equivalents
-    val = convertColorsToHex(val);
-
-    // Shorten all color tokens (hex and named) to their shortest representation
-    val = replaceOutsideStringsAndUrls(val, (segment) => {
-      return shortenColorValues(segment);
-    });
+    if (declaration.property !== 'font' && declaration.property !== 'font-family') {
+      val = convertColorsToHex(val);
+      val = replaceOutsideStringsAndUrls(val, (segment) => {
+        return shortenColorValues(segment);
+      });
+    }
 
     // Collapse light-dark() when both normalized branches are identical
     val = simplifyEquivalentLightDarkFunctions(val);
@@ -1627,6 +1632,7 @@ function computeMinifiedValue (declaration) {
     !isCustomProperty(declaration.property)
   );
   if (elidesRedundantSeparators) {
+    val = shortenDimensionNumbers(val);
     // A property that punctuates its own components already had the whitespace
     // after its closing parentheses taken out, and only the separators its
     // grammar still needs put back, so those are the ones left alone here.

package/src/value/tokens.js

@@ -141,4 +141,41 @@ function elideRedundantSeparators (value, elidesAfterSelfEndingTokens = true) {
   }).join('');
 }
 
-export { elideRedundantSeparators };
+/**
+ * Shortens decimal dimension and percentage tokens without changing their
+ * digits. Unitless numbers stay untouched because integer grammars reject
+ * scientific notation.
+ *
+ * @param  {string} value  The CSS value.
+ * @return {string}        The value with shorter numeric spellings.
+ */
+function shortenDimensionNumbers (value) {
+  return tokenizeCssValue(value).map((token) => {
+    if (token.type !== 'dimension' && token.type !== 'percentage') {
+      return token.text;
+    }
+    // Capture a decimal coefficient and its unit, excluding existing exponents.
+    const match = token.text.match(/^([+-]?)(\d*\.\d+|\d+)([%a-z]+)$/i);
+    if (!match) {
+      return token.text;
+    }
+    const [, sign, coefficient, unit] = match;
+    const decimalIndex = coefficient.indexOf('.');
+    const fractionalDigits = decimalIndex === -1 ? 0 : coefficient.length - decimalIndex - 1;
+    const digits = coefficient.replace('.', '');
+    // Leading zeros carry no magnitude; trailing zeros move into the exponent.
+    const significantDigits = digits.replace(/^0+/, '').replace(/0+$/, '');
+    if (!significantDigits) {
+      return token.text;
+    }
+    const trailingZeros = digits.length - digits.replace(/0+$/, '').length;
+    const exponent = trailingZeros - fractionalDigits;
+    const scientific = sign + significantDigits + 'e' + exponent + unit;
+    return scientific.length < token.text.length ? scientific : token.text;
+  }).join('');
+}
+
+export {
+  elideRedundantSeparators,
+  shortenDimensionNumbers
+};