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

[samcx]

@Yihao-G Taking a look!

[samcx]

@Yihao-G To clarify, this is the expected behavior—if you navigate between pages in App Router, both stylesheets will be active (I believe done for performance reasons—let me gather more info from the team and update this comment again soon). You will need to write CSS in a way that doesn't conflict, e.g., by using classNames that don't conflict. One such was is using CSS Modules.

I believe we need to update our documentation here to make that clearer.

In the meantime, I will be closing this case. Let me know if you have any further questions or concerns!

[samcx]

@Yihao-G this comment goes deep into why we do this! → #58597 (comment)

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.