Skip to content
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.

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

Turbopack: :global CSS selector fails with "Ambiguous CSS module class not supported" #77522

Open
graulund opened this issue Mar 26, 2025 · 0 comments
Labels
CSS Related to CSS.

Comments

@graulund
Copy link

graulund commented Mar 26, 2025

Link to the code that reproduces this issue

https://github.com/graulund/next-turbopack-global-css-issue

To Reproduce

  1. Start the app in development using Webpack (npm run dev)
  2. Observe the page loads without error
  3. Start the app in development using Turbopack (npm run dev-turbo)
  4. Observe a build error on line 7 of styles.module.css ("Ambiguous CSS module class not supported")

Current vs. Expected behavior

I would expect the same CSS module code to work regardless of whether Webpack or Turbopack is used. That is, I would expect both :global(...) and :global ... to work. Right now, only the first one works in Turbopack. Both seem to be valid expressions in CSS modules (see https://css-modules.github.io/webpack-demo/, section "Global Selectors").

Alternatively, I would expect this relatively cryptic error message to be described in detail somewhere. I found nothing on Google searching for this error message ("Ambiguous CSS module class not supported").

Instead of the same CSS module code working regardless of whether Webpack or Turbopack is used, I get this error on Turbopack:

Parsing css source code failed
   5 |
   6 | /* Works with Webpack, fails on Turbopack */
>  7 | .container :global .test {
     |              ^
   8 | 	color: red;
   9 | }
  10 |

Ambiguous CSS module class not supported at [project]/app/styles.module.css:6:13

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.3.0: Thu Jan  2 20:24:23 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T6020
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 23.7.0
  npm: 11.2.0
  Yarn: N/A
  pnpm: 10.6.5
Relevant Packages:
  next: 15.3.0-canary.23 // Latest available version is detected (15.3.0-canary.23).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.8.2
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

Perhaps vaguely related to #74309, although that PR seems to be addressing a different issue (erroneous filename).

@github-actions github-actions bot added the CSS Related to CSS. label Mar 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Related to CSS.
Projects
None yet
Development

No branches or pull requests

1 participant