JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 11545254
  • Score
    100M100P100Q221490F
  • License MIT

PostCSS plugin to reduce calc()

Package Exports

  • postcss-calc

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-calc) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

postcss-calc Build Status

PostCSS plugin to reduce calc().

This plugin reduce calc() references whenever it's possible. This can be particularly useful with the postcss-custom-properties plugin.

Note: When multiple units are mixed together in the same expression, the calc() statement is left as is, to fallback to the w3c calc() feature.

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);
}

you will get:

body {
  font-size: 16px
}

h1 {
  font-size: 32px;
  height: calc(100px - 2em)
}

Checkout tests for more examples.

Options

precision (default: 5)

Allow you to definine 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

Contributing

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

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

Changelog

License