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

Question

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?

Answer 1

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.

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

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

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

Answer 2

In vscode you can use ES6 String css vscode extension

Just add /*css*/ before ` like this

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