Skip to content

Conversation

@torresgol10
Copy link

@torresgol10 torresgol10 commented Nov 21, 2025

Supersedes #30. Continues the work of @jacobcassidy to add CSS Nesting support.

This should fix #9 and #15.

Changes:

Updated css.cson to allow & followed by identifier characters.
Added tests in css-spec.mjs covering nesting scenarios.

Copilot AI review requested due to automatic review settings November 21, 2025 10:16
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR adds CSS Nesting support by fixing the validation of the nesting selector & when followed immediately by other selector parts (e.g., &:hover, &.foo). The grammar now correctly recognizes & as a valid nesting selector and includes it in selector matching patterns throughout the grammar.

Key Changes:

  • Added nesting selector & as a valid selector type with scope entity.name.tag.nesting.css
  • Updated selector validation patterns to include & in lookahead and lookaround assertions
  • Added comprehensive test coverage for CSS nesting scenarios

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File Description
spec/css-spec.mjs Adds four comprehensive test cases covering the nesting selector & in isolation, with classes, with pseudo-classes, and with combinators
grammars/css.cson Updates the CSS grammar to recognize & as a valid nesting selector, refactors arithmetic operators, adds function nesting support, and updates selector validation patterns to include & in various contexts

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

}
{
'include': '#property-values'
},
Copy link

Copilot AI Nov 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trailing comma after the object in the patterns array. This is invalid CSON syntax and will cause a parsing error.

Suggested change
},
}

Copilot uses AI. Check for mistakes.
@torresgol10
Copy link
Author

@microsoft-github-policy-service agree

@thernstig
Copy link

@torresgol10 does this need to be fixed here?

jacobcassidy/vscode-css-nesting-syntax-highlighting#8

@torresgol10
Copy link
Author

Hi @thernstig , thanks for linking that issue! It's an interesting topic.

However, this PR won't fix that problem. The directives mentioned (@variant, @utilities, @apply, etc.) are Tailwind-specific syntax, not standard CSS. This PR focuses solely on native CSS Nesting support as per the W3C specification.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add support for nested CSS

3 participants