[Feature] Code Completion for css variables

[ascii-husky]

Hey

Thanks for the plugin!

Would it be possible to add code completion for css variables defined like this?

const GlobalStyle = createGlobalStyle`
  :root {
      --border-width: 7.5vw;
  }
`

[prigara]

Can you please add a link to the docs explaining how it works with Styled Components (mainly, where this variable should be visible)? I haven't found anything about using CSS variables in the Style Components docs... Thanks!

[ascii-husky]

I also didn't find anything in the docs. But I can confirm that css variables work with styled components. You can use it in a component like this border-width: var(--border-width);. Please see the official spec here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Using css variables has some advantages against using JS variables in styled components. Having code completion for them would be a nice feature.

[swandir]

Styled Components do not change the way CSS custom properties work. It's true in general, since it's stated that all standard CSS is supported.

PostCSS specifics do not apply as well, so it's a plain standard CSS feature.

The issue is basically boils down to tracking declared custom properties. Since they are propagated to child elements through CSS inheritance it might be impossible to track them intelligently. Resolving all custom properties declared anywhere in the project (tagged literals, object styles, CSS files) seems most practical.

[undeadcat]

This depends on the IDE bug https://youtrack.jetbrains.com/issue/WEB-38704.

Completion for css variables currently does not work within language injections, which is the generic IDE mechanism this plugin uses to mark parts of code as CSS-like code.