is there a way get styled-components support in React layer

[saadjsct]

styled-components is a CSS-in-JS library. It is pretty popular now. Is there any way to get syntax highlighting and completion to work. maybe I can put something in my config that says anything between " styled.anything` " up to " ` " should be in CSS mode, but I don't know where to start. Thanks.

[tko]

I think it's up to rjsx-mode to support properly https://github.com/felipeochoa/rjsx-mode/issues/71 for the time being.

Someone knowledgeable in elisp might be inclined to investigate using web-mode instead. While it's supposed to handle different languages mixed within each other, it also has some problems which lead to spacemacs replacing web-mode with rjsx-mode in the past so it would be quite a sizable effort as well.

[cmatzenbach]

The develop branch has a React layer - have you tried that?

https://develop.spacemacs.org/layers/+frameworks/react/README.html

[cmatzenbach]

To give you a bit more info, here's my react setup. I used CRA (create-react-app - using typescript so .tsx files), so many of those plugins the doc tells you to install may already be installed - check in your package.json (you DO NOT want to overwrite the versions they have already installed, as I did, because it turns into a MASSIVE dependency mess). I think I did install both js-beautify and prettier (with npm --save-dev), and honestly I'm not sure which one it's using, but spc m = works awesome and cleans up my code for my in an instant. I can post both files if you want. Make sure .eslintrc.js, .jsbeautifyrc, and .prettierrc.js sit in the root of your project. I was kinda dumb and put my api and front-end in the same repo, so my project structure looks like:

• myproj
  • api/
  • front-end/
  • config files as mentioned (eslint, jsbeautify, prettierrc)

but everything still works fine, and flycheck picks up eslint (you can confirm with spc e v), so somehow my setup worked. I'm considering switching to two separate repos though to simplify things, especially as I learn more and move to docker.

I'll paste my config files for the 3 aformentioned setup files .eslintrc.js .jsbeautifyrc and .prettierrc.js. Hope this helps - let me know if this solves your issue.

[lebensterben]

I removed the stale and added feature-request label:

• If possible, we'd add better integration of the styled-component into Spacemacs.
• If there's no readily available packages to do that, and if adding this feature is too complex/tedious, we'd at least add some tips in our react layer's documentation.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please let us know if this issue is still valid!