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.