postcss-calc
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/postcss-calc package

    8.0.0 • Public • Published

    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

    Install

    npm i postcss-calc

    DownloadsWeekly Downloads

    9,224,150

    Version

    8.0.0

    License

    MIT

    Unpacked Size

    151 kB

    Total Files

    10

    Last publish

    Collaborators

    • beneb
    • moox
    • semigradsky
    • jonathantneal
    • andyjansson
    • evilebottnawi