Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
postcss-calc
Advanced tools
PostCSS plugin to reduce calc()
Weekly downloads
Package description
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.
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);
}
cssnano is a modular CSS minifier that includes functionalities similar to postcss-calc as part of its optimizations. It uses PostCSS to analyze and rewrite CSS files, reducing their size. While cssnano includes a broader range of optimizations, postcss-calc focuses specifically on the optimization of calc() functions.
postcss-custom-properties is another PostCSS plugin that allows you to use CSS custom properties (variables) in your stylesheets. It can transform these properties into static values, similar to how postcss-calc simplifies calc() expressions. However, it focuses on variables rather than calculations.
Readme
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.
npm install postcss-calc
// 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.
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.
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
FAQs
PostCSS plugin to reduce calc()
The npm package postcss-calc receives a total of 6,664,498 weekly downloads. As such, postcss-calc popularity was classified as popular.
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.
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.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.