Skip to content

add support for standalone :global :local in css module with turbopack #79348

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
mblandr opened this issue May 18, 2025 · 1 comment
Open

add support for standalone :global :local in css module with turbopack #79348

mblandr opened this issue May 18, 2025 · 1 comment
Labels
CSS Related to CSS.

Comments

@mblandr
Copy link

mblandr commented May 18, 2025

Link to the code that reproduces this issue

https://github.com/mblandr/turbopack

To Reproduce

start project without turbopack - css module works fine.

with turbopack on, you will get error:

Parsing css source code failed

1 | .page :global {
| ^
2 | width: 300px;
3 | height: 300px;
4 | border: 1px solid #000;

Ambiguous CSS module class not supported at [project]/src/app/page.module.css:0:8

Current vs. Expected behavior

current - error parsing css module in turbopack mode
expected - parsing module correctly like without turbopack enabled

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Available memory (MB): 65468
  Available CPU cores: 20
Binaries:
  Node: 22.15.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: 10.10.0
Relevant Packages:
  next: 15.3.2 // Latest available version is detected (15.3.2).
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

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

CSS

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

next dev (local)

Additional context

No response
@github-actions github-actions bot added the CSS Related to CSS. label May 18, 2025
@marko-hologram
Copy link

As far as I know, this is currently a limitation of Lightning CSS which is used in the background to parse and transform CSS. parcel-bundler/lightningcss#6

Judging by that issue I've linked, this isn't going to be updated and Lightning CSS won't support this :global {} type of selector where you can nest other selectors under it. Your best bet is to rewrite this CSS.

If for example you've used :global {} like this:

:global {
  .icon {
    ...
  }

  .test {
    ...
  }
}

You must rewrite it to use the function like syntax:

:global(.icon) {
  ...
}

:global(.test) {
  ...
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS Related to CSS.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@marko-hologram @mblandr