reduce-css-calc

What is reduce-css-calc?

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.

What are reduce-css-calc's main functionalities?

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)'

Other packages similar to reduce-css-calc

postcss-calc

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

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.

README

reduce-css-calc

Reduce CSS calc() function to the maximum.

Particularly useful for packages like rework-calc or postcss-calc.

Installation

$ npm install reduce-css-calc

Usage

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.

Contributing

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

Changelog

License

Changelog

1.3.0 - 2016-08-26

• Added: calc identifier from unresolved nested expressions are removed for better browser support (#19 - @ben-eb)