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)?
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:
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:
