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.9 KiB
2.9 KiB
PostCSS Lab Function 
PostCSS Lab Function lets you use lab, lch, and gray 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%);
--gray-40: gray(40);
--gray-40a50: gray(40 / .5);
}
/* becomes */
:root {
--firebrick: rgb(178, 34, 34);
--firebrick-a50: rgba(178, 34, 34, .5);
--gray-40: rgb(94,94,94);
--gray-40a50: rgba(94,94,94, .5);
}
Usage
Add PostCSS Lab Function to your project:
npm install postcss-lab-function --save-dev
Use PostCSS Lab Function to process your CSS:
const postcssLabFunction = require('postcss-lab-function');
postcssLabFunction.process(YOUR_CSS /*, processOptions, pluginOptions */);
Or use 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 |
|---|
Options
preserve
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%);
}