@csstools/postcss-relative-color-syntax
v3.0.6
Published
Use the relative color syntax in CSS
Downloads
5,005,904
Readme
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);
}