Fix CSS Nesting selector validation

[Ivan Torres (torresgol10)]

Supersedes #30. Continues the work of Jacob Cassidy (@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.

[Tobias Hernstig (thernstig)]

Just a note that I think this will close many other issues:

• css syntax coloring doesn't work properly with css custom media #45
• CSS rule @property breaks code color. #46
• Support for @property #41
• etc.

I did not verify this or do a deep dive, but some comments indicate this. Might be worth to check various issues once this is merged.

[Ivan Torres (torresgol10)]

Tobias Hernstig (@thernstig) Good catch! I verified all three issues:

• css syntax coloring doesn't work properly with css custom media #45 (nested media inside selectors): Highlighted correctly with this PR ✅
• CSS rule @property breaks code color. #46 (Property breaks code color): No longer breaks subsequent highlighting ✅
• Support for @property #41 (support for Property): Property is tokenized as an at-rule ✅

Here's how it looks with this PR applied:

If anything doesn't look right, let me know and I can adjust.

A note on the red underlines (validation errors): Some newer CSS syntax like if() may still show validation warnings/errors (red underlines). This is not caused by this PR or this grammar — it comes from the vscode-css-languageservice, which is a separate repository. VS Code currently bundles an older version of that service that doesn't recognize some newer CSS features yet. The newer version of vscode-css-languageservice already has updates that address some of these, but they haven't been shipped in VS Code yet.

[Tobias Hernstig (thernstig)]

I went through all open issues and found these that this PR might fix:

• Each first nested css rule isn't highlighted properly #40
• [CSS, SCSS, SASS] Wrong syntax highlight for @container queries #49
• Missing ending bracket textmate rule for css highlighting #27

[Tobias Hernstig (thernstig)]

Ivan Torres (@torresgol10) did you get a chance to look at the last issues I linked?

[Ivan Torres (torresgol10)]

Hi Tobias Hernstig (@thernstig) , I did take a look at it, but I think it’s better to address those details in a new PR. This PR has been waiting to be merged for months, and if we add more features, it will take even longer. I think the priority is to get this feature merged. We should open new PRs for those issues. What do you think?

[Tobias Hernstig (thernstig)]

Ivan Torres (@torresgol10) agree completely, hope some maintainer can look at this now as it's been open for so long.

[Tobias Hernstig (thernstig)]

Ivan Torres (@torresgol10) Is the PR ready? How confident are you it does not break the existing highlighter?

Alex Ross (@alexr00) FYI

Martin Aeschlimann (@aeschli) if you look further up, it is ready. Alex Ross (@alexr00)

[Tobias Hernstig (thernstig)]

Martin Aeschlimann (@aeschli) Alex Ross (@alexr00) please, please review. CSS nesting has been out for over 2 years in major browsers. Is there a chance you could give someone more active maintainer status here? Since this is the built-in CSS extension I think it deserves some continuous love and to not be neglected like this.

[Tobias Hernstig (thernstig)]

Upvote #53 if you feel the same.

[Romain Menke (romainmenke)]

Martin Aeschlimann (@aeschli) It would be really great if we could apply this change before others that might conflict with it, like #52 🙇

[Alex Ross (alexr00)]

This found a bug in one of our PR checks. Fix coming soon.

[Tobias Hernstig (thernstig)]

Ivan Torres (@torresgol10) did this fix #15? #15 is a PR. Should that one be closed?

Or did you mean it fixed #18 and #18 should be closed?

[Jacob Cassidy (jacobcassidy)]

Alex Ross (@alexr00) What needs to happen for the latest vscode-css repo changes (from this PR merge) to get pushed to the vscode repo so the changes will be included in the official vscode/extensions/css/syntaxes/css.tmLaguage.json file?

[Alex Ross (alexr00)]

Pinging me is a good way to make that happen 😅. I used to run the update every release (read: every month), but now that we release every week it hasn't seemed worth running it every week. microsoft/vscode#330193