PostCSS Custom Units

PostCSS Custom Units lets you use custom units in CSS, following the CSSWG Proposal.

:root {
  /** Step (approximately 4px when 1rem is 16px) */
  --step: .25rem;

  /** Relative Pixel (approximately 1px when 1rem is 16px) */
  --rpx: .0625rem;
}

.my-component {
  font-size: 24--rpx;
  padding-inline: 3--step;
}

/* becomes */

:root {
  /** Step (approximately 4px when 1rem is 16px) */
  --step: .25rem;

  /** Relative Pixel (approximately 1px when 1rem is 16px) */
  --rpx: .0625rem;
}

.my-component {
  font-size: max(24 * var(--rpx));
  padding-inline: max(3 * var(--step));
}

Usage

Add PostCSS Custom Units to your project:

npm install @csstools/custom-units --save-dev

Use PostCSS Custom Units to process your CSS:

const postcssCustomUnits = require('@csstools/custom-units');

postcssCustomUnits.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssCustomUnits = require('@csstools/custom-units');

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