postcss-calc 11.0.3 → 11.1.1

package/src/lib/serialize.js

@@ -1,7 +1,8 @@
 // Spec: https://www.w3.org/TR/css-values-4/#serialize-a-calculation-tree
-// Outer calc() is added only when the top-level result contains an
-// arithmetic operator. A Sum inside a Product is the only place parens
-// are ever required on valid canonical input.
+// Outer calc() is added when the top-level result contains an arithmetic
+// operator, or when a finite scalar is negative.
+
+import { num, dim } from './node.js';
 
 /**
  * @typedef {import('./node.js').Node} Node
@@ -11,6 +12,7 @@
  * @typedef {object} SerializeOptions
  * @property {number | false} [precision] Decimal places for numbers. `false` disables rounding. Default 5.
  * @property {string} [calcName] Wrapper name to use when `calc()` is needed. Default `'calc'`.
+ * @property {boolean} [unwrapSingleNegativeNumber] Serialize finite negative scalars without a wrapper. Internal selector-only mode.
  */
 
 // Below this is float noise, not a value: `0.1 + 0.2 - 0.3` is 5.5e-17.
@@ -78,6 +80,20 @@ function serializeNumber(v) {
   return text;
 }
 
+/**
+ * Round and serialize a finite scalar once so callers can use the same value
+ * to decide its syntactic context and render its text.
+ *
+ * @param {import('./node.js').Num | import('./node.js').Dim} node
+ * @param {number | false} prec
+ * @return {{value: number, text: string}}
+ */
+function serializeScalar(node, prec) {
+  const value = round(node.value, prec);
+  const text = `${serializeNumber(value)}${node.type === 'Dim' ? node.unit : ''}`;
+  return { value, text };
+}
+
 /**
  * @param {Node} node
  * @param {SerializeOptions} [opts]
@@ -96,6 +112,22 @@ function serialize(node, opts = {}) {
     return `${calcName}(${degenerateKeyword(node.value)} * 1${node.unit})`;
   }
 
+  if (node.type === 'Num' || node.type === 'Dim') {
+    const scalar = serializeScalar(node, prec);
+
+    // A finite negative scalar must stay inside calc() so CSS parses it as a
+    // calculation result (and can apply range clamping) rather than as an
+    // invalid bare value. Base this on the serialized value so tiny negative
+    // floating-point noise that rounds to zero does not get wrapped.
+    if (scalar.value < 0) {
+      return opts.unwrapSingleNegativeNumber
+        ? scalar.text
+        : `${calcName}(${scalar.text})`;
+    }
+
+    return scalar.text;
+  }
+
   // A grouped sum with a leading negative term is the canonical result of
   // negating a parenthesized expression. Re-invert its terms for the body so
   // the grouping survives as `-(...)` instead of becoming `-a - b`.
@@ -105,22 +137,14 @@ function serialize(node, opts = {}) {
     node.terms.length > 1 &&
     displaySign(node.terms[0]).sign === -1
   ) {
-    const body = /** @type {Sum} */ ({
-      type: 'Sum',
-      terms: node.terms.map((t) => ({
-        sign: /** @type {1 | -1} */ (-t.sign),
-        node: t.node,
-      })),
-    });
-    return `${calcName}(-(${serializeExpr(body, prec)}))`;
+    const invertedTerms = node.terms.map((t) => ({
+      sign: /** @type {1 | -1} */ (-t.sign),
+      node: t.node,
+    }));
+    return `${calcName}(-(${serializeSumTerms(invertedTerms, prec)}))`;
   }
 
-  if (
-    node.type === 'Num' ||
-    node.type === 'Dim' ||
-    node.type === 'Ident' ||
-    node.type === 'Call'
-  ) {
+  if (node.type === 'Ident' || node.type === 'Call') {
     return serializeExpr(node, prec);
   }
 
@@ -146,7 +170,7 @@ function serializeExpr(node, prec) {
       if (isDegenerate(node.value)) {
         return degenerateKeyword(node.value);
       }
-      return serializeNumber(round(node.value, prec));
+      return serializeScalar(node, prec).text;
     case 'Dim':
       if (isDegenerate(node.value)) {
         // Nested degenerate Dim wraps in calc() so the `<kw> * 1<unit>` form
@@ -154,7 +178,7 @@ function serializeExpr(node, prec) {
         // inside a Product — `0 * Dim(Infinity, px)` would re-fold as NaN.
         return `calc(${degenerateKeyword(node.value)} * 1${node.unit})`;
       }
-      return `${serializeNumber(round(node.value, prec))}${node.unit}`;
+      return serializeScalar(node, prec).text;
     case 'Ident':
       return node.name;
     case 'Call': {
@@ -182,27 +206,27 @@ function displaySign(term) {
   if (node.type === 'Num' && Number.isFinite(node.value) && node.value < 0) {
     return {
       sign: /** @type {1 | -1} */ (-sign),
-      magnitude: { type: 'Num', value: -node.value },
+      magnitude: num(-node.value),
     };
   }
   if (node.type === 'Dim' && Number.isFinite(node.value) && node.value < 0) {
     return {
       sign: /** @type {1 | -1} */ (-sign),
-      magnitude: { type: 'Dim', value: -node.value, unit: node.unit },
+      magnitude: dim(-node.value, node.unit),
     };
   }
   return { sign, magnitude: node };
 }
 
 /**
- * @param {Sum} sum
+ * @param {import('./node.js').SumTerm[]} terms
  * @param {number | false} prec
  * @return {string}
  */
-function serializeSum(sum, prec) {
+function serializeSumTerms(terms, prec) {
   let out = '';
-  for (const [i, t] of sum.terms.entries()) {
-    const { sign, magnitude } = displaySign(t);
+  for (let i = 0; i < terms.length; i++) {
+    const { sign, magnitude } = displaySign(terms[i]);
     if (i === 0) {
       if (magnitude.type === 'Sum' && magnitude.grouped) {
         const body = `(${serializeExpr(magnitude, prec)})`;
@@ -225,6 +249,15 @@ function serializeSum(sum, prec) {
   return out;
 }
 
+/**
+ * @param {Sum} sum
+ * @param {number | false} prec
+ * @return {string}
+ */
+function serializeSum(sum, prec) {
+  return serializeSumTerms(sum.terms, prec);
+}
+
 /**
  * Fold a leading negation into a finite leading Num if there is one
  * (`-(0.5 * x)` → `-0.5 * x`); else use `-(…)` for Sum/Product or `-x`.
@@ -249,11 +282,8 @@ function serializeLeadingNeg(node, prec) {
     const negatedFactors =
       negatedValue === 1
         ? rest
-        : [
-            { exponent: 1, node: { type: 'Num', value: negatedValue } },
-            ...rest,
-          ];
-    return serializeProduct({ type: 'Product', factors: negatedFactors }, prec);
+        : [{ exponent: 1, node: num(negatedValue) }, ...rest];
+    return serializeFactors(negatedFactors, prec);
   }
   const body = serializeExpr(node, prec);
   return node.type === 'Sum' || node.type === 'Product'
@@ -262,13 +292,14 @@ function serializeLeadingNeg(node, prec) {
 }
 
 /**
- * @param {Product} product
+ * @param {ProductFactor[]} factors
  * @param {number | false} prec
  * @return {string}
  */
-function serializeProduct(product, prec) {
+function serializeFactors(factors, prec) {
   let out = '';
-  for (const [i, f] of product.factors.entries()) {
+  for (let i = 0; i < factors.length; i++) {
+    const f = factors[i];
     let body = serializeExpr(f.node, prec);
     // A Sum factor needs parens: `a * (b + c)`. Flat canonical form means
     // this is the only place parens are required.
@@ -285,4 +316,13 @@ function serializeProduct(product, prec) {
   return out;
 }
 
+/**
+ * @param {Product} product
+ * @param {number | false} prec
+ * @return {string}
+ */
+function serializeProduct(product, prec) {
+  return serializeFactors(product.factors, prec);
+}
+
 export { serialize };

package/src/lib/simplify/bucket.js

@@ -21,7 +21,7 @@ import { convert } from '../convertUnits.js';
  * @return {UnitBucket[]}
  */
 function mergeConvertibleBuckets(buckets) {
-  const ordered = [...buckets].sort((a, b) => a.order - b.order);
+  const ordered = buckets.sort((a, b) => a.order - b.order);
   /** @type {Set<string>} */ const merged = new Set();
   /** @type {UnitBucket[]} */ const out = [];
   for (const b of ordered) {

package/src/lib/simplify/call.js

@@ -26,7 +26,7 @@ import { call } from '../node.js';
 // Bare CSS math functions with implemented simplification semantics, keyed
 // by lowercase name. calc() and its vendor-prefixed forms are handled
 // separately as wrappers in simplifyCall. This map is the single source of
-// truth for both dispatch and `isSupportedMathFunction`.
+// truth for dispatch, `isSupportedMathFunction`, and `QUICK_MATH_TEST`.
 /** @type {Map<string, MathSimplifier>} */
 const MATH_SIMPLIFIERS = new Map([
   ['min', simplifyMinMax],
@@ -51,6 +51,29 @@ const MATH_SIMPLIFIERS = new Map([
   ['exp', (_name, args) => simplifyExp(args)],
 ]);
 
+const mathFnNames = [...MATH_SIMPLIFIERS.keys()].sort(
+  (a, b) => b.length - a.length
+);
+
+const QUICK_MATH_TEST = new RegExp(
+  `(?:-(?:webkit|moz)-)?(?:calc|${mathFnNames.join('|')})\\(`,
+  'i'
+);
+
+/**
+ * Fast check to determine whether a CSS component value could contain
+ * a supported calculation or math function call (or an escape sequence
+ * that could decode to one).
+ *
+ * @param {string} value
+ * @return {boolean}
+ */
+function hasPotentialMathFunction(value) {
+  return (
+    value.includes('(') && (QUICK_MATH_TEST.test(value) || value.includes('\\'))
+  );
+}
+
 /**
  * Whether a bare CSS math function has an implemented simplifier.
  *
@@ -91,4 +114,9 @@ function simplifyCall(node, simplify) {
   return call(node.name, args);
 }
 
-export { isSupportedMathFunction, simplifyCall };
+export {
+  isSupportedMathFunction,
+  simplifyCall,
+  hasPotentialMathFunction,
+  QUICK_MATH_TEST,
+};

package/src/lib/simplify/clamp.js

@@ -1,5 +1,6 @@
-import { num, dim, call } from '../node.js';
-import { foldConstArgs } from './fold.js';
+import { call } from '../node.js';
+import { foldConstArgs, foldResult } from './fold.js';
+import { simplifyMinMax } from './min-max.js';
 
 /** @typedef {import('../node.js').Node} Node */
 
@@ -9,16 +10,37 @@ import { foldConstArgs } from './fold.js';
  */
 function simplifyClamp(args) {
   if (args.length === 3) {
+    const minNone = isNone(args[0]);
+    const maxNone = isNone(args[2]);
+
+    if (minNone && maxNone) {
+      return args[1];
+    }
+    if (minNone) {
+      return simplifyMinMax('min', [args[1], args[2]]);
+    }
+    if (maxNone) {
+      return simplifyMinMax('max', [args[0], args[1]]);
+    }
+
     const fold = foldConstArgs(args);
     if (fold !== null) {
       const [lo, v, hi] = /** @type {[number, number, number]} */ (fold.values);
       // Spec §10.8: clamp(MIN, VAL, MAX) = max(MIN, min(VAL, MAX)). The
       // outer max(MIN, …) means MIN wins when MIN > MAX — not MAX.
       const clamped = Math.max(lo, Math.min(v, hi));
-      return fold.unit === '' ? num(clamped) : dim(clamped, fold.unit);
+      return foldResult(fold, clamped);
     }
   }
   return call('clamp', args);
 }
 
+/**
+ * @param {Node} node
+ * @return {boolean}
+ */
+function isNone(node) {
+  return node.type === 'Ident' && node.name.toLowerCase() === 'none';
+}
+
 export { simplifyClamp };

package/src/lib/simplify/fold.js

@@ -1,8 +1,21 @@
+import { num, dim } from '../node.js';
 import { baseOf, convert } from '../convertUnits.js';
 
 /** @typedef {import('../node.js').Node} Node */
+/** @typedef {import('../node.js').Num} Num */
+/** @typedef {import('../node.js').Dim} Dim */
 /** @typedef {import('../convertUnits.js').BaseType} BaseType */
 
+/**
+ * Construct a Num or Dim node from a folded result.
+ * @param {{ unit: string }} fold
+ * @param {number} value
+ * @return {Num | Dim}
+ */
+function foldResult(fold, value) {
+  return fold.unit === '' ? num(value) : dim(value, fold.unit);
+}
+
 /**
  * @param {Node[]} args
  * @return {{ values: number[], unit: string } | null}
@@ -62,4 +75,4 @@ function foldDimArgs(args, unit, base) {
   return { values, unit };
 }
 
-export { foldConstArgs };
+export { foldConstArgs, foldResult };

package/src/lib/simplify/hypot.js

@@ -1,7 +1,7 @@
 // §10.5 — hypot. Empty args return null from foldConstArgs naturally.
 
-import { num, dim, call } from '../node.js';
-import { foldConstArgs } from './fold.js';
+import { call } from '../node.js';
+import { foldConstArgs, foldResult } from './fold.js';
 
 /** @typedef {import('../node.js').Node} Node */
 
@@ -16,7 +16,7 @@ function simplifyHypot(args) {
   }
   const sumSq = fold.values.reduce((acc, v) => acc + v * v, 0);
   const result = Math.sqrt(sumSq);
-  return fold.unit === '' ? num(result) : dim(result, fold.unit);
+  return foldResult(fold, result);
 }
 
 export { simplifyHypot };

package/src/lib/simplify/min-max.js

@@ -1,5 +1,5 @@
-import { num, dim, call } from '../node.js';
-import { foldConstArgs } from './fold.js';
+import { call } from '../node.js';
+import { foldConstArgs, foldResult } from './fold.js';
 
 /** @typedef {import('../node.js').Node} Node */
 
@@ -13,7 +13,7 @@ function simplifyMinMax(name, args) {
   if (fold !== null) {
     const fn = name.toLowerCase() === 'min' ? Math.min : Math.max;
     const value = fn(...fold.values);
-    return fold.unit === '' ? num(value) : dim(value, fold.unit);
+    return foldResult(fold, value);
   }
   return call(name, args);
 }

package/src/lib/simplify/mod-rem.js

@@ -1,5 +1,5 @@
-import { num, dim, call } from '../node.js';
-import { foldConstArgs } from './fold.js';
+import { num, call } from '../node.js';
+import { foldConstArgs, foldResult } from './fold.js';
 
 /** @typedef {import('../node.js').Node} Node */
 
@@ -23,7 +23,7 @@ function simplifyModRem(name, args) {
   if (Number.isNaN(result)) {
     return num(Number.NaN);
   }
-  return fold.unit === '' ? num(result) : dim(result, fold.unit);
+  return foldResult(fold, result);
 }
 
 /**

package/src/lib/simplify/round.js

@@ -1,5 +1,5 @@
-import { num, dim, ident, call } from '../node.js';
-import { foldConstArgs } from './fold.js';
+import { num, ident, call } from '../node.js';
+import { foldConstArgs, foldResult } from './fold.js';
 
 /** @typedef {import('../node.js').Node} Node */
 
@@ -58,14 +58,14 @@ function simplifyRound(args) {
     } else {
       result = a < 0 || Object.is(a, -0) ? -0 : 0;
     }
-    return fold.unit === '' ? num(result) : dim(result, fold.unit);
+    return foldResult(fold, result);
   }
 
   const result = applyRound(strategy, a, b);
   if (Number.isNaN(result)) {
     return num(Number.NaN);
   }
-  return fold.unit === '' ? num(result) : dim(result, fold.unit);
+  return foldResult(fold, result);
 }
 
 /**

package/src/lib/tokenizer.js

@@ -26,6 +26,32 @@ function tokenize(input) {
   return tokenizeTokens(tokenizeCss({ css: input }), input.length);
 }
 
+/**
+ * CSS absorbs leading signs (`-5px` is one token); the parser expects
+ * punct sign + unsigned numeric, so split them back out.
+ * @param {Token[]} tokens
+ * @param {string} raw
+ * @param {string | undefined} unit
+ * @param {number} pos
+ * @param {boolean} ws
+ * @return {void}
+ */
+function pushNumeric(tokens, raw, unit, pos, ws) {
+  let value = /** @type {RegExpExecArray} */ (NUMERIC_RAW.exec(raw))[0];
+  const sign = value[0];
+  if (sign === '+' || sign === '-') {
+    tokens.push({ type: 'punct', value: sign, pos, ws });
+    value = value.slice(1);
+    pos += 1;
+    ws = false;
+  }
+  if (unit === undefined) {
+    tokens.push({ type: 'number', value, pos, ws });
+  } else {
+    tokens.push({ type: 'dimension', value, unit, pos, ws });
+  }
+}
+
 /**
  * Convert a slice of an existing CSS token stream into the token subset used
  * by the calculation parser. Token positions remain relative to the original
@@ -33,52 +59,38 @@ function tokenize(input) {
  *
  * @param {import('@csstools/css-tokenizer').CSSToken[]} cssTokens
  * @param {number} eofPosition
+ * @param {number} [start]
+ * @param {number} [end]
  * @return {Token[]}
  */
-function tokenizeTokens(cssTokens, eofPosition) {
+function tokenizeTokens(
+  cssTokens,
+  eofPosition,
+  start = 0,
+  end = cssTokens.length
+) {
   /** @type {Token[]} */
   const tokens = [];
   let ws = true;
 
-  // CSS absorbs leading signs (`-5px` is one token); the parser expects
-  // punct sign + unsigned numeric, so split them back out.
-  /**
-   * @param {string} raw
-   * @param {string | undefined} unit
-   * @param {number} pos
-   * @return {void}
-   */
-  function pushNumeric(raw, unit, pos) {
-    let value = /** @type {RegExpExecArray} */ (NUMERIC_RAW.exec(raw))[0];
-    const sign = value[0];
-    if (sign === '+' || sign === '-') {
-      tokens.push({ type: 'punct', value: sign, pos, ws });
-      value = value.slice(1);
-      pos += 1;
-      ws = false;
-    }
-    if (unit === undefined) {
-      tokens.push({ type: 'number', value, pos, ws });
-    } else {
-      tokens.push({ type: 'dimension', value, unit, pos, ws });
-    }
-    ws = false;
-  }
-
-  for (const t of cssTokens) {
+  for (let i = start; i < end; i++) {
+    const t = cssTokens[i];
     switch (t[0]) {
       case CssType.Whitespace:
       case CssType.Comment:
         ws = true;
         continue;
       case CssType.Number:
-        pushNumeric(t[1], undefined, t[2]);
+        pushNumeric(tokens, t[1], undefined, t[2], ws);
+        ws = false;
         continue;
       case CssType.Dimension:
-        pushNumeric(t[1], t[4].unit, t[2]);
+        pushNumeric(tokens, t[1], t[4].unit, t[2], ws);
+        ws = false;
         continue;
       case CssType.Percentage:
-        pushNumeric(t[1], '%', t[2]);
+        pushNumeric(tokens, t[1], '%', t[2], ws);
+        ws = false;
         continue;
       case CssType.Ident:
         tokens.push({ type: 'ident', value: t[4].value, pos: t[2], ws });