veela4's picture
Upload folder using huggingface_hub
bf237c2 verified

PostCSS HWB Function PostCSS Logo

npm version CSS Standard Status Build Status Discord

PostCSS HWB Function lets you use hwb color functions in CSS, following the CSS Color specification.

a {
    color: hwb(194 0% 0%);
    color: hwb(194 0% 0% / .5);
}

/* becomes */

a {
    color: rgb(0, 195, 255);
    color: rgba(0, 195, 255, .5);
}

Usage

Add PostCSS HWB Function to your project:

npm install postcss @csstools/postcss-hwb-function --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssHWBFunction = require('@csstools/postcss-hwb-function');

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

PostCSS HWB Function runs in all Node environments, with special instructions for:

Options

preserve

The preserve option determines whether the original functional color notation is preserved. By default, it is not preserved.

postcssHWBFunction({ preserve: true })
a {
    color: hwb(194 0% 0%);
    color: hwb(194 0% 0% / .5);
}

/* becomes */

a {
    color: rgb(0, 195, 255);
    color: hwb(194 0% 0%);
    color: rgba(0, 195, 255, .5);
    color: hwb(194 0% 0% / .5);
}