PostCSS Relative Color Syntax ![PostCSS Logo](https://postcss.github.io/postcss/logo.svg)
![Discord](https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white)
![CSS Standard Status](https://cssdb.org/images/badges/relative-color-syntax.svg)
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()
]).process(YOUR_CSS );
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);
}