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

fix(svelte-scoped): global wrap preflights and safelist classes when used in component libraries #2695

Merged

Conversation

jacob-8
Copy link
Contributor

@jacob-8 jacob-8 commented Jun 1, 2023

Trying to use presetTypography's .prose class in a component library exposed the fact that it was not possible. As seen in prose/OutputDev.svelte, we can now use .prose in a component assuming we've placed the needed class in our safelist (I set the selector to .uno-prose in the test's Uno config)

This was made possible by also wrapping preflights placed into a component with :global() to keep them from being stripped out. The matching pattern ignores the default preflights and just applies to specially added ones (starting with a period or bracket), like the large list seen in presetTypography.

This also led me to the realization that <style uno:safelist></style> is absolutely useless as safelisted styles, if they are needed in the safelist for the normal reason that they only exist at runtime, will always get stripped out. This was forcing us to provide the advice to use <style uno:safelist global>, but that creates dependence on the old Svelte preprocessor (Svelte has jumped on board with using Vite's default Preprocessor) so I realized there is no reason not to just do the global part ourselves. Now users can just write <style uno:safelist> and it will work as expected. Component library consumers won't be tied down to the old Svelte preprocessor.

Lastly, I fixed a bug whereby preflights/safelists would not be output into the style block if there was no apply or theme.

@jacob-8 jacob-8 requested a review from antfu as a code owner June 1, 2023 03:37
@netlify
Copy link

netlify bot commented Jun 1, 2023

Deploy Preview for unocss ready!

Name Link
🔨 Latest commit 9622e20
🔍 Latest deploy log https://app.netlify.com/sites/unocss/deploys/647c89669661b60008a1e93b
😎 Deploy Preview https://deploy-preview-2695--unocss.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@antfu
Copy link
Member

antfu commented Jun 4, 2023

Can you help resolve the conflicts? Thanks

@antfu antfu enabled auto-merge (squash) June 4, 2023 12:44
@antfu antfu merged commit fe86c0f into main Jun 4, 2023
10 checks passed
@antfu antfu deleted the improve-preflights-safelist-usage-in-component-libraries branch June 4, 2023 13:00
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.

None yet

2 participants