postcss-calc 11.0.2 → 11.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-calc",
-  "version": "11.0.2",
+  "version": "11.0.3",
   "type": "module",
   "description": "PostCSS plugin to reduce calc()",
   "keywords": [
@@ -48,7 +48,6 @@
     "typescript": "~7.0.2"
   },
   "dependencies": {
-    "@csstools/css-parser-algorithms": "^4.0.0",
     "@csstools/css-tokenizer": "^4.0.0"
   },
   "peerDependencies": {

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/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/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 };