Styled-components: WebStorm/IntelliJ IDEA support

[nkbt]

EDIT(@mxstbr): There is an official WebStorm plugin in the plugins repository! Download it from here: https://plugins.jetbrains.com/plugin/9997-styled-components (also see the source on GitHub: https://github.com/styled-components/webstorm-styled-components)

Original issue text

It is probably possible to do something with language injections, but I could not figure out how to do it yet.

Would appreciate any help, since without proper CSS syntax support with completion/code formatting aso - it is a major blocker for us to use styled components (instead of CSS Modules)

[nkbt]

With help of "Intentions" menu I managed to set language as CSS, but then webstorm appears to expect proper CSS there with selectors and everything is parsed as error

The other potential solution could be a TextMate bundle. Temporary tho, since it only gives syntax highlighting but you cannot use any of webstorm code intelligence on that bit. It is treated as just a plain text.

[nkbt]

Example of language support plugin, just in case anyone is interested (vue-js) https://github.com/henjue/vue-for-idea

[Dattaya]

Please, also vote for this ticket: https://youtrack.jetbrains.com/issue/WEB-22106

Edit: On second thought, that issue does not represent well what is necessary for styled-components' templates to function properly in WebStorm, created another one: https://youtrack.jetbrains.com/issue/WEB-24148.

[smeijer]

@nkbt , is it not possible to define the language as being stylus or scss? I guess the &:hover is valid syntax for both these css-parsers?

[nkbt]

@smeijer sure, but properties without selector are not valid for either, and that is the actual problem

[Dattaya]

I think I've found a temporary workaround:

I used SCSS language injection:

[nkbt]

Sick! 💯

[davidctj]

WebStorm 2016.3 EAP, 163.4830 recently released and support styleLint, and then I do the same step as mentioned on the homepage styleLint processor, but it is not working, here's the error:

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at C:\WebstormProjects\webroot\node_modules\stylelint\dist\augmentConfig.js:300:23
    at Array.forEach (native)
    at addProcessorFunctions (C:\WebstormProjects\webroot\node_modules\stylelint\dist\augmentConfig.js:290:58)

So, is someone has the same error as mine or the styled component for webstorm linting still not supported yet? any idea?

[danieldunderfelt]

Is someone working on a plugin for WebStorm/PhpStorm? If not, I'll have a stab at it.

[nkbt]

I don't know anyone, that would be fantastic!
On Tue., 29 Nov. 2016 at 18:29, Daniel Dunderfelt [e-mail]
wrote:

Is someone working on a plugin for WebStorm/PhpStorm? If not, I'll have a
stab at it.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/styled-components/styled-components/issues/176#issuecomment-263496724,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAKsoP7AivPb_K_XLZ0Ow4A47wDU9mtUks5rC9RNgaJpZM4Ks5DS
.

[kitze]

@danieldunderfelt please do 🙌

[Gregoor]

Heya @danieldunderfelt, did you already have a chance to look into it? If not I'd give it a shot.

[danieldunderfelt]

@Gregoor I did look into it, but it required a bit too much Java knowledge for me. I had planned to fork the SCSS language, but that wasn't readily available as a base plugin. As far as I know, I'd have to re-implement 90% of the SCSS stuff and figure out how to use language injection.

It would be awesome if you could take a look! Good luck!

[smeijer]

For the person that is able to get this thing done; the graphql project can be of help. It add's support for the gql template tag.

The plugin is activated as soon as you view or edit GraphQL in the editor. This includes GraphQL inside Relay.QL and gql templates in JavaScript and TypeScript. You can also use .graphql physical files and scratch files. These files allow you to query your endpoint directly from your IDE.

https://github.com/jimkyndemeyer/js-graphql-intellij-plugin

[Gregoor]

Yaiks, I forgot how much Java pains me.

Fortunately I stumbled over Language Injections, also mentioned in the styled-components Webstorm issue. The fight between my dislike for Java vs my dislike for Regex was won by the former, hence I regexed a language injection, that's good enough for me for now:

As one can see, the only thing not working is JS string interpolation. There might just be a way to exclude it via regex, but haven't yet found out how.
Also the injected language is actually SCSS, to enable pseudo classes support.

Here is my current version, it's just a zipped XML, can be imported in the "Language Injection" Setting.
styled-components-injection.zip

[danieldunderfelt]

@Gregoor Java pain is understandable :D

Thanks for the injection, it works well. The interpolation is weird, as it kind of notices that we're back to Javascript but the highlighting still throws tantrums. Still, it's much better than we webstormers have had until now!

[kitze]

@Gregoor cool, getting somewhere! 👍

I think it should also inject css for the keyframes function from styled-components:

const floatAnimation = keyframes`
  from {
    scale: 1;
  }
  to {
    scale: 1.1;
  }
`;

[Gregoor]

Ah right, forgot about that, here we go: styled-components-injection-v2.zip

Also, if someone else wants to tinker, after importing, you can see that all it is this:

Language

ID: SCSS
Prefix; dummy {
Suffix: }

Places Pattern

+ jsLiteralExpression().withText(string().matchesBrics("styled\\..*?\\`(.*?)\\`"))
+ jsLiteralExpression().withText(string().matchesBrics("styled\\(.*?\\)\\`(.*?)\\`"))
+ jsLiteralExpression().withText(string().matchesBrics("keyframes\\`(.*?)\\`"))

There is also the input "Value pattern" which says:

Enter a regular expression that selects the parts of the tag's or attribute's value the language should be injected into.
The pattern should contain exactly one capturing group.

So, the way I understand it, a regex is needed that matches everything into one group, except for \$\{.*\}. So far I didn't succeed with that though.

[erikras]

I gave this an hour, but now my brain hurts. I'm pretty sure it's not possible to capture multiple groups, ignoring intermediary parts, in java.

[nkbt]

Here is a great example of tagged literals plugin for intellij

https://plugins.jetbrains.com/plugin/8097-js-graphql

source: https://github.com/jimkyndemeyer/js-graphql-intellij-plugin/

[kitze]

yes @nkbt I'm using it and I can confirm that it works flawlessly. There's still hope for 💅 in WS 😞

[HejdesGit]

@Gregoor:s styled-components-injection-v2.zip was great and was working with Webstorm 2016. Has anyone got this working with Webstorm 2017? I have injected but it's not working...

[Alex-Mann]

Would love to see this working / supported as a plugin for Webstorm. If I was confident in Java I would attempt myself but alas...

[gr4yscale]

Just found this thread.

Also interested, and it seems that the suggestion of @nkbt to take examples of the intelligj plugins supporting tagged template literals would be the way to go. Currently in the middle of a crunch on a project, so my time is limited, but if no one else has taken a stab at it in a week or two I'll give it a go.

[Geczy]

@Gregoor @HejdesGit can confirm, no longer works in webstorm 2017. Can it be updated?

[StrikeForceZero]

Haven't tested this just yet but I'd imagine this would work: // language=SCSS

[zaunermax]

@gr4yscale that would be super awesome 🚀

[csprance]

@StrikeForceZero Ya but that kinda sucks because you need to add the braces and the & sign

It would be really nice to have this feature in the IDE. Hopefully someone is out there that can save us! :)

[hadfieldn]

I'm guessing something broke in WebStorm 2017 that prevents this from working properly:

+ jsLiteralExpression().withText(string().matchesBrics("styled\\..*?\\`(.*?)\\`"))

@csprance Until we get a fix for the issue in IntelliJ/Webstorm 2017 that prevents the language injection from working, you can add prefix and suffix args to the language-injection comment to avoid having to add the braces and ampersand:

// language=SCSS prefix=dummy{ suffix=}

Unfortunately it's still very hacky.

[nkbt]

This solution looks reasonably ok

https://medium.com/@iamssen/webstorm-intellij-%EB%93%B1%EC%9D%98-jetbrains-ide%EC%97%90%EC%84%9C-styled-components-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-b0bc79418e1f

[Geczy]

@nkbt that's the solution i've been using. either that or @hadfieldn 's solution will work

[geelen]

That medium post is awesome, it totally works... except for indentation and interpolations :(

So close though!!

[cdharris]

While not a complete solution yet, I've managed to get something together that works for me (after poking around in undocumented APIs :hammer_and_pick: ) Hopefully this helps some others too :)

Import the styled-components.xml language injection here :
https://github.com/cdharris/styled-components-intellij-syntax

[zaunermax]

@cdharris this is great but it still does not solve the problem correctly parsing JavaScript interpolations

[kusmierz]

And style lint doesn't work inside :(

[hadfieldn]

@cdharris thank you! At least with your injection we don't have to add the language comment -- back to the functionality we had before it was broken with WS 2017.

[ImanMh]

I hop an official plugin is released for styled components. I really need them.

[lixiaoyan]

@cdharris seems language=PostCSS would be a bit better than language=SCSS: it supports injection like margin: ${props => props.margin};
(but not ${"margin: 0;"})

[danikenan]

added support for injectGlobal and extend:

+ jsLiteralExpression().and(jsArgument("styled", 0))
+ jsLiteralExpression().withParent(psiElement().withParent(psiElement().withText(string().startsWith("Styled"))))
+ jsLiteralExpression().withParent(psiElement().withText(string().contains(".extend")))
+ jsLiteralExpression().withParent(psiElement().withText(string().startsWith("injectGlobal")))
+ jsLiteralExpression().withParent(psiElement().withText(string().startsWith("styled")))

[daedlock]

I will implement this if I get enough upvotes :P

[MathieuLorber]

Please, not a notification-storm of "+1" posts, upvote with the thumb on @daedlock post.

[mxstbr]

I feel like the 107 upvotes on the OP speak for themselves :wink:

[kitten]

I’m locking this issue — Just in case — Since there is not a lot to be discussed here anymore. However, if someone decides to implement this and push a repo on GitHub, we’re happy to move it into our org of course. :smile:

Edit just for @geelen :heart: You got to hustle hard for them to hear y'all's wishes 😆

[geelen]

Us webstorm users:

[mxstbr]

@daedlock has started working on a Webstorm plugin and is already quite far based on previous suggestions in this thread: https://github.com/styled-components/webstorm-styled-components :tada:

Please try it out and contribute to it, it'd be awesome to finally have an officially recommended solution for Webstorm users.

[mxstbr]

There's finally an official WebStorm plugin, partly built by @daedlock and partly built by JetBrains employees!!

Go use it, star it, recommend it: https://plugins.jetbrains.com/plugin/9997-styled-components
Also give the repo a star on GitHub while you're at it: https://github.com/styled-components/webstorm-styled-components

I'm going to unlock and close this issue, feels so great :tada:

[daviddelusenet]

Plugin worked for me! Now on to the next part: support for Stylelint.

I've tried to set this up with the native Stylelint package but I can't select files .js files as the files to lint.

Anyone has any ideas on this? 😄

[mxstbr]

Please submit a new issue, no need to notify everybody who participated in this one of your individual troubles.