@csstools/postcss-relative-color-syntax

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 */);

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

Similar packages

Other packages similar to @csstools/postcss-relative-color-syntax

postcss-color-function

postcss-color-function is a PostCSS plugin that allows you to use color functions like color() in your CSS. It provides similar functionality to @csstools/postcss-relative-color-syntax but focuses more on the color() function and its capabilities.

postcss-preset-env

postcss-preset-env is a PostCSS plugin that allows you to use future CSS features today. It includes a variety of plugins, including those for color manipulation, making it a more comprehensive solution compared to @csstools/postcss-relative-color-syntax.