-
-
Notifications
You must be signed in to change notification settings - Fork 825
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
feat(svelte): Add svelte-preprocess-unocss preprocessor for using UnoCSS in svelte-package
[paused]
#1725
Conversation
…velte-scoped mode
…Code extension as well
…into scoped-compilation
@jacob-8 can you take a look these?:
I was talking with |
drafted sveltejs/vite-plugin-svelte#475 which may enable better support for vite based preprocessors in svelte-package or other svelte library tooling. Please add feedback there if possible. |
Thanks for starting the conversation! Much appreciated.
I've already published this preprocessor to a temporary package and am using it for my projects so I'm not in a rush for a fix here. I'll follow along and look forward to a good solution. |
…d and explanation is in svelte preprocessor readme
svelte-package
svelte-package
[paused]
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
For those who still are looking for such, you can find the |
Thank you, Jacob, for your work on implementing this feature. Currently, we are utilizing your preprocessor, and overall, we are satisfied with its performance. However, it appears that the preprocessor is unable to detect any classes written within a |
It is a limitation. This preprocessor is heading towards being released as part of the UnoCSS family of packages (watch #2552). Even though that package is not available yet, there are a few parts of the docs that are applicable to your question. Please read how it works and then the proper usage. For your use case, I'm going to assume building a component library since you're using the preprocessor and not the current UnoCSS vite plugin. I think you'd be better off using class directives ( <script lang="ts">
export let color: "blue" | "green";
$: computedClass = 'background-' + color;
</script>
<div class="{computedClass}" />
<style>
:global(.background-blue) {
--at-apply: bg-blue-200;
}
:global(.background-green) {
--at-apply: bg-green-200;
}
</style> |
Thank you for the clarification. We understand that it is a limitation and appreciate the suggested workaround. However, what we are trying to achieve is slightly different. To provide some context, we aren't using computed class names nor are we trying to dynamically create classes. We're simply using predefined CSS classes in our script blocks which are fully written out (e.g., For instance: <script>
$: variable = condition ? 'flex' : 'block';
</script>
<div class={variable}></div> In the above code, the CSS class inside the script block isn't being replaced with a scoped class (e.g., Based on your reply, we understand that this isn't the case. However, it's important for our use case that the classes inside the script block also get replaced with scoped classes. Is there a way to achieve this with svelte-scoped or the preprocessor, or is this a fundamental limitation of the tools? We appreciate your help in understanding this better. |
Then write it like this: <div
class:flex={condition}
class:block={!condition} /> You can also do an inline expression but the above example is the recommended way. <div class="{condition ? 'flex' : 'block'}" /> Reference: https://deploy-preview-2552--unocss.netlify.app/integrations/svelte-scoped#usage |
We're aware of class directives and already use them extensively where they fit. Unfortunately, it seems that using classes inside the script block won't work for our case then. Thanks for your help regardless. |
Yeah probably not, though it's hard to give advice without having a better understanding of your use case. If you're in an app, you can use the safelist, but if you're developing one-off components that you want to be able to be used by themselves as part of a component library you're best off just using |
Understood. We already planned on the By the way, your preprocessor has been really helpful in properly isolating our component styles. Thanks! |
Closes #1719
Edit: Since it appears the hope is to add support in Svelte for
svelte-package
to take advantage of Vite plugins this PR is parked for the moment simply to illustrate how a svelte-preprocessor could be created. I will await the results of sveltejs/vite-plugin-svelte#475I need help with:- [ ] Please give advice on where to place documentation for this package. It's not a Vite plugin so it doesn't belong with the otherSvelteKit
docs. Perhaps a separate Svelte page, that's referenced from the main page and the Vite page?- [ ] Add new package to NPM.