css from dependencies get higher priority over local css

[poulet42]

Link to the code that reproduces this issue

https://github.com/poulet42/repro-vendor-css-next

To Reproduce

Context

The reproduction repository uses turborepo to highlight the issue with an external package.

in packages/ui/button.module.css, the background of the button is set to red.
in apps/web/app/page.module.css, the background of the button is set to blue. The class is passed to the button with a className prop.

Reproduction instructions

with app router

1. start the "web" application (pnpm dev --filter=web)
2. the button appears to be red, inspect the page.css file, the style from ui appears after the page style
   --

with pages router

1. start the "docs" application (pnpm dev --filter=docs)
2. the button appears to be blue, inspect the style, the style from ui appears before the page style

Current vs. Expected behavior

Style from "vendors" should not take precedence over local app style, or at least there should be a way to control the order.

So vendor styles should appear before the app styles.

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.2.0: Thu Nov  9 06:29:23 PST 2023; root:xnu-10002.60.71.505.1~3/RELEASE_ARM64_T6000
Binaries:
  Node: 21.2.0
  npm: 10.2.3
  Yarn: N/A
  pnpm: 8.9.0
Relevant Packages:
  next: 14.0.4-canary.47
  eslint-config-next: N/A
  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)

App Router

Additional context

Can't say which canary introduced this, but it does work with the page router.

[melodyarcjason]

I am encountering this issue myself. My reproduction steps:

1. Load landing page - content appears as expected with proper styling applied.
2. Navigate to another page in the application
3. Return to home page via router.push('/')
4. Observe the styles are being overwritten by dependency defaults

(My local style is prefixed with homePage_logoContainer)
Initial Load:

Load after navigating back:

[Netail]

Experiencing the same issue, but with the app router. Related; #64921