@thejaredwilcurt/csslop 0.0.41 → 0.0.42

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. Since then I've mostly used the latest Claude version for maintenance.
+These were the latest and greatest models at the time.
 
 **AI's used during maintenance:**
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.41",
+  "version": "0.0.42",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/pre/start.js",
@@ -25,22 +25,22 @@
   "devDependencies": {
     "@codemirror/autocomplete": "^6.20.3",
     "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/view": "^6.43.13",
+    "@codemirror/view": "^6.43.14",
     "@eslint/js": "^10.0.1",
     "@node-projects/css-parser": "^5.2.0",
     "@stylistic/eslint-plugin": "^5.10.0",
     "codemirror": "^6.0.2",
-    "eslint": "^10.11.0",
+    "eslint": "^10.13.0",
     "eslint-config-tjw-base": "^5.0.0",
     "eslint-config-tjw-import-x": "^1.0.1",
     "eslint-config-tjw-jsdoc": "^2.0.1",
     "eslint-plugin-import-x": "^4.17.0",
-    "eslint-plugin-jsdoc": "^64.5.4",
+    "eslint-plugin-jsdoc": "^65.3.8",
     "fflate": "^0.8.3",
-    "globals": "^17.12.0",
-    "pretty-ms": "^9.3.1",
+    "globals": "^17.13.0",
+    "pretty-ms": "^10.0.0",
     "real-world-css-libraries": "^1.0.8",
-    "vite": "^8.3.1"
+    "vite": "^8.3.4"
   },
   "author": "The Jared Wilcurt",
   "homepage": "https://github.com/TheJaredWilcurt/csslop#readme",
@@ -57,11 +57,11 @@
   "devEngines": {
     "runtime": {
       "name": "node",
-      "version": "26.10.0"
+      "version": "26.12.0"
     },
     "packageManager": {
       "name": "npm",
-      "version": "12.1.0"
+      "version": "12.2.0"
     }
   }
 }

package/src/rules/stringify.js

@@ -404,14 +404,8 @@ function stringifyRule (rule, context) {
     if (canUnwrapSupports(supports)) {
       return children;
     }
-    // Check if @supports condition has adjacent logical operators that allow tight spacing
-    const needsTightSpacing = supports.startsWith('(') && /\)(?:and|or)\s*\(/.test(supports);
-    let supportsSeparator;
-    if (needsTightSpacing) {
-      supportsSeparator = '';
-    } else {
-      supportsSeparator = ' ';
-    }
+    // A condition beginning with "(" can follow the at-rule name without whitespace.
+    const supportsSeparator = supports.startsWith('(') ? '' : ' ';
     return '@supports' + supportsSeparator + supports + '{' + children + '}';
   }
 

package/src/value/minify.js

@@ -451,6 +451,67 @@ function parseOklchHue (token) {
   return parseAngleToDegrees(normalized);
 }
 
+/**
+ * Removes whitespace before a negative numeric channel in Lab-family colors.
+ * A preceding numeric token already separates the sign from the prior channel.
+ *
+ * @param  {string} functionName  The name of the color function.
+ * @param  {string} value         The minified function arguments.
+ * @return {string}               The arguments with redundant channel spacing removed.
+ */
+function compactNegativeColorChannelSpacing (functionName, value) {
+  const normalizedFunctionName = functionName.toLowerCase();
+  if (!['lab', 'lch', 'oklab', 'oklch'].includes(normalizedFunctionName)) {
+    return value;
+  }
+
+  let result = '';
+  let nestingDepth = 0;
+  for (let index = 0; index < value.length; index++) {
+    const character = value[index];
+    if (character === ' ' && nestingDepth === 0) {
+      const previousCharacter = result[result.length - 1];
+      const nextCharacter = value[index + 1];
+      const characterAfterSign = value[index + 2];
+      const characterAfterDecimal = value[index + 3];
+      const previousEndsNumber = (
+        isCssDigit(previousCharacter) ||
+        previousCharacter === '%'
+      );
+      const nextStartsNegativeNumber = (
+        nextCharacter === '-' &&
+        (
+          isCssDigit(characterAfterSign) ||
+          (
+            characterAfterSign === '.' &&
+            isCssDigit(characterAfterDecimal)
+          )
+        )
+      );
+      if (previousEndsNumber && nextStartsNegativeNumber) {
+        continue;
+      }
+    }
+    result += character;
+    if (character === '(') {
+      nestingDepth++;
+    } else if (character === ')') {
+      nestingDepth--;
+    }
+  }
+  return result;
+}
+
+/**
+ * Checks whether a character is an ASCII decimal digit.
+ *
+ * @param  {string}  character  The character to inspect.
+ * @return {boolean}            Whether the character is a digit.
+ */
+function isCssDigit (character) {
+  return character >= '0' && character <= '9';
+}
+
 /**
  * Converts `oklch()` colors that fall inside the sRGB gamut to their hex
  * equivalent when that is shorter. Out-of-gamut colors have no sRGB
@@ -574,11 +635,13 @@ function convertColorsToHex (val) {
       }
       return integer;
     });
+    minified = compactNegativeColorChannelSpacing(func, minified);
     return func + '(' + minified.trim() + ')';
   });
 
   // Convert in-gamut oklab() to hex when it produces a shorter representation
-  val = val.replace(/\boklab\(\s*(-?(?:\d+|\d*\.\d+))\s+(-?(?:\d+|\d*\.\d+))\s+(-?(?:\d+|\d*\.\d+))(?:\s*\/\s*(-?(?:\d+|\d*\.\d+)%?))?\s*\)/gi, (match, lStr, aStr, bStr, alphaStr) => {
+  // A negative channel may touch the preceding number because its sign separates the CSS number tokens.
+  val = val.replace(/\boklab\(\s*(-?(?:\d+|\d*\.\d+))(?:\s+|(?=-))(-?(?:\d+|\d*\.\d+))(?:\s+|(?=-))(-?(?:\d+|\d*\.\d+))(?:\s*\/\s*(-?(?:\d+|\d*\.\d+)%?))?\s*\)/gi, (match, lStr, aStr, bStr, alphaStr) => {
     const alpha = parseAlphaString(alphaStr);
     const hex = convertOklabToHex(parseFloat(lStr), parseFloat(aStr), parseFloat(bStr), alpha);
     if (!hex) {
@@ -892,14 +955,13 @@ const POSITION_COMPONENT_SOURCE = '(' + POSITION_OFFSET_SOURCE + '(?:\\s+' + POS
 const URL_TOKEN_BODY_SOURCE = 'url\\([^()]*';
 
 /**
- * Matches a close-paren that ends an image function, directly followed by a
- * position that no slash follows, which is the position that needs its
- * separator put back. The parenthesis that ends a `url()` is skipped, since
- * that one closes a token rather than a function.
+ * Matches a close-paren that ends an image function, followed by a separated
+ * position that no slash follows. The parenthesis that ends a `url()` is
+ * skipped, since that one closes a token rather than a function.
  *
  * @type {RegExp}
  */
-const UNSEPARATED_FUNCTION_POSITION_PATTERN = new RegExp('(?<!' + URL_TOKEN_BODY_SOURCE + ')\\)' + POSITION_COMPONENT_SOURCE + '(?!\\/)', 'gi');
+const SEPARATED_FUNCTION_POSITION_PATTERN = new RegExp('(?<!' + URL_TOKEN_BODY_SOURCE + ')\\)\\s+' + POSITION_COMPONENT_SOURCE + '(?!\\/)', 'gi');
 
 /**
  * Matches a `url()` separated from the position that follows it, which is the
@@ -920,18 +982,16 @@ const SEPARATED_IMAGE_SIZE_POSITION_PATTERN = new RegExp('\\)\\s+' + POSITION_CO
 /**
  * Normalizes the separator between the image of a layer and the position that
  * follows it. Both `background` and `mask` take a `<position> [ / <size> ]`
- * component after their image, and a bare position only reads as its own
- * component while whitespace separates it from an image function. Neither a
- * position that a `/` follows nor one that follows a `url()` needs the
- * separator, since the slash delimits the pair and a url is consumed whole as a
- * single token that ends at its own closing parenthesis.
+ * component after their image. The closing parenthesis already delimits a
+ * function token from the position, and neither a position that a `/` follows
+ * nor one that follows a `url()` needs a separator either.
  *
  * @param  {string} value  The layered image value, with the parenthesis padding removed.
  * @return {string}        The value with the position separator normalized.
  */
 function normalizeImagePositionSeparator (value) {
-  const separatedFromFunction = value.replace(UNSEPARATED_FUNCTION_POSITION_PATTERN, ') $1');
-  const joinedToUrl = separatedFromFunction.replace(SEPARATED_URL_POSITION_PATTERN, '$1$2');
+  const joinedToFunction = value.replace(SEPARATED_FUNCTION_POSITION_PATTERN, ')$1');
+  const joinedToUrl = joinedToFunction.replace(SEPARATED_URL_POSITION_PATTERN, '$1$2');
   return joinedToUrl.replace(SEPARATED_IMAGE_SIZE_POSITION_PATTERN, ')$1');
 }