postcss-calc 11.0.1 → 11.0.3

package/README.md

@@ -206,6 +206,8 @@ when changing parsing/simplification behavior:
 pnpm test:corpus:full
 ```
 
+Profile long arithmetic parser chains with `pnpm benchmark:arithmetic-chains`.
+
 ## [Changelog](CHANGELOG.md)
 
 ## [License](LICENSE)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-calc",
-  "version": "11.0.1",
+  "version": "11.0.3",
   "type": "module",
   "description": "PostCSS plugin to reduce calc()",
   "keywords": [
@@ -13,7 +13,7 @@
   "homepage": "https://github.com/postcss/postcss-calc",
   "repository": {
     "type": "git",
-    "url": "https://github.com/postcss/postcss-calc.git"
+    "url": "git+https://github.com/postcss/postcss-calc.git"
   },
   "exports": {
     ".": {
@@ -34,13 +34,13 @@
   "devEngines": {
     "packageManager": {
       "name": "pnpm",
-      "version": "11.24.0"
+      "version": "11.25.0"
     }
   },
   "devDependencies": {
     "@csstools/css-calc": "^3.3.0",
     "@rmenke/css-tokenizer-tests": "^1.2.0",
-    "@types/node": "^26.3.0",
+    "@types/node": "^26.4.0",
     "fast-check": "^4.9.0",
     "oxfmt": "^0.65.0",
     "oxlint": "^1.80.0",
@@ -48,7 +48,6 @@
     "typescript": "~7.0.2"
   },
   "dependencies": {
-    "@csstools/css-parser-algorithms": "^4.0.0",
     "@csstools/css-tokenizer": "^4.0.0"
   },
   "peerDependencies": {
@@ -57,6 +56,7 @@
   "scripts": {
     "lint": "oxlint . && tsc && oxfmt --check",
     "fmt": "oxfmt",
+    "benchmark:arithmetic-chains": "node scripts/benchmark-arithmetic-chains.mjs",
     "test": "node --test --test-reporter=dot 'test/**/*.test.mjs' test/index.cjs test/convertUnit.cjs",
     "test:mutation:corpus": "node test/mutation/corpus-selection.mjs",
     "test:corpus:full": "POSTCSS_CALC_FULL_CORPUS=1 node --test test/conformance/corpus.test.mjs"

package/src/index.js

@@ -1,27 +1,24 @@
 // PostCSS adapter. Walks declaration values (and optionally @rule params
 // and selectors), feeds calc() bodies through tokenize → parse → simplify
 // → serialize, and writes the result back.
-import { tokenize as cssTokenize } from '@csstools/css-tokenizer';
 import {
-  isFunctionNode,
-  isSimpleBlockNode,
-  parseListOfComponentValues,
-} from '@csstools/css-parser-algorithms';
-import { tokenize } from './lib/tokenizer.js';
+  tokenize as cssTokenize,
+  TokenType as CssType,
+} from '@csstools/css-tokenizer';
+import { tokenizeTokens } from './lib/tokenizer.js';
 import { parse } from './lib/parser.js';
 import { simplify } from './lib/simplify.js';
 import { isSupportedMathFunction } from './lib/simplify/call.js';
 import { serialize } from './lib/serialize.js';
 
-// The outer walk is deliberately forgiving: it only needs to locate calc()/
-// math-function boundaries in otherwise arbitrary (and possibly non-standard)
-// CSS values, so parse errors from the outer tokenizer/parser are swallowed.
-// Genuine syntax problems inside a matched call are
-// caught below via our own tokenize/parse/simplify pipeline.
-const NOOP_PARSE_ERROR = { onParseError: () => {} };
-
 const MATCH_CALC = /^(?:-(?:moz|webkit)-)?calc$/i;
 
+const BLOCK_CLOSE = new Map([
+  [CssType.OpenParen, CssType.CloseParen],
+  [CssType.OpenSquare, CssType.CloseSquare],
+  [CssType.OpenCurly, CssType.CloseCurly],
+]);
+
 /**
  * @typedef {object} PostCssCalcOptions
  * @property {number | false} [precision]
@@ -34,7 +31,7 @@ const MATCH_CALC = /^(?:-(?:moz|webkit)-)?calc$/i;
 /** @typedef {Required<Omit<PostCssCalcOptions, 'onParseError'>> & Pick<PostCssCalcOptions, 'onParseError'>} ResolvedOptions */
 
 /**
- * Fields threaded unchanged through the recursive `transformList` walk.
+ * Fields threaded unchanged through the token-range walk.
  * `value` is the original full property text, used only for the
  * warnWhenCannotResolve message.
  *
@@ -43,59 +40,76 @@ const MATCH_CALC = /^(?:-(?:moz|webkit)-)?calc$/i;
  * @property {import('postcss').Result} result
  * @property {import('postcss').ChildNode} item
  * @property {string} value
+ * @property {import('@csstools/css-tokenizer').CSSToken[]} tokens
+ * @property {Replacement[]} replacements
+ */
+
+/**
+ * @typedef {object} Replacement
+ * @property {number} start
+ * @property {number} end
+ * @property {import('./lib/node.js').Node} node
+ * @property {string} calcName
+ * @property {string} matchedName
  */
 
 /**
- * Walks a list of component values in place, replacing matched calc()/math
- * function nodes with their simplified form. Unlike the library's generic
- * `walk` helper, this recurses manually so a matched node's own (stale,
- * pre-simplification) children are never independently re-visited.
+ * Walk one component-value level. Unsupported functions and simple blocks are
+ * traversed, while a supported function is treated as one opaque calculation
+ * even when parsing it fails. A missing closer consumes through EOF, matching
+ * CSS component-value parsing's error recovery.
  *
- * @param {import('@csstools/css-parser-algorithms').ComponentValue[]} list
+ * @param {number} start
+ * @param {import('@csstools/css-tokenizer').TokenType | undefined} expectedClose
  * @param {TransformContext} ctx
- * @return {void}
+ * @param {boolean} transform
+ * @return {number} Index of the matching closer, or the EOF token.
  */
-function transformList(list, ctx) {
-  for (let i = 0; i < list.length; i++) {
-    const node = list[i];
-    if (!isFunctionNode(node)) {
-      if (isSimpleBlockNode(node)) {
-        transformList(node.value, ctx);
-      }
+function walkTokens(start, expectedClose, ctx, transform) {
+  for (let i = start; i < ctx.tokens.length; i++) {
+    const token = ctx.tokens[i];
+    if (token[0] === CssType.EOF || token[0] === expectedClose) {
+      return i;
+    }
+
+    const blockClose = BLOCK_CLOSE.get(token[0]);
+    if (blockClose) {
+      i = walkTokens(i + 1, blockClose, ctx, transform);
       continue;
     }
 
-    const name = node.getName();
+    if (token[0] !== CssType.Function) {
+      continue;
+    }
+
+    const name = token[4].value;
     const isCalc = MATCH_CALC.test(name);
     const isMath = !isCalc && isSupportedMathFunction(name);
-    if (!isCalc && !isMath) {
-      transformList(node.value, ctx);
+    if (!transform || (!isCalc && !isMath)) {
+      i = walkTokens(i + 1, CssType.CloseParen, ctx, transform);
       continue;
     }
 
-    // calc(): feed the body. Bare math: feed the whole call.
-    const inner = node.value.map((child) => child.toString()).join('');
-    const contents = isCalc ? inner : `${name}(${inner})`;
+    // Locate the complete outer function without transforming its children.
+    const close = walkTokens(i + 1, CssType.CloseParen, ctx, false);
+    const closed = ctx.tokens[close][0] === CssType.CloseParen;
+    const end = closed ? ctx.tokens[close][3] + 1 : ctx.value.length;
+    const sliceStart = isCalc ? i + 1 : i;
+    const sliceEnd = closed ? close + (isCalc ? 0 : 1) : close;
+    const inputStart = isCalc ? token[3] + 1 : token[2];
+    const inputEnd = closed && isCalc ? ctx.tokens[close][2] : end;
+    const contents = ctx.value.slice(inputStart, inputEnd);
     try {
-      const simplified = simplify(parse(tokenize(contents)));
-      const str = serialize(simplified, {
-        precision: ctx.options.precision,
-        calcName: isCalc ? name : 'calc', // preserve vendor prefix on calc()
-      });
-
-      if (ctx.options.warnWhenCannotResolve && str.startsWith(`${name}(`)) {
-        ctx.result.warn('Could not reduce expression: ' + ctx.value, {
-          plugin: 'postcss-calc',
-          node: ctx.item,
-        });
-      }
-
-      const replacement = parseListOfComponentValues(
-        cssTokenize({ css: str }),
-        NOOP_PARSE_ERROR
+      const node = simplify(
+        parse(tokenizeTokens(ctx.tokens.slice(sliceStart, sliceEnd), end))
       );
-      list.splice(i, 1, ...replacement);
-      i += replacement.length - 1;
+      ctx.replacements.push({
+        start: token[2],
+        end,
+        node,
+        calcName: isCalc ? name : 'calc',
+        matchedName: name,
+      });
     } catch (error) {
       const err = error instanceof Error ? error : new Error('Error');
       if (ctx.options.onParseError) {
@@ -104,7 +118,10 @@ function transformList(list, ctx) {
         ctx.result.warn(err.message, { node: ctx.item });
       }
     }
+    i = close;
   }
+
+  return ctx.tokens.length - 1;
 }
 
 /**
@@ -115,14 +132,39 @@ function transformList(list, ctx) {
  * @return {string}
  */
 function transformValue(value, options, result, item) {
-  const componentValues = parseListOfComponentValues(
-    cssTokenize({ css: value }),
-    NOOP_PARSE_ERROR
-  );
+  const tokens = cssTokenize({ css: value });
+  /** @type {Replacement[]} */
+  const replacements = [];
+  const ctx = { options, result, item, value, tokens, replacements };
+  walkTokens(0, undefined, ctx, true);
 
-  transformList(componentValues, { options, result, item, value });
+  /** @type {(Replacement & {text: string})[]} */
+  const serialized = replacements.map((replacement) => {
+    const text = serialize(replacement.node, {
+      precision: options.precision,
+      calcName: replacement.calcName,
+    });
+    if (
+      options.warnWhenCannotResolve &&
+      text.startsWith(`${replacement.matchedName}(`)
+    ) {
+      result.warn('Could not reduce expression: ' + value, {
+        plugin: 'postcss-calc',
+        node: item,
+      });
+    }
+    return { ...replacement, text };
+  });
 
-  return componentValues.map((node) => node.toString()).join('');
+  let output = value;
+  for (let i = serialized.length - 1; i >= 0; i--) {
+    const replacement = serialized[i];
+    output =
+      output.slice(0, replacement.start) +
+      replacement.text +
+      output.slice(replacement.end);
+  }
+  return output;
 }
 
 /**

package/src/lib/parser.js

@@ -1,14 +1,13 @@
 // Pratt parser. +/- emit Sum nodes; */÷ emit Product nodes. node.js
 // constructors flatten and normalize on construction, while parenthesized
 // sums retain a grouping marker for the opaque-subtraction invariant.
-import { mkSum, mkProduct, negate, ident, call } from './node.js';
+import { mkSum, mkProduct, negate, num, dim, ident, call } from './node.js';
 
 /**
  * @typedef {import('./tokenizer.js').Token} Token
  * @typedef {import('./tokenizer.js').TokenType} TokenType
  * @typedef {import('./node.js').Node} Node
  * @typedef {(p: Parser, token: Token) => Node} PrefixParselet
- * @typedef {{lbp: number, parse: (p: Parser, left: Node, token: Token) => Node}} InfixParselet
  */
 
 /**
@@ -30,17 +29,17 @@ function foldCalcKeyword(name) {
   // form arrives as a single ident because CSS Syntax tokenizes leading
   // `-` + ident-start as one ident-token.
   if (name === 'NaN' || name === '-NaN') {
-    return { type: 'Num', value: Number.NaN };
+    return num(Number.NaN);
   }
   switch (name.toLowerCase()) {
     case 'pi':
-      return { type: 'Num', value: Math.PI };
+      return num(Math.PI);
     case 'e':
-      return { type: 'Num', value: Math.E };
+      return num(Math.E);
     case 'infinity':
-      return { type: 'Num', value: Infinity };
+      return num(Infinity);
     case '-infinity':
-      return { type: 'Num', value: -Infinity };
+      return num(-Infinity);
   }
   return null;
 }
@@ -102,40 +101,58 @@ class Parser {
       if (!rule || rule.lbp < minBp) {
         break;
       }
-      this.next();
-      left = rule.parse(this, left, nxt);
+      if (infixKey === '+' || infixKey === '-') {
+        /** @type {import('./node.js').SumTerm[]} */
+        const terms = [{ sign: /** @type {1} */ (1), node: left }];
+        do {
+          const token = this.next();
+          requireSurroundingWs(this, token);
+          terms.push({
+            sign: /** @type {1 | -1} */ (token.value === '+' ? 1 : -1),
+            node: this.parseExpr(ADD_BP + 1),
+          });
+          const next = this.peek();
+          if (
+            next.type !== 'punct' ||
+            (next.value !== '+' && next.value !== '-')
+          ) {
+            break;
+          }
+        } while (ADD_BP >= minBp);
+        left = mkSum(terms);
+        continue;
+      }
+
+      if (infixKey === '*' || infixKey === '/') {
+        /** @type {import('./node.js').ProductFactor[]} */
+        const factors = [{ exponent: /** @type {1} */ (1), node: left }];
+        do {
+          const token = this.next();
+          factors.push({
+            exponent: /** @type {1 | -1} */ (token.value === '*' ? 1 : -1),
+            node: this.parseExpr(MUL_BP + 1),
+          });
+          const next = this.peek();
+          if (
+            next.type !== 'punct' ||
+            (next.value !== '*' && next.value !== '/')
+          ) {
+            break;
+          }
+        } while (MUL_BP >= minBp);
+        left = mkProduct(factors);
+        continue;
+      }
+
+      // Every infix operator is handled above. Keep this defensive exit in
+      // case a future parselet is added without a chain implementation.
+      break;
     }
 
     return left;
   }
 }
 
-/**
- * @param {Node} left
- * @param {Node} right
- * @param {1 | -1} rightSign
- * @return {Node}
- */
-function addTerm(left, right, rightSign) {
-  return mkSum([
-    { sign: 1, node: left },
-    { sign: rightSign, node: right },
-  ]);
-}
-
-/**
- * @param {Node} left
- * @param {Node} right
- * @param {1 | -1} rightExp
- * @return {Node}
- */
-function mulFactor(left, right, rightExp) {
-  return mkProduct([
-    { exponent: 1, node: left },
-    { exponent: rightExp, node: right },
-  ]);
-}
-
 const ADD_BP = 1;
 const MUL_BP = 3;
 const UNARY_BP = 7;
@@ -228,14 +245,14 @@ function requireSurroundingWs(p, token) {
 
 /** @type {Record<string, PrefixParselet>} */
 const PREFIX = {
-  number: (_p, t) => ({ type: 'Num', value: Number.parseFloat(t.value) }),
+  number: (_p, t) => num(Number.parseFloat(t.value)),
 
   // Unit case normalization per §10.12: `1PX` serializes as `1px`.
-  dimension: (_p, t) => ({
-    type: 'Dim',
-    value: Number.parseFloat(t.value),
-    unit: t.unit === '%' ? '%' : /** @type {string} */ (t.unit).toLowerCase(),
-  }),
+  dimension: (_p, t) =>
+    dim(
+      Number.parseFloat(t.value),
+      t.unit === '%' ? '%' : /** @type {string} */ (t.unit).toLowerCase()
+    ),
 
   ident: (p, t) => {
     const nxt = p.peek();
@@ -273,30 +290,12 @@ const PREFIX = {
   '+': (p) => p.parseExpr(UNARY_BP),
 };
 
-/** @type {Record<string, InfixParselet>} */
+/** @type {Record<string, {lbp: number}>} */
 const INFIX = {
-  '+': {
-    lbp: ADD_BP,
-    parse: (p, left, token) => {
-      requireSurroundingWs(p, token);
-      return addTerm(left, p.parseExpr(ADD_BP + 1), 1);
-    },
-  },
-  '-': {
-    lbp: ADD_BP,
-    parse: (p, left, token) => {
-      requireSurroundingWs(p, token);
-      return addTerm(left, p.parseExpr(ADD_BP + 1), -1);
-    },
-  },
-  '*': {
-    lbp: MUL_BP,
-    parse: (p, left) => mulFactor(left, p.parseExpr(MUL_BP + 1), 1),
-  },
-  '/': {
-    lbp: MUL_BP,
-    parse: (p, left) => mulFactor(left, p.parseExpr(MUL_BP + 1), -1),
-  },
+  '+': { lbp: ADD_BP },
+  '-': { lbp: ADD_BP },
+  '*': { lbp: MUL_BP },
+  '/': { lbp: MUL_BP },
 };
 
 /**

package/src/lib/tokenizer.js

@@ -23,6 +23,19 @@ const NUMERIC_RAW = /^[+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:[eE][+-]?\d+)?/;
  * @return {Token[]}
  */
 function tokenize(input) {
+  return tokenizeTokens(tokenizeCss({ css: input }), input.length);
+}
+
+/**
+ * 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
+ * source text, which keeps parse errors useful to adapter callers.
+ *
+ * @param {import('@csstools/css-tokenizer').CSSToken[]} cssTokens
+ * @param {number} eofPosition
+ * @return {Token[]}
+ */
+function tokenizeTokens(cssTokens, eofPosition) {
   /** @type {Token[]} */
   const tokens = [];
   let ws = true;
@@ -52,7 +65,7 @@ function tokenize(input) {
     ws = false;
   }
 
-  for (const t of tokenizeCss({ css: input })) {
+  for (const t of cssTokens) {
     switch (t[0]) {
       case CssType.Whitespace:
       case CssType.Comment:
@@ -97,8 +110,7 @@ function tokenize(input) {
         tokens.push({ type: 'punct', value: t[4].value, pos: t[2], ws });
         break;
       case CssType.EOF:
-        tokens.push({ type: 'eof', value: '', pos: input.length, ws });
-        break;
+        continue;
       default:
         throw new Error(
           `Unexpected character "${t[1][0] ?? ''}" at position ${t[2]}`
@@ -107,7 +119,9 @@ function tokenize(input) {
     ws = false;
   }
 
+  tokens.push({ type: 'eof', value: '', pos: eofPosition, ws });
+
   return tokens;
 }
 
-export { tokenize };
+export { tokenize, tokenizeTokens };

package/types/index.d.ts

@@ -14,6 +14,15 @@ export type TransformContext = {
     result: import('postcss').Result;
     item: import('postcss').ChildNode;
     value: string;
+    tokens: import('@csstools/css-tokenizer').CSSToken[];
+    replacements: Replacement[];
+};
+export type Replacement = {
+    start: number;
+    end: number;
+    node: import('./lib/node.js').Node;
+    calcName: string;
+    matchedName: string;
 };
 /**
  * @param {PostCssCalcOptions} [opts]

package/types/lib/parser.d.ts

@@ -2,10 +2,6 @@ export type Token = import('./tokenizer.js').Token;
 export type TokenType = import('./tokenizer.js').TokenType;
 export type Node = import('./node.js').Node;
 export type PrefixParselet = (p: Parser, token: Token) => Node;
-export type InfixParselet = {
-    lbp: number;
-    parse: (p: Parser, left: Node, token: Token) => Node;
-};
 declare class Parser {
     /** @private */
     i;

package/types/lib/tokenizer.d.ts

@@ -17,4 +17,14 @@ export type Token = {
  * @return {Token[]}
  */
 declare function tokenize(input: string): Token[];
-export { tokenize };
+/**
+ * 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
+ * source text, which keeps parse errors useful to adapter callers.
+ *
+ * @param {import('@csstools/css-tokenizer').CSSToken[]} cssTokens
+ * @param {number} eofPosition
+ * @return {Token[]}
+ */
+declare function tokenizeTokens(cssTokens: import('@csstools/css-tokenizer').CSSToken[], eofPosition: number): Token[];
+export { tokenize, tokenizeTokens };