@thejaredwilcurt/csslop 0.0.1 → 0.0.3

package/README.md

@@ -1,12 +1,17 @@
 # CSSLOP
 
-Experimental vibe-coded CSS minification library
+
+## NOT FOR PRODUCTION USE
+
+
+### Experimental, vibe-coded, CSS minification library
+
 
 **The experiment:**
 
 * Use the tests from the open source, 3rd-party, CSS minification auditing library `css-minify-tests`.
 * Have AI completely generate the library logic to pass all tests.
-* Have me (an experience library author) validate the outcomes and make upstream corrections to the tests library.
+* Have me (an experienced library author) validate the outcomes and make upstream corrections to the tests library.
 
 **The Results:**
 
@@ -22,18 +27,22 @@ Experimental vibe-coded CSS minification library
 * Gemini 3.1 Pro (High Thinking)
 * GPT-5.4 High (Thinking)
 
-These tools were prompted to pass the tests based in the `/copiedTests` folder that come from `keithamus/css-minify-tests`.
+These tools were prompted to pass the tests in the `/copiedTests` folder that came from `keithamus/css-minify-tests`.
 
 **Summary of project phases:**
 
 1. **Human setup:** I set up the repo like I would any of my libraries. with entry points and folder structure. Created a script to pull in all the tests to the `copiedTests` folder. Wrote a simple `/tests` file to loop over and run all the copied tests, then output which sections were failing so I could track as the AI's tried to get more tests to pass.
 1. **Human code:** I tried out several Node.js-based CSS parsers until I found the most up-to-date one I could. I then used it to solve one very simple test to lay the groundwork for the broad direction of input/parse/transform/output. Ran the tests, and 12% were passing. Commit.
-1. **AI Broad strokes:** I had several AI's attempt to write the entire library in one-go, telling it to make all the tests pass. Both Claudes and Gemini ran for over an hour before giving up with no file changes. GPT-5.4 gave up after a while, but did manage to make some progress, doubling the passing tests to 24%.
+1. **AI Broad strokes:** I had each of the 4 AI's attempt to write the entire library in one-go, telling it to make all the tests pass. Both Claudes and Gemini ran for over an hour before giving up with no file changes. GPT-5.4 gave up after a while, but did manage to make some progress, doubling the passing tests to 24%.
 1. **AI Test groups:** At this point, it was clear, that they couldn't handle this big of a task. To be fair, as a human, it would probably have taken me 4-6 months to do the work I was asking it to do in one prompt, and I wouldn't have done all that work in a single commit. So at this point, I began the process of asking the AI's to fix all the tests in a specific folder (escaping, comments, keyframes, merging, etc.). The tests were already organized by category, so having them focus on just one similarly related concept was much easier for the AIs. Because there were 29 folders, I cycled through the AI's, letting them each fix a test group. Some of the folders, like "values", with 70 tests, and 55 of them failing, were still too big for Claude to handle, and I had to go back to Gemini or GPT for these. And even then, sometimes they couldn't solve all of them, but would make progress before I had to turn it over to a different AI to continue onward with the remaining test fixes in that folder.
 1. **Human test corrections:** While the AI's were trying to write code to pass the tests, I was investigating the tests themselves and fixing issues with them upstream. Some tests had incorrect assumptions and needed re-written or improved. Some were missing edge cases that a human developer would likely cover during implementation, but these AI's were absolutely skipping doing any work they didn't have to in order to get the tests to pass. Fortunately, the maintainer of the tests repo was always very quick to respond and merge these PRs. Cool dude.
 1. **AI organization:** After all tests were finally passing (took several days of babysitting). I had GPT-5.4 re-organize the code. It did fine, I'd give it a C-. But huge improvement over having the entire library in one ~2000 line file. I went with GPT because of the 4 I tested, it seems to be the only one capable of handling large, complex tasks in one-go. Even if the output is mediocre, at least it doesn't give up halfway through.
-1. **AI Bug fixes:** I gave each AI the same prompt to clean up bugs/hacks/TODOs/hardcoded values. Details are below. GPT and Claude sonnet were fine. Claude Opus was a mixed bag. Gemini was a complete disaster.
-1. **Human Linting:** At this point, all the tests are passing, the code is somewhat organized, and mostly bug free. But it all looks like it was written by a toddler, time to apply my extremely strict linting rules. 
+1. **AI Bug fixes:** I gave each AI the same prompt to clean up bugs/hacks/TODOs/hardcoded values. Details are below.
+   * GPT got the low hanging fruit, a lot of stuff, but all the easy things.
+   * Then Claude Sonnet got a few of the medium difficulty ones
+   * Claude Opus was a mixed bag, doing the hardest ones, but also making poor assumptions and bad mistakes.
+   * Gemini was a complete disaster, 100% of it's changes were discarded.
+1. **Human Linting:** At this point, all the tests were passing, the code is somewhat organized, and mostly bug free. But it all looks like it was written by a toddler, time to apply my extremely strict linting rules.
 1. **AI Readability improvements:** I had Claude Opus try to make the code easier to read (JSDoc comments, no single character variable names, no abbreviations in variables, grouping logic into related functions, breaking up lines of code, explain complex regex, etc.).
 1. **AI color completeness:** Had Claude Opus handle all named colors, and always convert to the shorter character representation, removing a hard-coded solution.
 1. **Test improvements:** Throughout this process, as upstream tests were improved or created, they were pulled in, and the AI was instructed to pass those new tests with prompts like, "Run `npm t` and fix all failing tests by modifying files in `src`."
@@ -202,7 +211,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`.
+   * **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.
 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,12 +2,13 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Experimental CSS minification",
   "scripts": {
     "copy": "node ./scripts/copyTests.js",
     "test": "node ./tests/css/index.test.js",
     "lint": "eslint *.js scripts src tests --fix",
+    "bump": "npx --yes -- @jsdevtools/version-bump-prompt && npm i",
     "publish": "npm publish --access=public"
   },
   "dependencies": {
@@ -18,7 +19,7 @@
     "@eslint/js": "^10.0.1",
     "@stylistic/eslint-plugin": "^5.10.0",
     "css-minify-tests": "github:keithamus/css-minify-tests",
-    "eslint": "^10.4.0",
+    "eslint": "^10.4.1",
     "eslint-config-tjw-base": "^5.0.0",
     "eslint-config-tjw-import-x": "^1.0.1",
     "eslint-config-tjw-jsdoc": "^2.0.1",

package/src/value/colors.js

@@ -472,6 +472,172 @@ function findNoneChannels (rawColorStr) {
   return indices;
 }
 
+/**
+ * Evaluate an N-color (3+) color-mix() expression. Returns a minified CSS color string or null.
+ *
+ * @param  {string}      colorSpace  The interpolation color space ("srgb", "oklab", or "oklch").
+ * @param  {Array}       args        The raw argument strings for each color.
+ * @return {string|null}             A minified CSS color string, or null if the expression cannot be evaluated.
+ */
+function evaluateNColorMix (colorSpace, args) {
+  const parsedArgs = [];
+  for (const arg of args) {
+    const parsed = parseColorMixArg(arg.trim());
+    if (!parsed) {
+      return null;
+    }
+    parsedArgs.push(parsed);
+  }
+
+  // If any color is unresolvable (var(), currentcolor), whitespace-strip only
+  if (parsedArgs.some((parsedArg) => {
+    return !parsedArg.color;
+  })) {
+    return normalizeUnresolvableNColorMix(colorSpace, parsedArgs);
+  }
+
+  const percentages = normalizeNColorPercentages(parsedArgs);
+  const percentageSum = percentages.reduce((sum, value) => {
+    return sum + value;
+  }, 0);
+
+  // All-zero percentages → transparent black
+  if (percentageSum === 0) {
+    return rgbaToHex(0, 0, 0, 0);
+  }
+
+  let alphaMultiplier = 1;
+  if (percentageSum < 100) {
+    alphaMultiplier = percentageSum / 100;
+  } else if (percentageSum > 100) {
+    for (let i = 0; i < percentages.length; i++) {
+      percentages[i] = percentages[i] / percentageSum * 100;
+    }
+  }
+
+  // Compute weights
+  const totalPercentage = percentages.reduce((sum, value) => {
+    return sum + value;
+  }, 0);
+  const weights = percentages.map((value) => {
+    return value / totalPercentage;
+  });
+  const colors = parsedArgs.map((parsedArg) => {
+    return parsedArg.color;
+  });
+
+  if (colorSpace === 'srgb') {
+    return mixNColorsSrgb(colors, weights, alphaMultiplier);
+  }
+
+  if (colorSpace === 'oklab') {
+    return mixNColorsOklab(colors, weights, alphaMultiplier);
+  }
+
+  return null;
+}
+
+/**
+ * Normalize percentages for an N-color color-mix() expression.
+ * When no percentages are specified, each color gets an equal share of 100%.
+ * When some are unspecified, the remaining percentage is split equally among them.
+ *
+ * @param  {Array} parsedArgs  The parsed color-mix arguments.
+ * @return {Array}             An array of normalized percentage values.
+ */
+function normalizeNColorPercentages (parsedArgs) {
+  const percentages = parsedArgs.map((parsedArg) => {
+    return parsedArg.percentage;
+  });
+  if (percentages.every((value) => {
+    return value === null;
+  })) {
+    const equalWeight = 100 / parsedArgs.length;
+    return parsedArgs.map(() => {
+      return equalWeight;
+    });
+  }
+  const specifiedSum = percentages.reduce((sum, value) => {
+    return sum + (value !== null ? value : 0);
+  }, 0);
+  const unspecifiedCount = percentages.filter((value) => {
+    return value === null;
+  }).length;
+  if (unspecifiedCount > 0) {
+    const remaining = Math.max(0, 100 - specifiedSum);
+    const percentagePerUnspecified = remaining / unspecifiedCount;
+    return percentages.map((value) => {
+      return value !== null ? value : percentagePerUnspecified;
+    });
+  }
+  return percentages;
+}
+
+/**
+ * Build a whitespace-stripped color-mix() string for an unresolvable N-color expression.
+ *
+ * @param  {string} colorSpace  The interpolation color space.
+ * @param  {Array}  parsedArgs  The parsed color-mix arguments.
+ * @return {string}             A whitespace-stripped color-mix() expression.
+ */
+function normalizeUnresolvableNColorMix (colorSpace, parsedArgs) {
+  const parts = parsedArgs.map((parsedArg) => {
+    const rawColor = parsedArg.raw.trim();
+    const percentageString = parsedArg.percentage !== null ? ' ' + parsedArg.percentage + '%' : '';
+    return rawColor + percentageString;
+  });
+  return 'color-mix(in ' + colorSpace + ',' + parts.join(',') + ')';
+}
+
+/**
+ * Mix N colors in the sRGB color space using weighted averages.
+ *
+ * @param  {Array}  colors           Array of [r, g, b, a] color arrays.
+ * @param  {Array}  weights          Array of weight values for each color.
+ * @param  {number} alphaMultiplier  Multiplier for the final alpha channel.
+ * @return {string}                  A hex color string.
+ */
+function mixNColorsSrgb (colors, weights, alphaMultiplier) {
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let alpha = 0;
+  for (let i = 0; i < colors.length; i++) {
+    r += colors[i][0] * weights[i];
+    g += colors[i][1] * weights[i];
+    b += colors[i][2] * weights[i];
+    alpha += colors[i][3] * weights[i];
+  }
+  return rgbaToHex(Math.round(r), Math.round(g), Math.round(b), alpha * alphaMultiplier);
+}
+
+/**
+ * Mix N colors in the OKLab color space using weighted averages.
+ *
+ * @param  {Array}  colors           Array of [r, g, b, a] color arrays.
+ * @param  {Array}  weights          Array of weight values for each color.
+ * @param  {number} alphaMultiplier  Multiplier for the final alpha channel.
+ * @return {string}                  A hex color string.
+ */
+function mixNColorsOklab (colors, weights, alphaMultiplier) {
+  const oklabValues = colors.map((color) => {
+    return rgbToOklab(color[0], color[1], color[2]);
+  });
+  let L = 0;
+  let a = 0;
+  let b = 0;
+  let alpha = 0;
+  for (let i = 0; i < oklabValues.length; i++) {
+    L += oklabValues[i].L * weights[i];
+    a += oklabValues[i].a * weights[i];
+    b += oklabValues[i].b * weights[i];
+    alpha += colors[i][3] * weights[i];
+  }
+  alpha *= alphaMultiplier;
+  const rgb = oklabToRgb(L, a, b);
+  return rgbaToHex(rgb[0], rgb[1], rgb[2], alpha >= 1 ? 1 : alpha);
+}
+
 /**
  * Evaluate a color-mix() expression. Returns a minified CSS color string or null.
  *
@@ -495,15 +661,20 @@ function evaluateColorMix (expr) {
   const colorSpace = inMatch[1].toLowerCase();
   const rest = inner.slice(inMatch[0].length);
 
-  // Split the two color arguments (handling nested parens)
-  const [arg1, arg2] = splitColorMixArgs(rest);
-  if (!arg1 || !arg2) {
+  // Split color arguments (handling nested parens)
+  const args = splitColorMixArgs(rest);
+  if (args.length < 2) {
     return null;
   }
 
+  // N-color path (3+ colors)
+  if (args.length > 2) {
+    return evaluateNColorMix(colorSpace, args);
+  }
+
   // Parse each argument: "<color> [<percentage>]"
-  const parsed1 = parseColorMixArg(arg1.trim());
-  const parsed2 = parseColorMixArg(arg2.trim());
+  const parsed1 = parseColorMixArg(args[0].trim());
+  const parsed2 = parseColorMixArg(args[1].trim());
   if (!parsed1 || !parsed2) {
     return null;
   }
@@ -630,23 +801,27 @@ function extractBalancedArgs (expr, funcName) {
 }
 
 /**
- * Split color-mix arguments at the top-level comma (handling nested parens).
+ * Split color-mix arguments at top-level commas (handling nested parens).
  *
- * @param  {string} str  The two color arguments string, separated by a comma.
- * @return {Array}       A two-element array of [firstArg, secondArg], or [null, null] if no split point.
+ * @param  {string} str  The color arguments string, with arguments separated by commas.
+ * @return {Array}       An array of argument strings split at each top-level comma.
  */
 function splitColorMixArgs (str) {
+  const args = [];
   let depth = 0;
+  let start = 0;
   for (let position = 0; position < str.length; position++) {
     if (str[position] === '(') {
       depth++;
     } else if (str[position] === ')') {
       depth--;
     } else if (str[position] === ',' && depth === 0) {
-      return [str.slice(0, position), str.slice(position + 1)];
+      args.push(str.slice(start, position));
+      start = position + 1;
     }
   }
-  return [null, null];
+  args.push(str.slice(start));
+  return args;
 }
 
 /**

package/src/value/minify.js

@@ -74,11 +74,16 @@ const COLOR_TOKEN_PATTERN = new RegExp(
  * @return {string}          The segment with all colors shortened to their minimal form.
  */
 function shortenColorValues (segment) {
+  // Match "color-mix(" as a whole word, case-insensitive
+  const hasColorMix = /\bcolor-mix\(/i.test(segment);
   return segment.replace(COLOR_TOKEN_PATTERN, (match) => {
     let channels;
     if (match.startsWith('#')) {
       channels = parseHex(match);
     } else {
+      if (hasColorMix) {
+        return match;
+      }
       const rgb = namedColors[match.toLowerCase()];
       if (rgb) {
         channels = [rgb[0], rgb[1], rgb[2], 1];