A PostCSS plugin to parse out rgb values into distinct custom properties
APACHE-2.0 License
Remaps rgb(a) values to an
rgb
postfixed variable. If an opacity is found, creates a separateopacity
postfixed variable.
yarn add -D postcss-rgb-mapping
postcss -u postcss-rgb-mapping -o dist/index.css src/index.css
This plugin turns this:
.spectrum--lightest {
--spectrum-seafoam-100: rgba(206, 247, 243);
--spectrum-seafoam-200: rgba(170, 241, 234, 0.5);
}
Into this:
.spectrum--lightest {
--spectrum-seafoam-100-rgb: 206, 247, 243;
--spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
--spectrum-seafoam-200-rgb: 170, 241, 234;
--spectrum-seafoam-200-opacity: 0.5;
--spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb), var(--spectrum-seafoam-200-opacity));
}