@thejaredwilcurt/csslop 0.0.43 → 0.0.45

package/README.md

@@ -296,7 +296,7 @@ Two different cases:
 1. `git add -A && git commit -m "Updated tests"`
 1. Then run `npm t` to see if any tests fail
 1. If they fail, give an AI this prompt:
-   * **PROMPT:** Run `npm t` and fix all failing tests by modifying files in `src`. Do not use naive solutions, hacks, or hard coded values. Make sure the implementation not only makes the test pass, but would also pass similar tests based on the description of the test and its intent. Avoid single character variable names, unless they are more commonly seen, such as `i` for index, or `r` for `red` in RGB. Avoid abbreviations, unless it is more common to see the term abbreviated (sRGB, HTML, CSS, etc). Group related logic into well named functions. Ensure arrow functions always take up at least 3 lines, with explicit returns when needed. Always comment regex if used. Any test fails related to idempotency should be handled last. Run `npm run lint` and correct any linter warnings/errors that occur in the `/src` folder. When all done, run the `beep` command to alert me you finished.
+   * **PROMPT:** Run `npm t` and fix all failing tests by modifying files in `src`. Do not use naive solutions, hacks, or hard coded values. Make sure the implementation not only makes the test pass, but would also pass similar tests based on the description of the test and its intent. Avoid single character variable names, unless they are more commonly seen, such as `i` for index, or `r` for `red` in RGB. Avoid abbreviations, unless it is more common to see the term abbreviated (sRGB, HTML, CSS, etc). Group related logic into well named functions. Ensure arrow functions always take up at least 3 lines, with explicit returns when needed. Always comment regex if used. Any test fails related to idempotency should be handled last. DO NOT touch anything related to real-world tests (including `npm run idem` and `npm run real`). Run `npm run lint` and correct any linter warnings/errors that occur in the `/src` folder. When all done, run the `beep` command to alert me you finished.
 1. Verify only code in the `src` folder was modified
 1. Verify `npm t` passes with a 100% score
 1. Run `npm run lint`, if anything fails, have the AI fix it.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.43",
+  "version": "0.0.45",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/pre/start.js",
@@ -35,7 +35,7 @@
     "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": "^65.3.8",
+    "eslint-plugin-jsdoc": "^65.3.11",
     "fflate": "^0.8.3",
     "globals": "^17.13.0",
     "pretty-ms": "^10.0.0",

package/src/declarations/border.js

@@ -5,7 +5,10 @@
 import { splitTopLevelComponents } from '../parser/source-search.js';
 import { minifyValue } from '../value/minify.js';
 import { namedColors } from '../value/named-colors.js';
-import { collapseShorthandParts } from '../value/shared.js';
+import {
+  collapseShorthandParts,
+  hasSubstitutedParts
+} from '../value/shared.js';
 
 import {
   BORDER_EDGE_PROPERTIES,
@@ -107,16 +110,14 @@ function findLastDeclarationIndex (declarations, property) {
 }
 
 /**
- * Rewrites a `border-width` + `border-style` + `border-color` trio whose color
- * differs per edge into a `border` shorthand built from the first color, followed
- * by a `border-color` override that restores the per-edge colors. The rewrite is
- * only applied when the resulting pair is shorter than the three longhands.
+ * Rewrites a border trio into a shorthand and overrides for components that
+ * differ by edge. Only shorter rewrites with uniform importance are used.
  *
  * @param  {Array}  declarations  The declarations of a single rule.
  * @param  {object} context       The minification context with the stylesheet's reset properties.
  * @return {Array}                The declarations, with the trio rewritten when it is shorter.
  */
-function collapseBorderTrioWithPerEdgeColor (declarations, context) {
+function collapseBorderTrioWithPerEdgeOverrides (declarations, context) {
   // The `border` shorthand also resets `border-image`, so the trio stays as it
   // is when another rule of the stylesheet relies on that value.
   if (resetsPropertyDeclaredElsewhere('border', collectDeclaredProperties(declarations), context)) {
@@ -132,6 +133,18 @@ function collapseBorderTrioWithPerEdgeColor (declarations, context) {
   if (!hasWholeTrio) {
     return declarations;
   }
+  const hasCompetingBorderWrites = declarations.some((declaration) => {
+    const property = declaration.property || '';
+    if (BORDER_TRIO_PROPERTIES.includes(property)) {
+      return declarations.filter((entry) => {
+        return entry.property === property;
+      }).length !== 1;
+    }
+    return property === 'border' || (property.startsWith('border-') && !property.startsWith('border-image'));
+  });
+  if (hasCompetingBorderWrites) {
+    return declarations;
+  }
 
   const trioValues = trioIndexes.map((index) => {
     return minifyValue(declarations[index]);
@@ -150,28 +163,38 @@ function collapseBorderTrioWithPerEdgeColor (declarations, context) {
   const [width, style, color] = trioValues.map((value) => {
     return value.replace('!important', '').trim();
   });
-  const colorComponents = splitTopLevelComponents(color);
-  const isSingleComponent = (value) => {
-    return splitTopLevelComponents(value).length === 1;
-  };
-  const canBuildShorthand = (
-    isSingleComponent(width) &&
-    isSingleComponent(style) &&
-    colorComponents.length > 1
-  );
-  if (!canBuildShorthand) {
+  const componentsByProperty = [width, style, color].map(splitTopLevelComponents);
+  const hasPerEdgeComponents = componentsByProperty.some((components) => {
+    return components.length > 1;
+  });
+  const allComponents = componentsByProperty.flat();
+  if (!hasPerEdgeComponents || hasSubstitutedParts(allComponents)) {
     return declarations;
   }
-  const usesCssWideKeyword = [width, style, ...colorComponents].some((value) => {
+  const usesCssWideKeyword = allComponents.some((value) => {
     return CSS_WIDE_KEYWORDS.has(value.toLowerCase());
   });
   if (usesCssWideKeyword) {
     return declarations;
   }
 
-  const borderValue = buildBorderShorthandValue(width, style, colorComponents[0]) + importantSuffix;
-  const colorValue = color + importantSuffix;
-  const rewrittenLength = ('border:' + borderValue + ';border-color:' + colorValue).length;
+  const [widthComponents, styleComponents, colorComponents] = componentsByProperty;
+  const borderValue = buildBorderShorthandValue(
+    widthComponents.length === 1 ? width : '',
+    styleComponents.length === 1 ? style : '',
+    colorComponents[0]
+  ) + importantSuffix;
+  const overrides = BORDER_TRIO_PROPERTIES.flatMap((property, index) => {
+    if (componentsByProperty[index].length === 1) {
+      return [];
+    }
+    return [{
+      property,
+      value: trioValues[index]
+    }];
+  });
+  const replacement = [{ property: 'border', value: borderValue }, ...overrides];
+  const rewrittenLength = measureDeclarations(replacement);
   const longhandLength = (
     'border-width:' + trioValues[0] +
     ';border-style:' + trioValues[1] +
@@ -185,16 +208,7 @@ function collapseBorderTrioWithPerEdgeColor (declarations, context) {
   const insertionIndex = Math.min(...trioIndexes);
   return declarations.flatMap((declaration, index) => {
     if (index === insertionIndex) {
-      return [
-        {
-          property: 'border',
-          value: borderValue
-        },
-        {
-          property: 'border-color',
-          value: colorValue
-        }
-      ];
+      return replacement;
     }
     if (replacedIndexes.has(index)) {
       return [];
@@ -216,8 +230,8 @@ function classifyBorderEdgeComponent (component) {
   if (BORDER_STYLE_KEYWORDS.has(keyword)) {
     return 'border-style';
   }
-  // Match a number with an optional unit, which is how a length is written
-  const isLength = /^[+-]?(?:\d+|\d*\.\d+)[a-z]*$/i.test(component);
+  // Match a number, optional exponent, and optional length unit.
+  const isLength = /^[+-]?(?:\d+|\d*\.\d+)(?:e[+-]?\d+)?[a-z]*$/i.test(component);
   if (BORDER_WIDTH_KEYWORDS.has(keyword) || isLength || LENGTH_FUNCTION_PATTERN.test(component)) {
     return 'border-width';
   }
@@ -411,6 +425,6 @@ function splitBorderEdgesIntoTrio (declarations) {
 }
 
 export {
-  collapseBorderTrioWithPerEdgeColor,
+  collapseBorderTrioWithPerEdgeOverrides,
   splitBorderEdgesIntoTrio
 };

package/src/declarations/process.js

@@ -7,7 +7,7 @@ import { hasInvalidQuotesCount } from '../value/quotes.js';
 
 import { absorbBackgroundLonghandsIntoShorthand } from './background.js';
 import {
-  collapseBorderTrioWithPerEdgeColor,
+  collapseBorderTrioWithPerEdgeOverrides,
   splitBorderEdgesIntoTrio
 } from './border.js';
 import {
@@ -449,7 +449,7 @@ function processDeclarations (declarations, context) {
   result = foldLonghandOverridesIntoShorthands(result, context);
   result = hoistCssWideKeywordsIntoShorthands(result, context);
   result = splitBorderEdgesIntoTrio(result);
-  result = collapseBorderTrioWithPerEdgeColor(result, context);
+  result = collapseBorderTrioWithPerEdgeOverrides(result, context);
 
   return orderDeclarations(result);
 }

package/src/index.js

@@ -23,24 +23,13 @@ import {
 import { preprocessDeclarationBlocks } from './preprocess.js';
 import { combineLanguageSelectors } from './rules/lang.js';
 import { normalizeRuleSelectors } from './rules/normalize.js';
-import {
-  deduplicateKeyframes,
-  expandPureNestedRules,
-  factorCommonParents,
-  mergeByDeclarations,
-  mergeIdenticalNestedRules,
-  mergeLayerRules,
-  mergeMediaRules,
-  mergeSelectorRules,
-  nestFlatRules,
-  removeEmptyRules,
-  removeFullyOverriddenSelectors,
-  removeOverriddenMultiSelectorProperties
-} from './rules/optimize.js';
+import { optimizeRuleList } from './rules/optimize.js';
+import { combineLegacyAnySelectors } from './rules/selectors.js';
 import {
   removeRedundantLayerStatementSemicolon,
   stringifyRule
 } from './rules/stringify.js';
+import { removeInvalidSelectorRules } from './rules/validate.js';
 import {
   clearMinifiedValueCache,
   minifyValue
@@ -64,7 +53,7 @@ function deduplicateSelectorList (selectorList) {
     seen.add(selector);
     return true;
   });
-  return combineLanguageSelectors(unique).join(',');
+  return combineLanguageSelectors(combineLegacyAnySelectors(unique)).join(',');
 }
 
 /**
@@ -199,6 +188,7 @@ export const minifyCSS = function (input) {
   const context = createMinifyContext();
 
   if (ast?.stylesheet?.rules) {
+    ast.stylesheet.rules = removeInvalidSelectorRules(ast.stylesheet.rules);
     // Every later pass reads selectors, so they are written the one canonical
     // way before any of them runs.
     normalizeRuleSelectors(ast.stylesheet.rules);
@@ -227,24 +217,7 @@ export const minifyCSS = function (input) {
     );
     ast.stylesheet.rules = filterRedundantCharsets(ast.stylesheet.rules);
 
-    ast.stylesheet.rules = expandPureNestedRules(ast.stylesheet.rules);
-    ast.stylesheet.rules = mergeLayerRules(ast.stylesheet.rules, mergeSelectorRules);
-    ast.stylesheet.rules = mergeMediaRules(ast.stylesheet.rules, mergeSelectorRules);
-    ast.stylesheet.rules = deduplicateKeyframes(ast.stylesheet.rules);
-
-    const mergedRules = mergeSelectorRules(ast.stylesheet.rules);
-    const overrideCleanedRules = removeOverriddenMultiSelectorProperties(mergedRules);
-    const selectorPrunedRules = removeFullyOverriddenSelectors(overrideCleanedRules);
-    const preCleanedRules = removeEmptyRules(selectorPrunedRules);
-    const declarationMergedRules = mergeByDeclarations(preCleanedRules);
-    const nestedRules = nestFlatRules(declarationMergedRules);
-    const nonEmptyRules = removeEmptyRules(nestedRules);
-    // Nesting is what reveals that two rules style the same thing: until their
-    // descendants have moved inside them, the rules only share a declaration.
-    const nestingMergedRules = mergeByDeclarations(nonEmptyRules);
-    const factoredRules = factorCommonParents(nestingMergedRules);
-    const nestedFinalRules = nestFlatRules(factoredRules);
-    const finalRules = mergeIdenticalNestedRules(nestedFinalRules);
+    const finalRules = optimizeRuleList(ast.stylesheet.rules);
 
     for (const rule of finalRules) {
       output.push(stringifyRule(rule, context));

package/src/rules/optimize.js

@@ -11,12 +11,17 @@ import {
   findMatchingParenthesis,
   splitTopLevelCommaList
 } from '../parser/source-search.js';
+import { tokenizeCssValue } from '../parser/tokenizer.js';
 import { escapeRegexString } from '../utilities.js';
 
 import {
   normalizeLayerNames,
   normalizeMedia
 } from './normalize.js';
+import {
+  containsPseudoElement,
+  isUniversallyRecognizableSelector
+} from './selectors.js';
 
 /**
  * Reports whether an entry of a rule's body is itself a nested rule rather
@@ -44,13 +49,67 @@ function expandNestedRuleBodies (rules) {
     if (rule.type !== 'rule' || !(rule.declarations || []).some(isNestedRule)) {
       return rule;
     }
+    const declarations = expandPureNestedRules(rule.declarations);
+    const canFlattenSelf = selectorsShareSpecificity(rule.selectors) && !rule.selectors.some(containsPseudoElement);
+    let encounteredNestedContent = false;
+    const flattened = declarations.flatMap((entry) => {
+      const isSelfRule = entry.type === 'rule' && entry.selectors?.length === 1 && entry.selectors[0].trim() === '&';
+      if (canFlattenSelf && isSelfRule && !encounteredNestedContent) {
+        return entry.declarations || [];
+      }
+      if (entry.type !== 'declaration' && entry.type !== 'whitespace' && entry.type !== 'comment') {
+        encounteredNestedContent = true;
+      }
+      if (entry.type === 'rule' && rule.selectors.length === 1) {
+        entry.selectors = entry.selectors.map((selector) => {
+          return shortenRepeatedNestingSelector(rule.selectors[0], selector);
+        });
+      }
+      return [entry];
+    });
     return {
       ...rule,
-      declarations: expandPureNestedRules(rule.declarations)
+      declarations: flattened
     };
   });
 }
 
+/**
+ * Replaces repetitions of a simple class or ID beside a leading nesting
+ * selector. Token comparisons keep longer names and escaped text intact.
+ *
+ * @param  {string} parentSelector  The sole parent selector.
+ * @param  {string} childSelector   The nested selector.
+ * @return {string}                 The shorter equivalent selector.
+ */
+function shortenRepeatedNestingSelector (parentSelector, childSelector) {
+  const parentTokens = tokenizeCssValue(parentSelector);
+  const isClass = parentTokens.length === 2 && parentTokens[0].text === '.' && parentTokens[1].type === 'ident';
+  const isIdentifier = parentTokens.length === 1 && parentTokens[0].type === 'hash';
+  if (!isClass && !isIdentifier) {
+    return childSelector;
+  }
+  const childTokens = tokenizeCssValue(childSelector);
+  if (childTokens[0]?.text !== '&') {
+    return childSelector;
+  }
+  let index = 1;
+  let result = '&';
+  while (index < childTokens.length) {
+    const matchesParent = parentTokens.every((token, position) => {
+      return childTokens[index + position]?.text === token.text;
+    });
+    if (!matchesParent) {
+      break;
+    }
+    result += '&';
+    index += parentTokens.length;
+  }
+  return result + childTokens.slice(index).map((token) => {
+    return token.text;
+  }).join('');
+}
+
 /**
  * Reports whether a nested child selector still means the same thing once it
  * is written out in full under its parent.
@@ -437,6 +496,26 @@ function factorCommonParents (rules) {
   let index = 0;
   while (index < rules.length) {
     const rule = rules[index];
+    if (rule.type === 'rule' && rule.selectors?.length > 1) {
+      const candidateParent = extractLeadingCompound(rule.selectors[0]);
+      if (candidateParent) {
+        const matchNestedSelector = createNestedSelectorMatcher(candidateParent);
+        const childSelectors = rule.selectors.map(matchNestedSelector);
+        const allMatch = childSelectors.every((selector) => {
+          return selector !== null;
+        });
+        const wrapperLength = candidateParent.length + 2 + childSelectors.join(',').length;
+        if (allMatch && !containsPseudoElement(candidateParent) && wrapperLength < rule.selectors.join(',').length) {
+          result.push({
+            type: 'rule',
+            selectors: [candidateParent],
+            declarations: [{ ...rule, selectors: childSelectors }]
+          });
+          index++;
+          continue;
+        }
+      }
+    }
     // Only single-selector style rules can act as a factoring candidate.
     if (rule.type !== 'rule' || rule.selectors?.length !== 1) {
       result.push(rule);
@@ -491,6 +570,42 @@ function factorCommonParents (rules) {
   return result;
 }
 
+/**
+ * Shares a descendant prefix through `:is()` when the parent itself is also
+ * in the selector list, preventing a nesting wrapper from saving space.
+ *
+ * @param {object} rule  The style rule whose selector list may be shortened.
+ */
+function factorSelectorBranches (rule) {
+  if (rule.type !== 'rule' || !rule.selectors?.length) {
+    return;
+  }
+  for (const parent of [...rule.selectors]) {
+    const prefix = parent + ' ';
+    const branches = rule.selectors.filter((selector) => {
+      return selector.startsWith(prefix);
+    });
+    const children = branches.map((selector) => {
+      return selector.slice(prefix.length);
+    });
+    if (children.length < 2 || !children.every(isUniversallyRecognizableSelector) || !selectorsShareSpecificity(children)) {
+      continue;
+    }
+    const grouped = prefix + ':is(' + children.sort().join(',') + ')';
+    if (grouped.length >= branches.join(',').length) {
+      continue;
+    }
+    const branchSet = new Set(branches);
+    const firstIndex = rule.selectors.indexOf(branches[0]);
+    rule.selectors = rule.selectors.flatMap((selector, index) => {
+      if (index === firstIndex) {
+        return [grouped];
+      }
+      return branchSet.has(selector) ? [] : [selector];
+    });
+  }
+}
+
 /**
  * Merges adjacent `@media` rules that share an identical normalized query string and deduplicates their child selector rules.
  *
@@ -1469,7 +1584,7 @@ function chooseMergePlacement (overrideIndex, earlierRule, laterRule, earlierPos
  * @param  {Array} rules  The AST rule nodes to merge.
  * @return {Array}        A new array of rules with same-selector rules combined.
  */
-function mergeSelectorRules (rules) {
+function mergeSelectorRulePass (rules) {
   // A rule merged at the later of the two positions 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
@@ -1524,6 +1639,24 @@ function mergeSelectorRules (rules) {
   });
 }
 
+/**
+ * Reconsiders blocked pairs after merges relocate the rules that blocked them.
+ * Each productive pass removes a rule, so this reaches a fixed point without
+ * rerunning parsing or unrelated optimizations.
+ *
+ * @param  {Array} rules  The sibling rules to merge.
+ * @return {Array}        Rules with all currently safe same-selector merges.
+ */
+function mergeSelectorRules (rules) {
+  let previousRules = rules;
+  let mergedRules = mergeSelectorRulePass(previousRules);
+  while (mergedRules.length < previousRules.length) {
+    previousRules = mergedRules;
+    mergedRules = mergeSelectorRulePass(previousRules);
+  }
+  return mergedRules;
+}
+
 /**
  * Merges `@layer` blocks with the same name by combining their child rules, deduplicates layer statements, and merges selector rules within each block.
  *
@@ -1847,6 +1980,37 @@ function removeOverriddenMultiSelectorProperties (rules) {
   return rules;
 }
 
+/**
+ * Applies the structural optimization pipeline to a stylesheet or grouping
+ * block, so merging at-rules does not leave their children unoptimized.
+ *
+ * @param  {Array} rules  The sibling AST entries.
+ * @return {Array}        The optimized sibling entries.
+ */
+function optimizeRuleList (rules) {
+  let result = expandPureNestedRules(rules);
+  result = mergeLayerRules(result, mergeSelectorRules);
+  result = mergeMediaRules(result, mergeSelectorRules);
+  result = deduplicateKeyframes(result);
+  for (const rule of result) {
+    if (rule.rules) {
+      rule.rules = optimizeRuleList(rule.rules);
+    }
+  }
+  result = mergeSelectorRules(result);
+  result = removeOverriddenMultiSelectorProperties(result);
+  result = removeFullyOverriddenSelectors(result);
+  result = removeEmptyRules(result);
+  result = mergeByDeclarations(result);
+  result = nestFlatRules(result);
+  result = removeEmptyRules(result);
+  result = mergeByDeclarations(result);
+  result = factorCommonParents(result);
+  result = nestFlatRules(result);
+  result.forEach(factorSelectorBranches);
+  return mergeIdenticalNestedRules(result);
+}
+
 export {
   deduplicateKeyframes,
   expandPureNestedRules,
@@ -1857,6 +2021,7 @@ export {
   mergeMediaRules,
   mergeSelectorRules,
   nestFlatRules,
+  optimizeRuleList,
   removeEmptyRules,
   removeFullyOverriddenSelectors,
   removeOverriddenMultiSelectorProperties

package/src/rules/selectors.js

@@ -719,9 +719,50 @@ function flattenNestingParentIsSelector (selector) {
   return parts;
 }
 
+/**
+ * Replaces matching legacy any-functions only when multiple vendor variants
+ * supply the same selector. A lone vendor-specific selector stays scoped to
+ * the browsers that understand it.
+ *
+ * @param  {Array} selectors  Selectors with identical declarations.
+ * @return {Array}            The selectors with redundant legacy forms combined.
+ */
+function combineLegacyAnySelectors (selectors) {
+  const legacyFunctions = [':-moz-any(', ':-webkit-any(', ':matches('];
+  const groups = new Map();
+  const entries = selectors.map((selector) => {
+    let canonical = selector;
+    const variants = new Set();
+    for (const functionCall of legacyFunctions) {
+      let position = findNextFunctionCallOutsideStrings(canonical, functionCall, 0);
+      while (position !== -1) {
+        variants.add(functionCall);
+        canonical = canonical.slice(0, position) + ':is(' + canonical.slice(position + functionCall.length);
+        position = findNextFunctionCallOutsideStrings(canonical, functionCall, position + 4);
+      }
+    }
+    let group = groups.get(canonical);
+    if (!group) {
+      group = new Set();
+      groups.set(canonical, group);
+    }
+    const variant = variants.size === 1 ? [...variants][0] : null;
+    if (variant) {
+      group.add(variant);
+    }
+    return { selector, canonical, variant };
+  });
+  return [...new Set(entries.map((entry) => {
+    return entry.variant && groups.get(entry.canonical).size > 1 ? entry.canonical : entry.selector;
+  }))];
+}
+
 export {
+  combineLegacyAnySelectors,
+  containsPseudoElement,
   findNextFunctionCallOutsideStrings,
   flattenNestingParentIsSelector,
+  isUniversallyRecognizableSelector,
   mergeAdjacentWherePseudoClasses,
   processIsSelector
 };

package/src/rules/stringify.js

@@ -24,6 +24,7 @@ import {
 } from './normalize.js';
 import { resolvePropertyDescriptors } from './property.js';
 import {
+  combineLegacyAnySelectors,
   flattenNestingParentIsSelector,
   mergeAdjacentWherePseudoClasses,
   processIsSelector
@@ -257,6 +258,7 @@ function stringifyRule (rule, context) {
         minified = minifyLanguageSelector(minified);
         return minified;
       });
+      uniqueSelectors = combineLegacyAnySelectors(uniqueSelectors);
       // When this rule is a nesting parent, its whole selector list is treated
       // as :is() for the children's specificity, so a top-level :is() can be
       // safely lifted into the list without altering specificity.