PostCSS Pow

PostCSS Pow lets you calculate the power of a number dynamically using CSS variables (supports integers only). This is useful for example if your design uses a font scale which changes at different breakpoints using media queries. Or if you need to animate a measurement which uses an exponent calculated using a CSS variables.

:root {
    --scale: 1.68;
}
 
.example {
    font-size: calc(16px * pow(var(--scale), 2));
}
 
/* becomes */
 
:root {
    --scale: 1.68;
}
 
.example {
    font-size: calc(16px * (var(--scale) * var(--scale)));
}
 

Usage

Add PostCSS Pow to your project:

npm install postcss-pow --save-dev

Use PostCSS Pow to process your CSS:

const postcssPow = require('postcss-pow');
 
postcssPow.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssPow = require('postcss-pow');
 
postcss([
  postcssPow(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Pow runs in all Node environments, with special instructions for:

Node	PostCSS CLI	Webpack	Create React App	Gulp	Grunt