@thejaredwilcurt/csslop 0.0.16 → 0.0.17

package/README.md

@@ -14,13 +14,13 @@
 
 * Use the tests from the open source, 3rd-party, CSS minification auditing library [css-minify-tests](https://github.com/keithamus/css-minify-tests).
 * Have AI completely generate the library logic to pass all tests.
-* Have me (an experienced library author) validate the outcomes and [make upstream corrections](https://github.com/keithamus/css-minify-tests/issues?q=author%3ATheJaredWilcurt) to the tests library.
+* Have me (an experienced library author) validate the outcomes and [make upstream corrections and improvements](https://github.com/keithamus/css-minify-tests/issues?q=author%3ATheJaredWilcurt) to the tests library.
 
 **The Results:**
 
 * All tests pass.
 * Several new tests were created upstream, and some existing tests were improved/fixed upstream (all manually by me, no AI used).
-* The `src` folder is 100% vibe coded, and despite passing all tests, is almost certainly not worth using. Though if you do, and you find issues, you can report them and I might tell the AI's to fix it.
+* The `src` folder is 100% vibe coded, and despite passing all tests, is almost certainly not worth using. Though if you do, and you find issues, you can isolate the problem and [compare against the correct output of real minifiers](https://TheJaredWilcurt.com/playground), then use that to create a [new test upstream](https://github.com/keithamus/css-minify-tests/issues) for the AI's to be forced to pass.
 * No AI generated code exists outside of the `src` folder, this README, for example, is 100% human crafted.
 
 **AI's used:**
@@ -278,7 +278,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. Run `npm run lint` and ensure the linter passes when done. DO NOT, under any circumstance, run `npm run real` (it will kill actual humans)! 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. Run `npm run lint` and correct any linter warnings/errors that occur in the `/src` folder. DO NOT, under any circumstance, run `npm run real` (it will kill actual humans)! 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.
@@ -289,3 +289,22 @@ Two different cases:
 1. Do a new release on GitHub
 1. `git checkout main && git pull origin main && git pull`
 1. `npm run publish`
+
+
+## Code Organization prompt:
+
+```
+1. Check the files in the `/src` folder. If any of them are over 1000 lines long, look across the file for commonalities that could be grouped and moved to a separate file and/or folder. When creating new files, if a new organizational approach is used, re-evaluate how other files are organized and reorganize them, or their contents, into new files to match the new organizational structure, as needed.
+1. After organizing check that no tests are failing with `npm t`. If any are, fix them by modifying files in `src`.
+1. During any of your edits:
+   * Do not use naive solutions, hacks, or hard coded values.
+   * Make sure implementations 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.
+1. After all other code edits, run `npm run lint` and ensure the linter passes.
+1. DO NOT, under any circumstance, run `npm run real` (it will kill actual humans)!
+1. When all done, run the `beep` command to alert me you finished.
+```

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/prestart.js",
@@ -11,7 +11,8 @@
     "prebuild": "node ./scripts/prebuild.js",
     "build": "vite build",
     "postbuild": "node ./scripts/postbuild.js",
-    "copy": "node ./scripts/copyTests.js",
+    "copy": "node ./scripts/copyTestsFromNodeModules.js",
+    "copy-repo": "node ./scripts/copyTestsFromRepo.js",
     "test": "node ./tests/index.test.js",
     "real": "node ./tests/realworld.test.js",
     "lint": "eslint *.js scripts src tests --fix",
@@ -20,7 +21,7 @@
     "publisho": "npm publish --access=public"
   },
   "dependencies": {
-    "@csstools/css-calc": "^3.2.1",
+    "@csstools/css-calc": "^3.3.0",
     "@node-projects/css-parser": "^5.2.0"
   },
   "devDependencies": {
@@ -31,12 +32,12 @@
     "@stylistic/eslint-plugin": "^5.10.0",
     "codemirror": "^6.0.2",
     "css-minify-tests": "github:keithamus/css-minify-tests",
-    "eslint": "^10.5.0",
+    "eslint": "^10.8.0",
     "eslint-config-tjw-base": "^5.0.0",
     "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": "^63.0.12",
+    "eslint-plugin-jsdoc": "^63.2.2",
     "fflate": "^0.8.3",
     "globals": "^17.7.0",
     "pretty-ms": "^9.3.0",

package/src/index.js

@@ -26,6 +26,7 @@ import {
   expandPureNestedRules,
   factorCommonParents,
   mergeByDeclarations,
+  mergeIdenticalNestedRules,
   mergeLayerRules,
   mergeMediaRules,
   mergeSelectorRules,
@@ -248,7 +249,8 @@ export const minifyCSS = function (input) {
     const nestedRules = nestFlatRules(declarationMergedRules);
     const nonEmptyRules = removeEmptyRules(nestedRules);
     const factoredRules = factorCommonParents(nonEmptyRules);
-    const finalRules = nestFlatRules(factoredRules);
+    const nestedFinalRules = nestFlatRules(factoredRules);
+    const finalRules = mergeIdenticalNestedRules(nestedFinalRules);
 
     for (const rule of finalRules) {
       output.push(stringifyRule(rule, context));

package/src/rules/optimize.js

@@ -44,7 +44,10 @@ function expandPureNestedRules (rules) {
     const isPureNested = nonWhitespace.length > 0 && nonWhitespace.every((declaration) => {
       return declaration.type === 'rule';
     });
-    if (!isPureNested) {
+    // A comma-separated parent selector list behaves like :is() for specificity,
+    // so expanding it into descendant combinations (e.g. #a,.b → #a .c,.b .c)
+    // would change specificity. Only single-selector parents can expand safely.
+    if (!isPureNested || rule.selectors.length !== 1) {
       result.push(rule);
       continue;
     }
@@ -443,6 +446,295 @@ function mergeByDeclarations (rules) {
   return result;
 }
 
+/**
+ * Splits a selector list on top-level commas, respecting parentheses and
+ * brackets so commas inside `:is(...)` or `[attr="a,b"]` are not split.
+ *
+ * @param  {string} selectorList  The selector list string.
+ * @return {Array}                The individual selector strings.
+ */
+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;
+    }
+  }
+  selectors.push(current.trim());
+  return selectors;
+}
+
+/**
+ * Advances past a CSS identifier (name) starting at the given index.
+ *
+ * @param  {string} text   The selector text.
+ * @param  {number} start  The index to start scanning from.
+ * @return {number}        The index just after the identifier.
+ */
+function skipSelectorName (text, start) {
+  let index = start;
+  // Advance over identifier characters (letters, digits, hyphen, underscore)
+  while (index < text.length && (/[a-zA-Z0-9_-]/).test(text[index])) {
+    index++;
+  }
+  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.
+ *
+ * @param  {Array}  first   The first specificity tuple.
+ * @param  {Array}  second  The second specificity tuple.
+ * @return {number}         Negative, zero, or positive per standard comparison.
+ */
+function compareSpecificity (first, second) {
+  for (let index = 0; index < 3; index++) {
+    if (first[index] !== second[index]) {
+      return first[index] - second[index];
+    }
+  }
+  return 0;
+}
+
+/**
+ * Computes the CSS specificity of a single complex selector as an
+ * [ids, classes, types] tuple. The nesting selector `&` is ignored because its
+ * contribution comes from the shared parent when comparing sibling selectors.
+ * Functional pseudo-classes `:is()`, `:not()`, `:has()`, and `:matches()` add
+ * the maximum specificity of their arguments; `:where()` adds nothing.
+ *
+ * @param  {string} selector  A single complex selector string.
+ * @return {Array}            The [ids, classes, types] specificity tuple.
+ */
+function computeSpecificity (selector) {
+  const specificity = [0, 0, 0];
+  const text = selector.trim();
+  let index = 0;
+  while (index < text.length) {
+    const character = text[index];
+    if (character === '#') {
+      specificity[0]++;
+      index = skipSelectorName(text, index + 1);
+    } else if (character === '.') {
+      specificity[1]++;
+      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++;
+      }
+    } else if (character === ':') {
+      if (text[index + 1] === ':') {
+        specificity[2]++;
+        index = skipSelectorName(text, index + 2);
+      } else {
+        const nameStart = index + 1;
+        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);
+          if (name === 'where') {
+            // :where() contributes zero specificity
+          } else if (name === 'is' || name === 'not' || name === 'has' || name === 'matches') {
+            const innerMax = maxSelectorSpecificity(inner);
+            specificity[0] += innerMax[0];
+            specificity[1] += innerMax[1];
+            specificity[2] += innerMax[2];
+          } else {
+            specificity[1]++;
+          }
+          index = closeIndex + 1;
+        } else {
+          // Legacy single-colon pseudo-elements count as pseudo-elements
+          if (name === 'before' || name === 'after' || name === 'first-line' || name === 'first-letter') {
+            specificity[2]++;
+          } else {
+            specificity[1]++;
+          }
+          index = nameEnd;
+        }
+      }
+    } else if (character === '*' || character === '&') {
+      // Universal selector and nesting selector add no counted specificity here
+      index++;
+    } else if ((/[a-zA-Z]/).test(character)) {
+      specificity[2]++;
+      index = skipSelectorName(text, index);
+    } else {
+      // Combinators and whitespace do not affect specificity
+      index++;
+    }
+  }
+  return specificity;
+}
+
+/**
+ * Returns the maximum specificity tuple across a comma-separated selector list,
+ * matching how a comma-separated group behaves as `:is()`.
+ *
+ * @param  {string} selectorList  The selector list string.
+ * @return {Array}                The maximum [ids, classes, types] tuple.
+ */
+function maxSelectorSpecificity (selectorList) {
+  let maximum = [0, 0, 0];
+  for (const selector of splitSelectorListTopLevel(selectorList)) {
+    const specificity = computeSpecificity(selector);
+    if (compareSpecificity(specificity, maximum) > 0) {
+      maximum = specificity;
+    }
+  }
+  return maximum;
+}
+
+/**
+ * Builds a normalized signature of a rule's declaration body, or null when the
+ * rule contains anything other than plain declarations (e.g. nested rules).
+ *
+ * @param  {object}      rule  The AST rule node.
+ * @return {string|null}       The sorted "property:value" signature, or null.
+ */
+function nestedRuleBodySignature (rule) {
+  const declarations = (rule.declarations || []).filter((declaration) => {
+    return declaration.type !== 'whitespace' && declaration.type !== 'comment';
+  });
+  if (declarations.length === 0) {
+    return null;
+  }
+  const isAllPlainDeclarations = declarations.every((declaration) => {
+    return declaration.type === 'declaration' && declaration.property;
+  });
+  if (!isAllPlainDeclarations) {
+    return null;
+  }
+  return declarations
+    .map((declaration) => {
+      return declaration.property + ':' + (declaration.value || '').trim();
+    })
+    .sort()
+    .join(';');
+}
+
+/**
+ * Determines whether two nested rules can be merged into a shared selector list.
+ * They must have identical declaration bodies and the same specificity level,
+ * since comma-separated nested selectors share the highest specificity of the
+ * group (like `:is()`).
+ *
+ * @param  {object}  first   The first nested rule.
+ * @param  {object}  second  The second nested rule.
+ * @return {boolean}         Whether the two nested rules may be merged.
+ */
+function nestedRulesMergeable (first, second) {
+  if (!first.selectors?.length || !second.selectors?.length) {
+    return false;
+  }
+  const firstSignature = nestedRuleBodySignature(first);
+  if (firstSignature === null || firstSignature !== nestedRuleBodySignature(second)) {
+    return false;
+  }
+  const firstSpecificity = maxSelectorSpecificity(first.selectors.join(','));
+  const secondSpecificity = maxSelectorSpecificity(second.selectors.join(','));
+  return compareSpecificity(firstSpecificity, secondSpecificity) === 0;
+}
+
+/**
+ * Recursively merges consecutive nested rules within a declaration list when
+ * they share identical bodies and specificity, combining their selector lists.
+ *
+ * @param  {Array} declarations  The declaration/nested-rule entries of a parent rule.
+ * @return {Array}               The declaration list with mergeable nested rules combined.
+ */
+function mergeConsecutiveNestedRules (declarations) {
+  const recursed = declarations.map((declaration) => {
+    if (declaration.type === 'rule' && declaration.declarations) {
+      return { ...declaration, declarations: mergeConsecutiveNestedRules(declaration.declarations) };
+    }
+    return declaration;
+  });
+
+  const result = [];
+  for (const declaration of recursed) {
+    const previous = result[result.length - 1];
+    if (
+      declaration.type === 'rule' &&
+      previous &&
+      previous.type === 'rule' &&
+      nestedRulesMergeable(previous, declaration)
+    ) {
+      result[result.length - 1] = {
+        ...previous,
+        selectors: [...previous.selectors, ...declaration.selectors]
+      };
+      continue;
+    }
+    result.push(declaration);
+  }
+  return result;
+}
+
+/**
+ * Merges mergeable nested rules within every rule's body across the stylesheet,
+ * recursing into `@media` and `@layer` blocks. Top-level rules are not merged
+ * here, since only nested (comma-grouped) selectors share specificity.
+ *
+ * @param  {Array} rules  The AST rule nodes to process.
+ * @return {Array}        The rules with mergeable nested rules combined.
+ */
+function mergeIdenticalNestedRules (rules) {
+  for (const rule of rules) {
+    if (rule.type === 'rule' && rule.declarations) {
+      rule.declarations = mergeConsecutiveNestedRules(rule.declarations);
+    } else if ((rule.type === 'media' || rule.type === 'layer') && rule.rules) {
+      rule.rules = mergeIdenticalNestedRules(rule.rules);
+    }
+  }
+  return rules;
+}
+
 /**
  * Merges rules with identical normalized selectors by combining their declarations. Non-rule entries (like `@media`) break the merge window.
  *
@@ -630,6 +922,7 @@ export {
   expandPureNestedRules,
   factorCommonParents,
   mergeByDeclarations,
+  mergeIdenticalNestedRules,
   mergeLayerRules,
   mergeMediaRules,
   mergeSelectorRules,

package/src/rules/stringify.js

@@ -361,6 +361,50 @@ function processIsSelector (selector) {
   return [':is(' + parts.join(',') + ')'];
 }
 
+/**
+ * Flattens a top-level `:is()` selector into its individual parts when the rule
+ * acts as a nesting parent. A nesting parent's entire selector list is treated
+ * as `:is()` when computing the specificity of its nested children, so lifting
+ * the parts out of an inner `:is()` does not change specificity. The `:is()` is
+ * kept when any part contains a pseudo (`:`), since such selectors may be
+ * unsupported and rely on `:is()` for forgiving parsing.
+ *
+ * @param  {string} selector  A minified CSS selector string.
+ * @return {Array}            The flattened selector parts, or the original selector.
+ */
+function flattenNestingParentIsSelector (selector) {
+  if (!selector.startsWith(':is(')) {
+    return [selector];
+  }
+  let depth = 0;
+  let closingIndex = -1;
+  for (let index = 4; index < selector.length; index++) {
+    if (selector[index] === '(') {
+      depth++;
+    } else if (selector[index] === ')') {
+      if (depth === 0) {
+        closingIndex = index;
+        break;
+      }
+      depth--;
+    }
+  }
+  // The :is() must span the entire selector to be safely liftable
+  if (closingIndex !== selector.length - 1) {
+    return [selector];
+  }
+  const parts = splitParametersByComma(selector.slice(4, -1)).map((part) => {
+    return part.trim();
+  });
+  const hasPotentiallyUnsupportedPart = parts.some((part) => {
+    return part.includes(':');
+  });
+  if (hasPotentiallyUnsupportedPart) {
+    return [selector];
+  }
+  return parts;
+}
+
 /**
  * Removes spaces after commas only inside parenthesized groups (function
  * calls like `var()`, `calc()`), leaving top-level comma spacing intact.
@@ -548,6 +592,15 @@ function stringifyRule (rule, context, nested = false) {
         minified = mergeAdjacentWherePseudoClasses(minified);
         return minified;
       });
+      // 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.
+      const isNestingParent = (rule.declarations || []).some((declaration) => {
+        return declaration.type === 'rule';
+      });
+      if (isNestingParent) {
+        uniqueSelectors = uniqueSelectors.flatMap(flattenNestingParentIsSelector);
+      }
       uniqueSelectors = uniqueSelectors.flatMap(processIsSelector);
       uniqueSelectors = [...new Set(uniqueSelectors)];
       const headingSet = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
@@ -639,8 +692,11 @@ function stringifyRule (rule, context, nested = false) {
 
   if (rule.type === 'media') {
     const normalizedMedia = normalizeMedia(rule.media);
+    // A custom-media reference is a parenthesized dashed-ident like (--modern);
+    // no space is needed after @media when the query begins with such a token.
+    const isCustomMediaReference = normalizedMedia.startsWith('(--');
     let separator;
-    if (nested && normalizedMedia.startsWith('(')) {
+    if ((nested && normalizedMedia.startsWith('(')) || isCustomMediaReference) {
       separator = '';
     } else {
       separator = ' ';
@@ -905,6 +961,18 @@ function stringifyRule (rule, context, nested = false) {
     return '';
   }
 
+  if (rule.type === 'custom-media') {
+    // Collapse whitespace, strip spaces around commas, and tighten parentheses
+    const condition = (rule.media || '')
+      .replace(/\s+/g, ' ')
+      .replace(/\s*,\s*/g, ',')
+      .replace(/\(\s+/g, '(')
+      .replace(/\s+\)/g, ')')
+      .trim();
+    const conditionSeparator = condition ? ' ' : '';
+    return '@custom-media ' + rule.name + conditionSeparator + condition + ';';
+  }
+
   if (rule.type === 'at-rule') {
     return stringifyAtRule(rule, context);
   }

package/src/value/colors.js

@@ -916,26 +916,6 @@ function convertOklabToHex (L, a, b, alpha) {
   return rgbaToHex(r, g, bl, alpha !== undefined ? alpha : 1);
 }
 
-/**
- * Handle color(from ...) relative color syntax for simple identity cases.
- *
- * @param  {string}      expr  The color(from ...) expression string.
- * @return {string|null}       A hex color string if the relative color is a simple identity transform, or null otherwise.
- */
-function evaluateRelativeColor (expr) {
-  // Match: color(from <base-color> srgb r g b [/ <alpha>]) identity transform pattern
-  const match = expr.match(/^color\(\s*from\s+(.+?)\s+srgb\s+r\s+g\s+b(?:\s*\/\s*([\d.]+%?))?\s*\)$/i);
-  if (!match) {
-    return null;
-  }
-  const baseColor = parseColor(match[1]);
-  if (!baseColor) {
-    return null;
-  }
-  const alpha = parseAlphaString(match[2], baseColor[3]);
-  return rgbaToHex(baseColor[0], baseColor[1], baseColor[2], alpha);
-}
-
 export {
   hslToRgbChannels,
   rgbaToHex,
@@ -945,7 +925,6 @@ export {
   parseHex,
   evaluateColorMix,
   convertOklabToHex,
-  evaluateRelativeColor,
   shortestColor,
   srgbToOklab,
   oklabToSrgb,