@thejaredwilcurt/csslop 0.0.24 → 0.0.25

package/src/rules/optimize.js

@@ -103,6 +103,35 @@ function expandPureNestedRules (rules) {
   return result;
 }
 
+/**
+ * Builds a reusable matcher that expresses child selectors as nested selectors
+ * relative to one parent. The combinator pattern is compiled once per parent so
+ * that testing many children against the same parent does not rebuild it.
+ *
+ * @param  {string}                          parentSelector  The parent selector string.
+ * @return {function(string): (string|null)}                 A matcher returning the nested selector, or null when the child cannot be nested.
+ */
+function createNestedSelectorMatcher (parentSelector) {
+  const parent = parentSelector.trim();
+  // Match a child selector that starts with the parent followed by a combinator (>, +, ~)
+  const combinatorPattern = new RegExp('^' + escapeRegexString(parent) + '\\s*([>+~])\\s*(.+)$');
+
+  return (childSelector) => {
+    const child = childSelector.trim();
+    if (child.startsWith(parent + ':') || child.startsWith(parent + '::')) {
+      return '&' + child.slice(parent.length);
+    }
+    if (child.startsWith(parent + ' ')) {
+      return child.slice(parent.length + 1);
+    }
+    const combinatorMatch = child.match(combinatorPattern);
+    if (combinatorMatch) {
+      return combinatorMatch[1] + combinatorMatch[2];
+    }
+    return null;
+  };
+}
+
 /**
  * Attempts to express a child selector as a nested selector relative to a parent, returning the nested form or null if nesting is not possible.
  *
@@ -111,22 +140,7 @@ function expandPureNestedRules (rules) {
  * @return {string|null}            The nested selector using & syntax, or null if the child cannot be nested under the parent.
  */
 function tryNestSelector (parentSel, childSel) {
-  const parent = parentSel.trim();
-  const child = childSel.trim();
-  if (child.startsWith(parent + ':') || child.startsWith(parent + '::')) {
-    return '&' + child.slice(parent.length);
-  }
-  if (child.startsWith(parent + ' ')) {
-    return child.slice(parent.length + 1);
-  }
-  // Match child selector that starts with the parent followed by a combinator (>, +, ~)
-  const combinatorMatch = child.match(
-    new RegExp('^' + escapeRegexString(parent) + '\\s*([>+~])\\s*(.+)$')
-  );
-  if (combinatorMatch) {
-    return combinatorMatch[1] + combinatorMatch[2];
-  }
-  return null;
+  return createNestedSelectorMatcher(parentSel)(childSel);
 }
 
 /**
@@ -173,6 +187,87 @@ function removeEmptyRules (rules) {
   });
 }
 
+/**
+ * Determines whether a character is CSS whitespace.
+ *
+ * @param  {string}  character  A single character from a selector.
+ * @return {boolean}            Whether the character is whitespace.
+ */
+function isSelectorWhitespace (character) {
+  // Match a single whitespace character
+  return (/\s/).test(character);
+}
+
+/**
+ * Collects every prefix of a child selector that could act as its nesting
+ * parent. A parent always ends immediately before a pseudo-class colon, a
+ * descendant whitespace run, or the whitespace run leading into a combinator,
+ * so only those few positions can start a nestable remainder. Enumerating them
+ * turns "which earlier rule can host this one" into a set of key lookups
+ * instead of a comparison against every preceding rule.
+ *
+ * @param  {string} childSelector  The trimmed child selector.
+ * @return {Set}                   The candidate parent selector strings.
+ */
+function collectCandidateParentSelectors (childSelector) {
+  const candidates = new Set();
+  for (let index = 1; index < childSelector.length; index++) {
+    const character = childSelector[index];
+    if (character === ':' || isSelectorWhitespace(character)) {
+      candidates.add(childSelector.slice(0, index));
+      continue;
+    }
+    if (character !== '>' && character !== '+' && character !== '~') {
+      continue;
+    }
+    // A combinator may be separated from its parent by whitespace, which
+    // belongs to neither side, so the parent ends where that run begins.
+    let boundary = index;
+    while (boundary > 0 && isSelectorWhitespace(childSelector[boundary - 1])) {
+      boundary--;
+    }
+    if (boundary > 0) {
+      candidates.add(childSelector.slice(0, boundary));
+    }
+  }
+  return candidates;
+}
+
+/**
+ * Finds the most recently emitted rule that can host a child selector as a
+ * nested rule, matching the behaviour of scanning backwards through the emitted
+ * rules but only visiting the handful of rules whose selector is a viable
+ * parent prefix.
+ *
+ * @param  {Array}       emittedRules     The rules emitted so far.
+ * @param  {Map}         indexBySelector  Map of each emitted single-selector rule's selector to its index.
+ * @param  {string}      childSelector    The trimmed child selector to nest.
+ * @return {object|null}                  The `parentIndex` and `nestedSelector`, or null when nothing can host the child.
+ */
+function findNestingParent (emittedRules, indexBySelector, childSelector) {
+  const parentIndexes = [];
+  for (const candidateParent of collectCandidateParentSelectors(childSelector)) {
+    const parentIndex = indexBySelector.get(candidateParent);
+    if (parentIndex !== undefined) {
+      parentIndexes.push(parentIndex);
+    }
+  }
+  // The nearest preceding parent wins, exactly as a backwards scan would.
+  parentIndexes.sort((first, second) => {
+    return second - first;
+  });
+  for (const parentIndex of parentIndexes) {
+    const nestedSelector = tryNestSelector(emittedRules[parentIndex].selectors[0], childSelector);
+    if (nestedSelector !== null) {
+      return {
+        nestedSelector,
+        parentIndex
+      };
+    }
+  }
+  return null;
+}
+
 /**
  * Groups flat CSS rules into nested structures where a child selector can be expressed relative to a preceding parent, reducing output size through CSS nesting.
  *
@@ -181,29 +276,22 @@ function removeEmptyRules (rules) {
  */
 function nestFlatRules (rules) {
   const result = [];
+  const indexBySelector = new Map();
   for (const rule of rules) {
     if (rule.type !== 'rule' || rule.selectors?.length !== 1) {
       result.push(rule);
       continue;
     }
     const childSelector = rule.selectors[0].trim();
-    let wasNested = false;
-    for (let j = result.length - 1; j >= 0; j--) {
-      const parentRule = result[j];
-      if (parentRule.type !== 'rule' || parentRule.selectors?.length !== 1) {
-        continue;
-      }
-      const nestedSelector = tryNestSelector(parentRule.selectors[0], childSelector);
-      if (nestedSelector !== null) {
-        parentRule.declarations = parentRule.declarations || [];
-        parentRule.declarations.push({ ...rule, selectors: [nestedSelector] });
-        wasNested = true;
-        break;
-      }
-    }
-    if (!wasNested) {
-      result.push(rule);
+    const nesting = findNestingParent(result, indexBySelector, childSelector);
+    if (nesting) {
+      const parentRule = result[nesting.parentIndex];
+      parentRule.declarations = parentRule.declarations || [];
+      parentRule.declarations.push({ ...rule, selectors: [nesting.nestedSelector] });
+      continue;
     }
+    indexBySelector.set(childSelector, result.length);
+    result.push(rule);
   }
   for (const rule of result) {
     if (rule.type === 'rule' && rule.declarations) {
@@ -277,6 +365,7 @@ function factorCommonParents (rules) {
       continue;
     }
     // Collect the run of consecutive rules that can all nest under the candidate.
+    const matchNestedSelector = createNestedSelectorMatcher(candidateParent);
     const run = [];
     const nestedForms = [];
     let lookahead = index;
@@ -285,7 +374,7 @@ function factorCommonParents (rules) {
       if (sibling.type !== 'rule' || sibling.selectors?.length !== 1) {
         break;
       }
-      const nestedSelector = tryNestSelector(candidateParent, sibling.selectors[0]);
+      const nestedSelector = matchNestedSelector(sibling.selectors[0]);
       if (nestedSelector === null) {
         break;
       }
@@ -745,8 +834,12 @@ function mergeIdenticalNestedRules (rules) {
  * @return {Array}        A new array of rules with same-selector rules combined.
  */
 function mergeSelectorRules (rules) {
-  let result = [];
-  let selectorMap = new Map();
+  // A merged rule moves to the end of the output. Its old slot is emptied
+  // instead of spliced out so that every recorded position stays valid, and the
+  // position map locates that slot without searching the output.
+  const slots = [];
+  const positionByRule = new Map();
+  const selectorMap = new Map();
   for (const rule of rules) {
     if (rule.type === 'rule') {
       const selectorKey = rule.selectors ?
@@ -757,23 +850,26 @@ function mergeSelectorRules (rules) {
       if (selectorKey && selectorMap.has(selectorKey)) {
         const existingRule = selectorMap.get(selectorKey);
         existingRule.declarations.push(...(rule.declarations || []));
-        result = result.filter((candidate) => {
-          return candidate !== existingRule;
-        });
-        result.push(existingRule);
+        slots[positionByRule.get(existingRule)] = null;
+        positionByRule.set(existingRule, slots.length);
+        slots.push(existingRule);
       } else {
         selectorMap.set(selectorKey, rule);
-        result.push(rule);
+        positionByRule.set(rule, slots.length);
+        slots.push(rule);
       }
     } else {
       if (rule.type === 'whitespace') {
         continue;
       }
-      result.push(rule);
+      slots.push(rule);
       selectorMap.clear();
+      positionByRule.clear();
     }
   }
-  return result;
+  return slots.filter((slot) => {
+    return slot !== null;
+  });
 }
 
 /**
@@ -835,6 +931,61 @@ function normalizeSelector (selector) {
     .replace(/::after\b/g, ':after');
 }
 
+/**
+ * Indexes, for every normalized selector in the stylesheet, the last rule that
+ * declares each property under it. Comparing that index against a rule's own
+ * position answers "is this selector's property overridden later" in constant
+ * time, instead of rescanning and renormalizing every following rule.
+ *
+ * @param  {Array} rules  The flat list of AST rule nodes.
+ * @return {Map}          Map of normalized selector to a map of property name to its last declaring rule index.
+ */
+function indexLastDeclaringRuleBySelector (rules) {
+  const lastRuleIndexBySelector = new Map();
+  rules.forEach((rule, ruleIndex) => {
+    if (rule.type !== 'rule' || !rule.selectors) {
+      return;
+    }
+    const declaredProperties = (rule.declarations || []).filter((declaration) => {
+      return declaration.type === 'declaration';
+    }).map((declaration) => {
+      return declaration.property;
+    });
+    if (declaredProperties.length === 0) {
+      return;
+    }
+    for (const selector of rule.selectors) {
+      const normalizedSelector = normalizeSelector(selector);
+      let lastRuleIndexByProperty = lastRuleIndexBySelector.get(normalizedSelector);
+      if (!lastRuleIndexByProperty) {
+        lastRuleIndexByProperty = new Map();
+        lastRuleIndexBySelector.set(normalizedSelector, lastRuleIndexByProperty);
+      }
+      for (const property of declaredProperties) {
+        lastRuleIndexByProperty.set(property, ruleIndex);
+      }
+    }
+  });
+  return lastRuleIndexBySelector;
+}
+
+/**
+ * Checks whether a given selector has a specific property overridden
+ * by any later rule in the stylesheet. A property is considered
+ * overridden if a subsequent rule contains that selector (as its only
+ * selector or among its selectors) and declares the same property.
+ *
+ * @param  {Map}     lastRuleIndexBySelector  The index built by `indexLastDeclaringRuleBySelector`.
+ * @param  {number}  startIndex               The index of the current rule (search starts after this).
+ * @param  {string}  selector                 The normalized selector to check.
+ * @param  {string}  property                 The CSS property name to check.
+ * @return {boolean}                          True if a later rule overrides this selector+property.
+ */
+function isSelectorPropertyOverriddenLater (lastRuleIndexBySelector, startIndex, selector, property) {
+  const lastRuleIndex = lastRuleIndexBySelector.get(selector)?.get(property);
+  return lastRuleIndex !== undefined && lastRuleIndex > startIndex;
+}
+
 /**
  * Removes properties from multi-selector rules when every selector in
  * the rule has that property overridden by a later rule. For example,
@@ -847,6 +998,10 @@ function normalizeSelector (selector) {
  * @return {Array}        The rules with overridden multi-selector properties removed.
  */
 function removeOverriddenMultiSelectorProperties (rules) {
+  // Only rules that follow the one being pruned are ever consulted, and pruning
+  // never adds a declaration, so a single index built up front stays accurate.
+  const lastRuleIndexBySelector = indexLastDeclaringRuleBySelector(rules);
+
   for (let ruleIndex = 0; ruleIndex < rules.length; ruleIndex++) {
     const rule = rules[ruleIndex];
     if (rule.type !== 'rule' || !rule.selectors || rule.selectors.length < 2) {
@@ -866,7 +1021,7 @@ function removeOverriddenMultiSelectorProperties (rules) {
     for (const declaration of declarations) {
       const property = declaration.property;
       const allSelectorsOverridden = normalizedSelectors.every((selector) => {
-        return isSelectorPropertyOverriddenLater(rules, ruleIndex, selector, property);
+        return isSelectorPropertyOverriddenLater(lastRuleIndexBySelector, ruleIndex, selector, property);
       });
       if (allSelectorsOverridden) {
         propertiesToRemove.add(property);
@@ -885,41 +1040,6 @@ function removeOverriddenMultiSelectorProperties (rules) {
   return rules;
 }
 
-/**
- * Checks whether a given selector has a specific property overridden
- * by any later rule in the stylesheet. A property is considered
- * overridden if a subsequent rule contains that selector (as its only
- * selector or among its selectors) and declares the same property.
- *
- * @param  {Array}   rules       The full list of AST rule nodes.
- * @param  {number}  startIndex  The index of the current rule (search starts after this).
- * @param  {string}  selector    The normalized selector to check.
- * @param  {string}  property    The CSS property name to check.
- * @return {boolean}             True if a later rule overrides this selector+property.
- */
-function isSelectorPropertyOverriddenLater (rules, startIndex, selector, property) {
-  for (let laterIndex = startIndex + 1; laterIndex < rules.length; laterIndex++) {
-    const laterRule = rules[laterIndex];
-    if (laterRule.type !== 'rule' || !laterRule.selectors) {
-      continue;
-    }
-    const laterSelectors = laterRule.selectors.map(normalizeSelector);
-    if (!laterSelectors.includes(selector)) {
-      continue;
-    }
-    const laterDeclarations = (laterRule.declarations || []).filter((declaration) => {
-      return declaration.type === 'declaration';
-    });
-    const hasOverride = laterDeclarations.some((declaration) => {
-      return declaration.property === property;
-    });
-    if (hasOverride) {
-      return true;
-    }
-  }
-  return false;
-}
-
 export {
   deduplicateKeyframes,
   expandPureNestedRules,

package/src/rules/stringify.js

@@ -41,6 +41,14 @@ 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
@@ -263,12 +271,11 @@ function stringifyRule (rule, context) {
       }
       uniqueSelectors = uniqueSelectors.flatMap(processIsSelector);
       uniqueSelectors = [...new Set(uniqueSelectors)];
-      const headingSet = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
       const isAllHeadings = (
-        rule.selectors.length === 6 &&
-        uniqueSelectors.length === 6 &&
+        rule.selectors.length === HEADING_SELECTORS.size &&
+        uniqueSelectors.length === HEADING_SELECTORS.size &&
         uniqueSelectors.every((selector) => {
-          return headingSet.has(selector);
+          return HEADING_SELECTORS.has(selector);
         })
       );
       if (isAllHeadings) {

package/src/value/gradients.js

@@ -350,6 +350,88 @@ function combineAdjacentIdenticalStops (args) {
   return normalizeBoundaryPositionTokens(mergedStops);
 }
 
+/**
+ * The `to <side>` linear-gradient directions that are shorter to write as an
+ * angle, keyed by the normalized keyword form. Corner directions are listed
+ * under both keyword orders, since either spells the same corner.
+ *
+ * @type {Map<string, string>}
+ */
+const LINEAR_DIRECTION_ANGLES = new Map([
+  ['to top', '0deg'],
+  ['to right', '90deg'],
+  ['to left', '270deg'],
+  ['to top right', '45deg'],
+  ['to right top', '45deg'],
+  ['to bottom right', '135deg'],
+  ['to right bottom', '135deg'],
+  ['to bottom left', '225deg'],
+  ['to left bottom', '225deg'],
+  ['to top left', '315deg'],
+  ['to left top', '315deg']
+]);
+
+/**
+ * The linear-gradient directions that are already the default, so writing them
+ * out adds nothing.
+ *
+ * @type {Set<string>}
+ */
+const DEFAULT_LINEAR_DIRECTIONS = new Set(['to bottom', '180deg']);
+
+/**
+ * The radial-gradient shapes that are already the default.
+ *
+ * @type {Set<string>}
+ */
+const DEFAULT_RADIAL_SHAPES = new Set(['ellipse at center', 'circle at center']);
+
+/**
+ * Rewrites the leading direction argument of a linear gradient into its
+ * shortest form, dropping it when it is the default.
+ *
+ * @param  {Array}  args  The gradient arguments, rewritten in place.
+ * @return {number}       The number of leading arguments that are not color stops.
+ */
+function normalizeLinearGradientDirection (args) {
+  const firstDirection = args[0].toLowerCase().replace(/\s+/g, ' ').trim();
+  if (DEFAULT_LINEAR_DIRECTIONS.has(firstDirection)) {
+    args.shift();
+    return 0;
+  }
+  const angle = LINEAR_DIRECTION_ANGLES.get(firstDirection);
+  if (angle) {
+    args[0] = angle;
+    return 1;
+  }
+  // Check if first arg looks like a direction (angle or "to ..." keyword)
+  const looksLikeDirection = /^\d+(\.\d+)?deg$/i.test(firstDirection) || firstDirection.startsWith('to ');
+  if (looksLikeDirection) {
+    return 1;
+  }
+  return 0;
+}
+
+/**
+ * Drops the leading shape argument of a radial gradient when it is the default.
+ *
+ * @param  {Array}  args  The gradient arguments, rewritten in place.
+ * @return {number}       The number of leading arguments that are not color stops.
+ */
+function normalizeRadialGradientShape (args) {
+  const firstShape = args[0].toLowerCase().replace(/\s+/g, ' ').trim();
+  if (DEFAULT_RADIAL_SHAPES.has(firstShape)) {
+    args.shift();
+    return 0;
+  }
+  // Check if first arg is a radial shape/size descriptor
+  const looksLikeShape = /\b(circle|ellipse|closest|farthest|at)\b/i.test(firstShape);
+  if (looksLikeShape) {
+    return 1;
+  }
+  return 0;
+}
+
 /**
  * Optimizes gradient arguments by removing default direction or shape keywords, combining adjacent identical color stops, and trimming redundant 0% or 100% stop positions from the first and last stops.
  *
@@ -363,52 +445,11 @@ function processGradientArgs (func, argsStr) {
 
   let directionArgCount = 0;
 
-  if (functionLower.includes('linear')) {
-    if (args.length > 1) {
-      const firstDirection = args[0].toLowerCase().replace(/\s+/g, ' ').trim();
-      if (firstDirection === 'to bottom' || firstDirection === '180deg') {
-        args.shift();
-      } else if (firstDirection === 'to top') {
-        args[0] = '0deg';
-        directionArgCount = 1;
-      } else if (firstDirection === 'to right') {
-        args[0] = '90deg';
-        directionArgCount = 1;
-      } else if (firstDirection === 'to left') {
-        args[0] = '270deg';
-        directionArgCount = 1;
-      } else if (firstDirection === 'to top right' || firstDirection === 'to right top') {
-        args[0] = '45deg';
-        directionArgCount = 1;
-      } else if (firstDirection === 'to bottom right' || firstDirection === 'to right bottom') {
-        args[0] = '135deg';
-        directionArgCount = 1;
-      } else if (firstDirection === 'to bottom left' || firstDirection === 'to left bottom') {
-        args[0] = '225deg';
-        directionArgCount = 1;
-      } else if (firstDirection === 'to top left' || firstDirection === 'to left top') {
-        args[0] = '315deg';
-        directionArgCount = 1;
-      } else {
-        // Check if first arg looks like a direction (angle or "to ..." keyword)
-        const looksLikeDirection = /^\d+(\.\d+)?deg$/i.test(firstDirection) || firstDirection.startsWith('to ');
-        if (looksLikeDirection) {
-          directionArgCount = 1;
-        }
-      }
-    }
-  } else if (functionLower.includes('radial')) {
-    if (args.length > 1) {
-      const firstShape = args[0].toLowerCase().replace(/\s+/g, ' ').trim();
-      if (firstShape === 'ellipse at center' || firstShape === 'circle at center') {
-        args.shift();
-      } else {
-        // Check if first arg is a radial shape/size descriptor
-        const looksLikeShape = /\b(circle|ellipse|closest|farthest|at)\b/i.test(firstShape);
-        if (looksLikeShape) {
-          directionArgCount = 1;
-        }
-      }
+  if (args.length > 1) {
+    if (functionLower.includes('linear')) {
+      directionArgCount = normalizeLinearGradientDirection(args);
+    } else if (functionLower.includes('radial')) {
+      directionArgCount = normalizeRadialGradientShape(args);
     }
   }
 

package/src/value/math.js

@@ -10,6 +10,21 @@ import {
   roundCompactNumber
 } from './shared.js';
 
+/**
+ * The units a folded calc() expression leads with, in the order they are
+ * written. Every other unit follows them alphabetically.
+ *
+ * @type {Array}
+ */
+const PREFERRED_UNIT_ORDER = ['%', '', 'px'];
+
+/**
+ * The same leading units, for excluding them from the alphabetical remainder.
+ *
+ * @type {Set<string>}
+ */
+const PREFERRED_UNITS = new Set(PREFERRED_UNIT_ORDER);
+
 /**
  * Attempts to simplify a calc() expression by combining like-unit terms and evaluating pure arithmetic, returning the simplified string or null if folding is not possible.
  *
@@ -89,8 +104,8 @@ function tryFoldCalcExpression (expression) {
     totals.set(unit, (totals.get(unit) || 0) + number);
   }
 
-  const orderedUnits = ['%', '', 'px', ...[...totals.keys()].filter((unit) => {
-    return !['%', '', 'px'].includes(unit);
+  const orderedUnits = [...PREFERRED_UNIT_ORDER, ...[...totals.keys()].filter((unit) => {
+    return !PREFERRED_UNITS.has(unit);
   }).sort()];
   const outputTerms = [];