You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2.6 KiB
2.6 KiB
PostCSS HWB Function 
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:
| Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt |
|---|
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);
}