PostCSS Nested Calc lets you use nested calc() expressions following the CSS Values and Units 4 specification.
```pcss .example { order: calc(1 + calc(2 * 2)); }
/ becomes /
.example { order: calc(1 + (2 * 2)); order: calc(1 + calc(2 * 2)); } ```
Add PostCSS Nested Calc to your project:
bash
npm install postcss @csstools/postcss-nested-calc --save-dev
Use it as a PostCSS plugin:
```js const postcss = require('postcss'); const postcssNestedCalc = require('@csstools/postcss-nested-calc');
postcss([ postcssNestedCalc(/ pluginOptions /) ]).process(YOUR_CSS /, processOptions /); ```
PostCSS Nested Calc runs in all Node environments, with special instructions for:
| Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt | | --- | --- | --- | --- | --- | --- |
The preserve option determines whether the original notation
is preserved. By default the original values are preserved.
js
postcssNestedCalc({ preserve: false })
```pcss .example { order: calc(1 + calc(2 * 2)); }
/ becomes /
.example { order: calc(1 + (2 * 2)); } ```