Styled-jsx: Jetbrains IDEs syntax support

[davegomez]

I usually use Webstorm for React projects thanks to it's great JSX syntax support and the IDE tooling so It would be great if we have syntax support for Styled-JSX in the Jetbrain's IDEs.

[benjaminjackman]

One trick is to add language injection comments before the literal.

Something like this
'''
//language=CSS
'
h1 { color:red }
'
'''
See more here
https://www.jetbrains.com/help/idea/2017.1/using-language-injections.html#injection_comments

You can also add before and after to the comment to tell the IDE to pretend that the code in the literal is surrounded by wrapping code you specify in the before and after blocks.

Finally sometimes i use SCSS if interpolating variables in the template string since that fools the IDE into accepting the $ as legal which they aren't in vanilla CSS.

[davegomez]

Awesome, this works!

    { /*language=SCSS*/ }
    <style jsx>{`
      .container {
        margin: 0 auto;
        width: 880px
      }
    `}</style>

[giuseppeg]

@davegomez @benjaminjackman would you like add that to the README?

[RusinovAnton]

Is it still possible to have syntax highlight without adding injection comments? Not everyone on our team using Idea editor. Isn't is possible to have plugin for this?

[slpixe]

I agree it would be good to have this as a plugin for IDEA, as most the other editors have plugins/extensions for styled-jsx

[alextiley]

For those still interested in the original request, installing the Styled Components jetbrains plugin also seems to work for styled-jsx.

https://plugins.jetbrains.com/plugin/9997-styled-components

[nhooyr]

@alextiley afaik it does not work for styled JSX. At least not for me. See

[denofevil]

Please follow styled-components/webstorm-styled-components#77, I think it will be ready this week.