postcss-calc
PostCSS plugin to reduce calc()
Last updated 5 months ago by semigradsky .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install postcss-calc 
SYNC missed versions from official npm registry.

PostCSS Calc PostCSS

NPM Version Build Status Support Chat

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

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

Changelog

License

Current Tags

  • 7.0.2                                ...           latest (5 months ago)

20 Versions

  • 7.0.2                                ...           5 months ago
  • 7.0.1                                ...           2 years ago
  • 7.0.0                                ...           2 years ago
  • 6.0.2                                ...           2 years ago
  • 6.0.1                                ...           3 years ago
  • 6.0.0                                ...           3 years ago
  • 5.3.1                                ...           4 years ago
  • 5.3.0                                ...           4 years ago
  • 5.2.1                                ...           4 years ago
  • 5.2.0                                ...           4 years ago
  • 5.1.0                                ...           4 years ago
  • 5.0.0                                ...           5 years ago
  • 4.1.0                                ...           5 years ago
  • 4.0.1                                ...           5 years ago
  • 4.0.0                                ...           5 years ago
  • 3.0.0                                ...           6 years ago
  • 2.1.0                                ...           6 years ago
  • 2.0.1                                ...           6 years ago
  • 2.0.0                                ...           6 years ago
  • 1.0.0                                ...           6 years ago
Downloads
Today 8,762
This Week 169,370
This Month 103,928
Last Day 30,132
Last Week 153,166
Last Month 773,384
Dependencies (3)
Dev Dependencies (15)
Dependents (259)

Copyright 2014 - 2017 © taobao.org |