Variable fallback not working
alexhaines123 opened this issue · 1 comments
alexhaines123 commented
I'm using postcss-css-variables with a JSON file with this data:
{
"variables" : {
"--color-form-selected" : "red",
"--color-positive-green" : "green"
}
}
On this css which uses variable fallbacks but oddly it chooses the last variable provided instead of the first.
.a-checkbox__input:checked ~ .a-checkbox__label {
background-color: var(--color-form-selected);
border-color: var(--color-positive-green, var(--color-form-selected));
}
But it outputs
.a-checkbox__input:checked ~ .a-checkbox__label {
background-color: red;
border-color: red;
}
Expected
.a-checkbox__input:checked ~ .a-checkbox__label {
background-color: red;
border-color: green;
}
MadLittleMods commented
For reference, the following example works as expected. I would expect that #37 fixed the problem which was released in v0.7.0
. Which version are you using?
Input:
:root {
--color-form-selected: red;
--color-positive-green: green;
}
.a-checkbox__input:checked ~ .a-checkbox__label {
background-color: var(--color-form-selected);
border-color: var(--color-positive-green, var(--color-form-selected));
}
Output:
.a-checkbox__input:checked ~ .a-checkbox__label {
background-color: red;
border-color: green;
}