Chaining variables in media queries results in duplicated blocks

The issue might seem related to https://github.com/MadLittleMods/postcss-css-variables/issues/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.

Reproduce the input in the linked playground and compare the generated CSS with the expected output, using issue #64 only as related context. Done means the h1 media query is emitted once, and using three padding values does not increase duplication.