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

[graulund]

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).

[Bug-Hanter]

have the same issue, any updates?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[1yasa]

+1, this make turbopack useless.

[349989153]

.container {
  :global (.test) {
    color: red;
  }
}

this works for me

[LucaNerlich]

Since 15.3.0 css modules are not working as before. My whole app looks somewhat broken. Had to downgrad to 15.2 again.

[dBianchii]

+1. I am on 15.3.1 and I get this:

[sokra]

Turbopack uses lightningcss for CSS Modules support. Unfortunately this syntax is not supported by them: https://lightningcss.dev/css-modules.html#unsupported-features

As mentioned above the function-style :global(...) is supported instead.

[1yasa]

Turbopack uses lightningcss for CSS Modules support. Unfortunately this syntax is not supported by them: https://lightningcss.dev/css-modules.html#unsupported-features

As mentioned above the function-style :global(...) is supported instead.

problem is，no optional fully css module support，this breaking change is so "crazy" for older project and someone who like using :global.

useSwcCss is important, or postcss support, nextjs is being not better on DX for this "feature", i guess this is because most infra developer in vercel don't write business code, so they don't care.

Just saying: "using :global()"🤣!!!

Guys u really know how terrible for using : global () instead of :global{}.

Let fully css module back! Thanks! Please! 🙏

[LucaNerlich]

We dont even use :global or something. Just super plain css, via component.module.css and then imported as import styles from './component.module.css in our .tsx files. NextJS 15.3 completly broke all our apps visually. For now, we can only wait.

We are not using turbopack btw.

[miguelski]

i have the same issue in nextjs 15

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[timneutkens]

@LucaNerlich please open a new issue with a reproduction. No changes were made to that. This issue is about Turbopack.

[timneutkens]

:global as a selector is not supported, only :global() as documented: https://nextjs.org/docs/app/api-reference/turbopack#unsupported-and-unplanned-features.

@1yasa I understand that you might be frustrated but there's really no need to throw around baseless accusations. Turbopack uses LightningCSS, which is the standard for CSS compilation used by all other modern tools too. On top of that Turbopack supports PostCSS, and custom webpack loaders, so you have every opportunity to customize.
If you want LightningCSS to support :global or :local you can send a PR to the project: https://lightningcss.dev/. There's nothing stopping you from investigating that. What you'll find is that there is a good reason it is not supported.