Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Investigate parsel and css-selector-parser for new globalfication. #633

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

gregschmit
Copy link

@gregschmit gregschmit commented May 10, 2024

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 #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.

@Conduitry
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Global styles not supporting composed selectors like :is()
2 participants