@thejaredwilcurt/csslop 0.0.34 → 0.0.35

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/prestart.js",
@@ -31,7 +31,7 @@
     "@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",

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

@@ -1228,7 +1228,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 +1248,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 +1402,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 +1622,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(','));
     }