How to write CSS / SCSS / PostCSS inside React .tsx file as JavaScript String in VSCode and WebStorm?

user_14817835 0
Viewed 261

I am trying to set up a new self convention to make my React code better organized like the following:

export default function HeaderExample() {
  const compStyle = getStyle();
  return (
    <>
      <h1>Hello World</h1>
      <style jsx>{compStyle}</style>
    </>
  )
}

function getStyle() {
  return `
        h1 {
          color: blue;
        }
      `
}

It works fine, but writing the return in getStyle() is pretty hard because I don't get formatting or syntax highlight help from the IDE.

How can I get those? Plugin / Library / Setting / Giving it a type? Any of those will help.

And at the same chance, do you think this can cause any issues down the road?

vscode-settings visual-studio-code reactjs webstorm javascript
2 Answers

In vscode you can use ES6 String css vscode extension

Just add /*css*/ before ` like this

function getStyle() {
  return /*css*/`
        h1 {
          color: blue;
        }
      `
}
user_175384680

WebStorm has a built-in feature Language Injection. for that.

Here you will find in detail documentation of that feature.

Short version.

  1. Place your cursor in the relevant code block and click alt + enter.

enter image description here

  1. In the DropDown, select Inject language or reference. Without clicking to the right, click enter again.

enter image description here

  1. A window should open, now select the language you like to inject. If you select CSS the result should be:

enter image description here

To answer your second question. It shouldn't cause any trouble down the road.

edit addition:

It is possible to trigger the same behaviour with a comment laguange=css

enter image description here

user_43166810
Related