@thejaredwilcurt/csslop 0.0.41 → 0.0.43

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.43",
   "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/math.js

@@ -144,9 +144,58 @@ function rewriteMathFunctionContents (rewriteExpression, value) {
   return result + value.slice(index);
 }
 
+/**
+ * Matches a number written with a decimal point that begins a token of its
+ * own, capturing its sign, the digits before its decimal point, and the digits
+ * after it. The lookbehind keeps the match from starting partway through an
+ * identifier (`--x0.5`) or another number, and the lookahead keeps it from
+ * matching a fragment of a dotted name such as `0.5.png`.
+ *
+ * @type {RegExp}
+ */
+const DECIMAL_NUMBER = /(?<![\w.-])([+-]?)(\d*)\.(\d+)(?![\d.])/g;
+
+/**
+ * Writes a decimal number in the fewest characters that state the same value,
+ * dropping the zeros before its whole part (`0.25` → `.25`) and after its
+ * fraction (`1.50` → `1.5`), along with a decimal point left with no fraction
+ * behind it (`2.0` → `2`). The digits that remain are kept as written, so no
+ * precision is lost.
+ *
+ * @param  {string} sign            The sign written before the number, empty when there is none.
+ * @param  {string} wholeDigits     The digits written before the decimal point.
+ * @param  {string} fractionDigits  The digits written after the decimal point.
+ * @return {string}                 The number written as compactly as it can be.
+ */
+function shortenDecimalNumber (sign, wholeDigits, fractionDigits) {
+  // Leading zeros of the whole part
+  const wholePart = wholeDigits.replace(/^0+/, '');
+  // Trailing zeros of the fraction
+  const fractionPart = fractionDigits.replace(/0+$/, '');
+  if (!fractionPart) {
+    return sign + (wholePart || '0');
+  }
+  return sign + wholePart + '.' + fractionPart;
+}
+
+/**
+ * Shortens every decimal number in the contents of a math function. Numbers
+ * that follow an operator written without whitespace (`x*0.25s`) are out of
+ * reach of the general number shortening, which only looks past a separator.
+ *
+ * @param  {string} expression  The contents of a math function.
+ * @return {string}             The expression with every decimal number written as compactly as it can be.
+ */
+function shortenDecimalNumbers (expression) {
+  return expression.replace(DECIMAL_NUMBER, (match, sign, wholeDigits, fractionDigits) => {
+    return shortenDecimalNumber(sign, wholeDigits, fractionDigits);
+  });
+}
+
 /**
  * Matches a multiplication by a decimal below one, capturing the digits after
- * its decimal point and the unit written on it. The trailing lookahead keeps
+ * its decimal point and the unit written on it (so a multiplier with a unit
+ * can be recognized and left alone). The trailing lookahead keeps
  * the match away from numbers that only begin this way, such as the exponent
  * of `.5e3` or a unit name that is still being read.
  *
@@ -205,28 +254,47 @@ function reciprocalOfDecimalFraction (fractionDigits) {
 }
 
 /**
- * Rewrites a multiplication by a decimal below one as a division by the whole
- * number that decimal is the reciprocal of, which is never longer to write and
- * usually shorter (`calc(var(--x)*.25)` → `calc(var(--x)/4)`). A unit written
- * on the multiplier moves onto the divisor, since only how the operand is
- * stated changes.
+ * Builds the division that scales a value exactly as multiplying it by a
+ * unitless decimal below one does, when that division is no longer to write
+ * than the multiplication. A multiplier carrying a unit is never rewritten:
+ * dividing by a dimension inverts its unit in the type of the result
+ * (`x*.25s` is a time, while `x/4s` is per unit of time), so the two would not
+ * be equivalent.
+ *
+ * @param  {string}      fractionDigits  The digits written after the decimal point of the multiplier.
+ * @param  {string}      unit            The unit written on the multiplier, empty when it is unitless.
+ * @return {string|null}                 The equivalent division, or null when there is none worth using.
+ */
+function divisionEquivalentToFractionalMultiplier (fractionDigits, unit) {
+  if (unit) {
+    return null;
+  }
+  const divisor = reciprocalOfDecimalFraction(fractionDigits);
+  if (divisor === null) {
+    return null;
+  }
+  const division = '/' + divisor;
+  // Compared against the shortest the multiplication could have been written
+  const multiplication = '*.' + fractionDigits;
+  if (division.length > multiplication.length) {
+    return null;
+  }
+  return division;
+}
+
+/**
+ * Rewrites a multiplication by a unitless decimal below one as a division by
+ * the whole number that decimal is the reciprocal of, which is never longer to
+ * write and usually shorter (`calc(var(--x)*.25)` → `calc(var(--x)/4)`).
+ * Multipliers with a unit are left as written, since dividing by a dimension
+ * would invert its unit.
  *
  * @param  {string} expression  The contents of a math function.
  * @return {string}             The expression with reciprocal multipliers stated as divisions.
  */
 function convertReciprocalMultiplicationToDivision (expression) {
   return expression.replace(FRACTIONAL_MULTIPLIER, (match, fractionDigits, unit) => {
-    const divisor = reciprocalOfDecimalFraction(fractionDigits);
-    if (divisor === null) {
-      return match;
-    }
-    const division = '/' + divisor + unit;
-    // Compared against the shortest the multiplication could have been written
-    const multiplication = '*.' + fractionDigits + unit;
-    if (division.length > multiplication.length) {
-      return match;
-    }
-    return division;
+    return divisionEquivalentToFractionalMultiplier(fractionDigits, unit) ?? match;
   });
 }
 
@@ -596,7 +664,8 @@ const RESOLVABLE_MATH_FUNCTION = new RegExp(
  * @return {string}           The value with its math functions simplified where possible.
  */
 function simplifyMathFunctionsOnce (value, property) {
-  let result = rewriteMathFunctionContents(convertReciprocalMultiplicationToDivision, value);
+  let result = rewriteMathFunctionContents(shortenDecimalNumbers, value);
+  result = rewriteMathFunctionContents(convertReciprocalMultiplicationToDivision, result);
 
   // Unwrap calc(1 / (1 / x)) → x (double-reciprocal identity)
   result = result.replace(/calc\(\s*1\s*\/\s*\(\s*1\s*\/\s*([^()]+)\s*\)\s*\)/gi, keepSeparatorAfterDissolvedFunction((match, inner) => {

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');
 }