search

saulhardman / postcss-hover-media-feature

PostCSS plugin that extracts and wraps rules containing `:hover` pseudo-classes in `@media (hover: hover) {}` media queries
MIT License
59 stars 5 forks source link

Not working in combination with postcss-nesting v 13.0.0 #34

Open rabbitfufu opened 2 months ago

rabbitfufu commented 2 months ago

Useful plugin, However it no longer works in combination with postcss-nesting v 13.

saulhardman commented 2 months ago

Useful plugin,

However it no longer works in combination with postcss-nesting v 13.

Hi @rabbitfufu, thanks for the comment and report – I'll look into it in the coming days/weeks.

saulhardman commented 2 months ago

Hey @rabbitfufu, could you post an example of your PostCSS config, please? I'd like to know whether you're running the nesting plugin before or after hover media feature.

rabbitfufu commented 2 months ago

Hey @rabbitfufu, could you post an example of your PostCSS config, please?

You bet, here is the complete config I am using for postcss:

            postcss: {
                plugins: [
                    postcssGlobalData({
                        files: ['./src/assets/breakpoints.css']
                    }),
                    postcssEach(),
                    postcssCustomMedia(),
                    postcssNesting({edition: '2021'}), // postcssHover requires this edition
                    postcssHover
                ]
            }

I have postcssHover set directly after postcssNesting -- and in fact I am using v13 of postcssNesting here. In order to get it working, postcssNesting needs to be set to legacy mode. If postcssNesting is initialized without that parameter, then if postcssHover is also present in the project, Vite seems to crash. (It doesn't throw any errors that I can see, the build just hangs.)

Hope this helps!