Loading page css breaks css precedence

[yyjhao]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/5m3wl9

To Reproduce

1. Loading the main page
2. notice that the loading blue square appears (expected)
3. then the page loads and the square is still blue

Current vs. Expected behavior

The blue square's color should be overridden by the page styles but instead the loading page reverts it. Commenting out the loading page fixes it.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4242
  Available CPU cores: 2
Binaries:
  Node: 20.12.0
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 15.0.4 // There is a newer version (15.1.6) available, upgrade recommended! 
  eslint-config-next: 15.0.4
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.4.5
Next.js Config:
  output: N/A
 ⚠ There is a newer version (15.1.6) available, upgrade recommended! 
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) are affected? (Select all that apply)

CSS

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local), next build (local)

Additional context

No response

[samcx]

@yyjhao Thank you for submitting another CSS issue!

I think this is just broken on next dev because the loading.tsx CSS <link ...> is after the page's CSS. 👁