:global not working with turbopack in next.js 16

[rsallar]

Hi, It seems next.js turbopack (defaults in v16) does not support :local and :global pseudo classes.

The error is

'global' is not recognized as a valid pseudo-class. Did you mean '::global' (pseudo-element) or is this a typo?

Import trace:
  Client Component Browser:
    ./node_modules/@svar-ui/react-gantt/dist-full/index.css [Client Component Browser]

Official documentation: https://nextjs.org/docs/app/api-reference/turbopack#unsupported-and-unplanned-features
Nextjs issue: parcel-bundler/lightningcss#6
LighteningCss issue: parcel-bundler/lightningcss#6

Is there any option to have this working with turbopack?

Workaround is to revert to webpack. E.g npm run dev --webpack

[Zwillinge]

Hello,

I have checked the code, and it appears that in SVAR we do not use legacy :global {} non-function syntax, only the function one, which they recognize to be supported.

But we have such constructions as .wx-pressed:not(:global([disabled])) which are probably not correctly parsed because of being inside the :not pseudo class.

You can try to ignore these warnings with something like

"selector-pseudo-class-no-unknown": [true, {
  "ignorePseudoClasses": ["global", "local"]
}]

Or slightly adjust the selector :not(:global(\[disabled\])) if it fails on build.

Please, confirm whether this helps or not. We may adjust the sources in the similar way.