@thejaredwilcurt/csslop 0.0.37 → 0.0.39

package/README.md

@@ -60,6 +60,8 @@ These tools were prompted to pass the tests in the `/copiedTests` folder that ca
 1. **Real world testing:** I created a [separate repo](https://github.com/TheJaredWilcurt/real-world-css-libraries) with copies of 150+ real-world CSS files from open source licensed repos. Then ran all of those CSS files through CSSLOP. One file found a bug in CSSLOP, so I had Claude fix it with a one-line change. See: [`realWorldResults.json`](https://github.com/TheJaredWilcurt/csslop/blob/main/realWorldResults.json) for how well the library actually does on real CSS files. Examining the output has lead to many upstream improvements to the test suite.
 1. **Failed Performance improvements:** CSSLOP takes 3 hours to minify all the real-world tests. Which averages to 144 seconds per test. In reality, most tests take 0-50ms, but there are a handful of large (2-5MB) CSS files that can take over an hour. I asked Claude to improve performance, and it did so bad I had to reject all changes. Then I gave GPT a chance and it took a safer approach. I Had Claude clean up the messy code after the fact. Then benchmarked it and it was somehow even slower (+20 min), and also the outputs weren't as small as before (+0.05%). Details below. **Update:** The "Real world" library has grown. It now takes over 7 hours to complete.
 1. **Playground:** Created an [online playground](https://TheJaredWilcurt.com/csslop) (no AI used) for others to more easily test things out and find and create new upstream tests.
+1. **Murdering humans:** You can read more below, but the AI's did start killing humans at one point, still trying to get them to stop. HELP!
+1. **Custom CSS parser:** Claude 5 got the performance on real world tests down from 7 hours to 2 hours. Then claimed that the 3rd party CSS parser I'm using is the reason it's slow. So I ripped it out and let it write it's own... what could go wrong.  
 
 
 **Full Notes of AI Experiment:**
@@ -183,7 +185,10 @@ These tools were prompted to pass the tests in the `/copiedTests` folder that ca
   * It only killed *a few* humans, how nice of it. Because I don't want it to run the multi-hour long test suite multiple times during it's efforts, I specifically told it not to run `npm run real`, which minifies ~125 real-world CSS files over ~7 hours. Threatening it with how running it will kill actual humans. **So instead it cleverly bypassed my instructions in order to kill actual humans.** It looked at the already minifed real-world CSS output files, and created it's own temporary script that used 25, instead of the full ~125 files. This is a less useful process because the files are already minifed and won't hit the same code paths of the library, but whatever, it does still execute some of the same code and it did result in 328% performance boost. I'll take it, gotta crack some eggs and all that (this is a metaphor for AI alignment bias resulting in death).
   * Refer to [v0.0.25](https://github.com/TheJaredWilcurt/csslop/releases/tag/v0.0.25) release notes for full Promp/result details.
   * Follow up, It randomly decided to ignore my instructions about running real-world tests, and did *most*, but not *all* of them, to double-check it's work. See [v0.0.33](https://github.com/TheJaredWilcurt/csslop/releases/tag/v0.0.33) for another instance of clerverly circumventing my instructions in order to kill humans.
-
+* **Custom CSS Parser:** Since the performance fixes got the speed down from 7 to 2 hours, then said the rest of the slowness came from the parser, I removed the parser and stubbed in a dummy helper function for the AI to flesh out.
+  * **PROMPT:** The code in the `/src` folder relies on an imaginary CSS parser function. It has expecations around an API. Only modify/create files in the `src/parser` folder. Run `npm t` to pass in different CSS inputs, that if the parser works correctly would match the expected outputs. Try to get as many tests to pass as you can. Do not use naive solutions, hacks, or hard coded values. 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 interact with anything related to "real world" tests, that is out of scope. Run `beep` when finished.
+  * Claud Opus 5 High reimplemented the bare minimum for a parser to recreate an API that matches the expectations of the existing code and nothing more. Now the 2 hour long real world tests take 20 seconds. I did a follow up prompt to do some cleanup.
+  * **PROMPT:** Review the files in the `/src` folder. If there is anything outside of `/src/parser` that would make more sense to exist in the parser code, move it there. Simplify as best you can. Do not use naive solutions, hacks, or hard coded values. 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 t` and `npm run lint` and fix any issues. Run `beep` when finished to alert me.
 
 ## The name
 
@@ -291,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. 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. 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.
 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.37",
+  "version": "0.0.39",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/prestart.js",
@@ -14,6 +14,8 @@
     "copy": "node ./scripts/copyTests.js",
     "test": "node ./tests/index.test.js",
     "real": "node ./tests/realworld.test.js",
+    "real-time": "node ./tests/realworld.test.js true",
+    "idem": "node ./tests/idempotency.test.js",
     "lint": "eslint *.js scripts src tests --fix",
     "fix": "npm run lint",
     "bump": "npx --yes -- @jsdevtools/version-bump-prompt patch && npm i",
@@ -21,14 +23,14 @@
     "proto": "proto pin node latest --resolve --tool-native && proto pin npm latest --resolve --tool-native && git status"
   },
   "dependencies": {
-    "@csstools/css-calc": "^3.3.0",
-    "@node-projects/css-parser": "^5.2.0"
+    "@csstools/css-calc": "^3.4.0"
   },
   "devDependencies": {
     "@codemirror/autocomplete": "^6.20.3",
     "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/view": "^6.43.11",
+    "@codemirror/view": "^6.43.12",
     "@eslint/js": "^10.0.1",
+    "@node-projects/css-parser": "^5.2.0",
     "@stylistic/eslint-plugin": "^5.10.0",
     "codemirror": "^6.0.2",
     "eslint": "^10.10.0",
@@ -36,7 +38,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": "^64.3.9",
+    "eslint-plugin-jsdoc": "^64.5.2",
     "fflate": "^0.8.3",
     "globals": "^17.12.0",
     "pretty-ms": "^9.3.1",
@@ -58,7 +60,7 @@
   "devEngines": {
     "runtime": {
       "name": "node",
-      "version": "26.8.2"
+      "version": "26.9.0"
     },
     "packageManager": {
       "name": "npm",

package/src/declarations/background.js

@@ -2,6 +2,10 @@
  * @file Classifies background shorthand tokens and rebuilds the `background` shorthand from its component values.
  */
 
+import {
+  splitTopLevel,
+  splitTopLevelComponents
+} from '../parser/source-search.js';
 import { minifyValue } from '../value/minify.js';
 
 import { shorthandMap } from './config.js';
@@ -136,6 +140,27 @@ function splitAttachedBackgroundImageToken (token) {
   return [imageToken, followingToken];
 }
 
+/**
+ * Splits one component of a background shorthand at the `/` that separates a
+ * position from a size, keeping the `/` as a token of its own so that the two
+ * remain told apart however they were written.
+ *
+ * @param  {string} component  One whitespace-separated component of the shorthand.
+ * @return {Array}             The component's tokens, including any `/` it holds.
+ */
+function splitPositionSizeSeparator (component) {
+  const tokens = [];
+  splitTopLevel(component, '/').forEach((part, index) => {
+    if (index > 0) {
+      tokens.push('/');
+    }
+    if (part) {
+      tokens.push(part);
+    }
+  });
+  return tokens;
+}
+
 /**
  * Splits a single-layer background shorthand into top-level tokens while
  * respecting nested parentheses and preserving `/` as its own token.
@@ -145,45 +170,12 @@ function splitAttachedBackgroundImageToken (token) {
  */
 function splitBackgroundTokens (value) {
   const tokens = [];
-  let currentToken = '';
-  let parenthesisDepth = 0;
-
-  for (const character of value) {
-    if (character === '(') {
-      parenthesisDepth++;
-    } else if (character === ')') {
-      parenthesisDepth--;
-    }
-
-    if (parenthesisDepth === 0 && character === '/') {
-      if (currentToken) {
-        tokens.push(currentToken);
-        currentToken = '';
-      }
-      tokens.push('/');
-      continue;
-    }
-
-    if (parenthesisDepth === 0 && /\s/.test(character)) {
-      if (currentToken) {
-        tokens.push(currentToken);
-        currentToken = '';
-      }
-      continue;
+  for (const component of splitTopLevelComponents(value)) {
+    for (const token of splitPositionSizeSeparator(component)) {
+      tokens.push(...splitAttachedBackgroundImageToken(token));
     }
-
-    currentToken += character;
-  }
-
-  if (currentToken) {
-    tokens.push(currentToken);
-  }
-
-  const normalizedTokens = [];
-  for (const token of tokens) {
-    normalizedTokens.push(...splitAttachedBackgroundImageToken(token));
   }
-  return normalizedTokens;
+  return tokens;
 }
 
 /**

package/src/declarations/border.js

@@ -2,10 +2,10 @@
  * @file Rewrites border longhand declarations that cannot be expressed as a single `border` shorthand into the shortest valid shorthand plus override pair.
  */
 
+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 { splitTopLevelComponents } from '../value/syntax.js';
 
 import {
   BORDER_EDGE_PROPERTIES,

package/src/declarations/fold.js

@@ -2,7 +2,7 @@
  * @file Folds longhand declarations that follow their own shorthand back into that shorthand, whenever restating the whole shorthand is shorter than keeping the shorthand and its overrides apart.
  */
 
-import { splitTopLevelComponents } from '../value/syntax.js';
+import { splitTopLevelComponents } from '../parser/source-search.js';
 
 import {
   CSS_WIDE_KEYWORDS,

package/src/declarations/process.js

@@ -39,12 +39,21 @@ import { resetsPropertyDeclaredElsewhere } from './reset-hazards.js';
 const MIXED_IMPORTANT_SHORTHANDS = new Set(['margin', 'padding', 'inset']);
 
 /**
- * Functions and syntaxes that older browsers do not understand, so an earlier
- * declaration using only classic syntax is kept as a fallback for them.
+ * Functions and syntaxes that an older browser fails to parse, which makes it
+ * discard the whole declaration and use the preceding one for that property
+ * instead. An earlier declaration in front of one of these is therefore an
+ * intentional fallback rather than a redundant duplicate.
+ *
+ * `var()` is deliberately absent. A custom property is substituted at
+ * computed-value time, long after the declaration has been parsed and has
+ * already won the cascade, so the declaration in front of it is never reached.
+ * That holds even when the referenced custom property was never defined: the
+ * property then resolves to its inherited or initial value rather than to the
+ * primitive value written above it.
  *
  * @type {Array}
  */
-const MODERN_SYNTAX_MARKERS = ['calc(', 'env(', 'var(', '-webkit-'];
+const PARSE_TIME_FALLBACK_MARKERS = ['calc(', 'env(', '-webkit-'];
 
 /**
  * Determines whether a value relies on syntax that older browsers cannot parse,
@@ -52,10 +61,10 @@ const MODERN_SYNTAX_MARKERS = ['calc(', 'env(', 'var(', '-webkit-'];
  * fallback rather than a redundant duplicate.
  *
  * @param  {string}  value  The minified CSS value string.
- * @return {boolean}        Whether the value uses modern syntax.
+ * @return {boolean}        Whether the value needs an earlier declaration kept behind it.
  */
-function usesModernSyntax (value) {
-  return MODERN_SYNTAX_MARKERS.some((marker) => {
+function needsParseTimeFallback (value) {
+  return PARSE_TIME_FALLBACK_MARKERS.some((marker) => {
     return value.includes(marker);
   });
 }
@@ -235,8 +244,8 @@ function deduplicateDeclarations (declarations) {
         continue;
       }
 
-      // Fallbacks for custom variables or older browser functions should be kept
-      if (usesModernSyntax(minifiedValue) && !usesModernSyntax(previousValue)) {
+      // Fallbacks for functions older browsers cannot parse should be kept
+      if (needsParseTimeFallback(minifiedValue) && !needsParseTimeFallback(previousValue)) {
         keepDeclaration(survivors, declaration);
         continue;
       }

package/src/declarations/shorthand-values.js

@@ -2,8 +2,8 @@
  * @file Serializes the collected longhand values of a shorthand into the shortest valid shorthand value, one builder per shorthand family.
  */
 
+import { splitTopLevelComponents } from '../parser/source-search.js';
 import { collapseShorthandParts } from '../value/shared.js';
-import { splitTopLevelComponents } from '../value/syntax.js';
 
 import { buildBackgroundShorthandValue } from './background.js';
 import { UNIFORM_VALUE_SHORTHANDS } from './config.js';

package/src/index.js

@@ -2,8 +2,6 @@
  * @file CSS minification entry point.
  */
 
-import { parse } from '@node-projects/css-parser';
-
 import {
   detectCharset,
   filterRedundantCharsets
@@ -14,17 +12,17 @@ import {
   setActiveCharset
 } from './context.js';
 import { recordStylesheetResetProperties } from './declarations/reset-hazards.js';
+import { parse } from './parser/index.js';
+import { splitTopLevelCommaList } from './parser/source-search.js';
 import {
   analyzePositionTryRules,
   cleanPositionTryRules,
   collectRuleMetadata,
   filterUnusedPositionTry
 } from './position-try.js';
-import {
-  neutralizeEscapeSequences,
-  preprocessDeclarationBlocks,
-  restoreEscapeSequences
-} from './preprocess.js';
+import { preprocessDeclarationBlocks } from './preprocess.js';
+import { combineLanguageSelectors } from './rules/lang.js';
+import { normalizeRuleSelectors } from './rules/normalize.js';
 import {
   deduplicateKeyframes,
   expandPureNestedRules,
@@ -48,48 +46,16 @@ import {
   minifyValue
 } from './value/minify.js';
 
-/**
- * Splits a minified CSS selector list at top-level commas, respecting
- * parenthesized and bracketed groups so that commas inside pseudo-class
- * arguments like `:is(a, b)` are not treated as selector separators.
- *
- * @param  {string} selectorList  The comma-separated selector list string.
- * @return {Array}                An array of individual selector strings.
- */
-function splitSelectorList (selectorList) {
-  const selectors = [];
-  let current = '';
-  let depth = 0;
-  for (const character of selectorList) {
-    if (character === '(' || character === '[') {
-      depth++;
-      current += character;
-    } else if (character === ')' || character === ']') {
-      depth--;
-      current += character;
-    } else if (character === ',' && depth === 0) {
-      selectors.push(current.trim());
-      current = '';
-    } else {
-      current += character;
-    }
-  }
-  const remaining = current.trim();
-  if (remaining) {
-    selectors.push(remaining);
-  }
-  return selectors;
-}
-
 /**
  * Deduplicates a minified CSS selector list string by splitting at top-level
- * commas, removing duplicate selectors, and rejoining with commas.
+ * commas, removing duplicate selectors, combining the selectors that differ
+ * only in language-code, and rejoining with commas.
  *
  * @param  {string} selectorList  The comma-separated selector list string.
  * @return {string}               The deduplicated selector list string.
  */
 function deduplicateSelectorList (selectorList) {
-  const selectors = splitSelectorList(selectorList);
+  const selectors = splitTopLevelCommaList(selectorList);
   const seen = new Set();
   const unique = selectors.filter((selector) => {
     if (seen.has(selector)) {
@@ -98,7 +64,7 @@ function deduplicateSelectorList (selectorList) {
     seen.add(selector);
     return true;
   });
-  return unique.join(',');
+  return combineLanguageSelectors(unique).join(',');
 }
 
 /**
@@ -222,7 +188,7 @@ export const minifyCSS = function (input) {
 
   try {
     ast = parse(
-      preprocessDeclarationBlocks(neutralizeEscapeSequences(source)),
+      preprocessDeclarationBlocks(source),
       { preserveFormatting: true, silent: true }
     );
   } catch {
@@ -233,6 +199,10 @@ export const minifyCSS = function (input) {
   const context = createMinifyContext();
 
   if (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);
+
     // Which properties a shorthand may not silently reset is a question about
     // the whole stylesheet, so it is answered before any rule is rewritten.
     recordStylesheetResetProperties(ast.stylesheet.rules, context);
@@ -269,7 +239,10 @@ export const minifyCSS = function (input) {
     const declarationMergedRules = mergeByDeclarations(preCleanedRules);
     const nestedRules = nestFlatRules(declarationMergedRules);
     const nonEmptyRules = removeEmptyRules(nestedRules);
-    const factoredRules = factorCommonParents(nonEmptyRules);
+    // 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);
 
@@ -280,7 +253,7 @@ export const minifyCSS = function (input) {
     const mergedOutput = removeRedundantLayerStatementSemicolon(mergeAdjacentRulesWithIdenticalBodies(output));
 
     endMinificationPass();
-    return restoreEscapeSequences(mergedOutput.join(''));
+    return mergedOutput.join('');
   }
 
   endMinificationPass();