PostCSS plugin to add opacity to any colors with Relative Color Syntax
npm install postcss-relative-opacity title="Philosopher’s stone, logo of PostCSS"
src="https://postcss.org/logo-leftp.svg">
[PostCSS] plugin to add opacity to any colors with [Relative Color Syntax].
Upcoming CSS Colors 5 allows to change any color including adding opacity.
But Firefox still [doesn’t support] this syntax. This tool partially polyfill
thi syntax via [color-mix()].
``css`
.notice {
background: oklch(from var(--accent-color) l c h / 30%);
}
will be processed to:
`css`
.notice {
background: color-mix(in srgb, var(--accent-color) 30%, transparent);
}
---
Made in Evil Martians, product consulting for developer tools.
---
[Relative Color Syntax]: https://www.w3.org/TR/css-color-5/#relative-color
[doesn’t support]: https://caniuse.com/css-relative-colors
[color-mix()`]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
[PostCSS]: https://github.com/postcss/postcss