the-forest/client/node_modules/@csstools/postcss-ic-unit
2024-09-17 20:35:18 -04:00
..
dist client raw doggin the db 2024-09-17 20:35:18 -04:00
CHANGELOG.md client raw doggin the db 2024-09-17 20:35:18 -04:00
LICENSE.md client raw doggin the db 2024-09-17 20:35:18 -04:00
package.json client raw doggin the db 2024-09-17 20:35:18 -04:00
README.md client raw doggin the db 2024-09-17 20:35:18 -04:00

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