PostCSS Calc
PostCSS Calc lets you reduce calc()
references whenever it's possible. This can be particularly useful with the PostCSS Custom Properties plugin.
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
Usage
Example (with PostCSS Custom Properties enabled as well):
Using this input.css
:
you will get:
Checkout tests for more examples.
Options
precision
(default: 5
)
precision
(default: 5
)Allow you to define the precision for decimal numbers.
preserve
(default: false
)
preserve
(default: false
)Allow you to preserve calc() usage in output so browsers will handle decimal precision themselves.
warnWhenCannotResolve
(default: false
)
warnWhenCannotResolve
(default: false
)Adds warnings when calc() are not reduced to a single value.
mediaQueries
(default: false
)
mediaQueries
(default: false
)Allows calc() usage as part of media query declarations.
selectors
(default: false
)
selectors
(default: false
)Allows calc() usage as part of selectors.
Example:
Contributing
Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.
Last updated