auto-completion for css variables

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!

[pngwn]

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

[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