Color Picker not working in VS Code with Svelte Extension

[ejoflo]

According to the feature list for the Svelte for VS Code extension:

CSS / SCSS / LESS
"Color highlighting and color picker"

However, when I open a .svelte file, and add a color or background-color property to under the <style> tag of said .svelte file, there is no color picker displayed.

The settings have the following enabled:
svelte.plugin.css.colorPresentations.enable - TRUE

[jasonlyu123]

hmm... that works for me. Can you provide the content in your style?

[ejoflo]

Here's a screenshot of a .svelte file, notice that there is no color picker on the background-color property. I've tried restarting VS Code and removing all extensions while leaving the Svelte for VS Code enabled. Still no color picker.

[jasonlyu123]

oh! only the top-level one would have that. If it's under another tag it won't have CSS language feature. Only the component style would.

[ejoflo]

oh! only the top-level one would have that. If it's under another tag it won't have CSS language feature. Only the component style would.

Thanks for the reply. Could you clarify what you mean by "top-level"? The style tag above is inside of a Header.svelte component. Is that not the same as a "component style"? Thank you.

Update: Okay I see what's happening here, my <style> tag is actually on the bottom of my file. When I moved the <style> tag to the top the picker appeared. Is there a reason why it won't work when the style tag is at the bottom? Thanks.

[jasonlyu123]

not a child of any tag.

<!-- this one -->
<style>

</style>

<svelte:head>
	<!-- not this one -->
	<style>
		.a {}
	</style>
</svelte:head>

https://svelte.dev/repl/6bdac66b78064f57ab2d12e425ff60f1?version=3.24.0

[ejoflo]

This bug seems to be related to the Svelte prettier plugin. My current configuration is as follows:

"svelteSortOrder" : "scripts-markup-styles",

Since my <style> tag is located at the bottom of my .svelte file, it loses the color picker. When I move the <style> tag all the way to the top of the file, the color picker re-appears.

[jasonlyu123]

if it's not under any tag? Do you have any self-close tag before it?

[ejoflo]

No, it is not under any tag. The <style> tag is independent.

[jasonlyu123]

Can you provide the entire file or just the reproduable

[ejoflo]

Can you provide the entire file or just the reproduable

Sure, here it is on REPL:
https://svelte.dev/repl/9a3f422b49ec4097a1fd6e294b1bb386?version=3.24.0

[jasonlyu123]

This is another form of #194 once you have an end tag of svelte:window instead of self-close the error would be gone.

[jasonlyu123]

I was wrong. It's somewhat related topics to it. The actual problem is the arrow function. The parser thinks the tag has ended so it treat anything after it as text until it encounter a opening/closing tag again. So the self-close is ignored because it thinks it is just a text.
The repl's syntax highlight parser also does the same thing so that's why anything behind it has no syntax highlight.

[jasonlyu123]

I don't think this can be fixed soon. Maybe you can work around it by moving the event handler to the script.

[dummdidumm]

The REPL link shows me an empty file so I cannot reproduce this. Could you post the failing sample code directly in this issue @ejoflo ?

[jasonlyu123]

minimal reproducible

<svelte:body on:click={() => {}} />

<style>
   div { 
        background-color: #ffffff
    }	
</style>

[jasonlyu123]

Maybe we could allow multiple style sections in a single document in CSSPlugin and let the svelte compiler judge if there are multiple root style elements. That can enable language feature on style element like this

<svelte:head>
  <style>

  </style>
</svelte:head>

and also pave the way for language features in the style attribute of #381