auto-completion for css variables

[pngwn]

Is your feature request related to a problem? Please describe.
CSS custom properties can have long names and are difficult to type. Even though their definitions are in random CSS files, it would be nice to get auto-completion on them. Having first-class language-tooling support for a theming solution that we are trying push as the best choice in most scenarios would really help with adoption.

Describe the solution you'd like
Obviously this feature would be impossible to implement without letting the language tools know where the CSS variables might be defined due to how CSS works. I imagine we could provide an array of filepaths telling the language tools where it should look for the definition of any CSS custom properties. Any custom properties found in that file (or those files, maybe a glob or regex?), regardless of selector, should auto-complete whenever a user types a qualifying set of characters. I imagine we could begin to match on available CSS vars whenever a user has typed var(.

Describe alternatives you've considered
Do nothing and be sad.

Additional context
If I could screenshot this feature I would not be asking for it!

[dummdidumm]

Where should these completions appear? Only inside <style> tags or somewhere else, too? (I guess for now only CSS, but I think there's some RFC proposing more possibilities).

[dummdidumm]

Mhm it would also be cool to pick up definitions of global vars inside Svelte components. Determining what to show as autocompletion (respecting hierarchy) would be nice, but maybe a little too much right now.
Edit: Can be done by just adding a glob for svelte files. Then this gets picked up, too:

<style>
    div {
        --some-color: blue;
    }
</style>

[pngwn]

Sorry, took me a little while to come back to this:

Where should these completions appear? Only inside <style> tags or somewhere else, too? (I guess for now only CSS, but I think there's some RFC proposing more possibilities).

Yeah i think for now, just in the style. I principle you could apply vars inline in style attributes too but I think just in style elements would be a good target for now.

[pngwn]

And i also cannot fathom how you are quite this fast.

[pngwn]

Regarding tracking global vars in parent components, that would be pretty amazing. I have no idea how this would work but if you think it is possible at some point, I certainly won't complain about the addition of such a feature.

[dummdidumm]

I'll leave it as is for now with only the tracking of global variables inside specified files. If the need arises, feel free to open another issue.

[yazonnile]

Hello, guys.
How can I make this option works?

I have a file ROOT/client/src/lib/styles/variables.css

:root {
  --mainColor: #0f2499;
}

I set client/src/lib/styles/variables.css as an value into option (Svelte-Plugin-CSS-Globals)
But nothing happens. No autocompletion.
When I type var(--mainCo) - no suggestions