⚒️ Svelte preprocessor for UnoCSS

[bennymi]

The svelte-scoped UnoCSS library currently breaks our website. It would be nice to build a preprocessor that works for us as well, so we don't have a massive global css file.

Idea: Get a list of all the rules and shortcuts within a Svelte file. Determine which have to be globally scoped and which can just be placed into the <style> tag, perhaps by getting the location of the matches and checking if they are part of the <script> tag or inside the html...

Resources:

• https://github.com/sveltejs/svelte-preprocess/blob/main/src/processors/typescript.ts
• https://github.com/unocss/unocss/blob/main/packages/svelte-scoped/src/_preprocess/index.ts
• https://github.com/unocss/unocss/blob/main/packages/shared-common/src/index.ts

[delight]

you don't mean this:

https://unocss.dev/integrations/svelte-scoped#svelte-preprocessor https://github.com/unocss/unocss/tree/main/examples/sveltekit-preprocess

right?

[bennymi]

@delight yeah I tried both the vite plugin and the preprocessor one, but for both of them it messed up the docs site. Perhaps I missed something or configured it wrong? I just want it for the docs site to reduce the initial load time, even though right now the global CSS file is still pretty small, so it's not that important at the moment I would say