reduce-css-calc
Advanced tools
The reduce-css-ccalc npm package is a utility that simplifies CSS calc() expressions by evaluating and reducing them to their simplest form. This can be particularly useful for optimizing CSS code and ensuring that the calculations are performed correctly.
Basic Calculation Reduction
This feature allows you to reduce basic CSS calc() expressions by performing arithmetic operations and simplifying the expression.
const reduceCSSCalc = require('reduce-css-calc');
const result = reduceCSSCalc('calc(100% - 50px + 20px)');
console.log(result); // 'calc(100% - 30px)'Nested Calculation Reduction
This feature supports nested calc() expressions, allowing you to simplify complex nested calculations into a single, reduced expression.
const reduceCSSCalc = require('reduce-css-calc');
const result = reduceCSSCalc('calc(100% - calc(50px + 20px))');
console.log(result); // 'calc(100% - 70px)'Unit Conversion
This feature allows you to handle unit conversions within calc() expressions, ensuring that the final result is accurate and simplified.
const reduceCSSCalc = require('reduce-css-calc');
const result = reduceCSSCalc('calc(10px + 1em)', { precision: 2 });
console.log(result); // 'calc(10px + 1em)'The postcss-calc package is a PostCSS plugin that reduces calc() expressions in CSS. It offers similar functionality to reduce-css-calc but is designed to be used within the PostCSS ecosystem, making it a good choice for projects already using PostCSS.
cssnano is a modular minifier for CSS that includes a variety of optimization features, including the reduction of calc() expressions. It provides a broader range of CSS optimizations compared to reduce-css-calc, making it suitable for comprehensive CSS minification.
Reduce CSS calc() function to the maximum.
Particularly useful for packages like rework-calc or postcss-calc.
npm install reduce-css-calc
var reducedString = reduceCSSCalc(string, precision)var reduceCSSCalc = require('reduce-css-calc')
reduceCSSCalc("calc(1 + 1)")
// 2
reduceCSSCalc("calc((6 / 2) - (4 * 2) + 1)")
// -4
reduceCSSCalc("calc(1/3)")
// 0.33333
reduceCSSCalc("calc(1/3)", 10)
// 0.3333333333
reduceCSSCalc("calc(3rem * 2 - 1rem)")
// 5rem
reduceCSSCalc("calc(2 * 50%)")
// 100%
reduceCSSCalc("calc(120% * 50%)")
// 60%
reduceCSSCalc("a calc(1 + 1) b calc(1 - 1) c")
// a 2 b 0 c
reduceCSSCalc("calc(calc(calc(1rem * 0.75) * 1.5) - 1rem)")
// 0.125rem
reduceCSSCalc("calc(calc(calc(1rem * 0.75) * 1.5) - 1px)")
// calc(1.125rem - 1px)
reduceCSSCalc("-moz-calc(100px / 2)")
// 50px
reduceCSSCalc("-moz-calc(50% - 2em)")
// -moz-calc(50% - 2em)
See unit tests for others examples.
Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.
git clone https://github.com/MoOx/reduce-css-calc.git
git checkout -b patch-1
npm install
npm test
2.1.8 - 2020-01-08
FAQs
Reduce CSS calc() function to the maximum
The npm package reduce-css-calc receives a total of 2,037,118 weekly downloads. As such, reduce-css-calc popularity was classified as popular.
We found that reduce-css-calc demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 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.
Research
/Security News
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.