Added support for media queries

[dnaploszek]

Hello, I've tried my chance at adding support for media queries. In our project we're disabling hover states when the pointer does not support hover.

So basically this code:

@media (hover: hover) and (pointer: fine) {
  .self:hover {
    background-color: gray;
  }
}

gets rewritten into:

@media (hover: hover) and (pointer: fine) {
  .self:hover, .self.pseudo-hover, .pseudo-hover .self {
    background-color: gray;
  }
}

But this should also work for multiple rules and other media queries

I haven't written the tests yet, as I wanted to know what's your feedback on it, whether this is actually correct. With the tests I would also need to provide the structure for CSSMediaRule, so didn't bother for now.

I don't want to keep a forked version of the library so looking for review 🙏🏻

[ghengeveld]

This is interesting. Could you add an example component + story so we can try how it works? I would expect it to just work, actually, so I wonder what's different about your scenario that you need this change? I'm not very familiar with hover/pointer media queries so I'm likely missing some context.

[DANSitNikov]

I encountered a similar problem in one of my projects. We used media hover to determine if the current device supports hover or not. This approach was dictated by a specific problem: using a hover effect on mobile devices causes buttons to stay stuck in the hovered state when tapped and sometimes it can be really confusing.

Here is an example - https://codepen.io/dansitnikov/pen/eYbOBMY (you can play with it on mobile and desktop devices)

Adding support for media queries will be really helpful