Add support for nested CSS

[romainmenke]

At this time nested CSS is not support because at rule and selector patterns aren't included in rules.

---

• specification : https://drafts.csswg.org/css-nesting/
• wpt : https://wpt.fyi/results/css/css-nesting?label=master&label=experimental&aligned&q=nesting
• mdn docs : https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector
• shipped in all browsers

[romainmenke]

This feature is impossible to add safely without a working test suite for this package.

[radium-v]

Hi,

My extension Better Less has full syntax highlighting support for nested selectors, and also works with plain CSS. Would it be possible to adapt the work I've done there for this extension?

@romainmenke if could you point me to any similar packages that have a qualifying working test suite that I could use as a guide for implementing it here, I'd be happy to help out.

[romainmenke]

Hi @radium-v,

For test discussions I opened this issue : #8
I asked the same question to the maintainers but haven't had any reply yet :/

At this point it is not the work itself that is the issue, but rather knowing that is correct and doesn't introduce regressions in existing features.

So having another extensions that we could adapt bits from does help at some level but it doesn't unblock this work.

[jacobcassidy]

I saw the issues holding back adding CSS Nesting in VSCode so I created the CSS Nesting Syntax Highlighting extension which can be used until it's natively available. We can merge the extension code into vscode-css after testing.

I also added syntax highlighting for@container and functions in at-rules, such as @media (max-width: calc( (768 / 16) * 1rem )) {} into the extension. We would need to create separate PRs for them, of course.

GitHub Repo
VCode Marketplace Page

When I have more time, I'll run the tests mentioned in #8 and submit PRs if the maintainers like added grammar.