@thejaredwilcurt/csslop 0.0.16 → 0.0.18

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.18",
   "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,25 +21,25 @@
     "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": {
     "@codemirror/autocomplete": "^6.20.3",
     "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/view": "^6.43.6",
+    "@codemirror/view": "^6.43.7",
     "@eslint/js": "^10.0.1",
     "@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.3.2",
     "fflate": "^0.8.3",
-    "globals": "^17.7.0",
+    "globals": "^17.8.0",
     "pretty-ms": "^9.3.0",
     "real-world-css-libraries": "^1.0.5",
     "vite": "^8.1.2"

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/custom-properties.js

@@ -0,0 +1,89 @@
+/**
+ * @file Custom property value whitespace and comment processing for CSS minification.
+ */
+
+/**
+ * Removes spaces after commas only inside parenthesized groups (function
+ * calls like `var()`, `calc()`), leaving top-level comma spacing intact.
+ *
+ * @param  {string} value  The whitespace-collapsed custom property value.
+ * @return {string}        The value with post-comma spaces removed inside function calls only.
+ */
+function removeSpacesAfterCommasInsideFunctions (value) {
+  let result = '';
+  let parenthesisDepth = 0;
+  for (let index = 0; index < value.length; index++) {
+    const character = value[index];
+    if (character === '(') {
+      parenthesisDepth++;
+    }
+    if (character === ')') {
+      parenthesisDepth--;
+    }
+    if (character === ',' && parenthesisDepth > 0) {
+      result += ',';
+      // Skip whitespace after the comma inside function calls
+      while (index + 1 < value.length && value[index + 1] === ' ') {
+        index++;
+      }
+    } else {
+      result += character;
+    }
+  }
+  return result;
+}
+
+/**
+ * Strips leading zeros from decimal numbers in a custom property value
+ * (e.g. `0.5` becomes `.5`, `-0.02em` becomes `-.02em`).
+ *
+ * @param  {string} value  The custom property value string.
+ * @return {string}        The value with leading zeros removed from decimals.
+ */
+function stripLeadingZerosFromDecimals (value) {
+  // Match a boundary (start, whitespace, comma, open-paren), optional sign, then leading zeros before a decimal
+  return value.replace(/(^|\s|,|\()(-?)0+(\.\d+)/g, '$1$2$3');
+}
+
+/**
+ * Processes CSS comments within a custom property value. If the value
+ * consists entirely of a comment, the comment is removed (producing an
+ * empty value). If comments appear between other tokens, their content
+ * is stripped but empty comment delimiters are kept as zero-width
+ * token separators to preserve the token sequence.
+ *
+ * @param  {string} value  The raw custom property value string.
+ * @return {string}        The value with comments processed.
+ */
+function processCustomPropertyComments (value) {
+  // Match values that are entirely a comment (with optional surrounding whitespace)
+  const commentOnlyPattern = /^\s*\/\*.*?\*\/\s*$/s;
+  if (commentOnlyPattern.test(value)) {
+    return '';
+  }
+  // Strip comment content but keep empty markers as token separators
+  return value.replace(/\/\*.*?\*\//g, '/**/');
+}
+
+/**
+ * Collapses whitespace in a custom property value while preserving
+ * token boundaries. Each whitespace sequence is reduced to a single
+ * space, spaces after commas inside function calls are removed, and
+ * leading zeros on decimal numbers are stripped.
+ *
+ * @param  {string} value  The raw custom property value string.
+ * @return {string}        The minified custom property value.
+ */
+function collapseCustomPropertyWhitespace (value) {
+  // Collapse all whitespace sequences (newlines, tabs, multiple spaces) to a single space
+  let collapsed = value.replace(/\s+/g, ' ');
+  // Remove spaces after commas only inside function calls (e.g. var(--bar, 1.5) → var(--bar,1.5))
+  collapsed = removeSpacesAfterCommasInsideFunctions(collapsed);
+  // Strip leading zeros from decimals (e.g. 0.5 → .5, -0.02em → -.02em)
+  collapsed = stripLeadingZerosFromDecimals(collapsed);
+  return collapsed;
+}
+export {
+  collapseCustomPropertyWhitespace,
+  processCustomPropertyComments
+};

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,