Edge case nesting causing no substitution
satazor opened this issue · 4 comments
Hello,
I've found an edge case where variables are not being substituted. The above code uses postcss-nesting
which is set to run before the postcss-css-variables
.
.discussion-fab {
background-color: var(--color-white);
&::after {
content: "";
box-shadow: inset 0 0 0 0 var(--color-white);
}
&.active,
&:focus {
background-color: var(--color-science-blue);
&:hover::after {
/* This doesn't get substituted! */
box-shadow: inset 0 0 0 0 var(--color-white);
}
}
}
The above works but the :focus
and .active
had to be duplicated:
.discussion-fab {
background-color: var(--color-white);
&::after {
content: "";
box-shadow: inset 0 0 0 0 var(--color-white);
}
&.active {
background-color: var(--color-science-blue);
&:hover::after {
box-shadow: inset 0 0 0 0 var(--color-white);
}
}
&:focus {
background-color: var(--color-science-blue);
&:hover::after {
box-shadow: inset 0 0 0 0 var(--color-white);
}
}
}
I'm unsure how to create a test case. The nesting fixtures don't resemble postcss-nesting
syntax.
Hey @satazor,
We recommend running postcss-nesting
before postcss-css-variables
, https://github.com/MadLittleMods/postcss-css-variables#nested-rules. It's unclear to me why there are still &
nested selectors in your output after running postcss-nesting
.
Please provide the input right before it goes into postcss-css-variables
, the actual output, and the expected output.
Yes I’m setting postcss-css-variables
after the nesting.
The actual code I pasted above was the original css code before any transformations. I will provide what you requested once I arrive home.
Thanks for the help so far.
I haven't still got time but it's on my TODO list!
You were right after all @MadLittleMods. Thanks!