PostCSS Lab Function

PostCSS Lab Function lets you use lab, lch, and gray color functions in CSS, following the CSS Color specification.

```pcss :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:

bash npm install postcss-lab-function --save-dev

Use PostCSS Lab Function to process your CSS:

```js const postcssLabFunction = require('postcss-lab-function');

postcssLabFunction.process(YOUR_CSS /, processOptions, pluginOptions /); ```

Or use it as a PostCSS plugin:

```js 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.

js postcssLabFunction({ preserve: true })

```pcss :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%); } ```