PostCSS Color Functional Notation 
PostCSS Color Functional Notation lets you use space and slash separated color notation in CSS, following the CSS Color specification.
:root { --firebrick: rgb(178 34 34); --firebrick-a50: rgb(70% 13.5% 13.5% / 50%); --firebrick-hsl: hsla(0 68% 42%); --firebrick-hsl-a50: hsl(0 68% 42% / 50%);} /* becomes */ :root { --firebrick: rgb(178, 34, 34); --firebrick-a50: rgba(178, 34, 34, .5); --firebrick-hsl: hsl(0, 68%, 42%); --firebrick-hsl-a50: hsla(0, 68%, 42%, .5);}Usage
Add PostCSS Color Functional Notation to your project:
npm install postcss-color-functional-notation --save-devUse PostCSS Color Functional Notation to process your CSS:
const postcssColorFunctionalNotation = ; postcssColorFunctionalNotation;Or use it as a PostCSS plugin:
const postcss = ;const postcssColorFunctionalNotation = ; ;PostCSS Color Functional Notation 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.
:root { --firebrick: rgb(178 34 34); --firebrick-a50: rgb(70% 13.5% 13.5% / 50%); --firebrick-hsl: hsla(0 68% 42%); --firebrick-hsl-a50: hsl(0 68% 42% / 50%);} /* becomes */ :root { --firebrick: rgb(178, 34, 34); --firebrick: rgb(178 34 34); --firebrick-a50: rgba(178, 34, 34, .5); --firebrick-a50: rgb(70% 13.5% 13.5% / 50%); --firebrick-hsl: hsl(0, 68%, 42%); --firebrick-hsl: hsla(0 68% 42%); --firebrick-hsl-a50: hsla(0, 68%, 42%, .5); --firebrick-hsl-a50: hsl(0 68% 42% / 50%);}