@thejaredwilcurt/csslop 0.0.37 → 0.0.39

package/src/rules/optimize.js

@@ -6,6 +6,11 @@ import {
   expandToLeafProperties,
   getOverridesOf
 } from '../declarations/config.js';
+import {
+  findMatchingBracket,
+  findMatchingParenthesis,
+  splitTopLevelCommaList
+} from '../parser/source-search.js';
 import { escapeRegexString } from '../utilities.js';
 
 import {
@@ -13,13 +18,82 @@ import {
   normalizeMedia
 } from './normalize.js';
 
+/**
+ * Reports whether an entry of a rule's body is itself a nested rule rather
+ * than a plain declaration.
+ *
+ * @param  {object}  entry  An entry of a rule's declaration list.
+ * @return {boolean}        True when the entry is a nested rule.
+ */
+function isNestedRule (entry) {
+  return entry.type === 'rule';
+}
+
+/**
+ * Expands the rules nested inside each rule's body, so a chain of wrappers
+ * collapses from the inside out and the outermost wrapper is then judged
+ * against an already flattened child. A rule's body holds the same kinds of
+ * entries a stylesheet does, so the body is expanded by the same rules, and
+ * the plain declarations it also holds pass through untouched.
+ *
+ * @param  {Array} rules  The AST rule nodes whose bodies may hold nested rules.
+ * @return {Array}        The rules, each with its body expanded.
+ */
+function expandNestedRuleBodies (rules) {
+  return rules.map((rule) => {
+    if (rule.type !== 'rule' || !(rule.declarations || []).some(isNestedRule)) {
+      return rule;
+    }
+    return {
+      ...rule,
+      declarations: expandPureNestedRules(rule.declarations)
+    };
+  });
+}
+
+/**
+ * Reports whether a nested child selector still means the same thing once it
+ * is written out in full under its parent.
+ *
+ * @param  {string}  childSelector  The selector of a rule nested inside another.
+ * @return {boolean}                True when the child can be written as a flat selector.
+ */
+function canFlattenChildSelector (childSelector) {
+  const child = childSelector.trim();
+  if (!child) {
+    return false;
+  }
+  // A `&` anywhere but the very start puts the parent where flattening cannot:
+  // `.b &` means the parent follows the child rather than leading it
+  return !child.slice(1).includes('&');
+}
+
+/**
+ * Writes a nested child selector out in full, as the selector it stands for
+ * when read through its parent.
+ *
+ * @param  {string} parentSelector  The selector of the rule the child is nested in.
+ * @param  {string} childSelector   The selector of the nested child rule.
+ * @return {string}                 The flat selector the nested pair stands for.
+ */
+function combineNestedSelector (parentSelector, childSelector) {
+  const parent = parentSelector.trim();
+  const child = childSelector.trim();
+  // A leading `&` names the parent itself, so it is what the parent replaces
+  if (child.startsWith('&')) {
+    return parent + child.slice(1);
+  }
+  return parent + ' ' + child;
+}
+
 /**
  * Expands rules that contain only nested sub-rules into flat rules with combined selectors, enabling further merging when the combined selectors already exist elsewhere.
  *
- * @param  {Array} rules  The AST rule nodes to process.
- * @return {Array}        A new array of rules with pure-nested rules expanded.
+ * @param  {Array} inputRules  The AST rule nodes to process.
+ * @return {Array}             A new array of rules with pure-nested rules expanded.
  */
-function expandPureNestedRules (rules) {
+function expandPureNestedRules (inputRules) {
+  const rules = expandNestedRuleBodies(inputRules);
   const flatSelectors = new Set();
   for (const rule of rules) {
     if (rule.type !== 'rule' || !rule.selectors?.length) {
@@ -77,16 +151,14 @@ function expandPureNestedRules (rules) {
         canExpand = false;
         break;
       }
+      if (!nestedRule.selectors.every(canFlattenChildSelector)) {
+        canExpand = false;
+        break;
+      }
       const combinedSelectors = [];
       for (const parentSelector of rule.selectors) {
         for (const childSelector of nestedRule.selectors) {
-          const trimmedChild = childSelector.trim();
-          let combinedSelector;
-          if (trimmedChild.startsWith('&')) {
-            combinedSelector = trimmedChild.replace(/^&/, parentSelector.trim());
-          } else {
-            combinedSelector = parentSelector.trim() + ' ' + trimmedChild;
-          }
+          const combinedSelector = combineNestedSelector(parentSelector, childSelector);
           combinedSelectors.push(combinedSelector);
           if (flatSelectors.has(combinedSelector)) {
             anyMatch = true;
@@ -495,88 +567,187 @@ function deduplicateSelectors (selectors) {
 }
 
 /**
- * Merges consecutive rules whose declarations are a subset of the following rule, combining their selectors and splitting out any extra declarations.
+ * The rule body entries that style nothing themselves, and so have no say in
+ * whether one rule's body is carried by another's.
  *
- * @param  {Array} rules  The AST rule nodes to merge.
- * @return {Array}        A new array of rules with declaration-compatible consecutive rules combined.
+ * @type {Set<string>}
  */
-function mergeByDeclarations (rules) {
-  const result = [];
-  for (const rule of rules) {
-    if (rule.type !== 'rule' || !rule.selectors?.length) {
-      result.push(rule);
+const UNSTYLED_BODY_ENTRY_TYPES = new Set(['whitespace', 'comment']);
+
+/**
+ * Splits a rule body into the declarations it sets directly and the blocks
+ * nested inside it, leaving out the entries that style nothing.
+ *
+ * @param  {Array}  declarations  The rule body entries.
+ * @return {object}               The body's `plainDeclarations` and `nestedBlocks`.
+ */
+function partitionRuleBody (declarations) {
+  const plainDeclarations = [];
+  const nestedBlocks = [];
+  for (const entry of declarations || []) {
+    if (UNSTYLED_BODY_ENTRY_TYPES.has(entry.type)) {
       continue;
     }
-    const previousRule = result[result.length - 1];
-    if (previousRule && previousRule.type === 'rule' && previousRule.selectors?.length) {
-      const previousDeclarations = (previousRule.declarations || []).filter((declaration) => {
-        return declaration.type !== 'whitespace' && declaration.property;
-      });
-      const currentDeclarations = (rule.declarations || []).filter((declaration) => {
-        return declaration.type !== 'whitespace' && declaration.property;
-      });
-      if (previousDeclarations.length > 0 && currentDeclarations.length > 0) {
-        const currentDeclarationMap = new Map(
-          currentDeclarations.map((declaration) => {
-            return [declaration.property, (declaration.value || '').trim()];
-          })
-        );
-        const previousIsSubset = previousDeclarations.every((declaration) => {
-          return currentDeclarationMap.get(declaration.property) === (declaration.value || '').trim();
-        });
-        const currentHasAllProperty = currentDeclarations.some((declaration) => {
-          return declaration.property === 'all';
-        });
-        if (previousIsSubset && !currentHasAllProperty) {
-          const commonProperties = new Set(
-            previousDeclarations.map((declaration) => {
-              return declaration.property;
-            })
-          );
-          const currentOnlyDeclarations = currentDeclarations.filter((declaration) => {
-            return !commonProperties.has(declaration.property);
-          });
-          result.pop();
-          const combinedSelectors = deduplicateSelectors([...previousRule.selectors, ...rule.selectors]);
-          result.push({ ...previousRule, selectors: combinedSelectors });
-          if (currentOnlyDeclarations.length > 0) {
-            result.push({ ...rule, declarations: currentOnlyDeclarations });
-          }
-          continue;
-        }
-      }
+    if (entry.property) {
+      plainDeclarations.push(entry);
+    } else {
+      nestedBlocks.push(entry);
     }
-    result.push(rule);
   }
-  return result;
+  return {
+    nestedBlocks,
+    plainDeclarations
+  };
 }
 
 /**
- * Splits a selector list on top-level commas, respecting parentheses and
- * brackets so commas inside `:is(...)` or `[attr="a,b"]` are not split.
+ * Describes a block nested inside a rule precisely enough to tell whether two
+ * rules nest the very same thing. Only plain nested rules can be described: an
+ * at-rule nested in a rule carries a prelude that decides when its body applies,
+ * so it is reported as indescribable rather than guessed at.
  *
- * @param  {string} selectorList  The selector list string.
- * @return {Array}                The individual selector strings.
+ * @param  {object}      block  A block nested inside a rule body.
+ * @return {string|null}        The signature, or null when the block cannot be described.
  */
-function splitSelectorListTopLevel (selectorList) {
-  const selectors = [];
-  let current = '';
-  let depth = 0;
-  for (const character of selectorList) {
-    if (character === '(' || character === '[') {
-      depth++;
-    } else if (character === ')' || character === ']') {
-      depth--;
-    }
-    if (character === ',' && depth === 0) {
-      selectors.push(current.trim());
-      current = '';
-    } else {
-      current += character;
+function nestedBlockSignature (block) {
+  if (block.type !== 'rule' || !block.selectors?.length) {
+    return null;
+  }
+  const {
+    nestedBlocks,
+    plainDeclarations
+  } = partitionRuleBody(block.declarations);
+  const declarationParts = plainDeclarations.map((declaration) => {
+    return declaration.property + ':' + (declaration.value || '').trim();
+  });
+  const nestedParts = nestedBlocksSignature(nestedBlocks);
+  if (nestedParts === null) {
+    return null;
+  }
+  const selectors = block.selectors.map(normalizeSelector).join(',');
+  return selectors + '{' + declarationParts.join(';') + nestedParts + '}';
+}
+
+/**
+ * Describes every block nested in a rule body as one comparable string, in the
+ * order the blocks are written, since that order decides which of them wins a
+ * conflict.
+ *
+ * @param  {Array}       nestedBlocks  The blocks nested in a rule body.
+ * @return {string|null}               The combined signature, or null when any block cannot be described.
+ */
+function nestedBlocksSignature (nestedBlocks) {
+  let combined = '';
+  for (const block of nestedBlocks) {
+    const signature = nestedBlockSignature(block);
+    if (signature === null) {
+      return null;
+    }
+    combined += signature;
+  }
+  return combined;
+}
+
+/**
+ * Reports whether a rule that nests blocks may take on further selectors. A
+ * nested selector resolves against its parent's whole selector list as `:is()`,
+ * which matches with the specificity of the strongest selector in that list, so
+ * the list may only grow while every selector in it weighs the same.
+ *
+ * @param  {Array}   selectors  The selector list the merged rule would carry.
+ * @return {boolean}            Whether the nested blocks keep their current weight.
+ */
+function selectorsShareSpecificity (selectors) {
+  const strongest = maximumRuleSpecificity(selectors);
+  const weakest = minimumRuleSpecificity(selectors);
+  return compareSpecificity(strongest, weakest) === 0;
+}
+
+/**
+ * Combines an earlier rule with the rule that follows it when everything the
+ * earlier one styles is restated by the later one, so the earlier selector can
+ * simply join the later rule's shared part and the remainder stays behind in a
+ * rule of its own.
+ *
+ * Both rules have to nest the same blocks. A block nested in only one of them
+ * would either be lost or start matching the other rule's selector, neither of
+ * which the two rules said.
+ *
+ * @param  {object}     previousRule  The rule immediately in front of `rule`.
+ * @param  {object}     rule          The rule being folded into its predecessor.
+ * @return {Array|null}               The rules that replace the pair, or null when they cannot be combined.
+ */
+function mergeRuleIntoPredecessor (previousRule, rule) {
+  const isMergeableRulePair = (
+    previousRule?.type === 'rule' &&
+    previousRule.selectors?.length &&
+    rule.type === 'rule' &&
+    rule.selectors?.length
+  );
+  if (!isMergeableRulePair) {
+    return null;
+  }
+  const previousBody = partitionRuleBody(previousRule.declarations);
+  const currentBody = partitionRuleBody(rule.declarations);
+  if (!previousBody.plainDeclarations.length || !currentBody.plainDeclarations.length) {
+    return null;
+  }
+  const previousNesting = nestedBlocksSignature(previousBody.nestedBlocks);
+  const currentNesting = nestedBlocksSignature(currentBody.nestedBlocks);
+  if (previousNesting === null || previousNesting !== currentNesting) {
+    return null;
+  }
+  const currentValueByProperty = new Map(
+    currentBody.plainDeclarations.map((declaration) => {
+      return [declaration.property, (declaration.value || '').trim()];
+    })
+  );
+  const previousIsRestated = previousBody.plainDeclarations.every((declaration) => {
+    return currentValueByProperty.get(declaration.property) === (declaration.value || '').trim();
+  });
+  // `all` rewrites every other property, so the later rule restating a value is
+  // no promise that it applies the same way once `all` has run.
+  const currentResetsEverything = currentValueByProperty.has('all');
+  if (!previousIsRestated || currentResetsEverything) {
+    return null;
+  }
+  const combinedSelectors = deduplicateSelectors([...previousRule.selectors, ...rule.selectors]);
+  if (previousBody.nestedBlocks.length && !selectorsShareSpecificity(combinedSelectors)) {
+    return null;
+  }
+  const restatedProperties = new Set(
+    previousBody.plainDeclarations.map((declaration) => {
+      return declaration.property;
+    })
+  );
+  const remainingDeclarations = currentBody.plainDeclarations.filter((declaration) => {
+    return !restatedProperties.has(declaration.property);
+  });
+  const merged = [{ ...previousRule, selectors: combinedSelectors }];
+  if (remainingDeclarations.length) {
+    merged.push({ ...rule, declarations: remainingDeclarations });
+  }
+  return merged;
+}
+
+/**
+ * Merges consecutive rules whose declarations are a subset of the following rule, combining their selectors and splitting out any extra declarations.
+ *
+ * @param  {Array} rules  The AST rule nodes to merge.
+ * @return {Array}        A new array of rules with declaration-compatible consecutive rules combined.
+ */
+function mergeByDeclarations (rules) {
+  const result = [];
+  for (const rule of rules) {
+    const merged = mergeRuleIntoPredecessor(result[result.length - 1], rule);
+    if (merged) {
+      result.pop();
+      result.push(...merged);
+      continue;
     }
+    result.push(rule);
   }
-  selectors.push(current.trim());
-  return selectors;
+  return result;
 }
 
 /**
@@ -595,28 +766,6 @@ function skipSelectorName (text, start) {
   return index;
 }
 
-/**
- * Finds the index of the closing parenthesis matching the one at openIndex.
- *
- * @param  {string} text       The text to scan.
- * @param  {number} openIndex  Index of the opening parenthesis.
- * @return {number}            Index of the matching close parenthesis, or text length.
- */
-function findMatchingParenthesisIndex (text, openIndex) {
-  let depth = 0;
-  for (let index = openIndex; index < text.length; index++) {
-    if (text[index] === '(') {
-      depth++;
-    } else if (text[index] === ')') {
-      depth--;
-      if (depth === 0) {
-        return index;
-      }
-    }
-  }
-  return text.length;
-}
-
 /**
  * Compares two specificity tuples [ids, classes, types] lexicographically.
  *
@@ -657,20 +806,9 @@ function computeSpecificity (selector) {
       index = skipSelectorName(text, index + 1);
     } else if (character === '[') {
       specificity[1]++;
-      // Advance to just past the matching closing bracket
-      let bracketDepth = 0;
-      while (index < text.length) {
-        if (text[index] === '[') {
-          bracketDepth++;
-        } else if (text[index] === ']') {
-          bracketDepth--;
-          if (bracketDepth === 0) {
-            index++;
-            break;
-          }
-        }
-        index++;
-      }
+      // An attribute selector that never closes runs to the end of the selector
+      const closeBracketIndex = findMatchingBracket(text, index);
+      index = closeBracketIndex === -1 ? text.length : closeBracketIndex + 1;
     } else if (character === ':') {
       if (text[index + 1] === ':') {
         specificity[2]++;
@@ -680,8 +818,10 @@ function computeSpecificity (selector) {
         const nameEnd = skipSelectorName(text, nameStart);
         const name = text.slice(nameStart, nameEnd).toLowerCase();
         if (text[nameEnd] === '(') {
-          const closeIndex = findMatchingParenthesisIndex(text, nameEnd);
-          const inner = text.slice(nameEnd + 1, closeIndex);
+          // An argument list that never closes runs to the end of the selector
+          const closeIndex = findMatchingParenthesis(text, nameEnd);
+          const argumentsEnd = closeIndex === -1 ? text.length : closeIndex;
+          const inner = text.slice(nameEnd + 1, argumentsEnd);
           if (name === 'where') {
             // :where() contributes zero specificity
           } else if (name === 'is' || name === 'not' || name === 'has' || name === 'matches') {
@@ -692,7 +832,7 @@ function computeSpecificity (selector) {
           } else {
             specificity[1]++;
           }
-          index = closeIndex + 1;
+          index = argumentsEnd + 1;
         } else {
           // Legacy single-colon pseudo-elements count as pseudo-elements
           if (name === 'before' || name === 'after' || name === 'first-line' || name === 'first-letter') {
@@ -726,7 +866,7 @@ function computeSpecificity (selector) {
  */
 function maxSelectorSpecificity (selectorList) {
   let maximum = [0, 0, 0];
-  for (const selector of splitSelectorListTopLevel(selectorList)) {
+  for (const selector of splitTopLevelCommaList(selectorList)) {
     const specificity = computeSpecificity(selector);
     if (compareSpecificity(specificity, maximum) > 0) {
       maximum = specificity;
@@ -757,7 +897,7 @@ function maximumRuleSpecificity (selectors) {
  */
 function minimumRuleSpecificity (selectors) {
   let minimum = null;
-  for (const selector of splitSelectorListTopLevel((selectors || []).join(','))) {
+  for (const selector of splitTopLevelCommaList((selectors || []).join(','))) {
     const specificity = computeSpecificity(selector);
     if (!minimum || compareSpecificity(specificity, minimum) < 0) {
       minimum = specificity;