npm install @csstools/postcss-exponential-functions --save-devPostCSS Exponential Functions lets you use the pow(), sqrt(), hypot(), log(), exp() functions following the CSS Values 4 Specification.
.foo {
top: calc(1px * pow(2, 3));
line-height: sqrt(1.2);
padding: hypot(3px, 4px);
order: log(10, 10);
min-height: calc(e - exp(1));
}
/* becomes */
.foo {
top: 8px;
line-height: 1.0954451150103;
padding: 5px;
order: 1;
min-height: 0;
}Add PostCSS Exponential Functions to your project:
npm install postcss @csstools/postcss-exponential-functions --save-devUse it as a PostCSS plugin:
const postcss = require('postcss');
const postcssExponentialFunctions = require('@csstools/postcss-exponential-functions');
postcss([
postcssExponentialFunctions(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);PostCSS Exponential Functions runs in all Node environments, with special instructions for:
The preserve option determines whether the original notation
is preserved. By default, it is not preserved.
postcssExponentialFunctions({ preserve: true }).foo {
top: calc(1px * pow(2, 3));
line-height: sqrt(1.2);
padding: hypot(3px, 4px);
order: log(10, 10);
min-height: calc(e - exp(1));
}
/* becomes */
.foo {
top: 8px;
top: calc(1px * pow(2, 3));
line-height: 1.0954451150103;
line-height: sqrt(1.2);
padding: 5px;
padding: hypot(3px, 4px);
order: 1;
order: log(10, 10);
min-height: 0;
min-height: calc(e - exp(1));
}