@thejaredwilcurt/csslop 0.0.24 → 0.0.25

package/README.md

@@ -178,6 +178,10 @@ These tools were prompted to pass the tests in the `/copiedTests` folder that ca
   * This has happened several times. Me saying "Don't run `npm run real`", doesn't actually stop it from doing it. I also tried "Do not, under any circumstance, run `npm run real`.". And it *mostly* stopped doing it... but not completely.
   * This has lead me to update all my prompts to now end with: "DO NOT, under any circumstance, run `npm run real` (it will kill actual humans)!"
   * And it has not ran `npm run real` again... so far. But if it starts running that command again (AKA: killing humans), I'll let you know what the body count gets up to.
+* Okay, several months have gone by since I started this project, and we now have "Claude Opus 5 High", which seems much better at coding than the slop factories originally used in this repo. Let's see if it can finally fix the performance issues. This time I used a prompt that specifically told it to focus on using hashmaps to improve performance. This is the kind of coding interview BS that most places give out that AI should naturally be good at in order to inflate their benchmarks. Two interesing things happened.
+  * Unlike previous AI's that resulted in slower outcomes and failing tests, these changes took the real-world test from 7 hours down to 2. Still WAY too slow, but it's a massive improvement. And the AI is pointing to the 3rd-party CSS parser as the bottleneck now, which I don't know, probably true.
+  * 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.
 
 
 ## The name

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/prestart.js",
@@ -16,7 +16,9 @@
     "real": "node ./tests/realworld.test.js",
     "lint": "eslint *.js scripts src tests --fix",
     "fix": "npm run lint",
-    "bump": "npx --yes -- @jsdevtools/version-bump-prompt patch && npm i"
+    "bump": "npx --yes -- @jsdevtools/version-bump-prompt patch && npm i",
+    "outdated": "npm outdated",
+    "proto": "proto pin node latest --resolve --tool-native && proto pin npm latest --resolve --tool-native && git status"
   },
   "dependencies": {
     "@csstools/css-calc": "^3.3.0",
@@ -56,7 +58,7 @@
   "devEngines": {
     "runtime": {
       "name": "node",
-      "version": "26.5.1"
+      "version": "26.7.0"
     },
     "packageManager": {
       "name": "npm",

package/src/declarations/background.js

@@ -11,6 +11,31 @@ const BACKGROUND_REPEAT_KEYWORDS = new Set(['repeat', 'no-repeat', 'repeat-x', '
 const BACKGROUND_ATTACHMENT_KEYWORDS = new Set(['scroll', 'fixed', 'local']);
 const BACKGROUND_BOX_KEYWORDS = new Set(['border-box', 'padding-box', 'content-box']);
 
+/**
+ * Functions that produce a value other than an image, so a token calling one of
+ * them is never a background image even though it looks like a function call.
+ *
+ * @type {Set<string>}
+ */
+const NON_IMAGE_FUNCTION_NAMES = new Set([
+  'calc',
+  'min',
+  'max',
+  'clamp',
+  'var',
+  'env',
+  'rgb',
+  'rgba',
+  'hsl',
+  'hsla',
+  'hwb',
+  'lab',
+  'lch',
+  'oklab',
+  'oklch',
+  'color'
+]);
+
 /**
  * Resolves the background position from a value map. Prefers the combined
  * `background-position` property if present, otherwise combines
@@ -51,7 +76,7 @@ function isBackgroundImageToken (token) {
     return false;
   }
   const functionName = functionNameMatch[1].toLowerCase();
-  return !['calc', 'min', 'max', 'clamp', 'var', 'env', 'rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'lab', 'lch', 'oklab', 'oklch', 'color'].includes(functionName);
+  return !NON_IMAGE_FUNCTION_NAMES.has(functionName);
 }
 
 /**

package/src/declarations/config.js

@@ -84,10 +84,70 @@ const EDGE_SHORTHANDS = new Set([
  */
 const BORDER_EDGE_PROPERTIES = ['border-top', 'border-right', 'border-bottom', 'border-left'];
 
+/**
+ * Converts a lookup table of property name to property list into the same
+ * lookup keyed by name with each list as a set, so that "does this shorthand
+ * cover that property" is a single key lookup rather than a list scan.
+ *
+ * @param  {object} propertyListsByName  A lookup of property name to an array of property names.
+ * @return {Map}                         The same lookup with each array stored as a set.
+ */
+function createPropertySetLookup (propertyListsByName) {
+  const setsByName = new Map();
+  for (const [name, propertyList] of Object.entries(propertyListsByName)) {
+    setsByName.set(name, new Set(propertyList));
+  }
+  return setsByName;
+}
+
+/**
+ * The longhands of each shorthand, as sets for membership testing.
+ *
+ * @type {Map<string, Set<string>>}
+ */
+const LONGHANDS_BY_SHORTHAND = createPropertySetLookup(shorthandMap);
+
+/**
+ * The extra properties each shorthand resets, as sets for membership testing.
+ *
+ * @type {Map<string, Set<string>>}
+ */
+const OVERRIDES_BY_SHORTHAND = createPropertySetLookup(shorthandOverrideMap);
+
+/**
+ * An immutable empty set, returned for properties that are not shorthands so
+ * callers can test membership without first checking for a missing entry.
+ *
+ * @type {Set<string>}
+ */
+const NO_PROPERTIES = new Set();
+
+/**
+ * Returns the set of longhands a shorthand expands into.
+ *
+ * @param  {string} shorthandName  The CSS shorthand property name.
+ * @return {Set}                   The longhand property names, empty when the name is not a shorthand.
+ */
+function getLonghandsOf (shorthandName) {
+  return LONGHANDS_BY_SHORTHAND.get(shorthandName) || NO_PROPERTIES;
+}
+
+/**
+ * Returns the set of extra properties a shorthand resets beyond its longhands.
+ *
+ * @param  {string} shorthandName  The CSS shorthand property name.
+ * @return {Set}                   The reset property names, empty when the shorthand resets nothing else.
+ */
+function getOverridesOf (shorthandName) {
+  return OVERRIDES_BY_SHORTHAND.get(shorthandName) || NO_PROPERTIES;
+}
+
 export {
   BORDER_EDGE_PROPERTIES,
   CSS_WIDE_KEYWORDS,
   EDGE_SHORTHANDS,
+  getLonghandsOf,
+  getOverridesOf,
   shorthandMap,
   shorthandOverrideMap
 };

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

@@ -6,28 +6,45 @@ import { minifyValue } from '../value/minify.js';
 
 import {
   CSS_WIDE_KEYWORDS,
-  shorthandMap,
-  shorthandOverrideMap
+  getLonghandsOf,
+  getOverridesOf,
+  shorthandMap
 } from './config.js';
+import { collectDeclaredProperties } from './lookup.js';
+
+/**
+ * The leaf longhands each property ultimately sets, computed on first use. The
+ * shorthand tables never change, so a property always expands the same way.
+ *
+ * @type {Map<string, Set<string>>}
+ */
+const leafPropertiesByProperty = new Map();
 
 /**
  * Expands a property into the set of leaf longhands it ultimately sets, so that
  * different groupings of the same box, such as `border-width` and
  * `border-top-width`, can be compared for equivalent coverage.
  *
- * @param  {string} property        The property name to expand.
- * @param  {Set}    leafProperties  The set collecting the leaf longhand names.
- * @return {Set}                    The set of leaf longhand property names.
+ * @param  {string} property  The property name to expand.
+ * @return {Set}              The set of leaf longhand property names.
  */
-function expandToLeafProperties (property, leafProperties = new Set()) {
+function expandToLeafProperties (property) {
+  const cachedLeaves = leafPropertiesByProperty.get(property);
+  if (cachedLeaves) {
+    return cachedLeaves;
+  }
+  const leafProperties = new Set();
   const longhands = shorthandMap[property];
   if (!longhands) {
     leafProperties.add(property);
-    return leafProperties;
-  }
-  for (const longhand of longhands) {
-    expandToLeafProperties(longhand, leafProperties);
+  } else {
+    for (const longhand of longhands) {
+      for (const leafProperty of expandToLeafProperties(longhand)) {
+        leafProperties.add(leafProperty);
+      }
+    }
   }
+  leafPropertiesByProperty.set(property, leafProperties);
   return leafProperties;
 }
 
@@ -44,7 +61,9 @@ function expandToLeafProperties (property, leafProperties = new Set()) {
 function coversEveryLonghandOfShorthand (shorthandName, properties) {
   const coveredLeaves = new Set();
   for (const property of properties) {
-    expandToLeafProperties(property, coveredLeaves);
+    for (const leafProperty of expandToLeafProperties(property)) {
+      coveredLeaves.add(leafProperty);
+    }
   }
   return [...expandToLeafProperties(shorthandName)].every((leafProperty) => {
     return coveredLeaves.has(leafProperty);
@@ -70,10 +89,10 @@ function coversEveryLonghandOfShorthand (shorthandName, properties) {
  * @return {Array}                 The matching longhand entries, in source order.
  */
 function collectLonghandEntries (declarations, shorthandName) {
-  const longhands = shorthandMap[shorthandName];
+  const longhands = getLonghandsOf(shorthandName);
   const entries = [];
   declarations.forEach((declaration, index) => {
-    if (!declaration.property || !longhands.includes(declaration.property)) {
+    if (!declaration.property || !longhands.has(declaration.property)) {
       return;
     }
     const minifiedValue = minifyValue(declaration);
@@ -170,12 +189,12 @@ function resolveSharedKeyword (entries) {
  * @return {boolean}                 Whether an earlier declaration would be discarded.
  */
 function resetsEarlierDeclaration (declarations, shorthandName, insertionIndex) {
-  const resetProperties = shorthandOverrideMap[shorthandName] || [];
-  if (!resetProperties.length) {
+  const resetProperties = getOverridesOf(shorthandName);
+  if (!resetProperties.size) {
     return false;
   }
   return declarations.slice(0, insertionIndex).some((declaration) => {
-    return resetProperties.includes(declaration.property);
+    return resetProperties.has(declaration.property);
   });
 }
 
@@ -184,15 +203,13 @@ function resetsEarlierDeclaration (declarations, shorthandName, insertionIndex)
  * keyword, followed by the longhands that override it, when that is shorter
  * than the group of longhands it replaces.
  *
- * @param  {Array}      declarations   The declarations of a single rule.
- * @param  {string}     shorthandName  The target shorthand property name.
- * @return {Array|null}                The rewritten declarations, or null when the rewrite does not apply.
+ * @param  {Array}      declarations        The declarations of a single rule.
+ * @param  {string}     shorthandName       The target shorthand property name.
+ * @param  {Set}        declaredProperties  The property names the rule currently declares.
+ * @return {Array|null}                     The rewritten declarations, or null when the rewrite does not apply.
  */
-function rewriteGroupAsKeywordShorthand (declarations, shorthandName) {
-  const shorthandAlreadyExists = declarations.some((declaration) => {
-    return declaration.property === shorthandName;
-  });
-  if (shorthandAlreadyExists) {
+function rewriteGroupAsKeywordShorthand (declarations, shorthandName, declaredProperties) {
+  if (declaredProperties.has(shorthandName)) {
     return null;
   }
 
@@ -271,12 +288,17 @@ function rewriteGroupAsKeywordShorthand (declarations, shorthandName) {
  */
 function hoistCssWideKeywordsIntoShorthands (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
+  // actually changes them.
+  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)) {
-    const rewritten = rewriteGroupAsKeywordShorthand(result, shorthandName);
+    const rewritten = rewriteGroupAsKeywordShorthand(result, shorthandName, declaredProperties);
     if (rewritten) {
       result = rewritten;
+      declaredProperties = collectDeclaredProperties(result);
     }
   }
   return result;

package/src/declarations/lookup.js

@@ -0,0 +1,44 @@
+/**
+ * @file Builds keyed lookups over a rule's declarations, so the shorthand
+ * passes can ask which properties a rule sets without rescanning its
+ * declarations once per property they are interested in.
+ */
+
+/**
+ * Indexes the first declaration of each property. The first occurrence is the
+ * one a linear search would return, so this stands in for repeated scans that
+ * look a property's declaration up by name.
+ *
+ * @param  {Array} declarations  The declarations of a single rule, in source order.
+ * @return {Map}                 Map of property name to its first declaration.
+ */
+function indexFirstDeclarationByProperty (declarations) {
+  const declarationByProperty = new Map();
+  for (const declaration of declarations) {
+    if (declaration.property && !declarationByProperty.has(declaration.property)) {
+      declarationByProperty.set(declaration.property, declaration);
+    }
+  }
+  return declarationByProperty;
+}
+
+/**
+ * Collects the names of every property a rule declares.
+ *
+ * @param  {Array} declarations  The declarations of a single rule.
+ * @return {Set}                 The declared property names.
+ */
+function collectDeclaredProperties (declarations) {
+  const declaredProperties = new Set();
+  for (const declaration of declarations) {
+    if (declaration.property) {
+      declaredProperties.add(declaration.property);
+    }
+  }
+  return declaredProperties;
+}
+
+export {
+  collectDeclaredProperties,
+  indexFirstDeclarationByProperty
+};

package/src/declarations/merge.js

@@ -8,9 +8,10 @@ import {
   BORDER_EDGE_PROPERTIES,
   CSS_WIDE_KEYWORDS,
   EDGE_SHORTHANDS,
-  shorthandMap,
-  shorthandOverrideMap
+  getLonghandsOf,
+  getOverridesOf
 } from './config.js';
+import { indexFirstDeclarationByProperty } from './lookup.js';
 import { buildShorthandValue } from './shorthand-values.js';
 
 /**
@@ -24,64 +25,62 @@ const MIXED_IMPORTANT_SHORTHANDS = new Set(['margin', 'padding', 'inset', 'posit
 /**
  * Determines which longhand properties are present and eligible for merging into a given shorthand. Returns null when the required longhands for the shorthand are not all available.
  *
- * @param  {string}     shorthand     The CSS shorthand property name.
- * @param  {Array}      longhands     The expected longhand property names for this shorthand.
- * @param  {Array}      declarations  The current array of CSS declaration objects.
- * @return {Array|null}               The list of longhand names to merge, or null if merging is not possible.
+ * @param  {string}     shorthand           The CSS shorthand property name.
+ * @param  {Array}      longhands           The expected longhand property names for this shorthand.
+ * @param  {Set}        declaredProperties  The property names the rule currently declares.
+ * @return {Array|null}                     The list of longhand names to merge, or null if merging is not possible.
  */
-function getMergeProps (shorthand, longhands, declarations) {
+function getMergeProps (shorthand, longhands, declaredProperties) {
   const presentLonghands = longhands.filter((longhand) => {
-    return declarations.some((declaration) => {
-      return declaration.property === longhand;
-    });
+    return declaredProperties.has(longhand);
   });
   if (presentLonghands.length === 0) {
     return null;
   }
   if (shorthand === 'font') {
-    const hasRequiredFontProps = presentLonghands.includes('font-size') && presentLonghands.includes('font-family');
+    const hasRequiredFontProps = declaredProperties.has('font-size') && declaredProperties.has('font-family');
     if (hasRequiredFontProps) {
       return presentLonghands;
     }
     return null;
   }
   if (shorthand === 'background-position') {
-    const hasBothAxes = presentLonghands.includes('background-position-x') && presentLonghands.includes('background-position-y');
+    const hasBothAxes = declaredProperties.has('background-position-x') && declaredProperties.has('background-position-y');
     if (hasBothAxes) {
       return presentLonghands;
     }
     return null;
   }
   if (shorthand === 'background') {
-    const hasBackgroundProp = presentLonghands.includes('background-color') || presentLonghands.includes('background-image');
+    const hasBackgroundProp = declaredProperties.has('background-color') || declaredProperties.has('background-image');
     if (hasBackgroundProp) {
       return presentLonghands;
     }
     return null;
   }
   if (shorthand === 'mask') {
-    if (presentLonghands.includes('mask-image')) {
+    if (declaredProperties.has('mask-image')) {
       return presentLonghands;
     }
     return null;
   }
   if (shorthand === 'border-image') {
-    if (presentLonghands.includes('border-image-source')) {
+    if (declaredProperties.has('border-image-source')) {
       return presentLonghands;
     }
     return null;
   }
   if (shorthand === 'border') {
     const hasAllBorderParts = (
-      presentLonghands.includes('border-width') &&
-      presentLonghands.includes('border-style') &&
-      presentLonghands.includes('border-color')
+      declaredProperties.has('border-width') &&
+      declaredProperties.has('border-style') &&
+      declaredProperties.has('border-color')
     );
     if (hasAllBorderParts) {
       return ['border-width', 'border-style', 'border-color'];
     }
     const hasAllBorderEdges = BORDER_EDGE_PROPERTIES.every((edgeProperty) => {
-      return presentLonghands.includes(edgeProperty);
+      return declaredProperties.has(edgeProperty);
     });
     if (hasAllBorderEdges) {
       return [...BORDER_EDGE_PROPERTIES];
@@ -90,9 +89,9 @@ function getMergeProps (shorthand, longhands, declarations) {
   }
   if (shorthand === 'flex') {
     const hasAllFlexParts = (
-      presentLonghands.includes('flex-grow') &&
-      presentLonghands.includes('flex-shrink') &&
-      presentLonghands.includes('flex-basis')
+      declaredProperties.has('flex-grow') &&
+      declaredProperties.has('flex-shrink') &&
+      declaredProperties.has('flex-basis')
     );
     if (hasAllFlexParts) {
       return ['flex-grow', 'flex-shrink', 'flex-basis'];
@@ -150,13 +149,12 @@ function canMergeVarValue (value, context) {
  * @return {boolean}                True when the shorthand only affects the merged longhands.
  */
 function shorthandAffectsOnlyMergedLonghands (shorthandName, properties) {
-  const overrides = shorthandOverrideMap[shorthandName] || [];
-  if (overrides.length) {
+  if (getOverridesOf(shorthandName).size) {
     return false;
   }
-  const longhands = shorthandMap[shorthandName] || [];
-  return longhands.every((longhand) => {
-    return properties.includes(longhand);
+  const mergedProperties = new Set(properties);
+  return [...getLonghandsOf(shorthandName)].every((longhand) => {
+    return mergedProperties.has(longhand);
   });
 }
 
@@ -196,10 +194,9 @@ function resolveCssWideKeywordMerge (values, shorthandName, properties) {
  * @return {Array|null}               The minified longhand values, or null when one is missing.
  */
 function collectLonghandValues (properties, declarations) {
+  const declarationByProperty = indexFirstDeclarationByProperty(declarations);
   const values = properties.map((property) => {
-    const declaration = declarations.find((candidate) => {
-      return candidate.property === property;
-    });
+    const declaration = declarationByProperty.get(property);
     if (declaration) {
       return minifyValue(declaration);
     }

package/src/declarations/order.js

@@ -55,20 +55,46 @@ function orderDeclarations (declarations) {
 }
 
 /**
- * Get all longhands that a shorthand would override.
+ * The overridden longhands of each shorthand, computed on first use. The
+ * shorthand tables never change, so the answer for a property name is the same
+ * every time it is asked for.
+ *
+ * @type {Map<string, Set<string>>}
+ */
+const overriddenLonghandsByShorthand = new Map();
+
+/**
+ * Collects all longhands that a shorthand would override.
  *
  * @param  {string} shorthandProperty  The CSS shorthand property name.
- * @return {Array}                     A deduplicated array of all longhand property names that the shorthand overrides, including nested longhands.
+ * @return {Set}                       The longhand property names the shorthand overrides, including nested longhands.
  */
-function getOverriddenLonghands (shorthandProperty) {
+function collectOverriddenLonghands (shorthandProperty) {
   const direct = shorthandMap[shorthandProperty] || [];
   const overrides = shorthandOverrideMap[shorthandProperty] || [];
-  const all = [...direct, ...overrides];
+  const all = new Set([...direct, ...overrides]);
   for (const property of direct) {
     const nested = shorthandMap[property] || [];
-    all.push(...nested);
+    for (const nestedProperty of nested) {
+      all.add(nestedProperty);
+    }
+  }
+  return all;
+}
+
+/**
+ * Get all longhands that a shorthand would override.
+ *
+ * @param  {string} shorthandProperty  The CSS shorthand property name.
+ * @return {Set}                       The longhand property names that the shorthand overrides, including nested longhands.
+ */
+function getOverriddenLonghands (shorthandProperty) {
+  let overridden = overriddenLonghandsByShorthand.get(shorthandProperty);
+  if (!overridden) {
+    overridden = collectOverriddenLonghands(shorthandProperty);
+    overriddenLonghandsByShorthand.set(shorthandProperty, overridden);
   }
-  return [...new Set(all)];
+  return overridden;
 }
 
 export {