@thejaredwilcurt/csslop 0.0.13 → 0.0.15

package/README.md

@@ -278,7 +278,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. Run `npm run lint` and ensure the linter passes when done. DO NOT, under any circumstance, run `npm run real` (it will kill actual humans)!
+   * **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. 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.
 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.13",
+  "version": "0.0.15",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/prestart.js",
@@ -58,7 +58,7 @@
   "devEngines": {
     "runtime": {
       "name": "node",
-      "version": "26.4.0"
+      "version": "26.5.0"
     },
     "packageManager": {
       "name": "npm",

package/src/value/colors.js

@@ -339,7 +339,9 @@ function parseColor (colorString) {
 
   // Named color
   if (namedColors[normalized]) {
-    return [...namedColors[normalized], 1];
+    // transparent has alpha=0, all other named colors have alpha=1
+    const alpha = normalized === 'transparent' ? 0 : 1;
+    return [...namedColors[normalized], alpha];
   }
 
   // Hex

package/src/value/gradients.js

@@ -139,6 +139,25 @@ function normalizeStopColorToken (colorToken) {
  */
 function parseColorStop (stop) {
   const trimmed = stop.trim();
+  
+  // Check if the entire stop is a 4-digit hex color (with alpha) like #0000
+  // These should not be split as they are complete colors
+  if (/^#[0-9a-fA-F]{4}\b$/.test(trimmed)) {
+    return {
+      color: trimmed,
+      position: null
+    };
+  }
+  
+  // Check if the entire stop is an 8-digit hex color (with alpha) like #00000000
+  // These should not be split as they are complete colors
+  if (/^#[0-9a-fA-F]{8}\b$/.test(trimmed)) {
+    return {
+      color: trimmed,
+      position: null
+    };
+  }
+  
   // Match a trailing position: one or two values that are numbers with optional units
   // like "50%", "10px", or "0". Captures the last position token(s) after the color.
   const positionMatch = trimmed.match(/^(.+?)\s+((?:\d+(?:\.\d+)?(?:%|[a-z]+)?\s*){1,2})$/i);
@@ -250,6 +269,9 @@ function normalizeBoundaryPositionTokens (mergedStops) {
     if (isLastStop && positionTokens[positionTokens.length - 1] === '100%') {
       positionTokens.pop();
     }
+    if (isLastStop && positionTokens.length === 1 && positionTokens[0] === '100%') {
+      positionTokens.pop();
+    }
     if (positionTokens.length > 0 && positionTokens[0] === previousEndPosition) {
       positionTokens[0] = '0';
     }

package/src/value/minify.js

@@ -89,7 +89,9 @@ function shortenColorValues (segment) {
       }
       const rgb = namedColors[match.toLowerCase()];
       if (rgb) {
-        channels = [rgb[0], rgb[1], rgb[2], 1];
+        // transparent has alpha=0, all other named colors have alpha=1
+        const alpha = match.toLowerCase() === 'transparent' ? 0 : 1;
+        channels = [rgb[0], rgb[1], rgb[2], alpha];
       }
     }
     if (!channels) {
@@ -521,6 +523,10 @@ function applyPropertyOptimizations (val, property) {
     if (['min-width', 'min-height'].includes(property)) {
       val = 'auto';
     }
+    // background-color: initial should become #0000 (transparent)
+    if (property === 'background-color') {
+      val = '#0000';
+    }
   }
 
   if (property === 'background' && val === 'none') {
@@ -612,6 +618,9 @@ function applyPropertyOptimizations (val, property) {
 
   // Remove space before hex colors (second pass after color evaluations)
   val = replaceOutsideStringsAndUrls(val, (segment) => {
+    // Preserve space after border style keywords (solid, dashed, etc.) before hex colors
+    segment = segment.replace(/\b(solid|dashed|dotted|double|groove|ridge|inset|outset|hidden|none)\s+#([0-9a-fA-F]{3,8})\b/gi, '$1 #$2');
+    // Then remove other spaces before hex colors
     return segment.replace(/\s+#([0-9a-fA-F]{3,8})\b/gi, '#$1');
   });
   if (property !== 'transform' && property !== 'background' && property !== 'src') {
@@ -660,6 +669,9 @@ function applyPropertyOptimizations (val, property) {
   if (property === 'border') {
     // Remove default "medium" border-width keyword
     val = val.replace(/\bmedium\s+/g, '');
+    // Restore missing space between border-style and a 4-digit hex color (with alpha) when they are adjacent
+    // This is needed because solid#0000 could be parsed as solid followed by #000 followed by position 0
+    val = val.replace(/\b(solid|dashed|dotted|double|groove|ridge|inset|outset|hidden|none)#([0-9a-fA-F]{4})\b/gi, '$1 #$2');
   }
 
   if (property === 'outline') {
@@ -771,7 +783,12 @@ function minifyValue (declaration) {
 
     // Remove space before hex colors
     val = replaceOutsideStringsAndUrls(val, (segment) => {
+      // Preserve space after border style keywords by using a temporary placeholder
+      segment = segment.replace(/\b(solid|dashed|dotted|double|groove|ridge|inset|outset|hidden|none)\s+#([0-9a-fA-F]{3,8})\b/gi, '$1__BORDER_SPACE__#$2');
+      // Remove other spaces before hex colors
       segment = segment.replace(/\s+#([0-9a-fA-F]{3,8})\b/gi, '#$1');
+      // Restore the preserved space
+      segment = segment.replace(/__BORDER_SPACE__#/g, ' #');
       // Lowercase hex color tokens for consistency and shorter output
       segment = segment.replace(/#([0-9a-fA-F]{3,8})\b/gi, (m) => {
         return m.toLowerCase();

package/src/value/named-colors.js

@@ -7,6 +7,7 @@
 
 const namedColors = {
   black: [0, 0, 0],
+  transparent: [0, 0, 0],
   silver: [192, 192, 192],
   gray: [128, 128, 128],
   grey: [128, 128, 128],