Skip to content

Mismatch of container names in css modules with turbopack #71233

@Arctomachine

Description

@Arctomachine

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 #64509 (comment)

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

Metadata

Metadata

Assignees

Labels

TurbopackRelated to Turbopack with Next.js.bugIssue was opened via the bug report template.linear: turbopackConfirmed issue that is tracked by the Turbopack team.locked

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions