postcss-calc 11.0.0-rc.0 → 11.0.0-rc.2

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.0",
+  "version": "11.0.0-rc.2",
+  "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,33 +29,28 @@
   "author": "Andy Jansson",
   "license": "MIT",
   "engines": {
-    "node": "^22.12 || ^24.11 || >=26.0"
+    "node": "^22.18 || ^24.11 || >=26.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/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.1.2",
     "fast-check": "^4.9.0",
-    "postcss": "^8.5.19",
-    "prettier": "^3.9.5",
-    "typescript": "~6.0.3"
+    "oxfmt": "^0.61.0",
+    "oxlint": "^1.76.0",
+    "postcss": "^8.5.25",
+    "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:
 //
@@ -184,6 +182,4 @@ function negate(node) {
   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');
+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();
   }
@@ -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
@@ -15,7 +13,15 @@
  * @property {string} [calcName] Wrapper name to use when `calc()` is needed. Default `'calc'`.
  */
 
+// Below this is float noise, not a value: `0.1 + 0.2 - 0.3` is 5.5e-17.
+const NOISE_FLOOR = 1e-12;
+
 /**
+ * Rounding to `prec` decimal places turns `calc(1/1000000)` into `0`, and a
+ * `0` in CSS is often a switch, not a small number (`flex-grow: 0` never
+ * grows). So when a value is too small for `prec`, keep its significant digits
+ * instead: `1/1000000` -> `0.000001`, `1/3000000` -> `3.3333e-7`.
+ *
  * @param {number} v
  * @param {number | false} prec
  * @return {number}
@@ -25,7 +31,12 @@ function round(v, prec) {
     return v;
   }
   const m = Math.pow(10, prec);
-  return Math.round(v * m) / m;
+  const rounded = Math.round(v * m) / m;
+  if (rounded === 0 && Math.abs(v) > NOISE_FLOOR) {
+    // toPrecision needs at least one significant digit; `prec` may be 0.
+    return Number(v.toPrecision(Math.max(prec, 1)));
+  }
+  return rounded;
 }
 
 // §10.13 / §10.7.2: Infinity/NaN serialize as canonical keywords.
@@ -42,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';
 }
 
@@ -92,7 +105,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)) {
@@ -148,18 +163,19 @@ 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);
+      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);
       out += sign === 1 ? ` + ${body}` : ` - ${body}`;
     }
-  });
+  }
   return out;
 }
 
@@ -194,7 +210,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}`;
 }
 
 /**
@@ -204,7 +222,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.
@@ -217,10 +235,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 };

package/src/lib/simplify/atan2.js

@@ -1,10 +1,8 @@
-'use strict';
+/* §10.4 — atan2. foldConstArgs already rejects percentages (property-
+ context-resolved) and enforces shared base + static convertibility. */
 
-// §10.4 — atan2. foldConstArgs already rejects percentages (property-
-// context-resolved) and enforces shared base + static convertibility.
-
-const { num, dim } = require('../node.js');
-const { foldConstArgs } = require('./fold.js');
+import { num, dim } from '../node.js';
+import { foldConstArgs } from './fold.js';
 
 /** @typedef {import('../node.js').Node} Node */
 
@@ -13,13 +11,19 @@ const { foldConstArgs } = require('./fold.js');
  * @return {Node}
  */
 function simplifyAtan2(args) {
-  if (args.length !== 2) {return { type: 'Call', name: 'atan2', args };}
+  if (args.length !== 2) {
+    return { type: 'Call', name: 'atan2', args };
+  }
   const fold = foldConstArgs(args);
-  if (fold === null) {return { type: 'Call', name: 'atan2', args };}
+  if (fold === null) {
+    return { type: 'Call', name: 'atan2', args };
+  }
   const [y, x] = /** @type {[number, number]} */ (fold.values);
   const radians = Math.atan2(y, x);
-  if (isNaN(radians)) {return num(NaN);}
+  if (isNaN(radians)) {
+    return num(NaN);
+  }
   return dim((radians * 180) / Math.PI, 'deg');
 }
 
-module.exports = { simplifyAtan2 };
+export { simplifyAtan2 };