Bug: Pseudo-class selector inside nesting is not correctly parsed

[antti5]

Environment

ESLint version: 9.32.0
@eslint/css version: 0.11.0
Node version: 22.11.0
npm version: 11.2.0
Operating System: Windows 11

Which language are you using?

stylesheet

What did you do?

/* Does not work */

main {
   p:first-of-type {
      margin-top: 0;
   }
}

/* Works */

main {
   p {
      &:first-of-type {
         margin-top: 0;
      }
   }
}

What did you expect to happen?

No errors from ESlint

What actually happened?

Without tolerant mode: Parsing error: Unexpected input

With tolerant mode: Unknown property 'p' found

Additional comments

Once I introduced @eslint/css into my project, I ran into several of these issues. The CSS should be correct, is in production and works in all tested browsers.

It looks like any selector that has both element type and a pseudo-class is not recognized as a selector, but instead the parser tries to parse it as a property declaration.

The problem only occurs if the selector is nested.

[nzakas]

Thanks, yes, this is a limitation of the parser currently. To be more specific, the issue exists when using an element selector in a nested rule, so this doesn't work:

main {
   p {
      margin-top: 0;
   }
}

The problem is that p looks like it could be the start of a property, and so the parser starts down that path. I haven't yet figured out a way to make this work.

Other nested rule types work because the first character can only be interpreted as a selector.

Opened an issue on the parser for tracking:
eslint/csstree#84

[antti5]

A'ha, well that explains why I had so relatively few instances of these in a relatively large project. Most of the time the nested block also has property declarations, and if so I always put properties before selectors.

They are relatively few instances where the nested block only has a selector. I added eslint-ignore-next-line comments for these, and will remove them once this issue has been resolved.