vscode
vscode copied to clipboard
microsoft
[css] Add support for CSS nesting (experimental)
It is already possible today to use CSS nesting based on the working draft with PostCSS and the PostCSS Nesting plugin.
Unfortunately doing so throws a whole bunch of errors: css-rcurlyexpected, css-lcurlyexpected, css-selectorexpected, css-ruleorselectorexpected, ...
It would be great if there would be a way to enable support for this upcoming feature (experimental features flag?)
You can set
"css.validate": false,
in your settings.json to disable all syntax highlighting for CSS files.
Chromium has just implemented experimental CSS nesting support and the CSSWG confirmed that the syntax will not change any more. At this point of time, there is no reason any more not to implement CSS nesting support in VSCode. As already mentioned by @Th3S4mur41, nesting is also already possible with a PostCSS plugin. Now that Chromium has an implementation, Apple and Mozilla will probably follow soon, and then things can go pretty quickly. So in my opinion now the time has come to implement nesting support in VSCode.
I've opened an issue on microsoft/vscode-css-languageservice, which is a more suitable place for this discussion to continue.
Is there any update? need the support. I configured css file association as scss, but code comments would turn into '//', which would cause error.
No work is planed until we get a few green boxes here: https://caniuse.com/css-nesting
Experimental in Chromium 109 is a good first step to gather feedback and move the spec forward 😊 Let's hope the other will follow soon
You can use this extension temporarily. https://marketplace.visualstudio.com/items?itemName=csstools.postcss
CSS Nesting is shipping in 2 days to Chrome 112.
VS Code is currently not highlighting it correctly.
CanIUse has not been updated yet at the time I write this comment, but with recently released Edge version 112, CSS nesting is working there, too (not exactly a surprise, given the common render engine).
Very green now!
sure , but some people work on desktop app (nwjs,electron) with chromium ! so it supported since the start !
No work is planed until we get a few green boxes here: https://caniuse.com/css-nesting
So the team should not wait until it fully supported ! You penalizes a developers branch that doesn't necessarily develop web content and would like use last technologie. disable css rule it not suitable ! i hope we can see soon a update !
I tried a few extensions. I think this one works fine: https://marketplace.visualstudio.com/items?itemName=csstools.postcss
I tried a few extensions. I think this one works fine: https://marketplace.visualstudio.com/items?itemName=csstools.postcss
it broke intellisence
But this one seem do the jobs. (forked with fix) https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-postcss
you just need install new formater like prettier because eslint,vscode seem not format the file.
But this one seem do the jobs. (forked with fix) https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-postcss
Actually I intended to refer to this one! Thank you.
Nesting supported at a Global-rate of 40.94% right now.
But I understand Microsoft and VS-Code as a product, not want to misslead anyone that's not deep into the subject and risk breaking stuff for their customers. However, it would be nice if VS-Code itself would be able to offer some kind of setting to use "experimental features syntax-highlighting". Instead of installing a bunch of formatters that's not officially supported.
This is already stable in Chrome and Safari, it should be supported natively.
Actually I intended to refer to this one! Thank you.
seem issue with the plugin type in postcss for @container query
I hate it
1.78 has parsing support for css nesting. What's still missing is the syntax highlighting.
[...] What's still missing is the syntax highlighting.
REALLY missing!
Bumping this issue since nesting is used now in every production project I work with, and there is a big shift going on from sass to a lighter-weight combo css + postcss.
in a free and open-source projects, developers behind will often work themselves on what they love and do things they like. I don't think anyone on the vscode team wants to take care of this feature (maybe pain to work), hence the bizarre and strange excuse "we are waiting for full web support."
I was under the impression the nesting syntax without the & (for example .parent { .child {...} } was invalid because vscode syntax highlighting breaks, and makes the child selector looks like a property. I assumed that since it was breaking syntax highlighting, it wasn't valid.
Turns out & is optional in that use case and the syntax issue led me here.
