@thejaredwilcurt/csslop 0.0.40 → 0.0.42

package/src/value/math.js

@@ -2,10 +2,13 @@
  * @file Simplifies CSS math functions (calc, min, max) by folding constant expressions, flattening nested calcs, and converting absolute lengths to pixels.
  */
 
-import { calc } from '@csstools/css-calc';
-
 import { findMatchingParenthesis } from '../parser/source-search.js';
 
+import {
+  formatUnitTotals,
+  MATH_FUNCTION_NAMES,
+  simplifyCalc
+} from './math-expression.js';
 import {
   convertAbsoluteLengthToPx,
   formatResolvedDimension,
@@ -86,25 +89,6 @@ function keepSeparatorAfterDissolvedFunction (replacer) {
   };
 }
 
-/**
- * The functions whose arguments are a math expression, where `*` and `/` are
- * arithmetic operators rather than characters of some other syntax.
- *
- * @type {Set<string>}
- */
-const MATH_FUNCTION_NAMES = new Set([
-  'abs',
-  'calc',
-  'clamp',
-  'hypot',
-  'max',
-  'min',
-  'mod',
-  'rem',
-  'round',
-  'sign'
-]);
-
 /**
  * Matches a single character that may appear in a CSS function name.
  *
@@ -270,6 +254,38 @@ function shorterOfResolutionAndCalculation (resolved, calculation) {
   return calculation;
 }
 
+/**
+ * Writes a calculation as compactly as its syntax allows, squeezing out every
+ * space but the ones a `+` or a `-` needs to be read as an operator.
+ *
+ * @param  {string} inner  The contents of the `calc()`.
+ * @return {string}        The whole `calc()`, written as compactly as it can be.
+ */
+function compactCalculation (inner) {
+  // Remove whitespace around multiplication and division operators
+  const compactInner = inner.replace(/\s+/g, ' ').trim().replace(/\s*([*/])\s*/g, '$1');
+  return 'calc(' + compactInner + ')';
+}
+
+/**
+ * Picks between a calculation and what resolving its arithmetic came to. A
+ * resolved value states the same thing without any arithmetic, so it wins a
+ * tie, but a result that is itself a calculation only states the same terms
+ * another way, and writing them out again for no saving gains nothing.
+ *
+ * @param  {string} resolved     The value the calculation resolved to.
+ * @param  {string} calculation  The calculation, written as compactly as it can be.
+ * @return {string}              Whichever of the two the value is written as.
+ */
+function chooseResolvedCalculation (resolved, calculation) {
+  // A resolution that kept its function form left terms behind that only
+  // resolve once the element they are measured against is laid out
+  if (resolved.startsWith('calc(') && resolved.length >= calculation.length) {
+    return calculation;
+  }
+  return shorterOfResolutionAndCalculation(resolved, calculation);
+}
+
 /**
  * Resolves a percentage divided by a number into the single percentage it
  * equals, which is how `calc(100%/16)` comes to be written as `6.25%`. The
@@ -398,21 +414,6 @@ function clampResolvedValueToPropertyRange (resolvedValue, property) {
   return '0';
 }
 
-/**
- * The units a folded calc() expression leads with, in the order they are
- * written. Every other unit follows them alphabetically.
- *
- * @type {Array}
- */
-const PREFERRED_UNIT_ORDER = ['%', '', 'px'];
-
-/**
- * The same leading units, for excluding them from the alphabetical remainder.
- *
- * @type {Set<string>}
- */
-const PREFERRED_UNITS = new Set(PREFERRED_UNIT_ORDER);
-
 /**
  * Attempts to simplify a calc() expression by combining like-unit terms and evaluating pure arithmetic, returning the simplified string or null if folding is not possible.
  *
@@ -492,38 +493,7 @@ function tryFoldCalcExpression (expression) {
     totals.set(unit, (totals.get(unit) || 0) + number);
   }
 
-  const orderedUnits = [...PREFERRED_UNIT_ORDER, ...[...totals.keys()].filter((unit) => {
-    return !PREFERRED_UNITS.has(unit);
-  }).sort()];
-  const outputTerms = [];
-
-  for (const unit of orderedUnits) {
-    if (!totals.has(unit)) {
-      continue;
-    }
-    const value = totals.get(unit);
-    if (Math.abs(value) < 1e-12) {
-      continue;
-    }
-    outputTerms.push({ unit, value });
-  }
-
-  if (!outputTerms.length) {
-    return '0';
-  }
-
-  if (outputTerms.length === 1) {
-    const { unit, value } = outputTerms[0];
-    return formatResolvedDimension(value, unit);
-  }
-
-  const [first, ...rest] = outputTerms;
-  let result = formatResolvedDimension(first.value, first.unit);
-  for (const term of rest) {
-    const sign = term.value < 0 ? '-' : '+';
-    result += ' ' + sign + ' ' + formatResolvedDimension(Math.abs(term.value), term.unit);
-  }
-  return 'calc(' + result + ')';
+  return formatUnitTotals(totals);
 }
 
 /**
@@ -578,8 +548,7 @@ function chooseResolvedPercentage (simplified, compactInner, match) {
  */
 function resolveCalcExpression (match, compactInner) {
   if (PERCENTAGE_MULTIPLICATION.test(compactInner)) {
-    // Remove whitespace around multiplication/division operators
-    return 'calc(' + compactInner.replace(/\s*([*/])\s*/g, '$1') + ')';
+    return compactCalculation(compactInner);
   }
 
   const dividedPercentage = resolvePercentageDivision(compactInner);
@@ -592,26 +561,41 @@ function resolveCalcExpression (match, compactInner) {
     return folded;
   }
 
-  try {
-    const simplified = calc(match);
-    if (typeof simplified !== 'string') {
-      return match;
-    }
-    return chooseResolvedPercentage(simplified, compactInner, match);
-  } catch {
+  const simplified = simplifyCalc(match);
+  if (simplified === null) {
     return match;
   }
+  const resolved = chooseResolvedPercentage(simplified, compactInner, match);
+  return chooseResolvedCalculation(resolved, compactCalculation(compactInner));
 }
 
 /**
- * Simplifies calc(), min(), and max() expressions within a CSS value string using the `@csstools`/css-calc library, falling back to the original value on failure.
+ * Matches a math function other than `calc()` whose arguments hold no further
+ * parentheses, so that the whole of the function is matched. A `calc()` is
+ * left to its own pass, which weighs what the calculation resolves to against
+ * the calculation itself.
  *
- * @param  {string} value          The CSS value string containing math functions to simplify.
- * @param  {string} property       The CSS property name, whose range every resolved result is clamped into.
- * @param  {string} originalValue  The original unmodified value to fall back to if simplification produces an invalid result.
- * @return {string}                The value with math functions simplified where possible.
+ * @type {RegExp}
  */
-function normalizeMathFunctions (value, property, originalValue = '') {
+const RESOLVABLE_MATH_FUNCTION = new RegExp(
+  '\\b(?:' +
+  [...MATH_FUNCTION_NAMES].filter((name) => {
+    return name !== 'calc';
+  }).join('|') +
+  ')\\([^()]+\\)',
+  'gi'
+);
+
+/**
+ * Runs one pass of the math simplifications over a value: the rewrites that
+ * state a calculation more compactly, and the resolutions that replace a math
+ * function with the value it works out to.
+ *
+ * @param  {string} value     The CSS value string containing math functions to simplify.
+ * @param  {string} property  The CSS property name, whose range every resolved result is clamped into.
+ * @return {string}           The value with its math functions simplified where possible.
+ */
+function simplifyMathFunctionsOnce (value, property) {
   let result = rewriteMathFunctionContents(convertReciprocalMultiplicationToDivision, value);
 
   // Unwrap calc(1 / (1 / x)) → x (double-reciprocal identity)
@@ -627,20 +611,16 @@ function normalizeMathFunctions (value, property, originalValue = '') {
     return 'calc(' + inner + ')';
   }));
 
-  // Simplify min()/max() expressions using @csstools/css-calc
-  result = result.replace(/\b(min|max)\(([^()]+)\)/gi, keepSeparatorAfterDissolvedFunction((match) => {
-    try {
-      const simplified = calc(match);
-      if (typeof simplified !== 'string') {
-        return match;
-      }
-      return clampResolvedValueToPropertyRange(simplified, property);
-    } catch {
+  // Resolve every math function that compares or rounds its arguments
+  result = result.replace(RESOLVABLE_MATH_FUNCTION, keepSeparatorAfterDissolvedFunction((match) => {
+    const simplified = simplifyCalc(match);
+    if (simplified === null) {
       return match;
     }
+    return clampResolvedValueToPropertyRange(simplified, property);
   }));
 
-  // Simplify calc() expressions using constant folding and @csstools/css-calc
+  // Simplify calc() expressions using constant folding and expression resolution
   result = result.replace(/calc\(([^()]+)\)/gi, keepSeparatorAfterDissolvedFunction((match, inner) => {
     // Collapse whitespace inside calc expression
     const compactInner = inner.replace(/\s+/g, ' ').trim();
@@ -648,6 +628,31 @@ function normalizeMathFunctions (value, property, originalValue = '') {
     return clampResolvedValueToPropertyRange(resolved, property);
   }));
 
+  return result;
+}
+
+/**
+ * Simplifies every math function within a CSS value string, resolving the ones
+ * whose operands are all known and stating the rest as compactly as they can
+ * be written.
+ *
+ * @param  {string} value          The CSS value string containing math functions to simplify.
+ * @param  {string} property       The CSS property name, whose range every resolved result is clamped into.
+ * @param  {string} originalValue  The value as it was authored, which tells whether a result was ever part of a calculation.
+ * @return {string}                The value with math functions simplified where possible.
+ */
+function normalizeMathFunctions (value, property, originalValue = '') {
+  let result = value;
+  let previous;
+
+  do {
+    previous = result;
+    // Resolving a math function leaves a plain value where it stood, which can
+    // bring the function it was nested in within reach of the next pass, so
+    // the value is simplified until it settles
+    result = simplifyMathFunctionsOnce(result, property);
+  } while (result !== previous);
+
   // When calc() folded to an absolute-length unit (pt, pc, in, cm, mm, q), convert to pixels
   if (originalValue.includes('calc(') && /^-?(?:\d+|\d*\.\d+)(pt|pc|in|cm|mm|q)$/i.test(result)) {
     // Extract the absolute-length unit from the folded result
@@ -667,7 +672,7 @@ function normalizeMathFunctions (value, property, originalValue = '') {
 }
 
 /**
- * Simplifies a standalone calc() value by flattening nested calc expressions, converting absolute length units to pixels, and folding constant terms.
+ * Simplifies a standalone calc() value by resolving its arithmetic, flattening nested calc expressions, converting absolute length units to pixels, and folding constant terms.
  *
  * @param  {string} value  The CSS value string, already known to be a single `calc()`.
  * @return {string}        The simplified value, or the original value if simplification is not applicable.
@@ -677,7 +682,15 @@ function foldStandaloneCalc (value) {
 
   // Preserve percent-times-number expressions, only stripping whitespace around operators
   if (PERCENTAGE_MULTIPLICATION.test(inner.replace(/\s+/g, ' ').trim())) {
-    return 'calc(' + inner.replace(/\s*([*/])\s*/g, '$1') + ')';
+    return compactCalculation(inner);
+  }
+
+  // Resolve the calculation as it was written, which is the only reading of it
+  // that keeps the grouping its parentheses state. Everything below reads a
+  // flattened copy of the expression, where that grouping is already gone.
+  const resolved = simplifyCalc(value);
+  if (resolved !== null) {
+    return chooseResolvedCalculation(resolved, compactCalculation(inner));
   }
 
   // If no nested function calls and no multiplication/division involving parens, try flattening
@@ -714,14 +727,12 @@ function foldStandaloneCalc (value) {
   }
 
   // Collapse whitespace and check for percent-division expressions
-  const compactInner = inner.replace(/\s+/g, ' ').trim();
-  const dividedPercentage = resolvePercentageDivision(compactInner);
+  const dividedPercentage = resolvePercentageDivision(inner.replace(/\s+/g, ' ').trim());
   if (dividedPercentage) {
     return dividedPercentage;
   }
 
-  // Default: strip whitespace around multiplication/division operators
-  return 'calc(' + compactInner.replace(/\s*([*/])\s*/g, '$1') + ')';
+  return compactCalculation(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');
 }
 

package/vite.config.js

@@ -27,10 +27,6 @@ const config = defineConfig({
               test: /node_modules\/@codemirror\/lang-css/,
               name: 'codemirror-lang-css'
             },
-            {
-              test: /node_modules\/@csstools\/css-calc/,
-              name: 'css-calc'
-            },
             {
               test: /node_modules\/@node-projects\/css-parser/,
               name: 'css-parser'