Navigation breaks css module precedence

[yyjhao]

Link to the code that reproduces this issue

https://stackblitz.com/edit/stackblitz-starters-jsthdd4n?file=app%2Fpage.tsx

To Reproduce

Go to main page - notice that the square is blue
Click on other to navigate to another page with a red square
Navigate back with the link - notice that the square is now red

In addition, in prod build, the square is always red, which is incorrect. You can fix this by moving import styles from './page.module.css'; to the top of the Page.tsx file, but it will break again with the same repro.

Current vs. Expected behavior

The square should be blue and remain blue regardless of navigation.

Provide environment information

perating System:
  Platform: linux
  Arch: x64
  Version: Ubuntu 20.04.0 LTS Fri Jan 31 2025 10:09:34 GMT-0800 (Pacific Standard Time)
  Available memory (MB): NaN
  Available CPU cores: 8
Binaries:
  Node: 18.20.3
  npm: 10.2.3
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 15.2.0-canary.33 // Latest available version is detected (15.2.0-canary.33).
  eslint-config-next: 13.5.1
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

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

CSS

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

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

Additional context

No response

[samcx]

@yyjhao Thank you for submitting an issue!

Here's what I've found:

• With next dev, no config (cssChunking: true), as confirmed in the description, blue then switching to red
• With next dev --turbopack, no config (cssChunking: true), blue then switching to red
• With next dev, cssChunking: strict, blue then switching to red
• With next dev --turbopack, cssChunking: strict, blue then switching to red
• With next dev, cssChunking: false, blue then switching to red
• With next dev --turbopack, cssChunking: false, blue then switching to red
• With next build && next start, no config (cssChunking: true), getting the correct behavior of blue and red with no switching https://github.com/user-attachments/assets/5548f835-f9ec-4c4f-be90-fce6c67ff7d6
• With next build && next start, cssChunking: strict, correct behavior with no switching
• With next build && next start, cssChunking: false, blue then switching to red

The next build behavior seems correct, so will be reporting back on the issues with next dev!

[yyjhao]

interesting - so cssChunking: false is also buggy? is it something that we are not supposed to use?

[samcx]

so cssChunking: false is also buggy?

No, I think this behavior is intended if you opt out of the cssChunking algorithm.

You can fix this by moving import styles from './page.module.css'; to the top of the Page.tsx file

Wouldn't this make it both always red since now the Card's styles override the CSS Modules?

[yyjhao]

Wouldn't this make it both always red since now the Card's styles override the CSS Modules?
huh not sure but I can't repo it now