search

jackall3n / postcss-scope

🔭 A small plugin to allow you to scope your css with a custom selector
5 stars 2 forks source link

Target multiple root elements #5

Closed stormfar closed 1 year ago

stormfar commented 1 year ago

I need to apply the tailwind classes to multiple root elements, as I'm using HeadlessUI, which adds Dialogue and Portal components to the root level (e.g. #headlessui-portal-root is appended to the body), which use TailwindCSS classes.

Since there is no current solution for change the root element for those components (see: https://github.com/tailwindlabs/headlessui/discussions/666), it seems like the simplest solution is to target multiple root elements here.

If I add this

"postcss-scope": "#__next, #second-el",

to postcss.config.js, The selectors are generated like this: CleanShot 2023-08-07 at 11 26 39

Could postcss-scope consider comma-separated selectors in the config?

jackall3n commented 1 year ago

Hey @5tormTrooper,

Thanks for the request and nice idea. I've added this functionality in #6. Let me know if that works for you.

I've updated the options to support a string array. With your example, it would be

"postcss-scope": ["#__next", "#second-el"]

jackall3n commented 1 year ago

Released in 1.7.1

stormfar commented 1 year ago

Works like a charm. Thanks!