PostCSS Relative Opacity

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().

.notice {
  background: oklch(from var(--accent-color) l c h / 30%);
}

will be processed to:

.notice {
  background: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

Made in Evil Martians, product consulting for developer tools.

Docs

Read full docs here.