Search code examples
cssstringtypescriptautocompletewebstorm

Is there a way to tell WebStorm that string is CSS

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

Solution

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

    An example

    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:

    enter image description here