Socket
Socket
Sign inDemoInstall

postcss-calc

Package Overview
Dependencies
8
Maintainers
7
Versions
32
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    postcss-calc

PostCSS plugin to reduce calc()


Version published
Weekly downloads
11M
increased by2.64%
Maintainers
7
Install size
377 kB
Created
Weekly downloads
 

Package description

What is postcss-calc?

The postcss-calc npm package is a PostCSS plugin that reduces CSS calc() function to the maximum, whenever it's possible. It simplifies calculations in CSS files and optimizes them during the build process, making the final CSS file lighter and easier for browsers to parse.

What are postcss-calc's main functionalities?

Simplification of calc expressions

This feature allows the simplification of calc expressions in CSS, reducing them to their simplest form. For example, if you have a calculation based on CSS custom properties or simple arithmetic, postcss-calc can compute these values at build time, resulting in cleaner and more efficient CSS.

css
.post {
  --gap: 20px;
  padding: calc(var(--gap) * 2);
}
/* becomes */
.post {
  padding: 40px;
}

Optimization of complex calculations

For more complex calculations that cannot be fully simplified without context (like viewport sizes or percentages), postcss-calc optimizes the expression to ensure it's as efficient as possible without altering the intended result.

css
.banner {
  width: calc(100% - 80px);
}
/* becomes */
.banner {
  width: calc(100% - 80px);
}

Other packages similar to postcss-calc

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 git@github.com:postcss/postcss-calc.git
git checkout -b patch-1
npm install
npm test

Changelog

License

Keywords

FAQs

Last updated on 05 May 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc