@thejaredwilcurt/csslop 0.0.12 → 0.0.14

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.12",
+  "version": "0.0.14",
   "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);
@@ -162,6 +181,105 @@ function parseColorStop (stop) {
   };
 }
 
+/**
+ * Splits a stop position into individual start and end tokens.
+ *
+ * @param  {string|null} position  The raw stop position text.
+ * @return {Array}                 The normalized position tokens.
+ */
+function splitStopPositionTokens (position) {
+  if (position === null) {
+    return [];
+  }
+
+  return position.split(/\s+/).filter(Boolean);
+}
+
+/**
+ * Serializes a color stop from its color and normalized position tokens.
+ *
+ * @param  {string} color           The normalized stop color.
+ * @param  {Array}  positionTokens  The normalized stop positions.
+ * @return {string}                 The serialized color stop.
+ */
+function serializeColorStop (color, positionTokens) {
+  if (positionTokens.length === 0) {
+    return color;
+  }
+
+  return color + ' ' + positionTokens.join(' ');
+}
+
+/**
+ * Merges consecutive stops with the same color into a single logical stop.
+ *
+ * @param  {Array}  group  The adjacent parsed stops for one color.
+ * @return {object}        The merged stop data.
+ */
+function mergeIdenticalStopGroup (group) {
+  const firstStop = group[0];
+  const lastStop = group[group.length - 1];
+  const firstPositionTokens = splitStopPositionTokens(firstStop.position);
+  const lastPositionTokens = splitStopPositionTokens(lastStop.position);
+
+  let positionTokens;
+  if (group.length === 1) {
+    positionTokens = firstPositionTokens;
+  } else {
+    const mergedTokens = [];
+    const startPosition = firstPositionTokens[0] || null;
+    const endPosition = lastPositionTokens[lastPositionTokens.length - 1] || null;
+
+    if (startPosition !== null) {
+      mergedTokens.push(startPosition);
+    }
+    if (endPosition !== null && endPosition !== startPosition) {
+      mergedTokens.push(endPosition);
+    }
+
+    positionTokens = mergedTokens;
+  }
+
+  return {
+    color: firstStop.color,
+    effectiveEndPosition: lastPositionTokens[lastPositionTokens.length - 1] || null,
+    positionTokens
+  };
+}
+
+/**
+ * Removes implied edge positions and rewrites repeated starts as `0`.
+ *
+ * @param  {Array} mergedStops  The merged stops to normalize.
+ * @return {Array}              The serialized normalized stops.
+ */
+function normalizeBoundaryPositionTokens (mergedStops) {
+  const result = [];
+  let previousEndPosition = null;
+
+  for (let stopIndex = 0; stopIndex < mergedStops.length; stopIndex++) {
+    const stop = mergedStops[stopIndex];
+    const isFirstStop = stopIndex === 0;
+    const isLastStop = stopIndex === mergedStops.length - 1;
+    const positionTokens = [...stop.positionTokens];
+
+    if (isFirstStop && positionTokens[0] === '0%') {
+      positionTokens.shift();
+    }
+    if (isLastStop && positionTokens[positionTokens.length - 1] === '100%') {
+      positionTokens.pop();
+    }
+    if (positionTokens.length > 0 && positionTokens[0] === previousEndPosition) {
+      positionTokens[0] = '0';
+    }
+
+    previousEndPosition = stop.effectiveEndPosition;
+    result.push(serializeColorStop(stop.color, positionTokens));
+  }
+
+  return result;
+}
+
 /**
  * Serializes a parsed gradient stop back into normalized CSS text, ensuring a
  * separating space is preserved when a stop position is present.
@@ -222,67 +340,11 @@ function combineAdjacentIdenticalStops (args) {
   }
 
   const groups = groupConsecutiveIdenticalStops(stops);
-  const hasMergeableGroup = groups.some((group) => {
-    return group.length > 1;
+  const mergedStops = groups.map((group) => {
+    return mergeIdenticalStopGroup(group);
   });
-  if (!hasMergeableGroup) {
-    return args;
-  }
-
-  const result = [];
-  let previousEndPosition = null;
-
-  for (let groupIndex = 0; groupIndex < groups.length; groupIndex++) {
-    const group = groups[groupIndex];
-    const color = group[0].color;
-    const isFirstGroup = groupIndex === 0;
-    const isLastGroup = groupIndex === groups.length - 1;
 
-    if (group.length === 1) {
-      let position = group[0].position;
-      if (position === '0%' && isFirstGroup) {
-        position = null;
-      }
-      if (position === '100%' && isLastGroup) {
-        position = null;
-      }
-      if (position !== null && position === previousEndPosition) {
-        position = '0';
-      }
-      previousEndPosition = group[0].position;
-      result.push(position ? color + ' ' + position : color);
-      continue;
-    }
-
-    const firstPosition = group[0].position;
-    const lastPosition = group[group.length - 1].position;
-
-    let startPart = firstPosition;
-    let endPart = lastPosition;
-
-    if (startPart === '0%' && isFirstGroup) {
-      startPart = null;
-    }
-    if (endPart === '100%' && isLastGroup) {
-      endPart = null;
-    }
-    if (startPart !== null && startPart === previousEndPosition) {
-      startPart = '0';
-    }
-
-    previousEndPosition = lastPosition;
-
-    const positionParts = [startPart, endPart].filter((part) => {
-      return part !== null;
-    });
-    if (positionParts.length > 0) {
-      result.push(color + ' ' + positionParts.join(' '));
-    } else {
-      result.push(color);
-    }
-  }
-
-  return result;
+  return normalizeBoundaryPositionTokens(mergedStops);
 }
 
 /**

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],