@thejaredwilcurt/csslop 0.0.34 → 0.0.36

package/README.md

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/prestart.js",
@@ -31,12 +31,12 @@
     "@eslint/js": "^10.0.1",
     "@stylistic/eslint-plugin": "^5.10.0",
     "codemirror": "^6.0.2",
-    "eslint": "^10.9.1",
+    "eslint": "^10.10.0",
     "eslint-config-tjw-base": "^5.0.0",
     "eslint-config-tjw-import-x": "^1.0.1",
     "eslint-config-tjw-jsdoc": "^2.0.1",
     "eslint-plugin-import-x": "^4.17.0",
-    "eslint-plugin-jsdoc": "^64.3.5",
+    "eslint-plugin-jsdoc": "^64.3.6",
     "fflate": "^0.8.3",
     "globals": "^17.12.0",
     "pretty-ms": "^9.3.1",

package/src/declarations/config.js

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

package/src/index.js

@@ -36,6 +36,7 @@ import {
   mergeSelectorRules,
   nestFlatRules,
   removeEmptyRules,
+  removeFullyOverriddenSelectors,
   removeOverriddenMultiSelectorProperties
 } from './rules/optimize.js';
 import {
@@ -263,7 +264,8 @@ export const minifyCSS = function (input) {
 
     const mergedRules = mergeSelectorRules(ast.stylesheet.rules);
     const overrideCleanedRules = removeOverriddenMultiSelectorProperties(mergedRules);
-    const preCleanedRules = removeEmptyRules(overrideCleanedRules);
+    const selectorPrunedRules = removeFullyOverriddenSelectors(overrideCleanedRules);
+    const preCleanedRules = removeEmptyRules(selectorPrunedRules);
     const declarationMergedRules = mergeByDeclarations(preCleanedRules);
     const nestedRules = nestFlatRules(declarationMergedRules);
     const nonEmptyRules = removeEmptyRules(nestedRules);

package/src/rules/optimize.js

@@ -68,6 +68,15 @@ function expandPureNestedRules (rules) {
         canExpand = false;
         break;
       }
+      // A child written as a comma-separated selector list, such as `.b,.c`,
+      // repeats the parent in front of every item when expanded (`.a .b,.a .c`),
+      // while the nested form states the parent once. Expanding is always
+      // longer, and leaving the rule nested keeps one pass from expanding what
+      // the next pass would then keep, so the output stays idempotent.
+      if (nestedRule.selectors.length > 1) {
+        canExpand = false;
+        break;
+      }
       const combinedSelectors = [];
       for (const parentSelector of rule.selectors) {
         for (const childSelector of nestedRule.selectors) {
@@ -1228,7 +1237,7 @@ function chooseMergePlacement (overrideIndex, earlierRule, laterRule, earlierPos
 }
 
 /**
- * Merges rules with identical normalized selectors by combining their declarations, as long as `chooseMergePlacement` finds a spot for the combined rule that the cascade reads the same way. Non-rule entries (like `@media`) break the merge window.
+ * Merges rules with identical normalized selectors by combining their declarations, as long as `chooseMergePlacement` finds a spot for the combined rule that the cascade reads the same way. Non-rule entries that affect the cascade (like `@media`) break the merge window, while comments do not, since comments never influence how declarations apply.
  *
  * @param  {Array} rules  The AST rule nodes to merge.
  * @return {Array}        A new array of rules with same-selector rules combined.
@@ -1248,8 +1257,10 @@ function mergeSelectorRules (rules) {
     }
     if (rule.type !== 'rule') {
       slots.push(rule);
-      selectorMap.clear();
-      positionByRule.clear();
+      if (rule.type !== 'comment') {
+        selectorMap.clear();
+        positionByRule.clear();
+      }
       continue;
     }
     const selectorKey = buildSelectorKey(rule);
@@ -1400,6 +1411,161 @@ function isSelectorPropertyOverriddenLater (lastRuleIndexBySelector, startIndex,
   return lastRuleIndex !== undefined && lastRuleIndex > startIndex;
 }
 
+/**
+ * Determines whether a declaration carries a trailing `!important` flag.
+ *
+ * @param  {object}  declaration  The AST declaration node.
+ * @return {boolean}              True when the declaration is important.
+ */
+function isImportantDeclaration (declaration) {
+  // A trailing !important suffix on the raw declaration value
+  return /!\s*important\s*$/i.test(declaration.rawValue || declaration.value || '');
+}
+
+/**
+ * Indexes, for every normalized selector in the stylesheet, the last rule that
+ * covers each leaf property under it, where coverage follows the same "writes
+ * to" model as `expandToOverridableProperties` (a later `border` declaration
+ * on the same selector also overrides an earlier `border-color` on it), along
+ * with whether that covering declaration is important. A last-covering entry
+ * is consulted to answer "is every declaration this selector still gets from
+ * the rule at position X re-declared later".
+ *
+ * @param  {Array} rules  The flat list of AST rule nodes.
+ * @return {Map}          Map of normalized selector to a map of covered leaf property name to `{ ruleIndex, important }`.
+ */
+function indexFinalCoveringRuleBySelector (rules) {
+  const coverageBySelector = new Map();
+  rules.forEach((rule, ruleIndex) => {
+    if (rule.type !== 'rule' || !rule.selectors?.length) {
+      return;
+    }
+    const declarations = (rule.declarations || []).filter((declaration) => {
+      return declaration.type === 'declaration' && declaration.property;
+    });
+    if (!declarations.length) {
+      return;
+    }
+    for (const selector of rule.selectors) {
+      const normalizedSelector = normalizeSelector(selector);
+      let coverageByProperty = coverageBySelector.get(normalizedSelector);
+      if (!coverageByProperty) {
+        coverageByProperty = new Map();
+        coverageBySelector.set(normalizedSelector, coverageByProperty);
+      }
+      for (const declaration of declarations) {
+        const important = isImportantDeclaration(declaration);
+        for (const leafProperty of expandToOverridableProperties(declaration.property)) {
+          coverageByProperty.set(leafProperty, { important, ruleIndex });
+        }
+      }
+    }
+  });
+  return coverageBySelector;
+}
+
+/**
+ * Determines whether a later rule overrides every leaf property an earlier
+ * declaration writes to for the same selector, including via shorthand
+ * coverage, with an important earlier write requiring an important later
+ * write to beat it.
+ *
+ * @param  {Map}     coverageByProperty      The leaf property coverage index for the selector.
+ * @param  {object}  declaration             The earlier declaration to test.
+ * @param  {number}  ruleIndex               The position of the rule holding the declaration.
+ * @param  {boolean} declarationIsImportant  Whether the earlier write of this property is important.
+ * @return {boolean}                         True when the declaration is conclusively overridden later.
+ */
+function isDeclarationOverriddenLater (coverageByProperty, declaration, ruleIndex, declarationIsImportant) {
+  for (const leafProperty of expandToOverridableProperties(declaration.property)) {
+    const coverage = coverageByProperty.get(leafProperty);
+    if (!coverage || coverage.ruleIndex <= ruleIndex) {
+      return false;
+    }
+    // An important declaration outlives a later non-important one
+    if (declarationIsImportant && !coverage.important) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Removes a selector from a multi-selector rule's list when every declaration
+ * the rule would still give that selector is overridden by a later rule that
+ * contains the same selector. For example, if `h1,h2{color:red}` is followed
+ * by `h2{color:tan}`, the `h2` entry contributes nothing and can be dropped,
+ * leaving `h1{color:red}`. If the list empties out entirely, the rule is
+ * stripped of declarations so `removeEmptyRules` discards it.
+ *
+ * @param  {Array} rules  The flat list of AST rule nodes.
+ * @return {Array}        The rules with fully overridden selectors removed from their lists.
+ */
+function removeFullyOverriddenSelectors (rules) {
+  // Pruning a selector only ever shrinks lists: a covering entry that wins
+  // today is supplied by a later rule, and pruning earlier rules never moves
+  // coverage forward, so a single index built up front stays accurate.
+  const coverageBySelector = indexFinalCoveringRuleBySelector(rules);
+
+  for (let ruleIndex = 0; ruleIndex < rules.length; ruleIndex++) {
+    const rule = rules[ruleIndex];
+    if (rule.type !== 'rule' || !rule.selectors || rule.selectors.length < 2) {
+      continue;
+    }
+    const entries = rule.declarations || [];
+    // Removing a selector would also un-scope nested rules, which may depend
+    // on it, so only rules made purely of declarations qualify
+    const hasNestedContent = entries.some((entry) => {
+      return entry.type !== 'declaration' && entry.type !== 'whitespace' && entry.type !== 'comment';
+    });
+    if (hasNestedContent) {
+      continue;
+    }
+    const declarations = entries.filter((entry) => {
+      return entry.type === 'declaration' && entry.property;
+    });
+    if (!declarations.length) {
+      continue;
+    }
+    // Within a rule, any important declaration of a property makes the rule's
+    // write of that property important (a conservative stand-in for tracking
+    // which of several same-property declarations survives inside the rule)
+    const importantByProperty = new Map();
+    for (const declaration of declarations) {
+      if (isImportantDeclaration(declaration)) {
+        importantByProperty.set(declaration.property, true);
+      } else if (!importantByProperty.has(declaration.property)) {
+        importantByProperty.set(declaration.property, false);
+      }
+    }
+    const keptSelectors = rule.selectors.filter((selector) => {
+      const coverageByProperty = coverageBySelector.get(normalizeSelector(selector));
+      if (!coverageByProperty) {
+        return true;
+      }
+      // Keep the selector while at least one declaration is not conclusively
+      // overridden for it by a later rule
+      return declarations.some((declaration) => {
+        return !isDeclarationOverriddenLater(
+          coverageByProperty,
+          declaration,
+          ruleIndex,
+          importantByProperty.get(declaration.property)
+        );
+      });
+    });
+    if (keptSelectors.length !== rule.selectors.length) {
+      if (!keptSelectors.length) {
+        rule.declarations = entries.filter((entry) => {
+          return entry.type !== 'declaration';
+        });
+      }
+      rule.selectors = keptSelectors;
+    }
+  }
+  return rules;
+}
+
 /**
  * Removes properties from multi-selector rules when every selector in
  * the rule has that property overridden by a later rule. For example,
@@ -1465,5 +1631,6 @@ export {
   mergeSelectorRules,
   nestFlatRules,
   removeEmptyRules,
+  removeFullyOverriddenSelectors,
   removeOverriddenMultiSelectorProperties
 };

package/src/rules/selectors.js

@@ -30,9 +30,60 @@ function splitParametersByComma (parameterString) {
   return parameters;
 }
 
+/**
+ * Advances past a quoted string in a selector, honoring backslash escapes so a
+ * quoted close-quote does not end the skip early.
+ *
+ * @param  {string} text        The selector string being scanned.
+ * @param  {number} quoteIndex  The index of the opening quote character.
+ * @return {number}             The index right after the closing quote, or the end of the string if the quote never closes.
+ */
+function skipQuotedText (text, quoteIndex) {
+  const quote = text[quoteIndex];
+  let index = quoteIndex + 1;
+  while (index < text.length) {
+    if (text[index] === '\\') {
+      index++;
+    } else if (text[index] === quote) {
+      return index + 1;
+    }
+    index++;
+  }
+  return text.length;
+}
+
+/**
+ * Advances past an attribute selector `[...]` in a selector, skipping quoted
+ * values and escaped characters so brackets inside them are not miscounted.
+ *
+ * @param  {string} text       The selector string being scanned.
+ * @param  {number} openIndex  The index of the `[` that opens the attribute selector.
+ * @return {number}            The index right after the closing `]`, or the end of the string if it never closes.
+ */
+function skipAttributeSelector (text, openIndex) {
+  let index = openIndex + 1;
+  while (index < text.length) {
+    const character = text[index];
+    if (character === '"' || character === '\'') {
+      index = skipQuotedText(text, index);
+      continue;
+    }
+    if (character === '\\') {
+      index += 2;
+      continue;
+    }
+    if (character === ']') {
+      return index + 1;
+    }
+    index++;
+  }
+  return text.length;
+}
+
 /**
  * Finds the index of the closing parenthesis that matches the opening
- * parenthesis at the given position in the string.
+ * parenthesis at the given position in the string, skipping over quoted
+ * strings and attribute selectors so parentheses inside them are ignored.
  *
  * @param  {string} text       The string to search within.
  * @param  {number} openIndex  The index of the opening parenthesis.
@@ -40,15 +91,60 @@ function splitParametersByComma (parameterString) {
  */
 function findMatchingCloseParenthesis (text, openIndex) {
   let depth = 0;
-  for (let index = openIndex; index < text.length; index++) {
-    if (text[index] === '(') {
+  let index = openIndex;
+  while (index < text.length) {
+    const character = text[index];
+    if (character === '"' || character === '\'') {
+      index = skipQuotedText(text, index);
+      continue;
+    }
+    if (character === '[') {
+      index = skipAttributeSelector(text, index);
+      continue;
+    }
+    if (character === '(') {
       depth++;
-    } else if (text[index] === ')') {
+    } else if (character === ')') {
       depth--;
       if (depth === 0) {
         return index;
       }
     }
+    index++;
+  }
+  return -1;
+}
+
+/**
+ * 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.
+ *
+ * @param  {string} text          The selector string to scan.
+ * @param  {string} functionCall  The 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.
+ */
+function findNextFunctionCallOutsideStrings (text, functionCall, start) {
+  let index = start;
+  while (index < text.length) {
+    const character = text[index];
+    if (character === '"' || character === '\'') {
+      index = skipQuotedText(text, index);
+      continue;
+    }
+    if (character === '[') {
+      index = skipAttributeSelector(text, index);
+      continue;
+    }
+    if (character === '\\') {
+      index += 2;
+      continue;
+    }
+    if (text.startsWith(functionCall, index)) {
+      return index;
+    }
+    index++;
   }
   return -1;
 }
@@ -174,42 +270,445 @@ function mergeAdjacentWherePseudoClasses (selector) {
 }
 
 /**
- * Matches a compound selector built exclusively from long-established simple
- * selectors: an optional type or universal selector, followed by any number of
- * id and class selectors. Anything else (pseudo-classes, pseudo-elements,
- * attribute matchers, combinators, descendant sequences) is excluded, because
- * those may be unrecognized by a browser and `:is()` forgiving parsing is what
- * keeps the remaining selectors in the rule alive.
+ * Pseudo-classes that every browser has recognized for many years. Wrapping
+ * one of these in `:is()` cannot protect a rule from a browser that would not
+ * know how to parse it, because every browser does. Keeping the list to
+ * long-established pseudo-classes means newer or vendor-specific ones continue
+ * to be treated as potentially unknown.
+ *
+ * @type {Set<string>}
+ */
+const WELL_KNOWN_PSEUDO_CLASSES = new Set([
+  'active',
+  'any-link',
+  'checked',
+  'default',
+  'dir',
+  'disabled',
+  'empty',
+  'enabled',
+  'first-child',
+  'first-of-type',
+  'focus',
+  'focus-visible',
+  'focus-within',
+  'fullscreen',
+  'hover',
+  'in-range',
+  'indeterminate',
+  'invalid',
+  'lang',
+  'last-child',
+  'last-of-type',
+  'link',
+  'not',
+  'nth-child',
+  'nth-last-child',
+  'nth-last-of-type',
+  'nth-of-type',
+  'only-child',
+  'only-of-type',
+  'optional',
+  'out-of-range',
+  'placeholder-shown',
+  'read-only',
+  'read-write',
+  'required',
+  'root',
+  'scope',
+  'target',
+  'valid',
+  'visited'
+]);
+
+/**
+ * The legacy pseudo-elements that browsers accept with a single colon. They
+ * are tracked because pseudo-elements inside `:is()` never match (the spec
+ * forbids them), so unwrapping such an `:is()` would resurrect a dead rule.
+ *
+ * @type {Set<string>}
+ */
+const LEGACY_PSEUDO_ELEMENT_NAMES = new Set([
+  'after',
+  'before',
+  'first-letter',
+  'first-line'
+]);
+
+/**
+ * Functional pseudo-classes whose argument is a selector list, such as
+ * `:not(.a)`. Their specificity comes from their argument rather than the
+ * pseudo-class itself, so a simple token count cannot describe them.
+ *
+ * @type {Set<string>}
+ */
+const SELECTOR_ARGUMENT_PSEUDO_CLASSES = new Set([
+  'is',
+  'where',
+  'has',
+  'not',
+  'matches',
+  '-webkit-any',
+  '-moz-any'
+]);
+
+/**
+ * Matches a single character allowed inside a selector identifier (letters,
+ * digits, hyphens, underscores).
  *
  * @type {RegExp}
  */
-const BROWSER_SAFE_COMPOUND_SELECTOR = /^(?:\*|[a-zA-Z][a-zA-Z0-9_-]*)?(?:[#.][a-zA-Z_-][a-zA-Z0-9_-]*)*$/;
+const IDENTIFIER_CHARACTER = /[a-zA-Z0-9_-]/;
 
 /**
- * Matches every id or class selector within a compound selector, used to count
- * each one's specificity contribution.
+ * Matches a single ASCII letter, which is how a type selector name begins.
  *
  * @type {RegExp}
  */
-const ID_OR_CLASS_SELECTOR = /[#.][a-zA-Z_-][a-zA-Z0-9_-]*/g;
+const TYPE_SELECTOR_START = /[a-zA-Z]/;
+
+/**
+ * Matches a single character that may start a pseudo-class or pseudo-element
+ * name (a letter, or a hyphen for vendor-prefixed names).
+ *
+ * @type {RegExp}
+ */
+const PSEUDO_NAME_CHARACTER = /[a-zA-Z-]/;
+
+/**
+ * Reads a pseudo-class or pseudo-element name starting at the given index and
+ * returns the index right after the final name character.
+ *
+ * @param  {string} selector  The selector string being scanned.
+ * @param  {number} start     The index of the name's first character.
+ * @return {number}           The index immediately after the pseudo name.
+ */
+function readPseudoNameEnd (selector, start) {
+  let index = start;
+  while (index < selector.length && PSEUDO_NAME_CHARACTER.test(selector[index])) {
+    index++;
+  }
+  return index;
+}
+
+/**
+ * Result of scanning one compound selector: how many simple selectors of each
+ * specificity tier it holds and whether a browser could fail to recognize any
+ * of them.
+ *
+ * @typedef  {object}  CompoundSelectorSummary
+ * @property {number}  identifierCount          Number of id selectors.
+ * @property {number}  classLevelCount          Number of class, attribute, and pseudo-class selectors.
+ * @property {number}  typeLevelCount           Number of type selectors and pseudo-elements.
+ * @property {boolean} hasPseudoElement         True when a pseudo-element is present.
+ * @property {boolean} recognizable             True when every simple selector is universally recognized.
+ */
+
+/**
+ * Scans a compound selector (one without combinators) and summarizes its
+ * simple selectors for specificity comparison and recognizability checks.
+ * Returns null when the string is not a plain compound selector, since
+ * something else (a combinator, a stray character) was found inside.
+ *
+ * @param  {string}                       selector  The compound selector string to summarize.
+ * @return {CompoundSelectorSummary|null}           The summary, or null for non-compound input.
+ */
+function summarizeCompoundSelector (selector) {
+  if (!selector) {
+    return null;
+  }
+  const summary = {
+    identifierCount: 0,
+    classLevelCount: 0,
+    typeLevelCount: 0,
+    hasPseudoElement: false,
+    recognizable: true
+  };
+  let index = 0;
+  let tokenCount = 0;
+  while (index < selector.length) {
+    const character = selector[index];
+    if (tokenCount === 0 && (character === '*' || TYPE_SELECTOR_START.test(character))) {
+      // The first simple selector of a compound may be a type (`div`) or universal (`*`) selector
+      if (character !== '*') {
+        let end = index + 1;
+        while (end < selector.length && IDENTIFIER_CHARACTER.test(selector[end])) {
+          end++;
+        }
+        index = end;
+        summary.typeLevelCount++;
+      } else {
+        index++;
+      }
+      tokenCount++;
+      continue;
+    }
+    if (character === '#' || character === '.') {
+      // Id and class selectors are an identifier prefixed by '#' or '.'
+      const nameStart = index + 1;
+      if (nameStart >= selector.length || !IDENTIFIER_CHARACTER.test(selector[nameStart])) {
+        return null;
+      }
+      let end = nameStart + 1;
+      while (end < selector.length && IDENTIFIER_CHARACTER.test(selector[end])) {
+        end++;
+      }
+      index = end;
+      if (character === '#') {
+        summary.identifierCount++;
+      } else {
+        summary.classLevelCount++;
+      }
+    } else if (character === '[') {
+      // Attribute selector: well-formed input has a closing bracket
+      const closeBracketIndex = selector.indexOf(']', index + 1);
+      if (closeBracketIndex === -1) {
+        return null;
+      }
+      index = closeBracketIndex + 1;
+      summary.classLevelCount++;
+    } else if (character === ':') {
+      let nameStart = index + 1;
+      const isDoubleColon = selector[nameStart] === ':';
+      if (isDoubleColon) {
+        nameStart++;
+      }
+      const nameEnd = readPseudoNameEnd(selector, nameStart);
+      if (nameEnd === nameStart) {
+        return null;
+      }
+      const pseudoName = selector.slice(nameStart, nameEnd).toLowerCase();
+      index = nameEnd;
+      if (selector[index] === '(') {
+        // Functional pseudo-class: skip past its balanced argument parentheses
+        const closeParenthesisIndex = findMatchingCloseParenthesis(selector, index);
+        if (closeParenthesisIndex === -1) {
+          return null;
+        }
+        index = closeParenthesisIndex + 1;
+      }
+      if (isDoubleColon || LEGACY_PSEUDO_ELEMENT_NAMES.has(pseudoName)) {
+        summary.hasPseudoElement = true;
+        summary.recognizable = false;
+        summary.typeLevelCount++;
+      } else if (SELECTOR_ARGUMENT_PSEUDO_CLASSES.has(pseudoName)) {
+        // Selector-argument pseudo-classes take their specificity from their
+        // argument, so simple token counting cannot price them, and their
+        // argument may itself contain something unknown to older browsers.
+        summary.recognizable = false;
+        summary.classLevelCount++;
+      } else {
+        summary.classLevelCount++;
+        if (!WELL_KNOWN_PSEUDO_CLASSES.has(pseudoName)) {
+          summary.recognizable = false;
+        }
+      }
+    } else {
+      return null;
+    }
+    tokenCount++;
+  }
+  if (tokenCount === 0) {
+    return null;
+  }
+  return summary;
+}
+
+/**
+ * Splits a complex selector into the compound segments between its top-level
+ * combinators, treating anything inside parentheses or attribute brackets as
+ * part of the current segment.
+ *
+ * @param  {string} selector  The selector string to split.
+ * @return {Array}            The compound selector segments, combinators excluded.
+ */
+function splitCombinatorSegments (selector) {
+  const segments = [];
+  let currentSegment = '';
+  let depth = 0;
+  for (const character of selector) {
+    if (character === '(' || character === '[') {
+      depth++;
+    } else if (character === ')' || character === ']') {
+      depth--;
+    }
+    // A combinator at the top level ends the current compound segment;
+    // whitespace runs collapse into a single boundary
+    if (depth === 0 && (character === '>' || character === '+' || character === '~' || /\s/.test(character))) {
+      if (currentSegment) {
+        segments.push(currentSegment);
+        currentSegment = '';
+      }
+      continue;
+    }
+    currentSegment += character;
+  }
+  if (currentSegment) {
+    segments.push(currentSegment);
+  }
+  return segments;
+}
+
+/**
+ * Determines whether a selector is built entirely from simple selectors every
+ * browser recognizes. Combinators are fine; only the compound segments between
+ * them decide. Unknown pseudo-classes and pseudo-elements fail the check,
+ * because a browser that cannot parse a selector discards its whole rule,
+ * while `:is()` forgiving parsing would keep the rest of the rule alive.
+ *
+ * @param  {string}  selector  A minified CSS selector string.
+ * @return {boolean}           True when the selector is universally recognizable.
+ */
+function isUniversallyRecognizableSelector (selector) {
+  const segments = splitCombinatorSegments(selector);
+  if (!segments.length) {
+    return false;
+  }
+  return segments.every((segment) => {
+    const summary = summarizeCompoundSelector(segment);
+    return summary !== null && summary.recognizable && !summary.hasPseudoElement;
+  });
+}
+
+/**
+ * Determines whether a selector contains a pseudo-element anywhere (double
+ * colon, or a legacy single-colon pseudo-element name). Pseudo-elements are
+ * invalid inside `:is()`, so an `:is()` holding one never matches, and
+ * unwrapping it would wrongly bring the selector to life.
+ *
+ * @param  {string}  selector  The selector string to inspect.
+ * @return {boolean}           True when a pseudo-element token is present.
+ */
+function containsPseudoElement (selector) {
+  let index = 0;
+  while (index < selector.length) {
+    if (selector[index] !== ':') {
+      index++;
+      continue;
+    }
+    if (selector[index + 1] === ':') {
+      return true;
+    }
+    const nameEnd = readPseudoNameEnd(selector, index + 1);
+    const pseudoName = selector.slice(index + 1, nameEnd).toLowerCase();
+    if (LEGACY_PSEUDO_ELEMENT_NAMES.has(pseudoName)) {
+      return true;
+    }
+    index = nameEnd > index + 1 ? nameEnd : index + 1;
+  }
+  return false;
+}
+
+/**
+ * Determines whether a single selector contains a top-level combinator, which
+ * would make it a complex selector rather than a single compound selector.
+ *
+ * @param  {string}  selector  The selector string to inspect.
+ * @return {boolean}           True when a top-level combinator is present.
+ */
+function hasTopLevelCombinator (selector) {
+  let depth = 0;
+  for (const character of selector) {
+    if (character === '(' || character === '[') {
+      depth++;
+    } else if (character === ')' || character === ']') {
+      depth--;
+    } else if (depth === 0 && (character === '>' || character === '+' || character === '~' || /\s/.test(character))) {
+      // A combinator or whitespace boundary at the top level joins two compounds
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * The characters that can start a simple selector mid-compound (id, class,
+ * attribute selector, pseudo-class) or the nesting selector. Type and
+ * universal selectors are excluded on purpose: they may only open a compound,
+ * so `div:is(a)` cannot flatten to `diva`.
+ *
+ * @type {Set<string>}
+ */
+const SIMPLE_SELECTOR_STARTS = new Set(['#', '.', '[', ':', '&']);
 
 /**
- * Computes the specificity of a compound selector known to consist only of
- * type, universal, id, and class selectors, as an "ids,classes,types" key.
+ * Determines whether a character sits between two selector parts, meaning an
+ * `:is()` next to it is its own compound (or its own item in an argument
+ * list) rather than fused with neighboring simple selectors.
  *
- * @param  {string} compoundSelector  A browser-safe compound selector.
- * @return {string}                   The specificity key for equality comparison.
+ * @param  {string}  character  The character to classify.
+ * @return {boolean}            True when the character is a selector part boundary.
  */
-function getSimpleCompoundSpecificityKey (compoundSelector) {
-  const idsAndClasses = compoundSelector.match(ID_OR_CLASS_SELECTOR) || [];
-  const identifierCount = idsAndClasses.filter((selector) => {
-    return selector.startsWith('#');
-  }).length;
-  const classCount = idsAndClasses.length - identifierCount;
-  // Whatever precedes the first id/class is the type or universal selector, if any
-  const typePortion = compoundSelector.split(/[#.]/)[0];
-  const typeCount = typePortion && typePortion !== '*' ? 1 : 0;
-  return identifierCount + ',' + classCount + ',' + typeCount;
+function isSelectorPartBoundary (character) {
+  // Combinators, whitespace, parentheses, and comma all delimit selector parts
+  return /\s/.test(character) || character === '>' || character === '+' || character === '~' || character === '(' || character === ')' || character === ',';
+}
+
+/**
+ * Unwraps every single-argument `:is()` found within a selector, since such an
+ * `:is()` adds neither specificity (a one-argument `:is()` takes its
+ * argument's) nor matching behavior of its own. The unwrap is refused when it
+ * could change what a browser applies: an `:is()` fused to neighboring
+ * compound parts cannot release a complex argument (`div:is(a b)` cannot
+ * become `div a b`), and an argument a browser might not recognize must stay
+ * inside `:is()` whenever sibling selectors rely on its forgiving parsing.
+ *
+ * @param  {string}  selector             A minified CSS selector string.
+ * @param  {boolean} hasSiblingSelectors  True when the rule's selector list holds other selectors besides this one.
+ * @return {string}                       The selector with redundant `:is()` wrappers removed.
+ */
+function unwrapSingleArgumentIsFunctions (selector, hasSiblingSelectors) {
+  let result = selector;
+  let position = 0;
+  while (position < result.length) {
+    const isIndex = findNextFunctionCallOutsideStrings(result, ':is(', position);
+    if (isIndex === -1) {
+      break;
+    }
+    const openParenthesisIndex = isIndex + 3;
+    const closeParenthesisIndex = findMatchingCloseParenthesis(result, openParenthesisIndex);
+    if (closeParenthesisIndex === -1) {
+      break;
+    }
+    const content = result.slice(openParenthesisIndex + 1, closeParenthesisIndex);
+    const innerSelector = content.trim();
+    const parts = splitParametersByComma(content);
+    if (parts.length !== 1 || !innerSelector) {
+      position = closeParenthesisIndex + 1;
+      continue;
+    }
+    const characterBefore = isIndex > 0 ? result[isIndex - 1] : '';
+    const characterAfter = closeParenthesisIndex + 1 < result.length ? result[closeParenthesisIndex + 1] : '';
+    const fusedOnLeft = characterBefore !== '' && !isSelectorPartBoundary(characterBefore);
+    const fusedOnRight = characterAfter !== '' && !isSelectorPartBoundary(characterAfter);
+    if ((fusedOnLeft || fusedOnRight) && hasTopLevelCombinator(innerSelector)) {
+      position = closeParenthesisIndex + 1;
+      continue;
+    }
+    // A compound selector's simple selectors must not fuse into one another:
+    // dropped `:is()` text must still start with something that can continue a
+    // compound (`div:is(.a)` → `div.a`) and end before something that can
+    // continue one (`:is(.a):hover` → `.a:hover`), or tokens merge wrongly
+    // (`div:is(a)` cannot become `diva`)
+    if (fusedOnLeft && !SIMPLE_SELECTOR_STARTS.has(innerSelector[0])) {
+      position = closeParenthesisIndex + 1;
+      continue;
+    }
+    if (fusedOnRight && !SIMPLE_SELECTOR_STARTS.has(characterAfter)) {
+      position = closeParenthesisIndex + 1;
+      continue;
+    }
+    const canUnwrap = hasSiblingSelectors ?
+      isUniversallyRecognizableSelector(innerSelector) :
+      !containsPseudoElement(innerSelector);
+    if (!canUnwrap) {
+      position = closeParenthesisIndex + 1;
+      continue;
+    }
+    result = result.slice(0, isIndex) + innerSelector + result.slice(closeParenthesisIndex + 1);
+    // Stay at isIndex so a nested :is() exposed by this unwrap is considered next
+  }
+  return result;
 }
 
 /**
@@ -226,32 +725,45 @@ function canDecomposeIsSelector (parts) {
   if (parts.length < 2) {
     return false;
   }
-  const allBrowserSafe = parts.every((part) => {
-    return part !== '' && BROWSER_SAFE_COMPOUND_SELECTOR.test(part);
-  });
-  if (!allBrowserSafe) {
-    return false;
+  const summaries = [];
+  for (const part of parts) {
+    const trimmedPart = part.trim();
+    if (!trimmedPart) {
+      return false;
+    }
+    const summary = summarizeCompoundSelector(trimmedPart);
+    if (!summary || !summary.recognizable || summary.hasPseudoElement) {
+      return false;
+    }
+    summaries.push(summary);
   }
-  const specificityKeys = parts.map((part) => {
-    return getSimpleCompoundSpecificityKey(part);
-  });
-  return specificityKeys.every((key) => {
-    return key === specificityKeys[0];
+  const firstSummary = summaries[0];
+  return summaries.every((summary) => {
+    return (
+      summary.identifierCount === firstSummary.identifierCount &&
+      summary.classLevelCount === firstSummary.classLevelCount &&
+      summary.typeLevelCount === firstSummary.typeLevelCount
+    );
   });
 }
 
 /**
- * Processes a bare `:is()` selector by merging `:link`+`:visited` into `:any-link`,
- * de-duplicating, sorting alphabetically, and decomposing into individual selectors
- * when the remaining parts are browser-safe and share one level of specificity.
+ * Processes a selector by unwrapping redundant single-argument `:is()`
+ * functions within it, then — for bare `:is()` selectors (where `:is()` is the
+ * entire selector) — merging `:link`+`:visited` into `:any-link`,
+ * de-duplicating, sorting alphabetically, and decomposing into individual
+ * selectors when the remaining parts are browser-safe and share one level of
+ * specificity.
  *
- * @param  {string} selector  A minified CSS selector string.
- * @return {Array}            An array of one or more processed selector strings.
+ * @param  {string}  selector             A minified CSS selector string.
+ * @param  {boolean} hasSiblingSelectors  True when the rule's selector list holds other selectors besides this one.
+ * @return {Array}                        An array of one or more processed selector strings.
  */
-function processIsSelector (selector) {
+function processIsSelector (selector, hasSiblingSelectors) {
   // Replace :is(:link,:visited) and :is(:visited,:link) with :any-link
   selector = selector.replace(/:is\(:link,:visited\)/g, ':any-link');
   selector = selector.replace(/:is\(:visited,:link\)/g, ':any-link');
+  selector = unwrapSingleArgumentIsFunctions(selector, hasSiblingSelectors);
   // Only process bare :is() selectors (where :is() is the entire selector)
   if (!selector.startsWith(':is(')) {
     return [selector];
@@ -307,7 +819,11 @@ function processIsSelector (selector) {
   parts.sort();
   // Unwrap :is() with a single selector
   if (parts.length === 1) {
-    return parts;
+    const onlyPart = parts[0].trim();
+    const canUnwrap = hasSiblingSelectors ?
+      isUniversallyRecognizableSelector(onlyPart) :
+      !containsPseudoElement(onlyPart);
+    return canUnwrap ? [onlyPart] : [':is(' + parts[0] + ')'];
   }
   // Drop the :is() wrapper when the parts are equivalent as a plain selector list
   if (canDecomposeIsSelector(parts)) {

package/src/rules/stringify.js

@@ -262,7 +262,10 @@ function stringifyRule (rule, context) {
       if (isNestingParent) {
         uniqueSelectors = uniqueSelectors.flatMap(flattenNestingParentIsSelector);
       }
-      uniqueSelectors = uniqueSelectors.flatMap(processIsSelector);
+      const hasSiblingSelectors = uniqueSelectors.length > 1;
+      uniqueSelectors = uniqueSelectors.flatMap((selector) => {
+        return processIsSelector(selector, hasSiblingSelectors);
+      });
       uniqueSelectors = [...new Set(uniqueSelectors)];
       output.push(uniqueSelectors.join(','));
     }

package/src/value/minify.js

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