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