Hope support in the style tag in HTML and .vue file

[tjx666]

as title...

[dzhavat]

Hey, can you provide an example for how CSS looks like in a .vue file? I haven't tried Vue before.

[tjx666]

Hey, can you provide an example for how CSS looks like in a .vue file? I haven't tried Vue before.

You can see my vue code in codeSandbox example.

The effect in codeSandbox is the same as my local VSCode:

[dwelle]

If this ends up being implemented, we should also support .svelte which uses almost identical css definitions:

<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS';
		font-size: 2em;
	}
</style>

<p>These styles...</p>

Both .vue and .svelte are effectively just html files with custom file extensions.

[dzhavat]

Support for both Vue and Svelte will be quite awesome. One problem with the extension right now is that it doesn't take the context (document) into consideration because it assumes that everything is CSS. Right now it just checks if a word matches a certain regex pattern.

.vue and .svelte, or other similar frameworks, mix CSS, HTML and JS so a property named text: this is a test will also match the regex pattern even though it won't return anything on hover.

So in order to make this work, there should be some logic that checks whether the hover is inside <style> or style="" and return the relevant information.

If you have any suggestions for how to do that, you're welcome to share them. I'll think about it as well.

[tjx666]

any progress?

[dzhavat]

Hey @tjx666 I'm sorry but I haven't looked into this. Do you still need it?

[tjx666]

@dzhavat Yes, it would be helpful for vue and svelte users. Maybe we should also update the latest data. @johnsoncodehk any simple way to support it in vue?

[johnsoncodehk]

I guess you can implement a plugin to https://github.com/volarjs/plugins.