JSPM

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

Reduce calc() plugin for PostCSS

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

A PostCSS plugin to reduce calc() usage.

Particularly useful with the postcss-custom-properties

Installation

npm install postcss-calc

Usage

var postcss = require("postcss")
var calc = require("postcss-calc")

var css = postcss()
  .use(calc())
  .process(cssString)
  .css

Supported feature

This 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.

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("style.css", "utf8")

var output = postcss()
  .use(customProperties())
  .use(calc())
  .process(css)
  .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);
}

yields:

body {
  font-size: 16px
}

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

See unit tests for a better example.

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