CODEWITHSUNDEEP
cssstringtypescriptautocompletewebstorm
Mattia
Mattia

Reputation: 2281

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

Upvotes: 4

Views: 442

Answers (2)

LazyOne
LazyOne

Reputation: 165088

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

Upvotes: 3

lena
lena

Reputation: 93728

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

enter image description here

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:

enter image description here

Upvotes: 1

Related Questions