Bug: nested css linting support

[lifedraft]

Environment

Node version: v20.19.0
npm version: v10.8.2
Local ESLint version: v9.24.0 (Currently used)
Global ESLint version: Not found
Operating System: linux 5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Which language are you using?

stylesheet

What did you do?

1. create css file with nested properties:

.hello {
  background-color: aquamarine;

  .hello-input {
    background-color: blue;
  }
}

2. configure eslint with the @eslint/css package and the configuration below
3. run the lint command

Configuration

const css = require('@eslint/css');

module.exports = [
  {
    files: ['src/**/*.css'],
    plugins: {
      css: css.default,
    },
    language: 'css/css',
  },
];

What did you expect to happen?

nested css file will be linted without parsing errors.

What actually happened?

parsing error:

❯ npm run lint

> lint
> eslint


/home/projects/stackblitz-starters-kokxdwhj/src/hello.css
  5:3  error  Parsing error: Identifier is expected

Link to Minimal Reproducible Example

https://stackblitz.com/edit/stackblitz-starters-kokxdwhj?file=eslint.config.cjs

Participation

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

Additional comments

Nested css "standard" is supported by all major browser engines and is part of the baseline from year 2023: https://caniuse.com/css-nesting

[nzakas]

Thanks for the report. This is actually a bug in the parser, not the ESLint plugin, so moving there.