refactor(svelte-scoped)!: simplify user facing setup #4942
Conversation
✅ Deploy Preview for unocss ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
fehnomenal
changed the title
|
commit: |
|
It seems like Also since we're using Svelte 5 now I would like the example updated to use the new style rules like no self closing non void elements. I'm all for less user facing setup but I didn't write Svelte Scoped so I would like to see @jacob-8 's input as well. |
|
I can't remember the issue I debugged but the fix for |
Perfect, anyway waiting for Jacob's opinion, if he doesn't appear it will be merged in a few days. |
henrikvilhelmberglund
left a comment
henrikvilhelmberglund
left a comment
There was a problem hiding this comment.
There should probably be an error/warning if there is an hooks.server.js|ts file with the previous Svelte-scoped config since you will end up with unocss_svelte_scoped_global_styles text in the top of the page.
|
Does the requested change seem possible? You can see the issue when using this PR in the existing Svelte-scoped example with the old setup. If it doesn't seem possible you can add a note in the documentation stating that the previous |
|
Sorry for the delay. I just added a warning if the old placeholder appears in a server hook file. @henrikvilhelmberglund |
henrikvilhelmberglund
left a comment
henrikvilhelmberglund
left a comment
There was a problem hiding this comment.
No worries! A typo, otherwise LGTM
packages-integrations/svelte-scoped/src/_vite/globalStylesPlugin.ts
Outdated
Show resolved
Hide resolved
|
Updated the file. Thanks for reading this stuff in such detail 😅 |
|
@henrikvilhelmberglund @fehnomenal I'm well aware that there have been a few simple svelte-scoped questions here and there this last year in regards to Svelte 5 and all. I'm still using this package and want to shave off a few of the rough edges but haven't had a chance to do anything. Just moved overseas and started a new business. 😀 So your contributions and ownership have been much appreciated. I'm still not chipping in yet, but things are trending towards calming down. |
Nice and no worries! |
All good, take your time! |
3 participants
While debugging an unrelated problem it came to my mind that the current way of getting global styles into the html in sveltekit is rather involved by needing to have a certain hook setup that replaces a string.
Instead we can just replace the string without needing to replace on each page render.
It works by replacing the placeholder
%unocss-svelte-scoped.global%during build (in any file) with a reference to the emitted css file. For dev the dev server gets a fixed route that serves the global css file.Actually this is a breaking change: the placeholder
%unocss-svelte-scoped.global%is also replaced in existinghooks.server.(ts|js)files. This results in the built application to replace the<link ...>tag to be replaced withunocss_svelte_scoped_global_styles. Which is the old value which was replaced with the tag.cc @jacob-8