@thejaredwilcurt/csslop 0.0.33 → 0.0.35

package/README.md

@@ -182,6 +182,7 @@ These tools were prompted to pass the tests in the `/copiedTests` folder that ca
   * Unlike previous AI's that resulted in slower outcomes and failing tests, these changes took the real-world test from 7 hours down to 2. Still WAY too slow, but it's a massive improvement. And the AI is pointing to the 3rd-party CSS parser as the bottleneck now, which I don't know, probably true.
   * It only killed *a few* humans, how nice of it. Because I don't want it to run the multi-hour long test suite multiple times during it's efforts, I specifically told it not to run `npm run real`, which minifies ~125 real-world CSS files over ~7 hours. Threatening it with how running it will kill actual humans. **So instead it cleverly bypassed my instructions in order to kill actual humans.** It looked at the already minifed real-world CSS output files, and created it's own temporary script that used 25, instead of the full ~125 files. This is a less useful process because the files are already minifed and won't hit the same code paths of the library, but whatever, it does still execute some of the same code and it did result in 328% performance boost. I'll take it, gotta crack some eggs and all that (this is a metaphor for AI alignment bias resulting in death).
   * Refer to [v0.0.25](https://github.com/TheJaredWilcurt/csslop/releases/tag/v0.0.25) release notes for full Promp/result details.
+  * Follow up, It randomly decided to ignore my instructions about running real-world tests, and did *most*, but not *all* of them, to double-check it's work. See [v0.0.33](https://github.com/TheJaredWilcurt/csslop/releases/tag/v0.0.33) for another instance of clerverly circumventing my instructions in order to kill humans.
 
 
 ## The name

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/prestart.js",
@@ -27,16 +27,16 @@
   "devDependencies": {
     "@codemirror/autocomplete": "^6.20.3",
     "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/view": "^6.43.10",
+    "@codemirror/view": "^6.43.11",
     "@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.4",
+    "eslint-plugin-jsdoc": "^64.3.5",
     "fflate": "^0.8.3",
     "globals": "^17.12.0",
     "pretty-ms": "^9.3.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

@@ -42,14 +42,6 @@ function stringifyDeclarations (declarations) {
     .join(';');
 }
 
-/**
- * The heading element selectors, which collapse into the `:heading`
- * pseudo-class when a rule targets every one of them.
- *
- * @type {Set<string>}
- */
-const HEADING_SELECTORS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
-
 /**
  * Matches a complete `@layer` statement, which declares layer names without a
  * block and ends with the semicolon that separates it from the CSS that follows
@@ -270,18 +262,11 @@ 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)];
-      const isAllHeadings = (
-        rule.selectors.length === HEADING_SELECTORS.size &&
-        uniqueSelectors.length === HEADING_SELECTORS.size &&
-        uniqueSelectors.every((selector) => {
-          return HEADING_SELECTORS.has(selector);
-        })
-      );
-      if (isAllHeadings) {
-        uniqueSelectors = [':heading'];
-      }
       output.push(uniqueSelectors.join(','));
     }
     output.push('{');