PostCSS Lab Function lets you use lab and lch color functions in
CSS, following the CSS Color specification.
:root {
--firebrick: lab(40% 56.6 39);
--firebrick-a50: lch(40% 68.8 34.5 / 50%);
}
/* becomes */
:root {
--firebrick: rgb(178, 34, 34);
--firebrick-a50: rgba(178, 34, 34, .5);
}Add PostCSS Lab Function to your project:
npm install postcss postcss-lab-function --save-devUse it as a PostCSS plugin:
const postcss = require('postcss');
const postcssLabFunction = require('postcss-lab-function');
postcss([
postcssLabFunction(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);PostCSS Lab Function runs in all Node environments, with special instructions for:
| Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt |
|---|
The preserve option determines whether the original functional color notation
is preserved. By default, it is not preserved.
postcssLabFunction({ preserve: true }):root {
--firebrick: lab(40% 56.6 39);
--firebrick-a50: lch(40% 68.8 34.5 / 50%);
}
/* becomes */
:root {
--firebrick: rgb(178, 34, 34);
--firebrick: lab(40% 56.6 39);
--firebrick-a50: rgba(178, 34, 34, .5);
--firebrick-a50: lch(40% 68.8 34.5 / 50%);
}