CSS Styles from unrelated layouts are merged if they have one CSS file in common

[onigoetz]

Link to the code that reproduces this issue

https://github.com/onigoetz/nextjs-css-issue-repro

To Reproduce

1. build the app and start it (not reproducible in dev mode)
2. go to http://localhost:3000/
3. you should see a green background as defined in its stylesheet

Current vs. Expected behavior

The background should be green but is red.

The styles from the subpage http://localhost:3000/leakingstyle are applied to http://localhost:3000/ but they have no layout in common and should not. It seems that because they have another CSS file in common they are merged

Another page next to it that has no css file in common does not have this issue : http://localhost:3000/otherstyle

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Fri Jun 2 00:45:15 UTC 2023
  Available memory (MB): 17991
  Available CPU cores: 6
Binaries:
  Node: 20.11.1
  npm: 10.2.4
  Yarn: 1.22.21
  pnpm: 8.14.1
Relevant Packages:
  next: 14.2.2
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
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 build (local), Vercel (Deployed)

Additional context

I tested multiple versions:

• 14.1.4 : OK
• 14.2.0-canary.27: OK
• 14.2.0-canary.28: BROKEN
• 14.2.0 : BROKEN
• 14.2.1 : BROKEN
• 14.2.2 : BROKEN
• 14.3.0-canary.11: BROKEN

Apparently the issue has been introduced in https://github.com/vercel/next.js/releases/tag/v14.2.0-canary.28

I would bet that the issue was introduced in this PR : #63157

[iamlinkus]

+1

Experiencing the exact same, super annoying. Happens only on build though.

[astateful]

+1

This issue is directly responsible for a 5-10% performance drop on our SEO optimised pages, in which the Lighthouse "eliminate render blocking resources" diagnostic suggests a savings of 1080ms by removing unused CSS, whereas with 14.1.4 it was around 250ms.

[alexanderchabo]

Same here, happens only on build. It currently blocks us from upgrading next.js version from 14.1.4 to 14.2.3

[mvdve]

Unfortunately running in to the same issue where my frontend styles are merged into the backend.

[iamlinkus]

This actually also happens when there’s no CSS files in common. A single global css (non module) import in one parallel route layout results in those styles being imported in other parallel routes.