App router global styles (import 'style.css') don't get removed when navigating to a different page

[Yihao-G]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/global-css-not-getting-removed-8kl8sv

To Reproduce

1. Create two pages (/foo and /bar) in the app directory, each import a different CSS file using import 'xxx.css'
2. Navigate from /foo to /bar using the router link
3. Seeing page foo page's global style still being applied on the bar page
4. Reload the foo page, only bar page's global style gets loaded

Current vs. Expected behavior

Current:
Both foo and bar pages' global styles are applied when navigating from /foo to /bar using the router link

Expected:
Only bar page's global styles should be loaded. foo page's global styles should be cleaned up after navigating to /foo.

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): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.11.1
  npm: 10.2.4
  Yarn: 1.22.19
  pnpm: 8.15.4
Relevant Packages:
  next: 14.3.0-canary.59 // Latest available version is detected (14.3.0-canary.59).
  eslint-config-next: 14.2.1
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

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

Not sure

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

next dev (local) and production build (next build && next start)

Additional context

No response