kit
kit copied to clipboard
sveltejs
Inconsistent order of global styles
Describe the bug
There seems to be an inconsistency in the ordering that stylesheets are applied to the document, depending on whether a page is accessed via client-side routing from another page, or via server rendering the page directly.
I'm not sure if I'm doing something wrong, but I shouldn't expect final stylesheet ordering to depend on page access order, right?
In my project I'm getting this discrepancy only in a production build, everything seems ok when running vite dev.
Reproduction
https://stackblitz.com/edit/sveltejs-kit-template-default-8yn9xw?file=src/routes/about/+page.svelte
Added src/routes/about/styles.css and a rule to src/routes/styles.css.
Steps:
- Navigate to about page, text renders in red
- Refresh about page, text renders in green
Logs
No response
System Info
System:
OS: Linux 5.16 Manjaro Linux
CPU: (16) x64 AMD Ryzen 7 PRO 5850U with Radeon Graphics
Memory: 20.54 GB / 27.30 GB
Container: Yes
Shell: 3.5.1 - /usr/bin/fish
Binaries:
Node: 19.0.1 - /usr/bin/node
Yarn: 1.22.19 - /usr/bin/yarn
npm: 8.19.2 - /usr/bin/npm
Browsers:
Firefox: 107.0
npmPackages:
@sveltejs/adapter-static: next => 1.0.0-next.48
@sveltejs/adapter-vercel: next => 1.0.0-next.81
@sveltejs/kit: next => 1.0.0-next.551
@sveltejs/package: next => 1.0.0-next.1
svelte: ^3.46.0 => 3.53.1
vite: ^3.1.0 => 3.2.4
Severity
serious, but I can work around it
Additional Information
No response
I'm adding the 'documentation' label because this is expected, I'd say. I don't think the framework wants to jump through hoops in order to do something other than just appending stylesheets (which is all Svelte does under the hood, anyway). In general, it's a bad idea to have conflicting global styles on different pages, precisely because of the things like this that it can lead to.
I get where you're coming from and mostly agree, but the fact that there's a mismatch between the behavior of vite dev and vite build in this case smells like a bug to me...
there are various differences in behavior between dev and build, mostly to accomodate things like "prevent layout shifts that would happen in dev mode with the prod config, where this wouldn't happen", so that's also expected to some degree.
I'm running into a style ordering issue also, same in dev and prod - compare dev server vs client by hitting refresh in https://stackblitz.com/edit/sveltejs-kit-template-default-ceqnem?file=src/routes/+layout.svelte
In real usage, I have general styles that apply to prose blocks which includes a max-width. In just one location, I would like to change just the max-width of the prose block, and the flash between server/client is terrible.
Edit: I now solve this by importing my general .prose styles in the <head> block before the location where sveltekit styles are imported.
