@thejaredwilcurt/csslop 0.0.53 → 0.0.55

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/pre/start.js",
@@ -32,15 +32,15 @@
     "codemirror": "^6.0.2",
     "eslint": "^10.14.0",
     "eslint-config-tjw-base": "^5.0.0",
-    "eslint-config-tjw-import-x": "^1.0.1",
+    "eslint-config-tjw-import-x": "^1.0.2",
     "eslint-config-tjw-jsdoc": "^2.0.1",
-    "eslint-plugin-import-x": "^4.17.0",
-    "eslint-plugin-jsdoc": "^65.4.4",
+    "eslint-plugin-import-x": "^4.18.1",
+    "eslint-plugin-jsdoc": "^65.4.5",
     "fflate": "^0.8.3",
     "globals": "^17.14.0",
     "pretty-ms": "^10.0.0",
     "real-world-css-libraries": "^1.0.9",
-    "vite": "^8.3.6"
+    "vite": "^8.3.7"
   },
   "author": "The Jared Wilcurt",
   "homepage": "https://github.com/TheJaredWilcurt/csslop#readme",

package/src/declarations/border.js

@@ -12,13 +12,34 @@ import {
 
 import {
   BORDER_EDGE_PROPERTIES,
-  CSS_WIDE_KEYWORDS
+  CSS_WIDE_KEYWORDS,
+  expandToLeafProperties
 } from './config.js';
 import { collectDeclaredProperties } from './lookup.js';
 import { resetsPropertyDeclaredElsewhere } from './reset-hazards.js';
 
 const BORDER_TRIO_PROPERTIES = ['border-width', 'border-style', 'border-color'];
 
+/**
+ * Every property the `border` shorthand sets: the physical edge shorthands, such
+ * as `border-top`, and the longhands they expand into, such as `border-top-width`.
+ * A declaration of one of them beside the trio competes with the shorthand.
+ *
+ * @type {Set<string>}
+ */
+const BORDER_SHORTHAND_PROPERTIES = new Set([
+  ...BORDER_EDGE_PROPERTIES,
+  ...expandToLeafProperties('border')
+]);
+
+/**
+ * Matches the logical border longhands, such as `border-inline-start-color`
+ * and `border-block-width`, which set the same edges as the physical ones.
+ *
+ * @type {RegExp}
+ */
+const LOGICAL_BORDER_PATTERN = /^border-(?:inline|block)(?:-|$)/;
+
 /**
  * The keywords that state a border line style.
  *
@@ -140,7 +161,7 @@ function collapseBorderTrioWithPerEdgeOverrides (declarations, context) {
         return entry.property === property;
       }).length !== 1;
     }
-    return property === 'border' || (property.startsWith('border-') && !property.startsWith('border-image'));
+    return property === 'border' || BORDER_SHORTHAND_PROPERTIES.has(property) || LOGICAL_BORDER_PATTERN.test(property);
   });
   if (hasCompetingBorderWrites) {
     return declarations;
@@ -179,10 +200,14 @@ function collapseBorderTrioWithPerEdgeOverrides (declarations, context) {
   }
 
   const [widthComponents, styleComponents, colorComponents] = componentsByProperty;
+  // The `border` shorthand resets its color to currentcolor, so a color that
+  // states currentcolor is left out of the shorthand rather than repeated.
+  const statesShorthandColor = colorComponents.length === 1 &&
+    colorComponents[0].toLowerCase() !== INITIAL_BORDER_EDGE_PARTS['border-color'];
   const borderValue = buildBorderShorthandValue(
     widthComponents.length === 1 ? width : '',
     styleComponents.length === 1 ? style : '',
-    colorComponents.length === 1 ? colorComponents[0] : ''
+    statesShorthandColor ? colorComponents[0] : ''
   ) + importantSuffix;
   const overrides = BORDER_TRIO_PROPERTIES.flatMap((property, index) => {
     if (componentsByProperty[index].length === 1) {

package/src/rules/optimize/factor-parents.js

@@ -155,22 +155,78 @@ function collectSharedParentCandidates (rule) {
 }
 
 /**
- * Counts how many characters wrapping a run behind a shared parent selector
- * saves: the parent is written once with its braces, and every wrapped
- * selector shrinks to its nested form.
+ * Counts the characters a list of rules takes up as selector text. Each rule
+ * counts its selectors, its braces, and every rule nested within it, while
+ * plain declarations count for nothing.
  *
- * @param  {Array}  run     The rules of the run paired with their nested selectors.
- * @param  {string} parent  The shared parent selector string.
- * @return {number}         The character savings of the wrapper, or a non-positive number when it costs more than it saves.
+ * @param  {Array}  rules  The AST entries to measure.
+ * @return {number}        The number of characters the rules take up.
  */
-function measureWrapperSavings (run, parent) {
-  const charactersSaved = run.reduce((total, entry) => {
-    return total + entry.sibling.selectors.reduce((sum, selector, position) => {
-      return sum + selector.trim().length - entry.nestedSelectors[position].length;
-    }, 0);
+function measureRuleCharacters (rules) {
+  return rules.reduce((total, rule) => {
+    if (rule.type !== 'rule') {
+      return total;
+    }
+    const selectorText = (rule.selectors || []).map((selector) => {
+      return selector.trim();
+    }).join(',');
+    const nestedRules = (rule.declarations || []).filter((declaration) => {
+      return declaration.type === 'rule';
+    });
+    // The two braces wrap the rule's declarations
+    return total + selectorText.length + 2 + measureRuleCharacters(nestedRules);
   }, 0);
+}
+
+/**
+ * Counts how many characters wrapping a run behind a shared parent selector
+ * saves: the run is measured as it is written, against the declarations the
+ * wrapper would hold plus the parent written once with its braces.
+ *
+ * @param  {Array}  run           The rules of the run paired with their nested selectors.
+ * @param  {Array}  declarations  The declarations the wrapper would hold, including any factoring of the nested rules.
+ * @param  {string} parent        The shared parent selector string.
+ * @return {number}               The character savings of the wrapper, or a non-positive number when it costs more than it saves.
+ */
+function measureWrapperSavings (run, declarations, parent) {
+  const charactersBefore = measureRuleCharacters(run.map((entry) => {
+    return entry.sibling;
+  }));
   // The wrapper writes the shared selector once plus its surrounding braces.
-  return charactersSaved - (parent.length + 2);
+  const charactersAfter = measureRuleCharacters(declarations) + parent.length + 2;
+  return charactersBefore - charactersAfter;
+}
+
+/**
+ * Expresses every selector of a sibling rule relative to a candidate parent.
+ * A nested selector must be shorter than the selector it replaces, so each
+ * factoring pass leaves the rules smaller and factoring them again terminates.
+ *
+ * @param  {object}                          rule                 The sibling rule whose selectors are nested.
+ * @param  {function(string): (string|null)} matchNestedSelector  The matcher built for the candidate parent.
+ * @return {Array|null}                                           The nested selectors, or null when any selector cannot nest under the parent.
+ */
+function nestSelectorsUnderParent (rule, matchNestedSelector) {
+  const nestedSelectors = [];
+  for (const selector of rule.selectors) {
+    const trimmedSelector = selector.trim();
+    const nestedSelector = matchNestedSelector(trimmedSelector);
+    if (nestedSelector === null || nestedSelector.length >= trimmedSelector.length) {
+      return null;
+    }
+    nestedSelectors.push(nestedSelector);
+  }
+  return nestedSelectors;
+}
+
+/**
+ * Re-expresses a run entry as a rule whose selectors are the nested selectors.
+ *
+ * @param  {object} entry  A run entry pairing a sibling rule with its nested selectors.
+ * @return {object}        The rule, with its selectors replaced by the nested ones.
+ */
+function createNestedChild (entry) {
+  return { ...entry.sibling, selectors: entry.nestedSelectors };
 }
 
 /**
@@ -187,15 +243,49 @@ function orderRulesBySourcePosition (rules) {
   });
 }
 
+/**
+ * Builds the declarations of a wrapper that holds a run of sibling rules nested
+ * under their shared parent. A first rule whose only nested selector is `&` is
+ * the parent itself, so its declarations are hoisted into the wrapper. Otherwise
+ * the nested rules are factored again, so the selectors they still share can be
+ * wrapped in turn.
+ *
+ * @param  {Array} run  The rules of the run paired with their nested selectors.
+ * @return {Array}      The declarations of the wrapper rule.
+ */
+function createWrapperDeclarations (run) {
+  const firstEntry = run[0];
+  const firstSelectorIsParent = (
+    firstEntry.nestedSelectors.length === 1 &&
+    firstEntry.nestedSelectors[0] === '&'
+  );
+  if (!firstSelectorIsParent) {
+    return factorCommonParents(run.map(createNestedChild), true);
+  }
+  const directDeclarations = firstEntry.sibling.declarations;
+  const directNestedRules = directDeclarations.filter((declaration) => {
+    return declaration.type === 'rule';
+  });
+  const directEntries = directDeclarations.filter((declaration) => {
+    return declaration.type !== 'rule';
+  });
+  const children = run.slice(1).map(createNestedChild);
+  return [
+    ...directEntries,
+    ...orderRulesBySourcePosition([...directNestedRules, ...children])
+  ];
+}
+
 /**
  * Groups consecutive sibling rules that share a common leading selector
  * portion (such as `.foo` in `.foo .a`, `.foo .b`, or `.menu .item` in
  * `.menu .item:hover .x`) into a synthesized parent rule with the shared
  * portion factored out. Every viable prefix of the first rule's selector is
  * tried as the parent, and the grouping that saves the most characters wins,
- * but only when it saves more than the wrapper itself costs. Rules with a
- * comma-separated selector list can join a run when every one of their
- * selectors nests under the parent.
+ * measured with the rules nested under it factored in turn, but only when it
+ * saves more than the wrapper itself costs. Rules with a comma-separated
+ * selector list can join a run when every one of their selectors nests under
+ * the parent.
  *
  * @param  {Array}   rules                  The flat AST rule nodes to factor.
  * @param  {boolean} allowTrailingCompound  True when the rules are children of a factored wrapper, whose `&`-relative selectors may share a trailing compound that can be factored out in turn.
@@ -225,12 +315,8 @@ function factorCommonParents (rules, allowTrailingCompound = false) {
         if (sibling.type !== 'rule' || !sibling.selectors?.length) {
           break;
         }
-        const nestedSelectors = sibling.selectors.map((selector) => {
-          return matchNestedSelector(selector.trim());
-        });
-        if (nestedSelectors.some((nestedSelector) => {
-          return nestedSelector === null;
-        })) {
+        const nestedSelectors = nestSelectorsUnderParent(sibling, matchNestedSelector);
+        if (!nestedSelectors) {
           break;
         }
         run.push({ sibling, nestedSelectors });
@@ -243,12 +329,13 @@ function factorCommonParents (rules, allowTrailingCompound = false) {
       if (run.length < 2 && selectorCount < 2) {
         continue;
       }
-      const savings = measureWrapperSavings(run, candidateParent);
+      const declarations = createWrapperDeclarations(run);
+      const savings = measureWrapperSavings(run, declarations, candidateParent);
       if (savings > 0 && (!bestGrouping || savings > bestGrouping.savings)) {
         bestGrouping = {
+          declarations,
           lookahead,
           parent: candidateParent,
-          run,
           savings
         };
       }
@@ -262,39 +349,10 @@ function factorCommonParents (rules, allowTrailingCompound = false) {
       index++;
       continue;
     }
-    const firstEntry = bestGrouping.run[0];
-    const firstSelectorIsParent = (
-      firstEntry.nestedSelectors.length === 1 &&
-      firstEntry.nestedSelectors[0] === '&'
-    );
-    const directDeclarations = firstSelectorIsParent ?
-      firstEntry.sibling.declarations :
-      [];
-    const entriesToNest = firstSelectorIsParent ?
-      bestGrouping.run.slice(1) :
-      bestGrouping.run;
-    const children = entriesToNest.map((entry) => {
-      return { ...entry.sibling, selectors: entry.nestedSelectors };
-    });
-    let declarations;
-    if (firstSelectorIsParent) {
-      const directNestedRules = directDeclarations.filter((declaration) => {
-        return declaration.type === 'rule';
-      });
-      const directEntries = directDeclarations.filter((declaration) => {
-        return declaration.type !== 'rule';
-      });
-      declarations = [
-        ...directEntries,
-        ...orderRulesBySourcePosition([...directNestedRules, ...children])
-      ];
-    } else {
-      declarations = factorCommonParents(children, true);
-    }
     result.push({
       type: 'rule',
       selectors: [bestGrouping.parent],
-      declarations
+      declarations: bestGrouping.declarations
     });
     index = bestGrouping.lookahead;
   }

package/src/rules/optimize/nest-rules.js

@@ -2,6 +2,8 @@
  * @file Nests flat rules under a preceding rule whose selector their own selector starts with, so CSS nesting writes the shared part once.
  */
 
+import { findTopLevelDelimiter } from '../../parser/source-search.js';
+
 /**
  * Matches the part of a child selector that follows its parent when that part
  * starts with an explicit combinator. Optional whitespace, then the combinator
@@ -78,6 +80,46 @@ function isSelectorWhitespace (character) {
   return (/\s/).test(character);
 }
 
+/**
+ * The characters that can end a parent selector: the colon of a pseudo-class,
+ * the whitespace of a descendant combinator, and the explicit combinators.
+ *
+ * @type {string}
+ */
+const PARENT_BOUNDARY_CHARACTERS = ':>+~ \t\n\r\f';
+
+/**
+ * Records the parent selector that a boundary character would end, when it
+ * ends one. Boundaries are only found at the top level of the selector, so
+ * whitespace inside an attribute selector or a pseudo-class argument, and
+ * characters escaped with a backslash, never end a parent.
+ *
+ * @param {string} childSelector  The trimmed child selector.
+ * @param {number} boundaryIndex  The index of the boundary character within the child selector.
+ * @param {Set}    candidates     The set the candidate parent selector is added to.
+ */
+function addCandidateParentSelector (childSelector, boundaryIndex, candidates) {
+  const character = childSelector[boundaryIndex];
+  if (character === ':' || isSelectorWhitespace(character)) {
+    // The second colon of a pseudo-element is part of its `::` introducer,
+    // not a boundary between a potential parent and nested child.
+    if (character === ':' && childSelector[boundaryIndex - 1] === ':') {
+      return;
+    }
+    candidates.add(childSelector.slice(0, boundaryIndex));
+    return;
+  }
+  // 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 = boundaryIndex;
+  while (boundary > 0 && isSelectorWhitespace(childSelector[boundary - 1])) {
+    boundary--;
+  }
+  if (boundary > 0) {
+    candidates.add(childSelector.slice(0, boundary));
+  }
+}
+
 /**
  * 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
@@ -91,29 +133,10 @@ function isSelectorWhitespace (character) {
  */
 function collectCandidateParentSelectors (childSelector) {
   const candidates = new Set();
-  for (let index = 1; index < childSelector.length; index++) {
-    const character = childSelector[index];
-    if (character === ':' || isSelectorWhitespace(character)) {
-      // The second colon of a pseudo-element is part of its `::` introducer,
-      // not a boundary between a potential parent and nested child.
-      if (character === ':' && childSelector[index - 1] === ':') {
-        continue;
-      }
-      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));
-    }
+  let boundaryIndex = findTopLevelDelimiter(childSelector, PARENT_BOUNDARY_CHARACTERS, 1);
+  while (boundaryIndex !== -1) {
+    addCandidateParentSelector(childSelector, boundaryIndex, candidates);
+    boundaryIndex = findTopLevelDelimiter(childSelector, PARENT_BOUNDARY_CHARACTERS, boundaryIndex + 1);
   }
   return candidates;
 }

package/src/rules/stringify.js

@@ -306,6 +306,83 @@ function simplifyNthPseudoClasses (selector) {
   return minified;
 }
 
+/**
+ * Matches an attribute selector's brackets: the attribute name, the matcher
+ * (such as `=` or `^=`), the value, and the optional case-sensitivity flag `i`
+ * or `s`. The value is a double-quoted string, a single-quoted string, or a run
+ * of unquoted characters in which escapes may stand in for spaces.
+ *
+ * @type {RegExp}
+ */
+const ATTRIBUTE_SELECTOR_PATTERN = /\[\s*([^\s=\]]+?)\s*([~|^$*]?=)\s*("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|(?:\\.|[^\s"'\\\]])+)(?:\s*([is]))?\s*\]/gi;
+
+/**
+ * Matches a value that can be written without quotes: an identifier made of
+ * letters, digits, hyphens, underscores, and escapes. It cannot start with a
+ * digit, or with a hyphen followed by a digit.
+ *
+ * @type {RegExp}
+ */
+const UNQUOTED_ATTRIBUTE_VALUE_PATTERN = /^(?:-?[a-zA-Z_]|\\.)(?:[\w-]|\\.)*$/;
+
+/**
+ * Writes the text of a quoted attribute value without its quotes, escaping the
+ * characters that would otherwise end an unquoted identifier.
+ *
+ * @param  {string}      content  The value's text, without its quotes.
+ * @return {string|null}          The unquoted value, or null when it cannot be written without quotes.
+ */
+function escapeAttributeValue (content) {
+  if (content.includes('\\')) {
+    return null;
+  }
+  // Escape special characters that require quoting (spaces, #, ., :, /, ;)
+  const escaped = content.replace(/([ #.:/;])/g, '\\$1');
+  if (!UNQUOTED_ATTRIBUTE_VALUE_PATTERN.test(escaped)) {
+    return null;
+  }
+  return escaped;
+}
+
+/**
+ * Writes an attribute value with double quotes, removing the escapes that only
+ * an unquoted value needs. A value that already has quotes keeps them, unless
+ * a single-quoted value holds a double quote that would have to be escaped.
+ *
+ * @param  {string} rawValue  The value as written, with or without quotes.
+ * @return {string}           The value wrapped in double quotes.
+ */
+function quoteAttributeValue (rawValue) {
+  if (rawValue[0] === '"' || rawValue[0] === '\'') {
+    const content = rawValue.slice(1, -1);
+    return content.includes('"') ? rawValue : '"' + content + '"';
+  }
+  // Unescape the characters that only an unquoted value needs escaped
+  return '"' + rawValue.replace(/\\([ #.:/;])/g, '$1') + '"';
+}
+
+/**
+ * Writes an attribute value and its case-sensitivity flag in whichever form is
+ * shorter. A value written with quotes stays quoted on a tie, and a value written
+ * without quotes stays unquoted. A flag after an unquoted value needs a space,
+ * but a flag after a quoted value does not.
+ *
+ * @param  {string}      rawValue  The value as written, including its quotes when it has them.
+ * @param  {string|null} flag      The flag as written, or null when there is none.
+ * @return {string}                The value followed by the flag, in its shortest form.
+ */
+function formatAttributeValue (rawValue, flag) {
+  const isQuoted = rawValue[0] === '"' || rawValue[0] === '\'';
+  const quotedForm = quoteAttributeValue(rawValue) + (flag || '');
+  const unquotedValue = isQuoted ? escapeAttributeValue(rawValue.slice(1, -1)) : rawValue;
+  if (unquotedValue === null) {
+    return quotedForm;
+  }
+  const unquotedForm = unquotedValue + (flag ? ' ' + flag : '');
+  const useUnquoted = isQuoted ? unquotedForm.length < quotedForm.length : unquotedForm.length <= quotedForm.length;
+  return useUnquoted ? unquotedForm : quotedForm;
+}
+
 /**
  * Writes each attribute selector's value quoted or escaped, whichever is
  * shorter, and removes the whitespace inside its brackets.
@@ -314,35 +391,9 @@ function simplifyNthPseudoClasses (selector) {
  * @return {string}           The selector with minified attribute selectors.
  */
 function minifyAttributeSelectors (selector) {
-  let minified = selector;
-  // Minify double-quoted attribute selectors: remove inner whitespace and escape when shorter
-  minified = minified.replace(/\[\s*([^=]+)\s*=\s*"(.*?)"\s*\]/g, (match, attribute, value) => {
-    // Escape special characters that require quoting (spaces, #, ., :, /, ;), and compare lengths
-    let escaped = value.replace(/([ #.:/;])/g, '\\$1');
-    if (escaped.length < value.length + 2) {
-      return '[' + attribute + '=' + escaped + ']';
-    }
-    return '[' + attribute + '="' + value + '"]';
-  });
-  // Minify single-quoted attribute selectors: remove inner whitespace and escape when shorter
-  minified = minified.replace(/\[\s*([^=]+)\s*=\s*'(.*?)'\s*\]/g, (match, attribute, value) => {
-    // Escape special characters that require quoting (spaces, #, ., :, /, ;), and compare lengths
-    let escaped = value.replace(/([ #.:/;])/g, '\\$1');
-    if (escaped.length < value.length + 2) {
-      return '[' + attribute + '=' + escaped + ']';
-    }
-    return '[' + attribute + '="' + value + '"]';
-  });
-  // Minify unquoted attribute selectors: quote when unescaping produces a shorter result
-  minified = minified.replace(/\[\s*([^=]+)\s*=\s*([^"'].*?)\s*\]/g, (match, attribute, value) => {
-    // Unescape special characters (spaces, #, ., :, /, ;) and compare with quoted form
-    let unescaped = value.replace(/\\([ #.:/;])/g, '$1');
-    if (unescaped.length + 2 < value.length) {
-      return '[' + attribute + '="' + unescaped + '"]';
-    }
-    return '[' + attribute + '=' + value + ']';
+  return selector.replace(ATTRIBUTE_SELECTOR_PATTERN, (match, attribute, matcher, rawValue, flag) => {
+    return '[' + attribute + matcher + formatAttributeValue(rawValue, flag) + ']';
   });
-  return minified;
 }
 
 /**

package/src/value/math/index.js

@@ -169,15 +169,17 @@ function simplifyMathFunctionsOnce (value, property) {
  */
 function normalizeMathFunctions (value, property, originalValue = '') {
   let result = value;
-  let previous;
-
-  do {
-    previous = result;
-    // Resolving a math function leaves a plain value where it stood, which can
-    // bring the function it was nested in within reach of the next pass, so
-    // the value is simplified until it settles
-    result = simplifyMathFunctionsOnce(result, property);
-  } while (result !== previous);
+  if (value.includes('(')) {
+    let previous;
+
+    do {
+      previous = result;
+      // Resolving a math function leaves a plain value where it stood, which can
+      // bring the function it was nested in within reach of the next pass, so
+      // the value is simplified until it settles
+      result = simplifyMathFunctionsOnce(result, property);
+    } while (result !== previous);
+  }
 
   // When calc() folded to an absolute-length unit (pt, pc, in, cm, mm, q), convert to pixels
   if (originalValue.includes('calc(') && /^-?(?:\d+|\d*\.\d+)(pt|pc|in|cm|mm|q)$/i.test(result)) {

package/src/value/math/rewrite.js

@@ -48,8 +48,13 @@ function rewriteMathFunctionContents (rewriteExpression, value) {
       break;
     }
     const functionName = value.slice(findFunctionNameStart(value, openIndex), openIndex).toLowerCase();
+    if (!MATH_FUNCTION_NAMES.has(functionName)) {
+      result += value.slice(index, openIndex + 1);
+      index = openIndex + 1;
+      continue;
+    }
     const closeIndex = findMatchingParenthesis(value, openIndex);
-    if (!MATH_FUNCTION_NAMES.has(functionName) || closeIndex === -1) {
+    if (closeIndex === -1) {
       result += value.slice(index, openIndex + 1);
       index = openIndex + 1;
       continue;