Inconsistent order of global styles #7751
Description
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.4Severity
serious, but I can work around it
Additional Information
No response