postcss-calc 11.0.0-rc.1 → 11.0.0-rc.3

package/README.md

@@ -17,18 +17,15 @@ npm install postcss-calc
 
 ```js
 // dependencies
-var fs = require("fs")
-var postcss = require("postcss")
-var calc = require("postcss-calc")
+var fs = require('fs');
+var postcss = require('postcss');
+var calc = require('postcss-calc');
 
 // css to be processed
-var css = fs.readFileSync("input.css", "utf8")
+var css = fs.readFileSync('input.css', 'utf8');
 
 // process css
-var output = postcss()
-  .use(calc())
-  .process(css)
-  .css
+var output = postcss().use(calc()).process(css).css;
 ```
 
 Using this `input.css`:
@@ -37,7 +34,7 @@ Using this `input.css`:
 h1 {
   font-size: calc(16px * 2);
   height: calc(100px - 2em);
-  width: calc(2*var(--base-width));
+  width: calc(2 * var(--base-width));
   margin-bottom: calc(16px * 1.5);
 }
 ```
@@ -48,10 +45,11 @@ you will get:
 h1 {
   font-size: 32px;
   height: calc(100px - 2em);
-  width: calc(2*var(--base-width));
-  margin-bottom: 24px
+  width: calc(2 * var(--base-width));
+  margin-bottom: 24px;
 }
 ```
+
 Checkout [tests] for more examples.
 
 ### Options
@@ -62,9 +60,8 @@ Allow you to define the precision for decimal numbers.
 
 ```js
 var out = postcss()
-  .use(calc({precision: 10}))
-  .process(css)
-  .css
+  .use(calc({ precision: 10 }))
+  .process(css).css;
 ```
 
 #### `preserve` (default: `false`)
@@ -74,9 +71,8 @@ precision themselves.
 
 ```js
 var out = postcss()
-  .use(calc({preserve: true}))
-  .process(css)
-  .css
+  .use(calc({ preserve: true }))
+  .process(css).css;
 ```
 
 #### `warnWhenCannotResolve` (default: `false`)
@@ -85,9 +81,8 @@ Adds warnings when calc() are not reduced to a single value.
 
 ```js
 var out = postcss()
-  .use(calc({warnWhenCannotResolve: true}))
-  .process(css)
-  .css
+  .use(calc({ warnWhenCannotResolve: true }))
+  .process(css).css;
 ```
 
 #### `mediaQueries` (default: `false`)
@@ -96,9 +91,8 @@ Allows calc() usage as part of media query declarations.
 
 ```js
 var out = postcss()
-  .use(calc({mediaQueries: true}))
-  .process(css)
-  .css
+  .use(calc({ mediaQueries: true }))
+  .process(css).css;
 ```
 
 #### `selectors` (default: `false`)
@@ -107,15 +101,14 @@ Allows calc() usage as part of selectors.
 
 ```js
 var out = postcss()
-  .use(calc({selectors: true}))
-  .process(css)
-  .css
+  .use(calc({ selectors: true }))
+  .process(css).css;
 ```
 
 Example:
 
 ```css
-div[data-size="calc(3*3)"] {
+div[data-size='calc(3*3)'] {
   width: 100px;
 }
 ```
@@ -129,8 +122,8 @@ Callback invoked when a `calc()` body fails to parse or simplify. Matches
 calc({
   onParseError: (err, input) => {
     throw err; // or log, route to a different channel, etc.
-  }
-})
+  },
+});
 ```
 
 When omitted, errors are reported via PostCSS `result.warn()` so the
@@ -178,6 +171,7 @@ canonical-form decisions:
 ---
 
 ## Related PostCSS plugins
+
 To replace the value of CSS custom properties at build time, try [PostCSS Custom Properties].
 
 ## Contributing
@@ -200,7 +194,6 @@ npm test
 [git-url]: https://gitter.im/postcss/postcss
 [npm-img]: https://img.shields.io/npm/v/postcss-calc.svg
 [npm-url]: https://www.npmjs.com/package/postcss-calc
-
 [PostCSS]: https://github.com/postcss
 [PostCSS Calc]: https://github.com/postcss/postcss-calc
 [PostCSS Custom Properties]: https://github.com/postcss/postcss-custom-properties

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "postcss-calc",
-  "version": "11.0.0-rc.1",
+  "version": "11.0.0-rc.3",
+  "type": "module",
   "description": "PostCSS plugin to reduce calc()",
   "keywords": [
     "css",
@@ -14,8 +15,12 @@
     "type": "git",
     "url": "https://github.com/postcss/postcss-calc.git"
   },
-  "main": "src/index.js",
-  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "default": "./src/index.js"
+    }
+  },
   "files": [
     "src",
     "types",
@@ -24,34 +29,34 @@
   "author": "Andy Jansson",
   "license": "MIT",
   "engines": {
-    "node": "^22.12 || ^24.11 || >=26.0"
+    "node": "^22.18 || ^24.11 || >=26.0"
+  },
+  "devEngines": {
+    "packageManager": {
+      "name": "pnpm",
+      "version": "11.21.0"
+    }
   },
   "devDependencies": {
-    "@csstools/css-calc": "^3.2.1",
-    "@eslint/js": "^10.0.1",
+    "@csstools/css-calc": "^3.3.0",
     "@rmenke/css-tokenizer-tests": "^1.2.0",
-    "@stryker-mutator/core": "^9.6.1",
-    "@stryker-mutator/tap-runner": "^9.6.1",
-    "@stryker-mutator/typescript-checker": "^9.6.1",
-    "@types/node": "^26.1.1",
-    "eslint": "^10.7.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-sonarjs": "^4.2.0",
+    "@types/node": "^26.2.0",
     "fast-check": "^4.9.0",
-    "postcss": "^8.5.19",
-    "prettier": "^3.9.5",
-    "typescript": "~6.0.3"
+    "oxfmt": "^0.63.0",
+    "oxlint": "^1.78.0",
+    "postcss": "^8.5.26",
+    "typescript": "~7.0.2"
   },
   "dependencies": {
     "@csstools/css-tokenizer": "^4.0.0",
     "postcss-value-parser": "^4.2.0"
   },
   "peerDependencies": {
-    "postcss": "^8.5.19"
+    "postcss": "^8.5.25"
   },
   "scripts": {
-    "lint": "eslint . && tsc",
-    "test": "node --test",
-    "test:mutation": "stryker run"
+    "lint": "oxlint . && tsc && oxfmt --check",
+    "fmt": "oxfmt",
+    "test": "node --test"
   }
 }

package/src/index.js

@@ -1,26 +1,37 @@
-'use strict';
-
 // PostCSS adapter. Walks declaration values (and optionally @rule params
 // and selectors), feeds calc() bodies through tokenize → parse → simplify
 // → serialize, and writes the result back.
-
-const valueParser = require('postcss-value-parser');
-
-const { tokenize } = require('./lib/tokenizer.js');
-const { parse } = require('./lib/parser.js');
-const { simplify } = require('./lib/simplify.js');
-const { serialize } = require('./lib/serialize.js');
+import valueParser from 'postcss-value-parser';
+import { tokenize } from './lib/tokenizer.js';
+import { parse } from './lib/parser.js';
+import { simplify } from './lib/simplify.js';
+import { serialize } from './lib/serialize.js';
 
 const MATCH_CALC = /^(?:-(?:moz|webkit)-)?calc$/i;
 
 // Bare math-function calls (no calc() wrapper) — fed to the same pipeline.
 // Mirrors the dispatch in lib/simplify/call.js.
 const MATH_FUNCTIONS = new Set([
-  'min', 'max', 'clamp',
-  'abs', 'sign',
-  'mod', 'rem', 'round',
-  'sin', 'cos', 'tan', 'asin', 'acos', 'atan', 'atan2',
-  'pow', 'sqrt', 'hypot', 'log', 'exp',
+  'min',
+  'max',
+  'clamp',
+  'abs',
+  'sign',
+  'mod',
+  'rem',
+  'round',
+  'sin',
+  'cos',
+  'tan',
+  'asin',
+  'acos',
+  'atan',
+  'atan2',
+  'pow',
+  'sqrt',
+  'hypot',
+  'log',
+  'exp',
 ]);
 
 /**
@@ -45,10 +56,14 @@ const MATH_FUNCTIONS = new Set([
 function transformValue(value, options, result, item) {
   return valueParser(value)
     .walk((node) => {
-      if (node.type !== 'function') {return;}
+      if (node.type !== 'function') {
+        return;
+      }
       const isCalc = MATCH_CALC.test(node.value);
       const isMath = !isCalc && MATH_FUNCTIONS.has(node.value.toLowerCase());
-      if (!isCalc && !isMath) {return;}
+      if (!isCalc && !isMath) {
+        return;
+      }
 
       // calc(): feed the body. Bare math: feed the whole call.
       const inner = valueParser.stringify(node.nodes);
@@ -85,7 +100,6 @@ function transformValue(value, options, result, item) {
 }
 
 /**
- * @type {import('postcss').PluginCreator<PluginOptions>}
  * @param {PluginOptions} [opts]
  * @return {import('postcss').Plugin}
  */
@@ -102,6 +116,10 @@ function pluginCreator(opts) {
 
   return {
     postcssPlugin: 'postcss-calc',
+    /**
+     * @param {import('postcss').Root} css
+     * @param {import('postcss').Helpers} helpers
+     */
     OnceExit(css, { result }) {
       css.walk((node) => {
         if (node.type === 'decl') {
@@ -143,4 +161,7 @@ function pluginCreator(opts) {
 
 pluginCreator.postcss = true;
 
-module.exports = pluginCreator;
+export default /** @type import('postcss').PluginCreator<PluginOptions>*/ (
+  pluginCreator
+);
+export { pluginCreator as 'module.exports' };

package/src/lib/convertUnits.js

@@ -1,5 +1,3 @@
-'use strict';
-
 // Spec: https://www.w3.org/TR/css-values-4/#calc-type-checking
 
 /**
@@ -8,28 +6,67 @@
 
 /** @type {Record<string, BaseType>} */
 const UNIT_TO_BASE = {
-  px: 'length', cm: 'length', mm: 'length', q: 'length',
-  in: 'length', pt: 'length', pc: 'length',
-  em: 'length', ex: 'length', ch: 'length', rem: 'length',
-  lh: 'length', rlh: 'length', ic: 'length', cap: 'length',
-  vw: 'length', vh: 'length', vmin: 'length', vmax: 'length',
-  vb: 'length', vi: 'length',
-  svw: 'length', svh: 'length', svmin: 'length', svmax: 'length',
-  svb: 'length', svi: 'length',
-  lvw: 'length', lvh: 'length', lvmin: 'length', lvmax: 'length',
-  lvb: 'length', lvi: 'length',
-  dvw: 'length', dvh: 'length', dvmin: 'length', dvmax: 'length',
-  dvb: 'length', dvi: 'length',
-  cqw: 'length', cqh: 'length', cqi: 'length', cqb: 'length',
-  cqmin: 'length', cqmax: 'length',
+  px: 'length',
+  cm: 'length',
+  mm: 'length',
+  q: 'length',
+  in: 'length',
+  pt: 'length',
+  pc: 'length',
+  em: 'length',
+  ex: 'length',
+  ch: 'length',
+  rem: 'length',
+  lh: 'length',
+  rlh: 'length',
+  ic: 'length',
+  cap: 'length',
+  vw: 'length',
+  vh: 'length',
+  vmin: 'length',
+  vmax: 'length',
+  vb: 'length',
+  vi: 'length',
+  svw: 'length',
+  svh: 'length',
+  svmin: 'length',
+  svmax: 'length',
+  svb: 'length',
+  svi: 'length',
+  lvw: 'length',
+  lvh: 'length',
+  lvmin: 'length',
+  lvmax: 'length',
+  lvb: 'length',
+  lvi: 'length',
+  dvw: 'length',
+  dvh: 'length',
+  dvmin: 'length',
+  dvmax: 'length',
+  dvb: 'length',
+  dvi: 'length',
+  cqw: 'length',
+  cqh: 'length',
+  cqi: 'length',
+  cqb: 'length',
+  cqmin: 'length',
+  cqmax: 'length',
 
-  deg: 'angle', grad: 'angle', rad: 'angle', turn: 'angle',
+  deg: 'angle',
+  grad: 'angle',
+  rad: 'angle',
+  turn: 'angle',
 
-  s: 'time', ms: 'time',
+  s: 'time',
+  ms: 'time',
 
-  hz: 'frequency', khz: 'frequency',
+  hz: 'frequency',
+  khz: 'frequency',
 
-  dpi: 'resolution', dpcm: 'resolution', dppx: 'resolution', x: 'resolution',
+  dpi: 'resolution',
+  dpcm: 'resolution',
+  dppx: 'resolution',
+  x: 'resolution',
 
   fr: 'flex',
 
@@ -102,4 +139,4 @@ function convert(value, from, to) {
   return (value * f) / t;
 }
 
-module.exports = { baseOf, convert };
+export { baseOf, convert };

package/src/lib/node.js

@@ -1,5 +1,3 @@
-'use strict';
-
 // Canonical AST. N-ary Sum and Product with signed numeric leaves.
 // Invariants enforced by the constructors below:
 //
@@ -7,7 +5,9 @@
 //     is `Num(-5)`, never `Sum([{sign:-1, Num(5)}])`. One form per value.
 //   - In a SumTerm with Num/Dim node, sign is always +1; the sign slot is
 //     reserved for opaque nodes (Ident, Call, Product, multi-term Sum).
-//   - No Sum directly contains another Sum (flattened on construction).
+//   - No ungrouped Sum directly contains another Sum (flattened on
+//     construction). A grouped Sum is retained so a later negative sign
+//     cannot be distributed across opaque terms.
 //   - No Product directly contains another Product (flattened).
 //   - A Sum/Product with one positive element collapses to that element.
 //   - A Sum/Product with no elements collapses to Num(0) / Num(1).
@@ -20,7 +20,7 @@
  * @typedef {{type: 'Ident', name: string}} Ident
  * @typedef {{type: 'Call', name: string, args: Node[]}} Call
  * @typedef {{sign: 1 | -1, node: Node}} SumTerm Sign is always +1 when node is Num or Dim.
- * @typedef {{type: 'Sum', terms: SumTerm[]}} Sum
+ * @typedef {{type: 'Sum', terms: SumTerm[], grouped?: boolean}} Sum
  * @typedef {{exponent: 1 | -1, node: Node}} ProductFactor exponent +1 = numerator, -1 = denominator.
  * @typedef {{type: 'Product', factors: ProductFactor[]}} Product
  * @typedef {Num | Dim | Ident | Call | Sum | Product} Node
@@ -87,7 +87,7 @@ function mkSum(rawTerms) {
 function pushSumTerm(out, term) {
   let { sign, node } = term;
 
-  if (node.type === 'Sum') {
+  if (node.type === 'Sum' && !node.grouped) {
     for (const inner of node.terms) {
       pushSumTerm(out, {
         sign: /** @type {1 | -1} */ (sign * inner.sign),
@@ -172,18 +172,19 @@ function negate(node) {
     return dim(-node.value, node.unit);
   }
   if (node.type === 'Sum') {
-    return mkSum(
+    const result = mkSum(
       node.terms.map((t) => ({
         sign: /** @type {1 | -1} */ (-t.sign),
         node: t.node,
       }))
     );
+    return node.grouped && result.type === 'Sum'
+      ? { ...result, grouped: true }
+      : result;
   }
   // Opaque (Ident, Call, Product): wrap as a single negative-sign term —
   // the only case where sign=-1 remains on a SumTerm.
   return { type: 'Sum', terms: [{ sign: -1, node }] };
 }
 
-// Stryker disable next-line all: instrumenting this line breaks Node's
-// cjs-module-lexer named-export detection for .mjs `import { x } from` consumers.
-module.exports = { num, dim, ident, call, mkSum, mkProduct, negate };
+export { num, dim, ident, call, mkSum, mkProduct, negate };

package/src/lib/parser.js

@@ -1,10 +1,7 @@
-'use strict';
-
 // Pratt parser. +/- emit Sum nodes; */÷ emit Product nodes. node.js
-// constructors flatten and normalize on construction, so the parser
-// never produces a Binary node.
-
-const { mkSum, mkProduct, negate } = require('./node.js');
+// constructors flatten and normalize on construction, while parenthesized
+// sums retain a grouping marker for the opaque-subtraction invariant.
+import { mkSum, mkProduct, negate } from './node.js';
 
 /**
  * @typedef {import('./tokenizer.js').Token} Token
@@ -157,7 +154,9 @@ const OPAQUE_ARG_FUNCTIONS = new Set(['anchor', 'anchor-size']);
  * @return {string}
  */
 function tokenText(t) {
-  if (t.type === 'dimension') {return `${t.value}${t.unit ?? ''}`;}
+  if (t.type === 'dimension') {
+    return `${t.value}${t.unit ?? ''}`;
+  }
   return t.value;
 }
 
@@ -174,7 +173,9 @@ function parseOpaqueCall(p, name) {
   let depth = 1;
   const flush = () => {
     const trimmed = buf.trim();
-    if (trimmed) {args.push({ type: 'Ident', name: trimmed });}
+    if (trimmed) {
+      args.push({ type: 'Ident', name: trimmed });
+    }
     buf = '';
   };
   while (true) {
@@ -183,8 +184,9 @@ function parseOpaqueCall(p, name) {
       throw new Error(`Unclosed ${name}( at position ${tk.pos}`);
     }
     if (tk.type === 'punct') {
-      if (tk.value === '(') {depth++;}
-      else if (tk.value === ')') {
+      if (tk.value === '(') {
+        depth++;
+      } else if (tk.value === ')') {
         depth--;
         if (depth === 0) {
           p.next();
@@ -197,7 +199,9 @@ function parseOpaqueCall(p, name) {
         continue;
       }
     }
-    if (tk.ws && buf) {buf += ' ';}
+    if (tk.ws && buf) {
+      buf += ' ';
+    }
     buf += tokenText(tk);
     p.next();
   }
@@ -262,7 +266,7 @@ const PREFIX = {
   '(': (p) => {
     const e = p.parseExpr(0);
     p.expect('punct', ')');
-    return e;
+    return e.type === 'Sum' ? { ...e, grouped: true } : e;
   },
 
   '-': (p) => negate(p.parseExpr(UNARY_BP)),
@@ -311,4 +315,4 @@ function parse(tokens) {
   return ast;
 }
 
-module.exports = { parse };
+export { parse };

package/src/lib/serialize.js

@@ -1,5 +1,3 @@
-'use strict';
-
 // 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
@@ -55,7 +53,9 @@ function isDegenerate(v) {
  * @return {string}
  */
 function degenerateKeyword(v) {
-  if (isNaN(v)) {return 'NaN';}
+  if (isNaN(v)) {
+    return 'NaN';
+  }
   return v > 0 ? 'infinity' : '-infinity';
 }
 
@@ -77,6 +77,25 @@ function serialize(node, opts = {}) {
     return `${calcName}(${degenerateKeyword(node.value)} * 1${node.unit})`;
   }
 
+  // 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`.
+  if (
+    node.type === 'Sum' &&
+    node.grouped &&
+    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)}))`;
+  }
+
   if (
     node.type === 'Num' ||
     node.type === 'Dim' ||
@@ -105,7 +124,9 @@ function serialize(node, opts = {}) {
 function serializeExpr(node, prec) {
   switch (node.type) {
     case 'Num':
-      if (isDegenerate(node.value)) {return degenerateKeyword(node.value);}
+      if (isDegenerate(node.value)) {
+        return degenerateKeyword(node.value);
+      }
       return String(round(node.value, prec));
     case 'Dim':
       if (isDegenerate(node.value)) {
@@ -161,18 +182,27 @@ function displaySign(term) {
  */
 function serializeSum(sum, prec) {
   let out = '';
-  sum.terms.forEach((t, i) => {
+  for (const [i, t] of sum.terms.entries()) {
     const { sign, magnitude } = displaySign(t);
     if (i === 0) {
-      out = sign === 1
-        ? serializeExpr(magnitude, prec)
-        : serializeLeadingNeg(magnitude, prec);
+      if (magnitude.type === 'Sum' && magnitude.grouped) {
+        const body = `(${serializeExpr(magnitude, prec)})`;
+        out = sign === 1 ? body : `-${body}`;
+        continue;
+      }
+      out =
+        sign === 1
+          ? serializeExpr(magnitude, prec)
+          : serializeLeadingNeg(magnitude, prec);
     } else {
       // `-` binds looser than `*`/`/` so the right side never needs parens.
-      const body = serializeExpr(magnitude, prec);
+      let body = serializeExpr(magnitude, prec);
+      if (magnitude.type === 'Sum' && magnitude.grouped) {
+        body = `(${body})`;
+      }
       out += sign === 1 ? ` + ${body}` : ` - ${body}`;
     }
-  });
+  }
   return out;
 }
 
@@ -207,7 +237,9 @@ function serializeLeadingNeg(node, prec) {
     return serializeProduct({ type: 'Product', factors: negatedFactors }, prec);
   }
   const body = serializeExpr(node, prec);
-  return node.type === 'Sum' || node.type === 'Product' ? `-(${body})` : `-${body}`;
+  return node.type === 'Sum' || node.type === 'Product'
+    ? `-(${body})`
+    : `-${body}`;
 }
 
 /**
@@ -217,7 +249,7 @@ function serializeLeadingNeg(node, prec) {
  */
 function serializeProduct(product, prec) {
   let out = '';
-  product.factors.forEach((f, i) => {
+  for (const [i, f] of product.factors.entries()) {
     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.
@@ -230,10 +262,8 @@ function serializeProduct(product, prec) {
     } else {
       out += f.exponent === 1 ? ` * ${body}` : ` / ${body}`;
     }
-  });
+  }
   return out;
 }
 
-// Stryker disable next-line all: instrumenting this line breaks Node's
-// cjs-module-lexer named-export detection for .mjs `import { x } from` consumers.
-module.exports = { serialize };
+export { serialize };

package/src/lib/simplify/abs.js

@@ -1,6 +1,4 @@
-'use strict';
-
-const { num, dim } = require('../node.js');
+import { num, dim } from '../node.js';
 
 /** @typedef {import('../node.js').Node} Node */
 
@@ -13,9 +11,13 @@ function simplifyAbs(args) {
     return { type: 'Call', name: 'abs', args };
   }
   const a = args[0];
-  if (a.type === 'Num') {return num(Math.abs(a.value));}
-  if (a.type === 'Dim' && a.unit !== '%') {return dim(Math.abs(a.value), a.unit);}
+  if (a.type === 'Num') {
+    return num(Math.abs(a.value));
+  }
+  if (a.type === 'Dim' && a.unit !== '%') {
+    return dim(Math.abs(a.value), a.unit);
+  }
   return { type: 'Call', name: 'abs', args: [a] };
 }
 
-module.exports = { simplifyAbs };
+export { simplifyAbs };