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.

[julienw]

It looks like some support is present thanks to #51, but I still see errors in my project.

Some examples:

slot {
  margin: 0;
  padding-inline-start: 0;
  user-select: none;

  @media (max-width: 52rem) {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .page-nav-icon + & {
      display: none;
    }
  }
}

-> Error at .page-nav-icon + & {

.page-nav-heading-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-small);
  margin-block-start: var(--page-nav-margin-top);

  > .logo {
  }
}

-> error at > .logo

Please tell me if having a reproducible example somewhere would help.

[nzakas]

Yes, the latest version should support almost all cases, so if you're seeing a problem, please create a repro case I can look at.

[julienw]

Sure, you can find the problem in this repository: https://github.com/julienw/csstree-bug-33

[nzakas]

Thanks! It looks like I just forgot to implement the > selector for nested selectors. That's a pretty easy fix.