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

Start with the StackBlitz reproduction and compare the stylesheets from src/routes/about/styles.css and src/routes/styles.css after client-side navigation versus a direct refresh. Reproduce the issue with a production build, then verify that both access paths apply the styles in the same order and produce the same color.