PostCSS Color Function Display P3 Linear

npm install @csstools/postcss-color-function-display-p3-linear --save-dev

PostCSS Color Function Display P3 Linear lets you use the display-p3-linear color space in the color function in CSS, following the CSS Color specification.

.color {
	color: color(display-p3-linear 0.3081 0.014 0.0567);
}

:root {
	--a-color: color(display-p3-linear 0.3081 0.014 0.0567);
}

/* becomes */

.color {
	color: color(display-p3 0.59096 0.12316 0.26409);
}

:root {
	--a-color: color(display-p3 0.59096 0.12316 0.26409);
}

Usage

Add PostCSS Color Function Display P3 Linear to your project:

npm install postcss @csstools/postcss-color-function-display-p3-linear --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssColorFunctionDisplayP3Linear = require('@csstools/postcss-color-function-display-p3-linear');

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

Options

preserve

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

postcssColorFunctionDisplayP3Linear({ preserve: true })

.color {
	color: color(display-p3-linear 0.3081 0.014 0.0567);
}

:root {
	--a-color: color(display-p3-linear 0.3081 0.014 0.0567);
}

/* becomes */

.color {
	color: color(display-p3 0.59096 0.12316 0.26409);
	color: color(display-p3-linear 0.3081 0.014 0.0567);
}

:root {
	--a-color: color(display-p3 0.59096 0.12316 0.26409);
}

@supports (color: color(display-p3-linear 0 0 0)) {
:root {
	--a-color: color(display-p3-linear 0.3081 0.014 0.0567);
}
}

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.

postcssColorFunctionDisplayP3Linear({ enableProgressiveCustomProperties: false })

.color {
	color: color(display-p3-linear 0.3081 0.014 0.0567);
}

:root {
	--a-color: color(display-p3-linear 0.3081 0.014 0.0567);
}

/* becomes */

.color {
	color: color(display-p3 0.59096 0.12316 0.26409);
	color: color(display-p3-linear 0.3081 0.014 0.0567);
}

:root {
	--a-color: color(display-p3 0.59096 0.12316 0.26409);
	--a-color: color(display-p3-linear 0.3081 0.014 0.0567);
}

Custom properties do not fallback to the previous declaration

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