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 : https://github.com/microsoft/vscode-css/issues/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.

[wesbos]

with container queries and nesting now in all browsers - is it possible to get some urgency on implementing this? CSS highlighting is kind of broken in VS code right now

[romainmenke]

Maybe interesting to make this a community funded effort?

I (and maybe others?) could do this work but it is too large to do in my free time in between 9 to 5, doing dishes, ... Having funding would allow me to work on this on the job.

Having good native editor support for CSS is really important for the web, all frontend developers and also has tremendous value for Microsoft as a selling point for VSCode.

I could setup a sponsoring goal on the CSSTools org to gather funds if people are interested in this?

[radium-v]

I'm currently working on a variant extension called Better CSS, but it's in very early stages (so far at-rules are the only things implemented).

[romainmenke]

@radium-v It would be nice to see something like this integrated into VSCode itself. Given that nesting is standard CSS and that VSCode supports standard CSS out of the box.

Ideally users shouldn't need to install an extra extension to be able to write more modern standard CSS :)

Is this something you think that could be back ported into this package?

[radium-v]

8 and #23 would go a very long way towards accelerating development here. I've looked at side-porting to get features in here but this grammar file is written in CSON which makes it difficult to contribute. This is why I'm rewriting it as a standalone extension in my personal time.

(For what it's worth, vscode's built-in Less syntax highlighting is now using Better Less, and nested declarations were one of the main reasons why I wrote Better Less in the first place.)

[jacobcassidy]

I submitted a PR that should close this issue (#30).

I currently have limited time, so if anyone else wants to test the updated css.cson file (converted from the CSS Nesting Syntax Highlighting extension's css.tmLanguage.json file), that would help speed up the progress.

[romainmenke]

Thank you for this effort @jacobcassidy 🎉

if anyone else wants to test the updated css.cson file

As I've already mentioned here, there currently isn't any test suite for this repo. That means that any non-trivial changes can't be tested or verified automatically. It also means that we can't guard against future regressions.

Mutating this repo without first investing in a test suite seems like a bad idea imho. It would increase complexity and thus the amount of technical debt.

Fixing tests first and then making changes seems like a more sustainable path forwards.

---

This is why I'm rewriting it as a standalone extension in my personal time.

@radium-v If you can use any help with this? More than happy to lend a hand!

[jacobcassidy]

@romainmenke Agreed, a test suite would be ideal moving forward.