@csstools/postcss-color-function-display-p3-linear

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.

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