Bug: Parsing error when having several nested parentheses blocks in a media query

[julienw]

Environment

Node version: v24.13.0
npm version: v11.9.0
Local ESLint version: v10.0.2 (Currently used)
Operating System: linux 6.12.63+deb13-amd64
@eslint/css: v0.14.1

Which language are you using?

stylesheet

What did you do?

Configuration

import css from "@eslint/css";

export default [
    {
        files: ["**/*.css"],
        plugins: { css },
        language: "css/css",
    },
];

@media not ((prefers-contrast) or (forced-colors)) {
  button.badged::after {
    background-color: red;
  }
}

What did you expect to happen?

The file can be parsed.

What actually happened?

Parsing error:

/home/julien/travail/git/eslint-css-media-parsing/style.css
  1:13  error  Parsing error: Number, dimension, ratio or identifier is expected

Link to Minimal Reproducible Example

https://github.com/julienw/eslint-css-media-parsing

Participation

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

AI acknowledgment

• I did not use AI to generate this issue report.
• (If the above is not checked) I have reviewed the AI-generated content before submitting.

Additional comments

No response

[DMartens]

Thank you for raising this issue.
The issue seems to be that the syntax data for media lists is out-of-date.
I'll investigate this further this week.

[sethamus]

@DMartens I can take a look at this if you'd like.

[DMartens]

I already diagnosed the problem:
The maximal lookahead we currently use deciding whether it is a property or selector is too small.
So we need to replace this logic with something more robust and I'm going to check what other CSS parsers are doing for this problem.