PostCSS Redundant Color Vars
PostCSS plugin that fixes a bug in safari when using custom properties in certain color declarations.
Input
.foo {
border: 1px solid hsla(var(--primary-color), 0.5);
}
.bar {
box-shadow: inset 1px 1px 4px rgb(var(--secondary-color));
}Output
.foo {
--redundant-border: hsla(var(--primary-color), 0.5);
border: 1px solid var(--redundant-border);
}
.bar {
--redundant-box-shadow: rgb(var(--secondary-color));
box-shadow: inset 1px 1px 4px var(--redundant-box-shadow);
}Usage
postcss([require('postcss-redundant-color-vars')]);See PostCSS docs for examples for your environment.