@csstools/postcss-oklab-function NPM

PostCSS OKLab Function

PostCSS OKLab Function lets you use oklab and oklch color functions in CSS, following the CSS Color specification.

.test-oklab {
	color: oklab(40% 0.001236 0.0039);
}

.test-oklch {
	color: oklch(40% 0.268735435 34.568626);
}

/* becomes */

.test-oklab {
	color: rgb(73, 71, 69);
	color: color(display-p3 0.28515 0.27983 0.27246);
}

.test-oklch {
	color: rgb(131, 28, 0);
	color: color(display-p3 0.49163 0.11178 0.00000);
}

Usage

Add PostCSS OKLab Function to your project:

npm install postcss @csstools/postcss-oklab-function --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssOKLabFunction = require('@csstools/postcss-oklab-function');

postcss([
  postcssOKLabFunction(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS OKLab 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 notation is preserved. By default, it is not preserved.

postcssOKLabFunction({ preserve: true })

.test-oklab {
	color: oklab(40% 0.001236 0.0039);
}

.test-oklch {
	color: oklch(40% 0.268735435 34.568626);
}

/* becomes */

.test-oklab {
	color: rgb(73, 71, 69);
	color: color(display-p3 0.28515 0.27983 0.27246);
	color: oklab(40% 0.001236 0.0039);
}

.test-oklch {
	color: rgb(131, 28, 0);
	color: color(display-p3 0.49163 0.11178 0.00000);
	color: oklch(40% 0.268735435 34.568626);
}

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.

postcssOKLabFunction({ enableProgressiveCustomProperties: false })

:root {
	--firebrick: oklab(40% 0.234 0.39);
}

/* becomes */

:root {
	--firebrick: rgb(133, 0, 67); /* will never be used, not even in older browser */
	--firebrick: color(display-p3 0.49890 0.00000 0.25954); /* will never be used, not even in older browser */
	--firebrick: oklab(40% 0.234 0.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
	}
})

.test-oklab {
	color: oklab(40% 0.001236 0.0039);
}

.test-oklch {
	color: oklch(40% 0.268735435 34.568626);
}

/* becomes */

.test-oklab {
	color: rgb(73, 71, 69);
}

.test-oklch {
	color: rgb(131, 28, 0);
}