Autocomplete and syntax highlighting for style attributes

[techniq]

Coming from React/JSX, you could get the list of CSS properties within the style property/attribute and have syntax highlighting.

It uses object notation instead of a string, although this surprising this still shows up within a Svelte component (albeit not supported). I figure due to the use of svelte2tsx

It would be useful if the same was supported within Svelte when using the style attribute (string).

It would also be helpful if the expressions within the values were highlighted as such (and not just shown as one big string).

[tanhauhau]

Reading through how this works in VSCode HTML language server, it seemed like they are using tokenizer to map out different language regions in the HTML document.

https://github.com/vscode-langservers/vscode-html-languageserver/blob/master/src/modes/embeddedSupport.ts#L26

seeing how we map out script, context script, style from the Document, it seemed like we are doing at a different approach.

i want to work on this, but i am wondering what is the recommended approach here to figure out the language mode?

[jasonlyu123]

We're currently using vscode-html-languageserver's parser to do style/script tag extraction. The parser also uses the same token scanner to parse the file. so we could probably use the parsing result to get style attributes. And if there's an advantage using the token scanner maybe we could migrate to that.
After the style attributes have been extracted, the next problem is how do we handle the interpolation. With the mustache, the code is not valid CSS so the problem is how do we transform it to let CSS language service to understand it?
As for the language modes, the plugin in our codebase is similar concept. Maybe we can create another plugin for the style attributes and shared some logic with the CSS plugin.

[dummdidumm]

Orthogonal to that is the syntax highlighting for which svelte.tmLanguage.json needs to be adjusted.

[dummdidumm]

The syntax highlighting part where moustache tags are not highlighted will be fixed with the next release.

[jasonlyu123]

Turn out the scanning is required because the parsing result doesn't have the positioning of the attribute. I created a helper function for this in the branch for CSS class name completion for the class attribute.

We can use it to extract the range of the style attribute value. And create another StyleAttributeDocument to handle position mapping. @tanhauhau still interesting in implementing this?

And about the interpolation, maybe we should just don't provide features when we detect interpolation.

Also, seems like we destroy the style syntax highlight in the syntax highlight revamp?

[Monkatraz]

Adding syntax highlighting inside of style strings was something I added but it was removed when it had a few issues. I don't know how the TSX grammar handles it - it's probably something goofy, like writing their own CSS syntax highlighting for just style strings.

Right now there is a hesitation to add further syntax highlighting without a test suite, but otherwise I'd be willing to experiment with this.