Responsive state style not working when using _

[ivanbanov]

When using responsive states such as

<x.button
  bg={{
    _: { _: "error", hover: "success" },
    md: { _: "info", hover: "error" },
    lg: { _: "success", hover: "info" },
  }}
>
  Cameleon button
</x.button>

only the hover declared in the _ will work, if we remove the _ everything works fine

Link to reproduce it https://codesandbox.io/s/fervent-dewdney-dpqku?file=/src/App.js

[strozw]

I have been unable to update to 3.1.x due to a similar issue.

seems to be affected by the following modify.

b69619e#diff-edd87da59beb6f474c429c0a205143f6d0446314ca8dfab56a814823e1a3520cR74

[agriffis]

@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.

[strozw]

@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.

[gregberge]

@agriffis I think it is a real bug, we have to address it.

[agriffis]

@gregberge Yes, my comment was describing the bug in xstyled. I agree we need to fix it.