postcss-calc 11.2.2 → 11.2.3

package/README.md

@@ -6,7 +6,8 @@
 [PostCSS Calc] lets you reduce `calc()` references whenever it's possible.
 When an expression mixes units that cannot be combined exactly (such as `px`
 and `em`), or contains values only known at runtime (such as `var()`), the
-unresolved part is left for the browser's [W3C calc() implementation].
+unresolved part is left for the browser's [CSS Values 4][css-values-4]
+implementation.
 
 ## Installation
 
@@ -69,9 +70,8 @@ reduceCalc('min(50px, calc(2 * 40px))');
 // => 'calc(50px)'
 ```
 
-It accepts `precision`, `unwrapSingleValue`, the deprecated
-`unwrapSingleNegativeNumber` alias,
-`warnWhenCannotResolve`, `onParseError`, and `onWarn`:
+It accepts `precision`, `unwrapSingleValue`, `warnWhenCannotResolve`,
+`onParseError`, and `onWarn`:
 
 ```js
 const result = reduceCalc('calc(100% + var(--gap))', {
@@ -191,20 +191,20 @@ Example:
 With `mediaQueries: true`, this becomes:
 
 ```css
-@media (min-width: 200px) {
+@media (min-width: calc(200px)) {
   div {
     width: 100px;
   }
 }
 ```
 
+Add `unwrapSingleValue: true` to get the bare value, `(min-width: 200px)`.
+
 #### `selectors` (default: `false`)
 
 Reduces `calc()` functions found in selectors. Selectors do not accept
-`calc()` functions, so the plugin replaces them with their reduced values.
-Finite negative and fractional unitless results are serialized as bare values
-because a selector cannot contain a `calc()` function; the plugin enables the
-`unwrapSingleValue` automatically for selectors.
+`calc()` functions, so the plugin replaces them with their reduced values, as
+if `unwrapSingleValue` were enabled.
 
 ```js
 var out = postcss()
@@ -224,8 +224,8 @@ With `selectors: true`, this becomes `div:nth-child(3)`.
 
 #### `onParseError`
 
-Callback invoked when a `calc()` body fails to parse or simplify. Matches
-[`@csstools/css-calc`][csstools-css-calc]'s shape:
+Callback invoked with the error and the input value when a `calc()` body fails
+to parse or simplify:
 
 ```js
 postcss().use(
@@ -250,13 +250,13 @@ canonical-form decisions:
 - **Strict whitespace (§10.1).** `calc(2px+3px)` is invalid CSS (binary
   `+` / `-` require surrounding whitespace) and is preserved with a
   warning instead of reduced.
-- **Canonical operand order.** Commutative operands serialize
-  numeric-first, matching [`@csstools/css-calc`][csstools-css-calc]:
+- **Canonical operand order.** Sums serialize numbers first, then
+  dimensions in first-seen order, then unresolved terms:
   `calc(var(--foo) + 10px)` → `calc(10px + var(--foo))`.
 - **Zero buckets are kept.** `calc(100px - (100px - 100%))` →
   `calc(0px + 100%)`, not `100%` — [WPT calc-serialization-002][wpt-calc-serialization]
   requires the zero term because it carries the length-percentage type.
-- **Constant folding.** `calc(43 + pi)` now folds to `46.14159` (§10.7.1).
+- **Constant folding.** `calc(43 + pi)` now folds to `calc(46.14159)` (§10.7.1).
   Previously `pi` / `e` stayed symbolic.
 - **Distributive multiplication.** `calc(0.5 * (100vw - 10px))` becomes
   `calc(50vw - 5px)`.
@@ -270,7 +270,6 @@ canonical-form decisions:
   if you want validation behavior.
 
 [css-values-4]: https://www.w3.org/TR/css-values-4/
-[csstools-css-calc]: https://www.npmjs.com/package/@csstools/css-calc
 [wpt-calc-serialization]: https://github.com/web-platform-tests/wpt/blob/master/css/css-values/calc-serialization-002.html
 [jison]: https://github.com/zaach/jison
 
@@ -288,6 +287,7 @@ for the full guidelines. The project uses [pnpm](https://pnpm.io/).
 
 ```bash
 git clone git@github.com:postcss/postcss-calc.git
+cd postcss-calc
 git checkout -b patch-1
 pnpm install
 pnpm test
@@ -302,23 +302,8 @@ when changing parsing/simplification behavior:
 pnpm test:corpus:full
 ```
 
-Performance changes to the parser, analyzer, simplifier, or serializer should be
-checked with the benchmarks. `pnpm benchmark:arithmetic-chains` and
-`pnpm benchmark:nested-fallbacks` compare the working tree against `HEAD` using
-20 fresh-process paired blocks by default and write git-ignored schema-v2
-reports under `reports/benchmarks/`. Re-check a saved report with
-`pnpm benchmark:reanalyze <report>`. `pnpm benchmark:corpus` compares the whole
-pipeline with `@csstools/css-calc` on real-world expressions and is
-report-only.
-
-These benchmarks time only the parser (or, for the corpus, the whole reducer)
-on one machine, and a `pass` means "no regression detected at the declared
-margin", not "no change". Read [BENCHMARKS.md](BENCHMARKS.md) before
-interpreting results.
-
-The PostCSS benchmark awaits `postcss().process(...)`, and that await already
-triggers result stringification. It therefore does not add a redundant
-`result.css` access.
+Check performance changes with the benchmarks described in
+[BENCHMARKS.md](BENCHMARKS.md), and read it before interpreting results.
 
 ## [Changelog](CHANGELOG.md)
 
@@ -332,4 +317,3 @@ triggers result stringification. It therefore does not add a redundant
 [PostCSS Calc]: https://github.com/postcss/postcss-calc
 [PostCSS Custom Properties]: https://github.com/postcss/postcss-custom-properties
 [tests]: test/
-[W3C calc() implementation]: https://www.w3.org/TR/css3-values/#calc-notation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-calc",
-  "version": "11.2.2",
+  "version": "11.2.3",
   "type": "module",
   "description": "PostCSS plugin to reduce calc()",
   "keywords": [
@@ -38,23 +38,23 @@
   "devEngines": {
     "packageManager": {
       "name": "pnpm",
-      "version": "12.8.1"
+      "version": "12.10.1"
     }
   },
   "devDependencies": {
-    "@csstools/css-calc": "^3.4.1",
-    "@types/node": "^26.6.3",
+    "@csstools/css-calc": "^3.4.3",
+    "@types/node": "^26.6.4",
     "fast-check": "^4.10.2",
-    "oxfmt": "^0.71.0",
-    "oxlint": "^1.86.0",
-    "postcss": "^8.5.28",
+    "oxfmt": "^0.72.0",
+    "oxlint": "^1.87.0",
+    "postcss": "^8.5.29",
     "typescript": "~7.0.2"
   },
   "dependencies": {
     "@csstools/css-tokenizer": "^4.0.2"
   },
   "peerDependencies": {
-    "postcss": "^8.5.28"
+    "postcss": "^8.5.29"
   },
   "scripts": {
     "lint": "oxlint . && tsc && oxfmt --check",

package/src/lib/function-analyzers.js

@@ -0,0 +1,119 @@
+import { ROUND_STRATEGIES } from './simplify/round.js';
+import {
+  addTypes,
+  failureType,
+  isFailure,
+  matchingArguments,
+  numberType,
+  unknownType,
+} from './types.js';
+
+/**
+ * @typedef {import('./node.js').Node} Node
+ * @typedef {import('./types.js').CalculationType} CalculationType
+ */
+
+/** @param {CalculationType[]} args @return {CalculationType} */
+function analyzeTrig(args) {
+  return args.length === 1 &&
+    (args[0].kind === 'unknown' ||
+      args[0].kind === 'number' ||
+      (args[0].kind === 'dimension' && args[0].base === 'angle'))
+    ? numberType
+    : failureType;
+}
+
+/** @param {CalculationType[]} args @return {CalculationType} */
+function analyzeInverseTrig(args) {
+  if (args.length !== 1 || args[0].kind === 'dimension') {
+    return failureType;
+  }
+  return args[0].kind === 'unknown'
+    ? unknownType
+    : { kind: 'dimension', base: 'angle' };
+}
+
+/** @param {CalculationType[]} args @return {CalculationType} */
+function analyzeIdentity(args) {
+  return args.length === 1 ? args[0] : failureType;
+}
+
+/** @param {CalculationType[]} args @return {CalculationType} */
+function analyzeSign(args) {
+  return args.length === 1 ? numberType : failureType;
+}
+
+/** @param {CalculationType[]} args @param {Node[]} nodes @return {CalculationType} */
+function analyzeRound(args, nodes) {
+  const strategy = nodes[0];
+  const hasStrategy =
+    strategy?.type === 'Ident' &&
+    ROUND_STRATEGIES.has(strategy.name.toLowerCase());
+  const start = hasStrategy ? 1 : 0;
+  const valueCount = args.length - start;
+  if (valueCount === 1) {
+    const value = args[start];
+    if (value.kind === 'dimension') return failureType;
+    if (value.kind === 'unknown') return unknownType;
+    return numberType;
+  }
+  if (valueCount !== 2) return failureType;
+  const type = addTypes(args[start], args[start + 1]);
+  return isFailure(type) ? failureType : type;
+}
+
+/** @param {CalculationType[]} args @return {CalculationType} */
+function analyzeAtan2(args) {
+  const type = matchingArguments(args, 2, 2);
+  if (isFailure(type)) return type;
+  // The type table gives atan2() «["angle" → 1]»; an unresolved result is
+  // plain unknown, never the percentage of its arguments.
+  if (type.kind === 'unknown') return unknownType;
+  return { kind: 'dimension', base: 'angle' };
+}
+
+/** @param {CalculationType[]} args @return {CalculationType} */
+function analyzeCalc(args) {
+  return args.length === 1 ? args[0] : failureType;
+}
+
+/** @param {Node} node @return {boolean} */
+function isRoundStrategy(node) {
+  return node.type === 'Ident' && ROUND_STRATEGIES.has(node.name.toLowerCase());
+}
+
+/** @param {Node} node @param {number} index @return {boolean} */
+function isClampKeyword(node, index) {
+  return (
+    (index === 0 || index === 2) &&
+    node.type === 'Ident' &&
+    node.name.toLowerCase() === 'none'
+  );
+}
+
+/** @param {CalculationType[]} args @param {Node[]} nodes @return {CalculationType} */
+function analyzeClamp(args, nodes) {
+  if (args.length !== 3) return failureType;
+  let valueCount = 0;
+  /** @type {CalculationType} */ let result = failureType;
+  for (let index = 0; index < args.length; index++) {
+    if (isClampKeyword(nodes[index], index)) continue;
+    result = valueCount === 0 ? args[index] : addTypes(result, args[index]);
+    valueCount++;
+  }
+  if (valueCount < 1 || isFailure(result)) return failureType;
+  return result;
+}
+
+export {
+  analyzeAtan2,
+  analyzeCalc,
+  analyzeClamp,
+  analyzeIdentity,
+  analyzeInverseTrig,
+  analyzeRound,
+  analyzeSign,
+  analyzeTrig,
+  isClampKeyword,
+  isRoundStrategy,
+};

package/src/lib/functions.js

@@ -3,7 +3,7 @@ import { simplifyClamp } from './simplify/clamp.js';
 import { simplifyAbs } from './simplify/abs.js';
 import { simplifySign } from './simplify/sign.js';
 import { simplifyModRem } from './simplify/mod-rem.js';
-import { ROUND_STRATEGIES, simplifyRound } from './simplify/round.js';
+import { simplifyRound } from './simplify/round.js';
 import { simplifyTrig } from './simplify/trig.js';
 import { simplifyInverseTrig } from './simplify/inverse-trig.js';
 import { simplifyAtan2 } from './simplify/atan2.js';
@@ -12,186 +12,36 @@ import { simplifySqrt } from './simplify/sqrt.js';
 import { simplifyExp } from './simplify/exp.js';
 import { simplifyLog } from './simplify/log.js';
 import { simplifyHypot } from './simplify/hypot.js';
+import {
+  analyzeAtan2,
+  analyzeCalc,
+  analyzeClamp,
+  analyzeIdentity,
+  analyzeInverseTrig,
+  analyzeRound,
+  analyzeSign,
+  analyzeTrig,
+  isClampKeyword,
+  isRoundStrategy,
+} from './function-analyzers.js';
+import {
+  addTypes,
+  failureType,
+  isFailure,
+  isPercentage,
+  matchingArguments,
+  numberArguments,
+  numberType,
+  percentageType,
+  unknownType,
+} from './types.js';
 
 /** @typedef {import('./node.js').Node} Node */
-/**
- * `percent` marks a value that resolves in the same percentage context as its
- * peers (a pure percentage). It is only produced at leaves, by abs(), and by
- * homogeneous sums and calls — never by a product, where an unpaired
- * percentage could no longer cancel against anything.
- * @typedef {{kind: 'number'} | {kind: 'dimension', base: string | null} | {kind: 'unknown', percent?: true} | {kind: 'failure'}} CalculationType
- */
+/** @typedef {import('./types.js').CalculationType} CalculationType */
 /** @typedef {(name: string, args: Node[]) => Node} MathSimplifier */
 /** @typedef {(args: CalculationType[], nodes: Node[]) => CalculationType} TypeAnalyzer */
 /** @typedef {{analyze: TypeAnalyzer, simplify?: MathSimplifier, isKeyword?: (node: Node, index: number) => boolean, calculation?: boolean}} MathFunction */
 
-/** @type {CalculationType} */ const numberType = { kind: 'number' };
-/** @type {CalculationType} */ const unknownType = { kind: 'unknown' };
-/** @type {CalculationType} */ const percentageType = {
-  kind: 'unknown',
-  percent: true,
-};
-/** @type {CalculationType} */ const failureType = { kind: 'failure' };
-
-/** @param {CalculationType} type @return {boolean} */
-function isFailure(type) {
-  return type.kind === 'failure';
-}
-
-/** @param {CalculationType} type @return {boolean} */
-function isPercentage(type) {
-  return type.kind === 'unknown' && type.percent === true;
-}
-
-/** @param {CalculationType} a @param {CalculationType} b @return {CalculationType} */
-function addTypes(a, b) {
-  if (isFailure(a) || isFailure(b)) return failureType;
-  if (a.kind === 'unknown' || b.kind === 'unknown') {
-    // A pure percentage keeps its contextual type so a surrounding product
-    // can cancel `% / %`; mixing it with any other opaque operand loses the
-    // guarantee that it resolves in the same context as its peers. A known
-    // number + percentage sum is likewise kept unknown and valid: the spec
-    // resolves the percentage against its surrounding context, which this
-    // coarse type model does not track.
-    return isPercentage(a) && isPercentage(b) ? percentageType : unknownType;
-  }
-  if (a.kind === 'number' && b.kind === 'number') return numberType;
-  if (a.kind === 'dimension' && b.kind === 'dimension') {
-    if (a.base === null || b.base === null) return unknownType;
-    return a.base === b.base ? a : failureType;
-  }
-  return failureType;
-}
-
-/**
- * Check an all-number function without assuming anything about an unresolved
- * operand. A concrete dimension can never become a number, so it is still a
- * definite error when another argument is opaque.
- * @param {CalculationType[]} args
- * @param {number} min
- * @param {number} max
- * @return {CalculationType}
- */
-function numberArguments(args, min, max) {
-  if (args.length < min || args.length > max) return failureType;
-  let hasUnknown = false;
-  for (const arg of args) {
-    if (arg.kind === 'dimension') return failureType;
-    hasUnknown = hasUnknown || arg.kind === 'unknown';
-  }
-  return hasUnknown ? unknownType : numberType;
-}
-
-/**
- * Check values that must share a calculation type. Unknown operands remain
- * unknown: they might resolve to the concrete type required by their peers.
- * @param {CalculationType[]} args
- * @param {number} min
- * @param {number} max
- * @return {CalculationType}
- */
-function matchingArguments(args, min, max) {
-  if (args.length < min || args.length > max) return failureType;
-  let result = args[0];
-  for (let index = 1; index < args.length; index++) {
-    result = addTypes(result, args[index]);
-    if (isFailure(result)) return failureType;
-  }
-  return result;
-}
-
-/** @param {CalculationType[]} args @return {CalculationType} */
-function analyzeTrig(args) {
-  return args.length === 1 &&
-    (args[0].kind === 'unknown' ||
-      args[0].kind === 'number' ||
-      (args[0].kind === 'dimension' && args[0].base === 'angle'))
-    ? numberType
-    : failureType;
-}
-
-/** @param {CalculationType[]} args @return {CalculationType} */
-function analyzeInverseTrig(args) {
-  if (args.length !== 1 || args[0].kind === 'dimension') {
-    return failureType;
-  }
-  return args[0].kind === 'unknown'
-    ? unknownType
-    : { kind: 'dimension', base: 'angle' };
-}
-
-/** @param {CalculationType[]} args @return {CalculationType} */
-function analyzeIdentity(args) {
-  return args.length === 1 ? args[0] : failureType;
-}
-
-/** @param {CalculationType[]} args @return {CalculationType} */
-function analyzeSign(args) {
-  return args.length === 1 ? numberType : failureType;
-}
-
-/** @param {CalculationType[]} args @param {Node[]} nodes @return {CalculationType} */
-function analyzeRound(args, nodes) {
-  const strategy = nodes[0];
-  const hasStrategy =
-    strategy?.type === 'Ident' &&
-    ROUND_STRATEGIES.has(strategy.name.toLowerCase());
-  const start = hasStrategy ? 1 : 0;
-  const valueCount = args.length - start;
-  if (valueCount === 1) {
-    const value = args[start];
-    if (value.kind === 'dimension') return failureType;
-    if (value.kind === 'unknown') return unknownType;
-    return numberType;
-  }
-  if (valueCount !== 2) return failureType;
-  const type = addTypes(args[start], args[start + 1]);
-  return isFailure(type) ? failureType : type;
-}
-
-/** @param {CalculationType[]} args @return {CalculationType} */
-function analyzeAtan2(args) {
-  const type = matchingArguments(args, 2, 2);
-  if (isFailure(type)) return type;
-  // The type table gives atan2() «["angle" → 1]»; an unresolved result is
-  // plain unknown, never the percentage of its arguments.
-  if (type.kind === 'unknown') return unknownType;
-  return { kind: 'dimension', base: 'angle' };
-}
-
-/** @param {CalculationType[]} args @return {CalculationType} */
-function analyzeCalc(args) {
-  return args.length === 1 ? args[0] : failureType;
-}
-
-/** @param {Node} node @return {boolean} */
-function isRoundStrategy(node) {
-  return node.type === 'Ident' && ROUND_STRATEGIES.has(node.name.toLowerCase());
-}
-
-/** @param {Node} node @param {number} index @return {boolean} */
-function isClampKeyword(node, index) {
-  return (
-    (index === 0 || index === 2) &&
-    node.type === 'Ident' &&
-    node.name.toLowerCase() === 'none'
-  );
-}
-
-/** @param {CalculationType[]} args @param {Node[]} nodes @return {CalculationType} */
-function analyzeClamp(args, nodes) {
-  if (args.length !== 3) return failureType;
-  let valueCount = 0;
-  /** @type {CalculationType} */ let result = failureType;
-  for (let index = 0; index < args.length; index++) {
-    if (isClampKeyword(nodes[index], index)) continue;
-    result = valueCount === 0 ? args[index] : addTypes(result, args[index]);
-    valueCount++;
-  }
-  if (valueCount < 1 || isFailure(result)) return failureType;
-  return result;
-}
-
 const mathFunctions = new Map(
   /** @type {[string, MathFunction][]} */ ([
     ['calc', { analyze: analyzeCalc, calculation: true }],

package/src/lib/parser/opaque.js

@@ -71,10 +71,11 @@ function customProperty(tokens, start, end) {
 /**
  * Append the component tree of `[start, end)` to `root` and return it.
  * Callers seed `root` so leading components need no copy or spread.
- * @param {ParseInput} input @param {number} start @param {number} end @param {ParseRange} parseRange @param {OpaqueComponent[]} root @return {OpaqueComponent[]}
+ * @param {ParseInput} input @param {number} start @param {number} rangeEnd @param {ParseRange} parseRange @param {OpaqueComponent[]} root @return {OpaqueComponent[]}
  */
-function componentTree(input, start, end, parseRange, root) {
+function componentTree(input, start, rangeEnd, parseRange, root) {
   /** @type {OpaqueComponent[]} */ let tree = root;
+  let end = rangeEnd;
   /** @type {{parent: OpaqueComponent[], tree: OpaqueComponent[], close: number, end: number}[]} */
   const frames = [];
   const { tokens } = input;