Does not recognize root element in some cases

[whatisaphone]

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

[MadLittleMods]

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

Relevant code:

• index.js#L13-L22

[bpartridge]

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

[whatisaphone]

Yes, I fixed the issue by quitting my job

[dolgachio]

@whatisaphone @bpartridge If you still need the fix, I built a similar plugin addressing this case
https://www.npmjs.com/package/postcss-boost-specificity

If anybody has any other edge case to cover, please let me know and I will address it in my plugin.