next.js
next.js copied to clipboard
Mismatch of container names in css modules with turbopack
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/hopeful-glitter-hnqhd2?workspaceId=f39ae497-1a35-407f-93a6-5eadc931f17c
To Reproduce
- Start dev with --turbo
- Look at colored boxes on page
- 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