3e953ad8d2
this version will run with npm start, but when attempting to run the built version behind nginx, it appears to have issues
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%);
}