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.
bash
npm install postcss-calc
```js // dependencies var fs = require("fs") var postcss = require("postcss") var calc = require("postcss-calc")
// css to be processed var css = fs.readFileSync("input.css", "utf8")
// process css var output = postcss() .use(calc()) .process(css) .css ```
Using this input.css:
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:
css
h1 {
font-size: 32px;
height: calc(100px - 2em);
width: calc(2*var(--base-width));
margin-bottom: 24px
}
Checkout tests for more examples.
precision (default: 5)Allow you to define the precision for decimal numbers.
js
var out = postcss()
.use(calc({precision: 10}))
.process(css)
.css
preserve (default: false)Allow you to preserve calc() usage in output so browsers will handle decimal precision themselves.
js
var out = postcss()
.use(calc({preserve: true}))
.process(css)
.css
warnWhenCannotResolve (default: false)Adds warnings when calc() are not reduced to a single value.
js
var out = postcss()
.use(calc({warnWhenCannotResolve: true}))
.process(css)
.css
mediaQueries (default: false)Allows calc() usage as part of media query declarations.
js
var out = postcss()
.use(calc({mediaQueries: true}))
.process(css)
.css
selectors (default: false)Allows calc() usage as part of selectors.
js
var out = postcss()
.use(calc({selectors: true}))
.process(css)
.css
Example:
css
div[data-size="calc(3*3)"] {
width: 100px;
}
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.
bash
git clone git@github.com:postcss/postcss-calc.git
git checkout -b patch-1
npm install
npm test