@csstools/postcss-ic-unit

Use the ic length unit

Usage no npm install needed!

<script type="module">
  import csstoolsPostcssIcUnit from 'https://cdn.skypack.dev/@csstools/postcss-ic-unit';
</script>

README

PostCSS IC Unit PostCSS Logo

npm version CSS Standard Status Build Status Discord

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