@csstools/postcss-oklab-function

What is @csstools/postcss-oklab-function?

@csstools/postcss-oklab-function is a PostCSS plugin that allows you to use the OKLab color function in your CSS. OKLab is a color space designed to be perceptually uniform, meaning that the perceived difference between colors is consistent across the entire color space. This plugin enables you to write colors in the OKLab color space and have them converted to a more widely supported format.

What are @csstools/postcss-oklab-function's main functionalities?

Using OKLab color function

This feature allows you to write colors using the OKLab color function in your CSS. The plugin will convert these colors to a more widely supported format, such as RGB.

/* Input CSS */
body {
  color: oklab(59.69% 0.072 -0.236);
}

/* Output CSS */
body {
  color: rgb(255, 0, 0);
}

Custom properties with OKLab

This feature allows you to define custom properties using the OKLab color function. The plugin will convert these custom properties to a more widely supported format.

/* Input CSS */
:root {
  --primary-color: oklab(59.69% 0.072 -0.236);
}

body {
  color: var(--primary-color);
}

/* Output CSS */
:root {
  --primary-color: rgb(255, 0, 0);
}

body {
  color: var(--primary-color);
}

Other packages similar to @csstools/postcss-oklab-function

postcss-color-function

postcss-color-function is a PostCSS plugin that allows you to use color-modifying functions in your CSS. It supports various color functions like lighten, darken, and adjust-hue. Unlike @csstools/postcss-oklab-function, it does not specifically support the OKLab color space but provides a broader range of color manipulation functions.

postcss-preset-env

postcss-preset-env is a PostCSS plugin that allows you to use modern CSS features in your stylesheets. It includes support for various color functions, including the OKLab color space through the color-mod-function plugin. It offers a more comprehensive set of features compared to @csstools/postcss-oklab-function, which focuses solely on the OKLab color space.

README

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

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