svelte-preprocess

svelte-preprocess copied to clipboard

This is a draft of refactoring the globalifySelector to use a CSS parser rather than a regex to hopefully allow major libraries like Tailwind and DaisyUI to work better with Svelte.

I put more details in the globalfy/README.md however I'll summarize here:

• I looked into parsel and it doesn't seem to be able to take a modified AST (or even the original) and convert it back into a valid CSS selector.
• css-selector-parser seems to work much better.
• I'm curious why we currently try to nest the :global() operator (e.g., for div > p we do :global(div) > :global(p) rather than :global(div > p). The latter is more performant because you can avoid traversing deeper into the AST.
• What do the maintainers of this project think about moving to a CSS parser?
• Do the maintainers have any thoughts about my work here? Do any of you disgaree with using css-selector-parser for some reason? Or prefer another CSS parser?

My main goal for opening this PR in draft is to get feedback on if there is any likelihood this could get merged and, since it's a fairly significant change, if the maintainers of this project want to push me in a particular direction or otherwise provide feedback.

Thanks

This is also related to and would probably fix #501. Though if the maintainers are OK with it I would prefer the quick and dirty https://github.com/sveltejs/svelte-preprocess/pull/632 get merged to fix that since it's ready to go and simpler. It at least gets Tailwind to work property, however DaisyUI still doesn't work, and that's what this PR is all about.

I don't think we want to introduce a new CSS parsing dependency (for all users) just for <style global>.

I'm not a fan of this feature. I'd be in favor of deprecating and eventually removing this behavior altogether. It was added ages ago - while svelte-preprocess was still a personal project of kaisermann's rather than an official project under the sveltejs org - and before other tooling was able to support importing CSS files from JS to inject them (unscoped) into the application. Furthermore, in Svelte 5 you'll also be able to wrap everything in :global this way: <style> :global { div { color: red; } } </style>

If limitations in <style global> can push people to using one of the other solutions, I'd see that as more of a benefit, honestly - and I do want to more overtly push people in those other directions eventually anyway.