PostCSS Relative Color Syntax

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:

• Node
• PostCSS CLI
• PostCSS Load Config
• Webpack
• Next.js
• Gulp
• Grunt

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