@thejaredwilcurt/csslop 0.0.38 → 0.0.40

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 {
@@ -562,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;
 }
 
 /**
@@ -662,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.
  *
@@ -724,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]++;
@@ -747,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') {
@@ -759,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') {
@@ -793,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;
@@ -824,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;
@@ -1278,6 +1351,74 @@ const MERGE_AT_LATER_RULE = 'later';
  */
 const MERGE_AT_EARLIER_RULE = 'earlier';
 
+/**
+ * Reports whether an entry of a rule's body is a declaration whose standing in
+ * the cascade can be read off the property it writes. Anything else a body may
+ * hold, such as a nested rule, is never shadowed by a declaration beside it.
+ *
+ * @param  {object}  entry  An entry of a rule's declaration list.
+ * @return {boolean}        True when the entry is a property declaration.
+ */
+function isPropertyDeclaration (entry) {
+  return entry.type === 'declaration' && Boolean(entry.property);
+}
+
+/**
+ * Finds which declaration decides each leaf property once a list of
+ * declarations is read as one rule's body. Within a rule, an important
+ * declaration beats a non-important one, and between two of equal weight the
+ * last one written wins.
+ *
+ * @param  {Array} declarations  The declarations of the combined rule, in the order they would be written.
+ * @return {Map}                 Map of leaf property name to the declaration that decides it.
+ */
+function findDecidingDeclarations (declarations) {
+  const decidingDeclarations = new Map();
+  const importantDeclarations = new Set();
+  for (const declaration of declarations) {
+    if (!isPropertyDeclaration(declaration)) {
+      continue;
+    }
+    const isImportant = isImportantDeclaration(declaration);
+    if (isImportant) {
+      importantDeclarations.add(declaration);
+    }
+    for (const leafProperty of expandToOverridableProperties(declaration.property)) {
+      const decidingDeclaration = decidingDeclarations.get(leafProperty);
+      const outranksIt = (
+        !decidingDeclaration ||
+        isImportant ||
+        !importantDeclarations.has(decidingDeclaration)
+      );
+      if (outranksIt) {
+        decidingDeclarations.set(leafProperty, declaration);
+      }
+    }
+  }
+  return decidingDeclarations;
+}
+
+/**
+ * Reports whether anything a rule brings to a merge still decides a property
+ * of the combined rule. A declaration that loses every property it writes to
+ * another declaration of the same rule is dropped from the merged rule, so
+ * where the merged rule sits cannot change how it reads.
+ *
+ * @param  {object}  rule                  The rule contributing the entries.
+ * @param  {Map}     decidingDeclarations  The deciding declaration of each leaf property of the merged rule.
+ * @return {boolean}                       True when the rule still decides something after the merge.
+ */
+function decidesAnythingAfterMerge (rule, decidingDeclarations) {
+  return (rule.declarations || []).some((entry) => {
+    if (!isPropertyDeclaration(entry)) {
+      return entry.type !== 'whitespace' && entry.type !== 'comment';
+    }
+    return [...expandToOverridableProperties(entry.property)].some((leafProperty) => {
+      return decidingDeclarations.get(leafProperty) === entry;
+    });
+  });
+}
+
 /**
  * Decides where two rules with the same selector can be combined. Merging them
  * always makes one set of declarations cross whatever separates the two rules,
@@ -1285,6 +1426,12 @@ const MERGE_AT_EARLIER_RULE = 'earlier';
  * the merged rule goes wherever the set that moved keeps its old standing.
  * Nothing separates adjacent rules, so those always merge.
  *
+ * The declarations one rule loses to the other are the exception: they are
+ * dropped from the merged rule, so the merged rule belongs wherever the
+ * declarations that outlive the merge already were, and nothing has to cross
+ * anything at all. That is what lets `.a{color:red!important}` swallow a later
+ * `.a{color:tan}` across a rule that also writes `color`.
+ *
  * @param  {object}      overrideIndex    The index of what each position writes to.
  * @param  {object}      earlierRule      The first of the two rules with this selector.
  * @param  {object}      laterRule        The second of the two rules with this selector.
@@ -1294,7 +1441,20 @@ const MERGE_AT_EARLIER_RULE = 'earlier';
  */
 function chooseMergePlacement (overrideIndex, earlierRule, laterRule, earlierPosition, laterPosition) {
   const rulesAreAdjacent = earlierPosition === laterPosition - 1;
-  if (rulesAreAdjacent || !overrideIndex.blocksRelocation(earlierRule, earlierPosition)) {
+  if (rulesAreAdjacent) {
+    return MERGE_AT_LATER_RULE;
+  }
+  const decidingDeclarations = findDecidingDeclarations([
+    ...(earlierRule.declarations || []),
+    ...(laterRule.declarations || [])
+  ]);
+  if (!decidesAnythingAfterMerge(laterRule, decidingDeclarations)) {
+    return MERGE_AT_EARLIER_RULE;
+  }
+  if (!decidesAnythingAfterMerge(earlierRule, decidingDeclarations)) {
+    return MERGE_AT_LATER_RULE;
+  }
+  if (!overrideIndex.blocksRelocation(earlierRule, earlierPosition)) {
     return MERGE_AT_LATER_RULE;
   }
   if (!overrideIndex.blocksRelocation(laterRule, earlierPosition)) {