Feature request: support vars as "value" strings, not just key-value css strings

[shemetz]

Currently, the following works great:

:root {
    --example-red: "#ff0000";
}

const MyComponent = styled`
  color: var(--example-red); // here the --example-red detection works perfectly

However.... the following does not work:

const MyComponent = styled`
  color: ${(props) => (props.color || "var(--example-red)")}; // here the example-red doesn't get detected
  color: ${(props) => (props.color || css`var(--example-red)`)}; // here it barely works, doesn't autocomplete but does detect the variable and allows e.g. pressing it to go to its source

This is probably because the plugin is only intended to mark tagged styled and css strings, which are always expected to be of the form of "key-value pairs" (recursively). That does work for almost all cases, but fails in this particular case, because the string "var(--example-red)" is just a value, without any color key or a colon to separate them.

I would like this plugin to be updated so that it works with such "value-only" strings.

Note that css`var(--example-red)` is actually not really valid to write in code, because such objects are often not accepted as string parameters for some components.

[shemetz]

I think this might be similar to https://github.com/styled-components/webstorm-styled-components/pull/64 and linked issues, but, not exactly the same, so still nowt implemented.

I also wonder if it's possible to get this done locally by editing Language Injections.

[shemetz]

I managed to use language injections to solve the problem 80% of the way.

I created these two injections:

<LanguageInjectionConfiguration>
  <injection language="CSS" injector-id="js">
    <display-name>custom injection - css var literals, except in markup</display-name>
    <prefix>div { color:</prefix>
    <suffix>}</suffix>
    <value-pattern>^(var\(.+?\)?)$</value-pattern>
    <single-file value="false" />
    <place><![CDATA[jsExpression()]]></place>
  </injection>
</LanguageInjectionConfiguration>

<LanguageInjectionConfiguration>
  <injection language="CSS" injector-id="xml">
    <display-name>custom injection - css vars in jsx/tsx markup</display-name>
    <prefix>div { color:</prefix>
    <suffix>}</suffix>
    <value-pattern>^(var\(.+?\)?)$</value-pattern>
    <single-file value="false" />
    <place><![CDATA[xmlAttribute().withLocalName(string().matches(".*"))]]></place>
  </injection>
</LanguageInjectionConfiguration>

By adding them, I got the code to highlight and colorize all "var(--some-var-here)" strings. This solves my use case, although I admit it doesn't fully solve the entire problem I described. Also, it still doesn't give me autocomplete (which I really wanted to have); but, since I chose CSS instead of LESS, it will show error underlines for any nonexistent variable names, which is close to an autocomplete.