postcss-lab-function

PostCSS Lab Function

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);
}

Usage

Add PostCSS Lab Function to your project:

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

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