Open dnaploszek opened 1 year ago
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.
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
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:
gets rewritten into:
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 🙏🏻