Bug: Parsing error: Identifier is expected for :global

[crabvk]

Environment

ESLint version: 9.21.0
@eslint/css version: 0.4.0
Node version: 22.14.0
npm version: 10.9.2
Operating System: Artix Linux 6.13.4.zen1-1

Which language are you using?

stylesheet

What did you do?

Hi. I'm using CSS modules in React application with Vite. A lot of my <Component>.module.css files has :global selectors like:

:global(.some-class) {
    color: yellow;
}

When I run npx eslint . I've got a lot of

Parsing error: Identifier is expected

errors pointing to the :global selectors.

What did you expect to happen?

No error should be shown for :globals.

What actually happened?

Parsing error: Identifier is expected

Link to Minimal Reproducible Example

https://stackblitz.com/edit/vitejs-vite-opheq2hk?file=src%2Fstyle.css

Participation

• I am willing to submit a pull request for this issue.

Additional comments

No response

[nzakas]

Please submit a reproduction case so we can take a look.

There's nothing wrong with the CSS itself, it parses fine.

[crabvk]

I've added an example: https://stackblitz.com/edit/vitejs-vite-opheq2hk?file=src%2Fstyle.css
At the end of the style.css you can find:

.content {
  display: flex;

  :global(.some-class) {
    background-color: red;
  }
}

:global is inside the .content, which causes the error. It's OK if :global isn't nested.

[nzakas]

Ah I see. Yes, CSSTree doesn't yet support nested rule declarations, that's why you're getting the error. For now, you'll need to use tolerant parsing.

I'll leave this open to track nested rules.