postcss-increase-specificity icon indicating copy to clipboard operation
postcss-increase-specificity copied to clipboard

Does not recognize root element in some cases

Open whatisaphone opened this issue 5 years ago • 4 comments

It looks like this plugin tries not to break html selectors, but it doesn't handle more complex selectors containing html.

Test case:

Input:

html[data-whatintent=keyboard] .button:focus {}

Actual output:

:not(#\9):not(#\9):not(#\9) html[data-whatintent=keyboard] .button:focus {}

These styles never end up being applied because html has no parent element

Expected output:

html[data-whatintent=keyboard]:not(#\9):not(#\9):not(#\9) .button:focus {}

It should append stackableRoot to the root selector, instead of prepending

whatisaphone avatar Sep 17 '20 19:09 whatisaphone

Thanks for the report @whatisaphone! Feel free to create a PR and add some tests to fix this :+1:

Relevant code:

MadLittleMods avatar Sep 23 '20 04:09 MadLittleMods

Ran into this issue today - @whatisaphone did you ever end up finding a fix for this?

bpartridge avatar Mar 22 '22 23:03 bpartridge

Yes, I fixed the issue by quitting my job

whatisaphone avatar Mar 23 '22 15:03 whatisaphone