reduce-css-calc review
reduce-css-calc 2.1.8 takes one CSS value string and simplifies each calc() expression its parser can solve. It evaluates unitless arithmetic, combines matching units, converts compatible absolute lengths, angles, time, frequency, and resolution values, and leaves layout-dependent combinations inside calc(). It also folds constants around var() while passing env() and constant() expressions through. Version 2.1.8 fixed a parse error involving a custom-property fallback; it was released in January 2021. This is the calculation engine historically used under stylesheet tools, not a PostCSS plugin, full CSS parser, or runtime browser polyfill.
reduce-css-calc 2.1.8 installed in 0.9 seconds with 3 packages and 0 audit findings, but our browser import cost 35.9 KB minified and 11.6 KB gzipped. Keep it for compatibility with an existing value-level build step; use postcss-calc or a current CSS parser for new pipelines and leave the code out of runtime bundles.
We installed it
| Install | ✓ · 0.9s | 3 packages on disk · 1 MB |
| Import | ✓ | ESM import works · require() works · CommonJS package |
| Browser | 11.6 KB | gzipped (35.9 KB minified), bundled with esbuild |
| Types | — | no TypeScript types found |
| Known vulns | 0 | 0 critical · 0 high · 0 moderate · 0 low (npm audit) |
Answers from our run
Does reduce-css-calc install cleanly?
Yes. In a fresh container with an empty cache, npm install reduce-css-calc finished in 0.9s, leaving 3 packages and 1 MB on disk. npm audit reported no known vulnerabilities.
How much does reduce-css-calc add to a browser bundle?
11.6 KB gzipped (35.9 KB minified) when the whole package is bundled for the browser with esbuild. Importing only part of it is usually smaller.
Does reduce-css-calc work with both ESM and CommonJS?
Yes. Both import 'reduce-css-calc' and require('reduce-css-calc') worked in Node 22 in our run. The package is published as CommonJS.
Does reduce-css-calc include TypeScript types?
No type declarations were found in our install, so TypeScript users need their own declarations.
reduce-css-calc or postcss-calc: which should you use?
postcss-calc: Choose it to reduce calculations across a PostCSS tree with plugin options and declaration context. reduce-css-calc 2.1.8 installed in 0.9 seconds with 3 packages and 0 audit findings, but our browser import cost 35.9 KB minified and 11.6 KB gzipped.
When should you not use reduce-css-calc?
You are building a new PostCSS chain. postcss-calc walks declarations, preserves source context, and has current plugin maintenance.
Use it if
- An existing build tool already calls reduceCSSCalc(value, precision) and must preserve its 2.x output details.
- Only isolated declaration values need folding, without a PostCSS AST or full stylesheet traversal.
- Compatible units should reduce while percentages mixed with relative or absolute lengths remain for browser layout.
- A CommonJS integration can add its own error reporting and accepts an older parser with no declarations.
- You are building a new PostCSS chain. postcss-calc walks declarations, preserves source context, and has current plugin maintenance.
- The input uses min(), max(), clamp(), or newer typed CSS math. This parser recognizes calc() and vendor-prefixed calc() only.
- Generated units may be uppercase. The open PX parser defect has remained documented since 2021 with an unmerged fix.
- First-party TypeScript declarations or an exports map are mandatory. Version 2.1.8 publishes neither.
- Browser weight matters. Our import produced 35.9 KB minified and 11.6 KB gzipped for a function better kept in the build step.
Setup reality
We installed reduce-css-calc 2.1.8 in a fresh Node 22 Bookworm sandbox. npm took 0.9 seconds, left 3 packages using 1 MB, and reported 0 known vulnerabilities. The package is 176 KB unpacked with 2 direct dependencies and no peers. It publishes CommonJS without an exports map, and both require() and ESM import worked. No TypeScript declarations were found. Our browser bundle measured 35.9 KB minified and 11.6 KB gzipped.
There are no credentials, config files, native modules, or postinstall steps. require('reduce-css-calc') returns the function. Pass a declaration value as the first argument and optional decimal precision as the second; the default is 5 places. It does not accept a complete stylesheet or provide source locations. A build pipeline that needs those should use postcss-calc instead of manually splitting CSS.
Failure behavior is mixed. Incompatible dimensions stay inside a shortened calc(), and constants around var() may still combine. Any expression containing env() or constant() is returned without reduction. Invalid arithmetic such as division by 0 or division by a dimension can throw synchronously. Catch those errors around third-party CSS and report the owning declaration, since the package cannot attach filename or line information.
The parser reflects an older CSS grammar. Uppercase PX can fail, and min(), max(), and clamp() are outside its matcher. Vendor-prefixed calc names are recognized and retained if an unresolved expression remains. Keep this code in the build process: 11.6 KB gzipped is unnecessary browser cost when modern browsers already evaluate calc() themselves.
Patterns
Evaluate unitless arithmetic reduce-number
const reduce = require('reduce-css-calc')
const value = reduce('calc((6 / 2) - (4 * 2) + 1)')
// '-4'The function returns a string even when the final value has no unit.
Combine matching dimensions combine-units
const value = reduce('calc(3rem * 2 - 1rem)')
// '5rem'A dimension can multiply or divide by a unitless number; dividing one dimension by another throws.
Choose decimal precision set-precision
reduce('calc(1 / 3)') // '0.33333'
reduce('calc(1 / 3)', 10) // '0.3333333333'Precision is positional and defaults to 5 decimal places.
Reduce nested calculations flatten-nested
const value = reduce('calc(100% - calc(50% + 25px))')
// 'calc(50% - 25px)'Percentage and px still depend on layout, so their remaining relationship stays in calc().
Fold every calc in one value reduce-many
const value = reduce('translate(calc(10px + 5px), calc(2em * 3))')
// 'translate(15px, 6em)'Surrounding value tokens are preserved while each recognized calc() is processed.
Combine compatible time units convert-time
const value = reduce('calc(1s - 50ms)')
// '0.95s'Absolute time units can convert; unrelated or layout-dependent dimensions cannot.
Leave percentage and length together preserve-layout-math
const value = reduce('calc(100% + 1px)')
// 'calc(100% + 1px)'An unchanged mixed-unit expression is expected because its numeric value depends on layout.
Combine constants beside a custom property fold-around-variable
const value = reduce('calc(10px - (100px + var(--offset)))')
// 'calc(-90px - var(--offset))'The variable stays unresolved, while compatible constants around it can move and combine.
Pass safe-area math through preserve-env
const value = reduce('calc(env(safe-area-inset-left) + 12px)')Version 2.1.8 skips a calc containing env() or the older constant() function.
Report a reduction failure catch-invalid-math
try {
reduce('calc(500px / 0)')
} catch (error) {
console.error('invalid width declaration', error.message)
}Division by 0 throws synchronously. The error has no stylesheet filename or source location.
Reduce a prefixed calc keep-vendor-prefix
reduce('-webkit-calc(1px + 1px)') // '2px'
reduce('-moz-calc(50% - 2em)') // '-moz-calc(50% - 2em)'A prefix disappears after full reduction and remains when mixed units still need browser evaluation.
Process declaration values only transform-values
for (const name of Object.keys(declarations)) {
declarations[name] = reduce(declarations[name])
}Do not pass a whole stylesheet. postcss-calc is the better fit when parsing and source-aware traversal are required.
Alternatives
| Package | Registry | Pick it when |
|---|---|---|
| postcss-calc | npm | Choose it to reduce calculations across a PostCSS tree with plugin options and declaration context. |
| css-tree | npm | Choose it when the work needs a maintained CSS parser, AST, generator, and syntax-aware transformations. |
| polished | npm | Choose it for JavaScript style helpers and author-time arithmetic rather than parsing arbitrary stylesheet values. |
More web frontend guides
postcss · react · react-dom · tailwindcss · htmlparser2 · tailwind-merge · the whole shelf →
How this guide is made: grounded in the library's documentation, release notes, changelog, and issue history, on a fixed rubric — not a hands-on install of every release. The 50 most-downloaded entries are additionally install-verified in clean containers. Corrections: contact the desk.