[Feature Request] Emmet support

[cartok]

It would be good to have Emmet autocompletion.

[pucelle]

Could you provide some examples, like Emmet you input as test cases?

[cartok]

Hey, thanks for reply. I also read the reply on vscode extension page. I will come back to this all in a few days, promise. Will have enough free time.

[pucelle]

Hi, cartok,

For the first problem, It breaks on vscode window reload action, you may get debugging info according to the output panel:

For the second, The CSS class auto-completion only works for one class, I don't get what's the meaning.

For the third, Suggestion sorting does not work well with numbers, I'm sorry but this would be very hard to do, because vscode sort completions come from all plugins by their relationship. there is a sortText property can sort completion items within a plugin, and it may affect completion items come from this plugin, but vscode never describe how it works, so can't ensure it works.

For the forth, CSS variable suggestions can appear twice for a variable only defined once, I have fixed it for all completion types, and released to v2.1.0, but you may still get repetitive items come from other plugins.

[pucelle]

Now this emmet feature.

I have simulate an environment for both completion and emmet, and found they can't work together:

If choose class name completion to complete class name, emmet completion get canceled, you should call completion menu manually by shortcut key, or enter another character to wake emmet completion menu.

I also found when emmet completion exist, it prevents you get other completions, you can only get normal completion after inputted like backspace which cause emmet completion not fully match, other completion items then appear.

I guess this is not your expected, and the best solution should be: start an issue for vscode.

[pucelle]

I don't get how there can be so much development on vscode main everyday, and we still do not have good CSS support these days.

I agree, vscode has provided good html & css service for a single document, but when scaling it to whole workspace, it has many new challenges to consider about:

1. No spec describe what and how to do, all by your experience and requirements.
2. how to match html to css selectors, it would be easy to match a .class-name, but selectors nowadays become very complex. this plugin choose to only match every single class name and id.
3. when html and css codes embed into another file, and where there are interpolation expressions within, how to parse them, and parse them efficiently, this is a hard problem. if load whole js/jsx/ts/tsx services, it's a disaster for package size/CPU/Memory. this plugin choose to satisfy most cases, not every.

So, there is not a perfect plugin, what you can get is only a better one.

I made this plugin only for one reason, I need these features, and another plugin CSS Peek provides some, and is 10x or more in package size, parsing time, searching time, CPU and memory usage.

[pucelle]

Another good news, I have implemented numeric sorting and released v2.1.1.

[pucelle]

Update, has released v2.2.0 and support full service for css variables, and provide a disableOwnCSSVariableCompletion option to avoid css variable completion repetitive with default completion service.

Set disableOwnCSSVariableCompletion to true can avoid duplicate css variable completions, but it will also make expressions like color-mix(in srgb, --) can't get completion.

[cartok]

• To the emmet topic: I get that it would be a workaround. Opening a vscode issue might be the cleanest solution, yea. https://github.com/microsoft/vscode/issues/238066

• Nice to see that you already fixed and improved things, I can confirm that it works!

• In general this plugin is best of all also in terms of performance I believe. Still, there was a day where suddenly my CPU ran full speed all the time and RAM usage was crazy. I checked resources and the reason were many heavy processes of the extension. Back then, I had debugging logs disabled and didn't dig into it further because I also was in the middle of something. If this comes ever up again in my development context, I try to get better information.

• I still see the issue with the need for an initial letter for CSS class completion: https://github.com/pucelle/vscode-css-navigation/issues/99

[pucelle]

Sorry for the troubles this plugin brings to you -- yes, old versions, may 2.0.0-2.0.1, and 2.1.0-2.1.1, have two token parsing problems, which will cause infinite looping problems.

The new version v2 has changed too much, I keep accepting issues on the days after release it. Right now the new v2.3 should become much stable.

[cartok]

Don't be! Thank you very much for your great effort. We can be happy to have you around, finally bringing a good CSS extension. I hope others of that kind, will be marked as deprecated or get deleted... Would be good if MS would take care to get rid of dead and bad extensions.