postcss-lab-function

PostCSS Lab Function

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

.color-lab {
	color: lab(40% 56.6 39);
}

.color-lch {
	color: lch(40% 68.735435 34.568626);
}

/* becomes */

.color {
	color: rgb(179, 35, 35);
	color: color(display-p3 0.64331 0.19245 0.16771);
}

.color-lch {
	color: rgb(179, 35, 35);
	color: color(display-p3 0.64331 0.19245 0.16771);
}

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

.color {
	color: lab(40% 56.6 39);
}

/* becomes */

.color {
	color: rgb(179, 35, 35);
	color: color(display-p3 0.64331 0.19245 0.16771);
	color: lab(40% 56.6 39);
}

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.

postcssLabFunction({ enableProgressiveCustomProperties: false })

:root {
	--firebrick: lab(40% 56.6 39);
}

/* becomes */

:root {
	--firebrick: rgb(178, 34, 34); /* will never be used, not even in older browser */
	--firebrick: color(display-p3 0.64331 0.19245 0.16771); /* will never be used, not even in older browser */
	--firebrick: lab(40% 56.6 39);
}

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.

postcssOKLabFunction({
	subFeatures: {
		displayP3: false
	}
})

.color {
	color: lab(40% 56.6 39);
}

/* becomes */

.color {
	color: rgb(179, 35, 35);
	color: lab(40% 56.6 39);
}

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).

Similar packages

Other packages similar to postcss-lab-function

postcss-color-function

The postcss-color-function package allows you to transform colors using functions like color-mod(). It supports various color manipulations such as lightening, darkening, and adjusting hue, saturation, and lightness. Unlike postcss-lab-function, it does not specifically focus on the LAB color space but provides a broader range of color manipulation functions.

postcss-preset-env

The postcss-preset-env package lets you use modern CSS features, including color functions like lab(), in your stylesheets. It automatically converts these modern features into a form that is compatible with older browsers. While it includes support for LAB colors, it also provides a wide range of other modern CSS features, making it a more comprehensive solution compared to postcss-lab-function.

postcss-color-mod-function

The postcss-color-mod-function package allows you to modify colors using the color-mod() function. It supports various color adjustments such as lightening, darkening, and blending colors. This package is similar to postcss-lab-function in that it provides advanced color manipulation capabilities, but it does not specifically focus on the LAB color space.