postcss-language
postcss-language copied to clipboard
csstools
Syntax highlighting for nested elements is broken
When using nesting, the selectors are highlighted as css properties. They should be highlighted as selectors instead.
| Current behaviour | Expected behaviour |
|---|---|
 |
 |
@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, 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.
@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!
