Open aradalvand opened 1 year ago
I'm also encountering this issue with standard css fiels. We (unfortunately) have to edit global css files in our SvelteKit project and the full reloads are a killer. It appears as if SvelteKit hot reloads first, and then follows with a full reload. Is that expected behavior?
I got the same issue as you @john-michael-murphy
I import my global css in my +layout.svelte file and whenever I make change to the css the page reload. I expect svelte+kit+vite to be able to handle hot reload by swapping css
We have this problem as we use a global scss
file.
I monkey patched kit, this line: https://github.com/sveltejs/kit/blob/@sveltejs/kit@2.5.10/packages/kit/src/exports/vite/dev/index.js#L205
- !(query.has('raw') || query.has('url') || query.has('inline'))
+ !(query.has('raw') || query.has('url') || query.has('inline') || query.has('noinline'))
and then in my +layout.svelte, the following change:
- import "../scss/app.scss";
+ import "../scss/app.scss?noinline";
TL;DR: I made sveltekit ignore inlining the css when that particular search param noinline
exists.
Seems to be working well.
Thanks @ekhaled ! I can confirm it works.
Is that something we should merge in somehow ?
Thanks @ekhaled ! I can confirm it works.
Is that something we should merge in somehow ?
Feel free to create a PR. I'll see if I can create one when I have a bit of time in hand.
@dummdidumm do you think this is something that might get accepted into core?
I'm sure a lot of people use global css with sveltekit. And this does increase productivity a lot when building site templates etc.
We have this problem as we use a global
scss
file.I monkey patched kit, this line: https://github.com/sveltejs/kit/blob/@sveltejs/kit@2.5.10/packages/kit/src/exports/vite/dev/index.js#L205
- !(query.has('raw') || query.has('url') || query.has('inline')) + !(query.has('raw') || query.has('url') || query.has('inline') || query.has('noinline'))
and then in my +layout.svelte, the following change:
- import "../scss/app.scss"; + import "../scss/app.scss?noinline";
TL;DR: I made sveltekit ignore inlining the css when that particular search param
noinline
exists.Seems to be working well.
Wow this is sooooo cool!! Still working with @sveltejs/kit v2.5.20
, svelte v4.2.18
and vite v5.3.5
.
No PR yet? I am not familiar with the Svelte/Kit codebase, so I would be afraid to (move fast and) break things in unexected ways, but I'm very excited to see it seems to be just around the corner!
There is this library called patch-package which can be used to to automate the patching on postinstall
.
Your would end up with something like this structure:
I'm also including the patch file, I'm sure it will help.
The name of this patch file matters. Please read up on the patch-package
docs.
There is this library called patch-package which can be used to to automate the patching on
postinstall
.
Awesome thanks! I was trying to setup something similar! :)
Just found out about pnpm patch
command in the patch-package
readme.
Run pnpm patch <package>
:
$ pnpm patch @sveltejs/kit
Patch: You can now edit the package at:
/tmp/e86e895e5b7d2b3e21ca36d5c57bdc19
To commit your changes, run:
pnpm patch-commit '/tmp/e86e895e5b7d2b3e21ca36d5c57bdc19'
2. Edit relevant file (here `src/exports/vite/dev/index.js`) and save
3. Commit patch :
```bash
$ pnpm patch-commit '/tmp/e86e895e5b7d2b3e21ca36d5c57bdc19'
This gets added to package.json
:
{
"...": "...",
"pnpm": {
"patchedDependencies": {
"@sveltejs/kit@2.5.20": "patches/@sveltejs__kit@2.5.20.patch"
}
}
}
IDK yet about maintenance and updates but it look great for now!
Edit : Ok, looks like it's not that cool yet when updating deps.
Edit 2 : Ok, I read the thread to the end, and they just released pnpm 9.7.0
which work on the update friction.
Describe the bug
Editing CSS Module files that are imported in
.svelte
components causes a full page reload, while hot-reloading is expected (and demonstrably possible, but more on that in the "Additional information" section).Before somebody asks "why aren't you using the
<style>
tag directly in your Svelte components and taking advantage of Svelte's built-in CSS scoping?", because they are not good enough, and I'm not alone in thinking that.Reproduction
pnpm install
pnpm run dev
src/lib/Button.module.css
file, and change thebackground-color
toblue
.Logs
No response
System Info
Severity
annoyance
Additional Information
<script>
section of your root+layout.svelte
file (or, in the repro app linked above, it could be in the+page.svelte
file):Button.module.css
file again (change thebackground-color
back tored
), and save the file.Uncaught (in promise) (skipping full reload)
, as expected; the full page reload is prevented.Button.svelte
file, and then save the file.Let me know. Thanks.