Consider moving emmet completion provider for css to css language service

[ramya-rao-a]

In the new emmet, you get css abbreviations inside the <style> tag. But you get it everywhere inside the style tag including the selectors which is not valid.

Contents of <style> tag should be re-parsed as css to find valid locations for emmet abbr expansion

Or the emmet completion provider for css should be moved to the css language service

[ramya-rao-a]

Moving emmet completion to css language service will also help in sorting the emmet suggestion among css suggestions See the discussion in #28933

This will also help giving css emmet completions inside the style attribute in html tags. See #29066

[ramya-rao-a]

The sorting issue has been fixed with microsoft/vscode-emmet-helper@04593ca

Abbreviations like ttu (emmet givestext-transform: uppercase) or tac (emmet gives text-align: center; will now be shown on the top

[ramya-rao-a]

Things to do to get emmet support in css language service:

• Get UMD version of the emmet helper and hook it up with the language service
• Pass emmet settings from css client to css language service initially and on every change in these settings
• Currently the syntax profiles, variables and custom snippets can be defined in an external file, that is read by the vscode-emmet-helper module and then combined with the values from the settings. This needs to move out to the css client and passed to the language service along with rest of the emmet settings

[ramya-rao-a]

Update:
We ended up having the emmet logic in the css language server instead of the css language service
Most of the required work is done. See #41652
Waiting for next version of LSP that will have the change for new completion trigger kind, and so this is moved to the next iteration

[jens1o]

In case you need somebody for extensive testing, I'm available for you! :)

[ramya-rao-a]

Thanks @jens1o!
I'll mention you here in this issue when its ready which should be sometime in the second week of February.

[ramya-rao-a]

Calling for emmet champions, especially the ones who helped me a ton last year
@smlombardi, @jens1o, @vvs, @niichie, @tklepzig

This feature is now complete and can be tested on latest Insiders dated 2/13
If you are using Win 64 bits, then please wait another day and test on the Insiders dated 2/14

Try out css emmet completions in css/less/scss files and also inside the style block in html files

[jens1o]

Yeeaaaahh. But now I have to wait until tomorrow. :/

[smlombardi]

!important does not offer a completion

[ramya-rao-a]

@smlombardi Fixed. Try again with tomorrow's build

[jens1o]

Working great so far!

Thank you very much. :)

[ramya-rao-a]

This work has been reverted due to #44840 and #44352.
Re-opening and moving to March

[jens1o]

Will this affect the insiders release, too?

[ramya-rao-a]

@jens1o Yes, currently its reverted in Insiders release and will not be present in the upcoming 1.21 stable release.

[jens1o]

Alright, I'll keep my eye sharp to test it once it's back ;)

[ramya-rao-a]

microsoft/vscode-css-languageservice#81 and microsoft/vscode-css-languageservice#69 are 2 issues in the css language service that stops us from moving emmet to the css extension

[ramya-rao-a]

Below were the advantages we were hoping for by moving the emmet css completions to the css extension

• Emmet css completions in style attribute in html files
• Reusing the parsing done by the css extension and not relying on the css parser from emmet which tends to get much slower for larger files.

The second problem got solved when we implemented the partial parsing of css files last milestone. See #43470 (comment)

The first problem can be solved in other ways.

Since we have upstream issues that block this move and there isn't much to gain out of this move, we are closing this item and will continue to keep css emmet completions in the emmet extension itself