PostCSS Calc

PostCSS Calc lets you reduce calc() references whenever it's possible. When multiple units are mixed together in the same expression, the calc() statement is left as is, to fallback to the W3C calc() implementation.

npm install postcss-calc

// dependenciesvarfs=require('fs');varpostcss=require('postcss');varcalc=require('postcss-calc');// css to be processedvarcss=fs.readFileSync('input.css','utf8');// process cssvaroutput=postcss().use(calc()).process(css).css;

Using this input.css:

h1 {
font-size:calc(16px*2);
height:calc(100px-2em);
width:calc(2*var(--base-width));
margin-bottom:calc(16px*1.5);
}

you will get:

h1 {
font-size:32px;
height:calc(100px-2em);
width:calc(2*var(--base-width));
margin-bottom:24px;
}

Checkout tests for more examples.

Allow you to define the precision for decimal numbers.

varout=postcss().use(calc({precision: 10})).process(css).css;

Allow you to preserve calc() usage in output so browsers will handle decimal precision themselves.

varout=postcss().use(calc({preserve: true})).process(css).css;

Adds warnings when calc() are not reduced to a single value.

varout=postcss().use(calc({warnWhenCannotResolve: true})).process(css).css;

Allows calc() usage as part of media query declarations.

varout=postcss().use(calc({mediaQueries: true})).process(css).css;

Allows calc() usage as part of selectors.

varout=postcss().use(calc({selectors: true})).process(css).css;

Example:

div[data-size='calc(3*3)'] {
width:100px;
}

Callback invoked when a calc() body fails to parse or simplify. Matches @csstools/css-calc's shape:

calc({onParseError: (err,input)=>{throwerr;// or log, route to a different channel, etc.},});

When omitted, errors are reported via PostCSS result.warn() so the plugin never throws at the postcss level.

The legacy jison-generated parser was replaced by a hand-written Pratt parser whose simplifier follows CSS Values 4. Most inputs reduce to identical output; the differences are spec-aligned or 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: 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 requires the zero term because it carries the length-percentage type.
• Constant folding.calc(43 + pi) now folds to 46.14159 (§10.7.1). Previously pi / e stayed symbolic.
• Reciprocal conversion.calc(var(--x) / 2) becomes calc(var(--x) * 0.5). The two are mathematically equivalent; previously the division shape was kept.
• Distributive multiplication.calc(0.5 * (100vw - 10px)) becomes calc(50vw - 5px).
• Unit case normalization.2PX becomes 2px (CSS units are case- insensitive; lowercase is conventional).
• Calc unwrap (§10.6).calc(var(--foo)) becomes var(--foo) — a calc() containing a single value is replaced by that value.
• Spec-style spaced operators.2px*var(--x) is serialized as 2px * var(--x). The tokenizer is unaffected; only output spacing differs.
• Division by zero / by a unit.calc(500px/0) reduces to calc(infinity * 1px) (§10.13) instead of throwing. Use onParseError if you want validation behavior.

To replace the value of CSS custom properties at build time, try PostCSS Custom Properties.

Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.

git clone git@github.com:postcss/postcss-calc.git
git checkout -b patch-1
npm install
npm test