search

Andarist / stylis-plugin-extra-scope

Stylis plugin which adds extra scope to each produced CSS rule.
MIT License
23 stars 14 forks source link

Media queries break pseudo classes #9

Closed ayastreb closed 3 years ago

ayastreb commented 4 years ago

If there's at least one media-query in the style, it's breaking pseudo and nested selectors. See reproduction here: https://codesandbox.io/s/increase-css-specificity-forked-lum7o

Notice that :hover selector doesn't work, because CSS generated for it is:

#extra-scope #extra-scope .cssss-161048u:hover{background-color:blue;}

the scope is added twice and therefor CSS is not applied

ayastreb commented 3 years ago

hi @Andarist! did you have a chance to look at this issue/MR? Would it be possible to merge/publish the fix?

Andarist commented 3 years ago

Thanks for a ping - I've found some problems with your proposed fix. I can't say I fully understand the original issue nor the extra issue that I have found but after some thinking, I've found a way to simplify the implementation a lot (by preparing the scoped selectors once, in the beginning, instead of trying to fix things for all generated rules).

I hope to release a new version with this tomorrow.

ayastreb commented 3 years ago

Awesome, thanks!