npm install @csstools/postcss-relative-color-syntax --save-dev

PostCSS Relative Color Syntax lets you use the relative color syntax in CSS color functions following CSS Color Module 5.

.example {
	background: oklab(from oklab(54.3% -22.5% -5%) calc(1.0 - l) calc(a * 0.8) b);
}
/* becomes */
.example {
	background: rgb(12, 100, 100);
}

Note

We can not dynamically resolve var() arguments in relative color syntax, only static values will work.

Usage

Add PostCSS Relative Color Syntax to your project:

npm install postcss @csstools/postcss-relative-color-syntax --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssRelativeColorSyntax = require('@csstools/postcss-relative-color-syntax');
postcss([
	postcssRelativeColorSyntax(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Relative Color Syntax runs in all Node environments, with special instructions for:

Options

preserve

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

postcssRelativeColorSyntax({ preserve: true })

.example {
	background: oklab(from oklab(54.3% -22.5% -5%) calc(1.0 - l) calc(a * 0.8) b);
}
/* becomes */
.example {
	background: rgb(12, 100, 100);
	background: oklab(from oklab(54.3% -22.5% -5%) calc(1.0 - l) calc(a * 0.8) b);
}