sfcode An Online Competing and Development Environment

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

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

Example (with PostCSS Custom Properties enabled as well):

// dependencies
var fs = require("fs")
var postcss = require("postcss")
var customProperties = require("postcss-custom-properties")
var calc = require("postcss-calc")
// css to be processed
var css = fs.readFileSync("input.css", "utf8")
// process css
var output = postcss()
.use(customProperties())
.use(calc())
.process(css)
.css

Using this `input.css`:

:root {
--main-font-size: 16px;
}
body {
font-size: var(--main-font-size);
}
h1 {
font-size: calc(var(--main-font-size) * 2);
height: calc(100px - 2em);
margin-bottom: calc(
var(--main-font-size)
* 1.5
)
}

you will get:

body {
font-size: 16px
}
h1 {
font-size: 32px;
height: calc(100px - 2em);
margin-bottom: 24px
}

Checkout tests for more examples.

## Options

### <tt>precision</tt> (default: <tt>5</tt>)

Allow you to define the precision for decimal numbers.

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

### <tt>preserve</tt> (default: <tt>false</tt>)

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

### <tt>warnWhenCannotResolve</tt> (default: <tt>false</tt>)

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

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

### <tt>mediaQueries</tt> (default: <tt>false</tt>)

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

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

### <tt>selectors</tt> (default: <tt>false</tt>)

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

# @ref /opt/lampp/htdocs/sfcode/node_modules/postcss-calc/CHANGELOG.md "Changelog"

# [License](LICENSE)