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 typography follows a modular scale where the scale also happens to changes at different breakpoints. 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)));
}

Currently supports whole numbers, positive or negative and zero.

Futher Reading

Heydon Pickering and Andy Bell's blog post about using modular scale for creating visual harmony in your layout.

Draft specification for new mathematical functions and expressions coming to CSS.

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