Skip to content

CSS Styles from unrelated pages and components are merged if they're using the same shared component #70120

@Obvio

Description

@Obvio

Link to the code that reproduces this issue

https://github.com/Obvio/next-css-modules

To Reproduce

This issue is similar to #64773.

To Reproduce

  1. build the app and start it (not reproducible in dev mode)
  2. go to http://localhost:3000/
  3. you should see the both .h1 from separate pages bundled into one css file.

Visit the site in https://next-css-modules.vercel.app/ looking at the console we see one that one of the css files includes all the "shapes" of .h1 even-though only one of them is called/used on the page.

I have 2 pages that share the same component, each hast its own css module and the shared component also has its own css module.

When the app is built and deployed in vercel (doesn't happen in localhost) the bundle generates a css file which includes all the places said shared component is called from with their page css.

Screenshot 2024-09-15 at 10 49 57

This seem to go against the site's performance and in bigger scale causes pagespeed and lighthouse to not like (and punish) for the increased bundle size.

Current vs. Expected behavior

Currently the generated css files in the bundle "merge" all into one file.
I would expect the generated css pages in the bundle to only include the css relevant to the current page.

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:13:00 PDT 2024; root:xnu-10063.141.2~1/RELEASE_X86_64
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 21.1.0
  npm: 10.2.0
  Yarn: 1.22.19
  pnpm: 7.26.2
Relevant Packages:
  next: 15.0.0-canary.156 // Latest available version is detected (15.0.0-canary.156).
  eslint-config-next: 15.0.0-canary.156
  react: 19.0.0-rc-206df66e-20240912
  react-dom: 19.0.0-rc-206df66e-20240912
  typescript: 5.6.2
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)

Additional context

14.1.4 : OK
14.2.5 : BROKEN
15-canary: BROKEN

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugIssue was opened via the bug report template.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions