Chaining variables in media queries results in duplicated blocks

[deioo]

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.

[runar]

Any news on this?

[maccapakka]

I'd love an update on this. We want to implement this package at our company but this is a massive blocker.