Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
tjx666 opened this issue Aug 18, 2019 · 8 comments · May be fixed by #5
Open

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

tjx666 opened this issue Aug 18, 2019 · 8 comments · May be fixed by #5

Comments

@tjx666
Copy link

tjx666 commented Aug 18, 2019

as title...

@dzhavat
Copy link
Owner

dzhavat commented Aug 18, 2019

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

@tjx666
Copy link
Author

tjx666 commented Aug 18, 2019

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:
Snipaste_2019-08-18_18-37-47

@dwelle
Copy link
Contributor

dwelle commented Aug 18, 2019

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
Copy link
Owner

dzhavat commented Aug 18, 2019

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.

@fristys fristys linked a pull request Aug 20, 2019 that will close this issue
@tjx666
Copy link
Author

tjx666 commented Jul 26, 2021

any progress?

@dzhavat
Copy link
Owner

dzhavat commented Jul 31, 2021

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

@tjx666
Copy link
Author

tjx666 commented Feb 19, 2023

@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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants