Chaining variables in media queries results in duplicated blocks #67
Description
The issue might seem related to #64, the difference being that there is no problem with nesting in the example below.
The issue can be replicated in the playground with the following input:
:root {
--space-small: 10px;
--space-large: 20px;
}
@media (min-width: 768px) {
:root {
--space-small: 20px;
--space-large: 30px;
}
}
h1 {
padding: var(--space-small) var(--space-large);
}
h2 {
padding: var(--space-small);
}In the output, the h2 is defined as expected, while h1's media query block gets duplicated a few times:
h1 {
padding: 10px 20px;
}
@media (min-width: 768px) {
h1 {
padding: 20px 30px;
}
}
@media (min-width: 768px) {
h1 {
padding: 20px 30px;
}
}
@media (min-width: 768px) {
h1 {
padding: 20px 30px;
}
}
@media (min-width: 768px) {
h1 {
padding: 20px 30px;
}
}If using 3 values for padding, the level of replication is increased.