Turbopack incorrect css modules load order when consuming external components

[bruno12mota]

Link to the code that reproduces this issue

https://github.com/bruno12mota/next-styles-order

To Reproduce

1. pnpm i
2. Start app pnpm dev
3. Open app http://localhost:3000/

Current vs. Expected behavior

CSS modules styles are applying in an incorrect order when consuming external components.

On this particular example, I'm expecting that the styles.differentBg is applied with higher priority than the styles applied to LinkButton component on its styles since it's being imported before.

Here's the order of applied styles I'm getting:

As you can see differentBg is coming before styles imported in the LinkButton component. This seems to happen only for external components since I've also included a LocalButton that is doing the same thing but has the styles applied in the correct order:

All of this works correctly if not running with turbo.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.3.0: Wed Dec 20 21:30:44 PST 2023; root:xnu-10002.81.5~7/RELEASE_ARM64_T6000
  Available memory (MB): 65536
  Available CPU cores: 10
Binaries:
  Node: 18.20.4
  npm: 10.7.0
  Yarn: N/A
  pnpm: 7.33.6
Relevant Packages:
  next: 15.0.0-canary.96 // Latest available version is detected (15.0.0-canary.96).
  eslint-config-next: N/A
  react: 19.0.0-rc-3208e73e-20240730
  react-dom: 19.0.0-rc-3208e73e-20240730
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

Module Resolution, Turbopack

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

next dev (local)

Additional context

No response

[samcx]

@bruno12mota Thank you for submitting an issue!

Interesting it's not working with that particular external component. I'll share this with the team!

[joelwhalar]

@samcx I have exactly the same issue, we are consuming our component library in the consumer project, the component library uses css modules same as the consumer project, but the styles from the external library are at the bottom of the generated css file wish makes them more specific than the local styles from the consumer project.

I have started testing since when this is happening, seems the bug was introduced in 14.2.0 it works for me in 14.1.1. I also tested 14.2.5 wish where I originally detected the issue.

Generated DEV CSS Files:
14.1.1:
page-14.1.1.txt

14.2.0:
page-14.2.0.txt

[bruno12mota]

Still not working on 15.0.0-canary.135.

Would be great to know if this is something being worked on right now or if we should find out an alternative solution.

[timneutkens]

It's been triaged and it's being worked on.

[bruno12mota]

Closing since this seems to be fixed, thanks!

[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.