Syntax highlighting for nested elements is broken

[marcofugaro]

When using nesting, the selectors are highlighted as css properties. They should be highlighted as selectors instead.

Current behaviour	Expected behaviour

[jonathantneal]

@marcofugaro, you are correct. A goal of this language extension is to handle both the syntactically valid possibilities of https://www.w3.org/TR/css-syntax-3/ as well as those achievable in most PostCSS plugins.

As defined in the CSS syntax, your example would produce a faulty img declaration (thus the color coding) that never ends until the .wrapper closes. Reference: https://drafts.csswg.org/css-syntax/#consume-list-of-declarations

However, I believe PostCSS performs a special "look-ahead" to reconsume your code (lines 2-4) as an inner-rule. I think I can and should add this same ability to this language extension. Thanks for bringing this to my attention.

[Shaker-Hamdi]

Any updates on this?

[toddprouty]

@Shaker-Hamdi, I ended up installing an alternative extension, PostCSS Intellisense and Highlighting. It handles nested syntax highlighting and Emmet abbreviations, and I haven't noticed any other issues.

From the description:

This extension is a mixed of two famous extensions postcss-language and vscode-postcss-language.

[SceptreData]

@toddprouty this is what I ended up doing, albeit with some minor grumbling. As far as I know it uses the scss language server. I don't know enough about any of this to say if that's good or bad but it's probably not ideal!