Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

PostCSS Calc PostCSS

NPM Version Support Chat

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.


npm install postcss-calc


// 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()

Using this input.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:

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.

var out = postcss()
  .use(calc({precision: 10}))

preserve (default: false)

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

var out = postcss()
  .use(calc({preserve: true}))

warnWhenCannotResolve (default: false)

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

var out = postcss()
  .use(calc({warnWhenCannotResolve: true}))

mediaQueries (default: false)

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

var out = postcss()
  .use(calc({mediaQueries: true}))

selectors (default: false)

Allows calc() usage as part of selectors.

var out = postcss()
  .use(calc({selectors: true}))


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

Related PostCSS plugins

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.

git clone
git checkout -b patch-1
npm install
npm test