PostCSS IC Unit

PostCSS IC Unit lets you use the ic length unit, following the CSS Values and Units Module specification.

p {
  text-indent: 2ic;
}

.bubble {
  width: calc(8ic + 20px);
}

/* becomes */
p {
  text-indent: 2em;
}

.bubble {
  width: calc(8em + 20px);
}

See prior work by JLHwung here postcss-ic-unit To ensure long term maintenance and to provide the needed features this plugin was recreated based on JLHwung's work.

Usage

Add PostCSS IC Unit to your project:

npm install postcss @csstools/postcss-ic-unit --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssIcUnit = require('@csstools/postcss-ic-unit');

postcss([
  postcssIcUnit(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

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

Node	PostCSS CLI	Webpack	Create React App	Gulp	Grunt

Options

preserve

The preserve option determines whether the original source is preserved. By default, it is not preserved.

postcssIcUnit({ preserve: true })

p {
  text-indent: 2ic;
}

/* becomes */

p {
  text-indent: 2em;
  text-indent: 2ic;
}