PostCSS Calc

PostCSS Calc lets you reduce calc() references whenever it's possible. This can be particularly useful with the PostCSS Custom Properties plugin.

When multiple units are mixed together in the same expression, the calc() statement is left as is, to fallback to the W3C calc() implementation.

Installation

1npm install postcss-calc

Usage

1// dependencies
2var fs = require("fs")
3var postcss = require("postcss")
4var calc = require("postcss-calc")
5
6// css to be processed
7var css = fs.readFileSync("input.css", "utf8")
8
9// process css
10var output = postcss()
11  .use(calc())
12  .process(css)
13  .css

Example (with PostCSS Custom Properties enabled as well):

1// dependencies
2var fs = require("fs")
3var postcss = require("postcss")
4var customProperties = require("postcss-custom-properties")
5var calc = require("postcss-calc")
6
7// css to be processed
8var css = fs.readFileSync("input.css", "utf8")
9
10// process css
11var output = postcss()
12  .use(customProperties())
13  .use(calc())
14  .process(css)
15  .css

Using this input.css:

1:root {
2  --main-font-size: 16px;
3}
4
5body {
6  font-size: var(--main-font-size);
7}
8
9h1 {
10  font-size: calc(var(--main-font-size) * 2);
11  height: calc(100px - 2em);
12  margin-bottom: calc(
13      var(--main-font-size)
14      * 1.5
15    )
16}

you will get:

1body {
2  font-size: 16px
3}
4
5h1 {
6  font-size: 32px;
7  height: calc(100px - 2em);
8  margin-bottom: 24px
9}

Checkout tests for more examples.

Options

precision (default: 5)

Allow you to define the precision for decimal numbers.

1var out = postcss()
2  .use(calc({precision: 10}))
3  .process(css)
4  .css

preserve (default: false)

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

1var out = postcss()
2  .use(calc({preserve: true}))
3  .process(css)
4  .css

warnWhenCannotResolve (default: false)

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

1var out = postcss()
2  .use(calc({warnWhenCannotResolve: true}))
3  .process(css)
4  .css

mediaQueries (default: false)

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

1var out = postcss()
2  .use(calc({mediaQueries: true}))
3  .process(css)
4  .css

selectors (default: false)

Allows calc() usage as part of selectors.

1var out = postcss()
2  .use(calc({selectors: true}))
3  .process(css)
4  .css

Example:

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

---

Contributing

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

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

Changelog

License