PostCSS Nested Calc

npm install @csstools/postcss-nested-calc --save-dev

PostCSS Nested Calc lets you use nested calc() expressions following the CSS Values and Units 4 specification.

1.example {
2	order: calc(1 + calc(2 * 2));
3}
4
5/* becomes */
6
7.example {
8	order: calc(1 + (2 * 2));
9	order: calc(1 + calc(2 * 2));
10}

Usage

Add PostCSS Nested Calc to your project:

1npm install postcss @csstools/postcss-nested-calc --save-dev

Use it as a PostCSS plugin:

1const postcss = require('postcss');
2const postcssNestedCalc = require('@csstools/postcss-nested-calc');
3
4postcss([
5	postcssNestedCalc(/* pluginOptions */)
6]).process(YOUR_CSS /*, processOptions */);

Options

preserve

The preserve option determines whether the original notation is preserved. By default the original values are preserved.

1postcssNestedCalc({ preserve: false })

1.example {
2	order: calc(1 + calc(2 * 2));
3}
4
5/* becomes */
6
7.example {
8	order: calc(1 + (2 * 2));
9}