Nested selectors break compilation

[firedev]

Given:

:root {
  --color: red;
}

h1 {
  background: var(--color);
  &:hover {
    background: var(--color);
  }
}
h2, input[type=text] {
  background: var(--color);
  &:hover {
    background: var(--color);
  }
}

Expected:

h1 {
  background: red;
  &:hover {
    background: red;
  }
}
h2 {
  background: red;
  &:hover {
    background: red;
  }
}
input[type=text] {
  background: red;
  &:hover {
    background: red;
  }
}

Actual:

h1 {
  background: red;
  &:hover {
    background: red;
  }
}
h2 {
  background: red;
  &:hover {
    background: var(--color);
  }
}
input[type=text] {
  background: red;
  &:hover {
    background: var(--color);
  }
}

[MadLittleMods]

Run postcss-nested before postcss-css-variables: https://github.com/MadLittleMods/postcss-css-variables#nested-rules

Which would turn into after running through postcss-nested:

:root {
  --color: red;
}

h1 {
  background: var(--color);
}

h1:hover {
  background: var(--color);
}
h2, input[type=text] {
  background: var(--color);
}
h2:hover, input[type=text]:hover {
  background: var(--color);
}

And then postcss-css-variables:

h1 {
  background: red;
}

h1:hover {
  background: red;
}
h2 {
  background: red;
}
input[type=text] {
  background: red;
}
h2:hover {
  background: red;
}
input[type=text]:hover {
  background: red;
}

[firedev]

I see, thanks