JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 5767013
  • Score
    100M100P100Q251618F
  • License CC0-1.0

Use the ic length unit

Package Exports

  • @csstools/postcss-ic-unit

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