postcss-css-variables icon indicating copy to clipboard operation
postcss-css-variables copied to clipboard

Breaks `linear-gradient` value list

Open tlindig opened this issue 8 years ago • 1 comments

following results in unexpected code:

textarea {
  background-image: linear-gradient(var(--primary-color, #ff5722), var(--primary-color, #ffff22));
}

results in:

textarea {
  background-image: linear-gradient(#ff5722), var(--primary-color, #ffff22);
}

but should:

textarea {
  background-image: linear-gradient(#ff5722, #ffff22);
}

tested also with playground

tlindig avatar Jun 14 '16 11:06 tlindig

:+1: Thanks for the report. It looks like the fallbacks are messing with things.

For now you can work around it like this:

.foo {
    --gradient-color1: var(--primary-color, #ff5722);
    --gradient-color2: var(--primary-color, #ffff22);
    background-image: linear-gradient(var(--gradient-color1), var(--gradient-color2));
}

Feel free to make a PR :grinning:

MadLittleMods avatar Jun 14 '16 17:06 MadLittleMods