Wrong color after cleaning, in a very specific case

[hostep]

We encountered a strange problem today. I could reduce it to the following input (I came from a > 600 KB css file, so it took me a while to reduce it, but I can't reduce it any further, or the bug disappears).

Input:

button:hover,
a.remove.focus {
  color: #ffffff;
}
button:hover {
  color: #1a1a18;
  background: #ffffff;
  border-color: #1a1a18;
}
.sub-button {
  color: #1a1a18;
  border-color: #1a1a18;
}
.sub-button:hover {
  color: #ffffff;
}

Cleaning it with clean-css, using --s0 and no sourcemaps, it gives this output (beautified for readability):

.sub-button, button:hover {
    color: #1a1a18;
    border-color: #1a1a18
}
a.remove.focus, button:hover {
    color: #fff
}
button:hover {
    background: #fff
}
.sub-button:hover {
    color: #fff
}

The problem here is with the color of the button:hover selector. It should be #1a1a18, but clean-css turns it into #fff

I tested this both with 3.1.9 and 3.2.5

[jakubpawlowicz]

That's interesting as button:hover shouldn't get that far up. So far you can skip it using --skip-restructuring switch.

[hostep]

Ok, we will use the --skip-restructuring flag for now. Thanks for the feedback!

[bevacqua]

I have the same issue, some CSS gets hoisted above where it should, breaking my layouting. See: https://www.diffchecker.com/aupxinqt

The lj-mailing-cta{display:block piece is hoisted way up, above lk-button rules, inverting specificity.

[jakubpawlowicz]

@hostep It's fixed in 3.2.7.

[hostep]

Awesome, thanks!