@thejaredwilcurt/csslop 0.0.24 → 0.0.26

package/README.md

@@ -31,7 +31,7 @@
 * Gemini 3.1 Pro (High Thinking)
 * GPT-5.4 High (Thinking)
 
-These were the latest and greatest models at the time.
+These were the latest and greatest models at the time. Since then I've mostly used the latest Claude version for maintenance.
 
 **AI's used during maintenance:**
 
@@ -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.26",
   "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

@@ -2,6 +2,46 @@
  * @file Defines lookup tables mapping CSS shorthand properties to their constituent longhand properties and override relationships.
  */
 
+/**
+ * The gap decoration rule components that CSS Gaps 1 defines once per
+ * direction, as a `column-rule-*` and a `row-rule-*` longhand.
+ *
+ * @type {Array}
+ */
+const GAP_DECORATION_RULE_COMPONENTS = [
+  'width',
+  'style',
+  'color',
+  'break',
+  'visibility-items',
+  'inset-cap-start',
+  'inset-cap-end',
+  'inset-junction-start',
+  'inset-junction-end'
+];
+
+/**
+ * Builds the bidirectional `rule-*` gap decoration shorthands, each of which
+ * applies a single value to both the column and the row longhand of one gap
+ * decoration component.
+ *
+ * @return {object} A lookup of shorthand name to its column and row longhands.
+ */
+function createBidirectionalGapRuleShorthands () {
+  const shorthands = {};
+  for (const component of GAP_DECORATION_RULE_COMPONENTS) {
+    shorthands['rule-' + component] = ['column-rule-' + component, 'row-rule-' + component];
+  }
+  return shorthands;
+}
+
+/**
+ * The bidirectional gap decoration shorthands, keyed by shorthand name.
+ *
+ * @type {object}
+ */
+const BIDIRECTIONAL_GAP_RULE_SHORTHANDS = createBidirectionalGapRuleShorthands();
+
 const shorthandMap = {
   margin: ['margin-top', 'margin-right', 'margin-bottom', 'margin-left'],
   padding: ['padding-top', 'padding-right', 'padding-bottom', 'padding-left'],
@@ -42,10 +82,13 @@ const shorthandMap = {
   animation: ['animation-name', 'animation-duration', 'animation-timing-function', 'animation-delay', 'animation-iteration-count', 'animation-direction', 'animation-fill-mode', 'animation-play-state'],
   mask: ['mask-image', 'mask-repeat', 'mask-size'],
   'position-try': ['position-try-order', 'position-try-fallbacks'],
-  font: ['font-style', 'font-weight', 'font-size', 'line-height', 'font-family']
+  font: ['font-style', 'font-weight', 'font-size', 'line-height', 'font-family'],
+  marker: ['marker-start', 'marker-mid', 'marker-end'],
+  ...BIDIRECTIONAL_GAP_RULE_SHORTHANDS
 };
 
 const shorthandOverrideMap = {
+  animation: ['animation-timeline', 'animation-range', 'animation-range-start', 'animation-range-end'],
   border: ['border-image', 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset', 'border-image-repeat'],
   font: ['font-variant', 'font-variant-alternates', 'font-variant-caps', 'font-variant-east-asian', 'font-variant-ligatures', 'font-variant-numeric', 'font-variant-position'],
   mask: ['mask-border', 'mask-border-source', 'mask-border-slice', 'mask-border-width', 'mask-border-outset', 'mask-border-repeat', 'mask-border-mode']
@@ -77,6 +120,19 @@ const EDGE_SHORTHANDS = new Set([
   'border-block-end'
 ]);
 
+/**
+ * Shorthands that apply one value to every longhand they set, such as the SVG
+ * `marker` shorthand and the bidirectional gap decoration rules. They have no
+ * way to express longhands that differ, so a group of longhands only collapses
+ * into them when every longhand already holds the same value.
+ *
+ * @type {Set<string>}
+ */
+const UNIFORM_VALUE_SHORTHANDS = new Set([
+  'marker',
+  ...Object.keys(BIDIRECTIONAL_GAP_RULE_SHORTHANDS)
+]);
+
 /**
  * The four physical edge shorthands that together cover the `border` shorthand.
  *
@@ -84,10 +140,108 @@ 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;
+}
+
+/**
+ * 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.
+ * @return {Set}              The set of leaf longhand property names.
+ */
+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);
+  } else {
+    for (const longhand of longhands) {
+      for (const leafProperty of expandToLeafProperties(longhand)) {
+        leafProperties.add(leafProperty);
+      }
+    }
+  }
+  leafPropertiesByProperty.set(property, leafProperties);
+  return leafProperties;
+}
+
 export {
   BORDER_EDGE_PROPERTIES,
   CSS_WIDE_KEYWORDS,
   EDGE_SHORTHANDS,
+  expandToLeafProperties,
+  getLonghandsOf,
+  getOverridesOf,
   shorthandMap,
-  shorthandOverrideMap
+  shorthandOverrideMap,
+  UNIFORM_VALUE_SHORTHANDS
 };

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

@@ -2,34 +2,17 @@
  * @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,
-  shorthandMap,
-  shorthandOverrideMap
+  expandToLeafProperties,
+  getLonghandsOf,
+  getOverridesOf,
+  shorthandMap
 } from './config.js';
-
-/**
- * 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.
- */
-function expandToLeafProperties (property, leafProperties = new Set()) {
-  const longhands = shorthandMap[property];
-  if (!longhands) {
-    leafProperties.add(property);
-    return leafProperties;
-  }
-  for (const longhand of longhands) {
-    expandToLeafProperties(longhand, leafProperties);
-  }
-  return leafProperties;
-}
+import {
+  collectDeclaredProperties,
+  describeDeclaration
+} from './lookup.js';
 
 /**
  * Checks whether a group of longhands sets every leaf longhand that the
@@ -44,23 +27,15 @@ 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);
   });
 }
 
-/**
- * @typedef  {object}  LonghandEntry
- * @property {object}  declaration    The original declaration object.
- * @property {number}  index          The declaration's index within the rule.
- * @property {string}  property       The longhand property name.
- * @property {string}  text           The minified `property:value` text.
- * @property {string}  value          The minified value, without any `!important`.
- * @property {boolean} isImportant    Whether the declaration carries `!important`.
- */
-
 /**
  * Collects the declarations of a rule that set one of a shorthand's longhands,
  * in source order.
@@ -70,22 +45,13 @@ 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);
-    const isImportant = minifiedValue.includes('!important');
-    entries.push({
-      declaration,
-      index,
-      property: declaration.property,
-      text: declaration.property + ':' + minifiedValue,
-      value: minifiedValue.replace('!important', '').trim(),
-      isImportant
-    });
+    entries.push(describeDeclaration(declaration, index));
   });
   return entries;
 }
@@ -170,12 +136,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 +150,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 +235,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;