search

csstools / postcss-language

Support for modern and experimental CSS within Visual Studio Code
80 stars 11 forks source link

Syntax highlighting for nested elements is broken #5

Open marcofugaro opened 4 years ago

marcofugaro commented 4 years ago

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

Current behaviour Expected behaviour
Screenshot 2020-07-15 at 17 29 45 Screenshot 2020-07-15 at 17 30 20
jonathantneal commented 4 years ago

@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 commented 2 years ago

Any updates on this?

toddprouty commented 1 year ago

@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 commented 1 year ago

@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!