Bug: Nested media queries report when they directly use a descriptor

[ldavidpace]

Environment

ESLint version: v9.16.0
@eslint/css version: 0.11.0
Node version: v22.19.0
npm version: v9.6.7
Operating System: darwin 24.5.0

Which language are you using?

stylesheet

What did you do?

Configuration

{
language: 'css/css',
languageOptions: {
	tolerant: true,
},
plugins: {css: css},
rules: {
'css/no-invalid-at-rules': 'error'
}
}

.responsive {
  width: 800px;
  @media (max-width: 800px) {
     width: 500px
  }
}

What did you expect to happen?

No errors reported

What actually happened?

Unknown descriptor 'width' found for at-rule '@media' css/no-invalid-at-rules

Link to Minimal Reproducible Example

https://github.com/ldavidpace/NestedMediaError

Participation

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

Additional comments

No response

[BastiDood]

Hello there! I'd like to take this bug on. I've done some experimenting and have a fix up in my branch. Just waiting for this ticket to be approved before submitting the pull request.

[xbinaryx]

@BastiDood I looked at your branch and this won’t fully solve the issue—there’s still quite a bit of work to do. Would you mind if I take a stab at this?

[BastiDood]

Thanks @xbinaryx! Of course 👍

Any pointers on the cases that I missed? Perhaps I can help out.

[xbinaryx]

@BastiDood Thanks! I’ll summarize the points in the PR—it’s quite a few.

[nzakas]

Hi folks - just a note on the process here. We need to wait until an issue is marked as "accepted" before starting work. I'll do that now, just something to keep in mind in the future. We want someone from the team to verify bugs before people open PRs to ensure we're not wasting time on something that isn't a bug.

[Pixel998]

I can reproduce this — it’s indeed a bug.

From MDN:

Any at-rule whose body contains style rules can be nested inside another style rule using CSS nesting. Style rules nested inside at-rules take their nesting selector definition from the nearest ancestor style rule. Properties can be directly included inside a nested at-rule, acting as if they were nested in a & {...} block.

Stackblitz reproduction demonstrating that this is valid syntax.

[Pixel998]

Sorry @nzakas, I didn’t realize you were triaging this too. I’ve marked this as accepted.

[nzakas]

@Pixel998 I wasn't, but I noticed people starting to work on it so wanted to jump in just to remind everyone of the process.