PostCSS Calc

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.

Installation

npm install postcss-calc

Usage

// 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:

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.

Options

`precision` (default: `5`)

Allow you to define the precision for decimal numbers.

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.

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

`warnWhenCannotResolve` (default: `false`)

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

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

`mediaQueries` (default: `false`)

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

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

`selectors` (default: `false`)

Allows calc() usage as part of selectors.

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

Example:

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

Contributing

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

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

PostCSS Calc

Installation

Usage

Options

`precision` (default: `5`)

`preserve` (default: `false`)

`warnWhenCannotResolve` (default: `false`)

`mediaQueries` (default: `false`)

`selectors` (default: `false`)

Related PostCSS plugins

Contributing

Changelog

License

Current Tags

32 Versions

PostCSS Calc

Installation

Usage

Options

precision (default: 5)

preserve (default: false)

warnWhenCannotResolve (default: false)

mediaQueries (default: false)

selectors (default: false)

Related PostCSS plugins

Contributing

Changelog

License

Current Tags

32 Versions

`precision` (default: `5`)

`preserve` (default: `false`)

`warnWhenCannotResolve` (default: `false`)

`mediaQueries` (default: `false`)

`selectors` (default: `false`)