Is there a way to tell WebStorm that string is CSS

Question

I have some React components written in TypeScript that contain a string prop for CSS classes. For example:

DEFINITION

function MyComponent({css}:{css:string}) {
    // use css string...
}

USAGE

<MyComponent css="text-blue-100 flex flex-row"/>

Is there a way to tell WebStorm that the css field should be interpreted as CSS rather than an arbitrary string so that I can get auto-complete working for that field (just like I can in a standard HTML tag)?

Answer 1

It's quite hacky .. but seems to work. How well it works: most likely not as good as native class attribute in HTML tags.

Code sample in action (plain HTML file, if that makes any difference):

The actual injection rule. The idea is to trick the IDE that it is a class attribute here... so we are injecting HTML with prefix and suffix bits:

Answer 2

No way unfortunately; the only workaround I can suggest is injecting JQuery-CSS language into your attribute:

But note that you would then need to enter a dot to see the classes completion - with this language injected, the classes are expected to start with a dot, HTML tags are suggested otherwise: