Closed ivanbanov closed 2 years ago
I have been unable to update to 3.1.x due to a similar issue.
seems to be affected by the following modify.
@strozw That's a typing change, it wouldn't change how responsive states work.
The problem in this bug is the order of the emitted rules. This is from browser inspection of @ivanbanov's sandbox:
.css-1exvybm {
background-color:red;
}
@media (min-width: 768px) {
.css-1exvybm {
background-color:blue;
}
.css-1exvybm:hover {
background-color:red;
}
}
@media (min-width: 1024px) {
.css-1exvybm {
background-color:green;
}
.css-1exvybm:hover {
background-color:blue;
}
}
.css-1exvybm:hover {
background-color:green;
}
Media queries don't change specificity, so the final hover rule wins. It needs to be emitted prior to the media queries.
@agriffis
I'm sorry to make a misleading comment. thanks, I have understand the intent of this issue by your replay.
but I'm facing other issues with _
styles using typescript & xstyled 3.1.x.
therefore, I'll create another issue for this issue.
@agriffis I think it is a real bug, we have to address it.
@gregberge Yes, my comment was describing the bug in xstyled. I agree we need to fix it.
When using responsive states such as
only the
hover
declared in the_
will work, if we remove the_
everything works fineLink to reproduce it https://codesandbox.io/s/fervent-dewdney-dpqku?file=/src/App.js