search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.94k stars 26.87k forks source link

Mismatch of container names in css modules with turbopack #71233

Open Arctomachine opened 6 days ago

Arctomachine commented 6 days ago

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/hopeful-glitter-hnqhd2?workspaceId=f39ae497-1a35-407f-93a6-5eadc931f17c

To Reproduce

  1. Start dev with --turbo
  2. Look at colored boxes on page
  3. Restart server without --turbo to verify

Current vs. Expected behavior

Currently: one box (nameless query) is green, another box (query by container name) is red Expected: both green

What happens: lightningcss applies module name to container name in query, so it is not what was declared in globals.css

It is exactly same issue as #64509 (fixed by #65986). But unlike grid names, it cannot be worked around as described in https://github.com/vercel/next.js/issues/64509#issuecomment-2075026225

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 15.0.0-canary.189 // Latest available version is detected (15.0.0-canary.189).
  eslint-config-next: N/A
  react: 19.0.0-rc-cd22717c-20241013
  react-dom: 19.0.0-rc-cd22717c-20241013
  typescript: 5.3.3
Next.js Config:
  output: N/A

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

Turbopack

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

next dev (local)

Additional context

No response

kdy1 commented 4 days ago

It seems like it's intentional. https://github.com/parcel-bundler/lightningcss/pull/835#issuecomment-2414890089

Arctomachine commented 3 days ago

Yes, and as Tim said in https://github.com/vercel/next.js/issues/64509#issuecomment-2126793345, compatibility with existing flow is higher priority - why grid area names were reworked in the end

kdy1 commented 3 days ago

No worries 😄 I added an option instead (https://github.com/parcel-bundler/lightningcss/pull/835#issuecomment-2416106423) and we will enable that option to maximize compatibility with existing codebases.