fix(svelte-scoped): global wrap preflights and safelist classes when used in component libraries #2695
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 noapply
ortheme
.