PostCSS Lab Function

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

1.color-lab {
2	color: lab(40% 56.6 39);
3}
4
5.color-lch {
6	color: lch(40% 68.735435 34.568626);
7}
8
9/* becomes */
10
11.color {
12	color: rgb(179, 35, 35);
13	color: color(display-p3 0.64331 0.19245 0.16771);
14}
15
16.color-lch {
17	color: rgb(179, 35, 35);
18	color: color(display-p3 0.64331 0.19245 0.16771);
19}

Usage

Add PostCSS Lab Function to your project:

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

Use it as a PostCSS plugin:

1const postcss = require('postcss');
2const postcssLabFunction = require('postcss-lab-function');
3
4postcss([
5  postcssLabFunction(/* pluginOptions */)
6]).process(YOUR_CSS /*, processOptions */);

PostCSS Lab Function runs in all Node environments, with special instructions for:

Node	PostCSS CLI	Webpack	Gulp	Grunt

Options

preserve

The preserve option determines whether the original functional color notation is preserved. By default, it is not preserved.

1postcssLabFunction({ preserve: true })

1.color {
2	color: lab(40% 56.6 39);
3}
4
5/* becomes */
6
7.color {
8	color: rgb(179, 35, 35);
9	color: color(display-p3 0.64331 0.19245 0.16771);
10	color: lab(40% 56.6 39);
11}

enableProgressiveCustomProperties

The enableProgressiveCustomProperties option determines whether the original notation is wrapped with @supports when used in Custom Properties. By default, it is enabled.

[!NOTE] We only recommend disabling this when you set preserve to false or if you bring your own fix for Custom Properties.
See what the plugin does in its README.

1postcssLabFunction({ enableProgressiveCustomProperties: false })

1:root {
2	--firebrick: lab(40% 56.6 39);
3}
4
5/* becomes */
6
7:root {
8	--firebrick: rgb(178, 34, 34); /* will never be used, not even in older browser */
9	--firebrick: color(display-p3 0.64331 0.19245 0.16771); /* will never be used, not even in older browser */
10	--firebrick: lab(40% 56.6 39);
11}

subFeatures

displayP3

The subFeatures.displayP3 option determines if color(display-p3 ...) is used as a fallback.
By default, it is enabled.

display-p3 can display wider gamut colors than rgb on some devices.

1postcssOKLabFunction({
2	subFeatures: {
3		displayP3: false
4	}
5})

1.color {
2	color: lab(40% 56.6 39);
3}
4
5/* becomes */
6
7.color {
8	color: rgb(179, 35, 35);
9	color: lab(40% 56.6 39);
10}

Copyright : color conversions

This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/tree/main/css-color-4. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).