@thejaredwilcurt/csslop 0.0.48 → 0.0.49

package/README.md

@@ -157,7 +157,7 @@ These tools were prompted to pass the tests in the `/copiedTests` folder that ca
   * While going through hundreds of old repos from the 2010's and checking the license in each repo I found almost all of them use MIT. Occasionally I'd find something different, one specific repo left a comment for why they chose their less common license:
     * > This work is licensed under a [Creative Commons Attribution 3.0 Unported License](http://creativecommons.org/licenses/by/3.0/). (I love this license! The license summary doesn't have any paragraphs in all-caps that seems like the license is angry at you)
 * I then spot checked a few of the 150 minified files to find bugs with the minifier and cases where it could have minified something better. I created issues upstream for all of these. If CSSLOP is passing 100% of the tests, but still outputting these bugs/missing optimizations, then the solution should be to add more tests around those edge cases. This is also beneficial to ALL CSS minifiers. The sloppy "do the minimum to pass the test" approach the AI took, is actually really great for finding missing tests. AI was not used in this evaluation or anything related to interacting with the upstream tests repo (issues or PRs).
-* When testing the realworld CSS files, I found there were about 6 files where the output was the same as the input, and 5 where the output was empty. I created a small script to replicate this and throw and error if the minification resulted in either of these outcomes, then gave a prompt to Gemini.
+* When testing the realworld CSS files, I found there were about 6 files where the output was the same as the input, and 5 where the output was empty. I created a small script to replicate this and throw an error if the minification resulted in either of these outcomes, then gave a prompt to Gemini.
   * **PROMPT:** When running this minification library on the `example/failing.css` file, the output should be minified, however it is not (`example/failing.min.css`). Investigate why. Then correct the issue by changing files in the `src` folder. Run `npm run fail` to see if the issue is resolved. When solving this problem, do not use naive solutions, hacks, or hard coded values. Make sure the implementation not only works for this specific case, but generally for any similar case. 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. When finished, ensure that no tests fail after making your changes by running `npm t` and `npm run lint`. If anything is failing, make the needed corrections.
   * It did okay, and solved the smaller/simpler issues, but then got stuck on a giant file that was too large for it to understand. The problem with the simpler files had to do with invalid CSS syntax in the real-world files. The AI's solution was to look for these specific syntax errors and patch the input CSS to fix them before they are sent to the parser. Interesting.
   * Gave the prompt over to Claude Opus and was able to make more complex changes to get all the files to minify.
@@ -172,7 +172,7 @@ These tools were prompted to pass the tests in the `/copiedTests` folder that ca
   * **PROMPT**: Do a refactoring pass over the files in the `src` folder. 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.
   * Despite specifically telling it to run `npm run lint` to make the linter pass (which would require it to fill out all the JSDocs), it didn't do that. Instead, claude briefly skimmed the ESLint config file, and moved on..... Okay, let's FORCE IT to fix the linting errors:
   * **PROMPT:** Fill out the description, types, and arguments/return details for all JSDoc comment blocks in the `src` folder. Add in a 1-2 sentance summary in the `@file` block on any files that are missing it.
-  * Okay, so GPT's changes look promising, it's passing all tests, passing the linter, and it added some new files related to worker threads. Though it did out out of using promises, because it didn't want to change the entrypoint function of the library to be async. This would be a breaking change for library consumers, but I was aware of that when I told it to do it and it ignored me, so whatever.
+  * Okay, so GPT's changes look promising, it's passing all tests, passing the linter, and it added some new files related to worker threads. Though it did opt-out of using promises, because it didn't want to change the entrypoint function of the library to be async. This would be a breaking change for library consumers, but I was aware of that when I told it to do it and it ignored me, so whatever.
   * On to actually testing it! Before the optimizations, the 150 files took 3 hours and 4 minutes to run, and now with the new and improved optimizations, it only takes 3 hours and 20 minutes. Also the total minified filesize increased by 0.05%. So that's cool.... Dumping those changes.
 * **KILL ALL HUMANS:**
   * More libraries were added to the "Real World CSS Libraries". Now when I run `npm run real` to minify all of them, it ends up taking about 7 hours to run. This is because the optimizations CSSLOP performs do not scale linearly with more CSS rules, they scale exponentially. There are a handful of large CSS files that each take about an hour to complete, where as the smaller files all go by pretty fast.
@@ -187,7 +187,7 @@ These tools were prompted to pass the tests in the `/copiedTests` folder that ca
   * 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.
+  * Claude 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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/pre/start.js",
@@ -30,7 +30,7 @@
     "@node-projects/css-parser": "^5.2.0",
     "@stylistic/eslint-plugin": "^5.10.0",
     "codemirror": "^6.0.2",
-    "eslint": "^10.13.0",
+    "eslint": "^10.14.0",
     "eslint-config-tjw-base": "^5.0.0",
     "eslint-config-tjw-import-x": "^1.0.1",
     "eslint-config-tjw-jsdoc": "^2.0.1",
@@ -39,7 +39,7 @@
     "fflate": "^0.8.3",
     "globals": "^17.13.0",
     "pretty-ms": "^10.0.0",
-    "real-world-css-libraries": "^1.0.8",
+    "real-world-css-libraries": "^1.0.9",
     "vite": "^8.3.5"
   },
   "author": "The Jared Wilcurt",

package/src/declarations/css-wide-keywords.js

@@ -2,6 +2,8 @@
  * @file Rewrites longhand declarations that share a CSS-wide keyword into a shorthand carrying that keyword, followed by the longhands that override it.
  */
 
+import { minifyValue } from '../value/minify.js';
+
 import {
   CSS_WIDE_KEYWORDS,
   expandToLeafProperties,
@@ -15,6 +17,14 @@ import {
 } from './lookup.js';
 import { resetsPropertyDeclaredElsewhere } from './reset-hazards.js';
 
+/**
+ * Every shorthand name, in declaration order. The shorthand tables never
+ * change, so the names are listed once rather than once per rule.
+ *
+ * @type {Array<string>}
+ */
+const SHORTHAND_NAMES = Object.keys(shorthandMap);
+
 /**
  * Checks whether a group of longhands sets every leaf longhand that the
  * shorthand sets. A CSS-wide keyword may only move into the shorthand when the
@@ -227,6 +237,29 @@ function rewriteGroupAsKeywordShorthand (declarations, shorthandName, declaredPr
   return result;
 }
 
+/**
+ * Checks whether any declaration of a rule could be set to a CSS-wide keyword.
+ * Every rewrite needs a longhand holding one, and a rewrite only adds the
+ * keyword that was already there, so a rule without any has nothing to hoist
+ * and every shorthand family can be skipped at once. A value that is not a
+ * string cannot be judged here, so it is assumed to hold a keyword.
+ *
+ * @param  {Array}   declarations  The declarations of a single rule.
+ * @return {boolean}               False when no declaration holds a CSS-wide keyword.
+ */
+function mayDeclareCssWideKeyword (declarations) {
+  return declarations.some((declaration) => {
+    if (!declaration.property) {
+      return false;
+    }
+    if (typeof declaration.value !== 'string') {
+      return true;
+    }
+    const value = minifyValue(declaration).replace('!important', '').trim();
+    return CSS_WIDE_KEYWORDS.has(value.toLowerCase());
+  });
+}
+
 /**
  * Hoists a CSS-wide keyword such as `inherit` out of a group of longhands into
  * their shorthand. A CSS-wide keyword is only valid as a declaration's whole
@@ -240,6 +273,9 @@ function rewriteGroupAsKeywordShorthand (declarations, shorthandName, declaredPr
  * @return {Array}                The declarations, with eligible groups rewritten.
  */
 function hoistCssWideKeywordsIntoShorthands (declarations, context) {
+  if (!mayDeclareCssWideKeyword(declarations)) {
+    return declarations;
+  }
   let result = declarations;
   // Every shorthand needs to know which properties the rule declares, so that
   // set is kept alongside the declarations and only rebuilt after a rewrite
@@ -247,7 +283,7 @@ function hoistCssWideKeywordsIntoShorthands (declarations, context) {
   let declaredProperties = collectDeclaredProperties(result);
   // Shorthands are visited in declaration order, so the widest shorthand of a
   // family is rewritten before the narrower shorthands it contains.
-  for (const shorthandName of Object.keys(shorthandMap)) {
+  for (const shorthandName of SHORTHAND_NAMES) {
     const rewritten = rewriteGroupAsKeywordShorthand(result, shorthandName, declaredProperties, context);
     if (rewritten) {
       result = rewritten;

package/src/declarations/fold.js

@@ -7,9 +7,13 @@ import { splitTopLevelComponents } from '../parser/source-search.js';
 import {
   CSS_WIDE_KEYWORDS,
   expandToLeafProperties,
+  getLonghandsOf,
   shorthandMap
 } from './config.js';
-import { describeDeclaration } from './lookup.js';
+import {
+  collectDeclaredProperties,
+  describeDeclaration
+} from './lookup.js';
 import { canMergeVarValue } from './merge.js';
 import { buildShorthandValue } from './shorthand-values.js';
 
@@ -107,7 +111,7 @@ function belongsToFamily (property, familyWords) {
  * @return {FoldCandidate|null}                The declarations to fold, or null when there are none.
  */
 function findFoldCandidate (declarations, shorthandName) {
-  const longhandProperties = new Set(shorthandMap[shorthandName]);
+  const longhandProperties = getLonghandsOf(shorthandName);
   const shorthandEntries = [];
   const overrideEntries = [];
   const overriddenProperties = new Set();
@@ -332,9 +336,15 @@ function foldOverridesIntoShorthand (declarations, shorthandName, context) {
  * @return {Array}                The declarations, with eligible families folded.
  */
 function foldLonghandOverridesIntoShorthands (declarations, context) {
+  // A fold only ever rewrites its own shorthand and drops that shorthand's
+  // longhands, so the shorthands a rule declares are gathered once up front,
+  // and every family without its shorthand present is skipped.
+  const declaredProperties = collectDeclaredProperties(declarations);
   let result = declarations;
   for (const shorthandName of POSITIONAL_SHORTHAND_NAMES) {
-    result = foldOverridesIntoShorthand(result, shorthandName, context);
+    if (declaredProperties.has(shorthandName)) {
+      result = foldOverridesIntoShorthand(result, shorthandName, context);
+    }
   }
   return result;
 }

package/src/declarations/process.js

@@ -38,6 +38,57 @@ import { resetsPropertyDeclaredElsewhere } from './reset-hazards.js';
  */
 const MIXED_IMPORTANT_SHORTHANDS = new Set(['margin', 'padding', 'inset']);
 
+/**
+ * Every shorthand paired with its longhands, in declaration order. The
+ * shorthand tables never change, so the pairs are listed once rather than on
+ * every pass over every rule.
+ *
+ * @type {Array}
+ */
+const SHORTHAND_ENTRIES = Object.entries(shorthandMap);
+
+/**
+ * Lists, for each longhand, every shorthand it belongs to.
+ *
+ * @return {Map<string, Array<string>>} Map of longhand name to the shorthand names that include it.
+ */
+function indexShorthandsByLonghand () {
+  const shorthandsByLonghand = new Map();
+  for (const [shorthand, longhands] of SHORTHAND_ENTRIES) {
+    for (const longhand of longhands) {
+      const shorthands = shorthandsByLonghand.get(longhand) || [];
+      shorthands.push(shorthand);
+      shorthandsByLonghand.set(longhand, shorthands);
+    }
+  }
+  return shorthandsByLonghand;
+}
+
+/**
+ * The shorthands each longhand belongs to. The shorthand tables never change,
+ * so the index is built once.
+ *
+ * @type {Map<string, Array<string>>}
+ */
+const SHORTHANDS_BY_LONGHAND = indexShorthandsByLonghand();
+
+/**
+ * Collects the shorthands a rule declares at least one longhand of, which are
+ * the only shorthands that could be assembled from its declarations.
+ *
+ * @param  {Set} declaredProperties  The property names the rule currently declares.
+ * @return {Set}                     The names of the shorthands worth trying.
+ */
+function collectCandidateShorthands (declaredProperties) {
+  const candidateShorthands = new Set();
+  for (const property of declaredProperties) {
+    for (const shorthand of SHORTHANDS_BY_LONGHAND.get(property) || []) {
+      candidateShorthands.add(shorthand);
+    }
+  }
+  return candidateShorthands;
+}
+
 /**
  * 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
@@ -386,9 +437,16 @@ function mergeLonghandsIntoShorthands (declarations, context) {
     // set of declared properties is gathered once per pass rather than rescanned
     // for each of the dozens of shorthand families.
     const declaredProperties = collectDeclaredProperties(result);
+    // Most rules declare none of a given shorthand's longhands, so those
+    // shorthands are skipped before any of their merge checks run.
+    const candidateShorthands = collectCandidateShorthands(declaredProperties);
 
-    for (const [shorthand, longhands] of Object.entries(shorthandMap)) {
-      if (declaredProperties.has(shorthand)) {
+    for (const [shorthand, longhands] of SHORTHAND_ENTRIES) {
+      if (!candidateShorthands.has(shorthand) || declaredProperties.has(shorthand)) {
+        continue;
+      }
+      const mergeableProperties = getMergeProps(shorthand, longhands, declaredProperties);
+      if (!mergeableProperties) {
         continue;
       }
       // Assembling a shorthand also resets the properties it cannot express, so
@@ -397,11 +455,6 @@ function mergeLonghandsIntoShorthands (declarations, context) {
       if (resetsPropertyDeclaredElsewhere(shorthand, declaredProperties, context)) {
         continue;
       }
-
-      const mergeableProperties = getMergeProps(shorthand, longhands, declaredProperties);
-      if (!mergeableProperties) {
-        continue;
-      }
       const mergeablePropertySet = new Set(mergeableProperties);
       const relevantDeclarations = result.filter((declaration) => {
         return mergeablePropertySet.has(declaration.property);

package/src/index.js

@@ -23,7 +23,10 @@ import {
 import { preprocessDeclarationBlocks } from './preprocess.js';
 import { combineLanguageSelectors } from './rules/lang.js';
 import { normalizeRuleSelectors } from './rules/normalize.js';
-import { optimizeRuleList } from './rules/optimize.js';
+import {
+  clearSelectorCaches,
+  optimizeRuleList
+} from './rules/optimize.js';
 import { combineLegacyAnySelectors } from './rules/selectors.js';
 import {
   removeRedundantLayerStatementSemicolon,
@@ -137,14 +140,15 @@ function mergeAdjacentRulesWithIdenticalBodies (ruleStrings) {
 
 /**
  * Prepares the module-level state a single minification pass relies on: the
- * active charset, and an empty value cache, since a value memoized under a
- * different charset may no longer minify the same way.
+ * active charset, and empty value and selector caches, since a value
+ * memoized under a different charset may no longer minify the same way.
  *
  * @param {string} charset  The `@charset` value detected in the source.
  */
 function beginMinificationPass (charset) {
   setActiveCharset(charset);
   clearMinifiedValueCache();
+  clearSelectorCaches();
 }
 
 /**
@@ -154,6 +158,7 @@ function beginMinificationPass (charset) {
 function endMinificationPass () {
   clearActiveCharset();
   clearMinifiedValueCache();
+  clearSelectorCaches();
 }
 
 /**

package/src/parser/source-search.js

@@ -157,6 +157,12 @@ function skipBracketedGroup (source, openIndex) {
  * @return {boolean}         Whether a `url()` token starts here.
  */
 function startsUrlToken (source, index) {
+  // Only a `u` can begin the token, so every other character is ruled out
+  // before anything is sliced or lowercased
+  const character = source[index];
+  if (character !== 'u' && character !== 'U') {
+    return false;
+  }
   return source.slice(index, index + 4).toLowerCase() === 'url(';
 }