postcss-increase-specificity
postcss-increase-specificity copied to clipboard
Does not recognize root element in some cases
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
Thanks for the report @whatisaphone! Feel free to create a PR and add some tests to fix this :+1:
Relevant code:
Ran into this issue today - @whatisaphone did you ever end up finding a fix for this?
Yes, I fixed the issue by quitting my job