Big update!Introducing GitHub Bot Commands. Learn more
Socket
Log inBook a demo

postcss-calc

Package Overview
Dependencies
2
Maintainers
7
Versions
30
Issues
File Explorer

Advanced tools

postcss-calc

PostCSS plugin to reduce calc()

    8.2.4latest

Version published
Maintainers
7
Weekly downloads
8,831,194
decreased by-21.22%

Weekly downloads

Readme

Source

PostCSS Calc PostCSS

NPM Version Support Chat

PostCSS Calc lets you reduce calc() references whenever it's possible. 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

Using this input.css:

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

you will get:

h1 { font-size: 32px; height: calc(100px - 2em); width: calc(2*var(--base-width)); 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; }

To replace the value of CSS custom properties at build time, try PostCSS Custom Properties.

Contributing

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

git clone [email protected]:postcss/postcss-calc.git git checkout -b patch-1 npm install npm test

Changelog

License

Keywords

FAQs

What is postcss-calc?

PostCSS plugin to reduce calc()

Is postcss-calc popular?

The npm package postcss-calc receives a total of 7,359,205 weekly downloads. As such, postcss-calc popularity was classified as popular.

Is postcss-calc well maintained?

We found that postcss-calc demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.It has 7 open source maintainers collaborating on the project.

Last updated on 06 Feb 2022

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc