Hover style doesn't work with @media (hover: hover)

[Znegl]

Describe the bug When wrapping :hover style in the media query @media (hover: hover) in the component stylesheet, the plugin doesn't apply it.

To Reproduce Steps to reproduce the behavior:

1. Create a component with something like the following style in it:

.some-component {
  color: blue;

  @media (hover: hover) {
    &:hover {
      color: red;
    }
  }
}

3. Run Storybook
4. Try setting the hover-state using the psudo state plugin
5. See error

Expected behavior A clear and concise description of what you expected to happen. I would expect the defined hover style to be applied.

Screenshots —

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: 119

Additional context The plugin works as expected when I remove the media query, but introduces hover bugs for users of touch devices instead.

[philippone]

Hi @Znegl ,

which version of Postcss Pseudo Classes are you using?

I added a test in my forked version and it seems to be working.

Could you test it with this version: npm install "https://github.com/philippone/postcss-pseudo-classes#master" --save-dev