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?

return css` .... -- it gets colored for me (and offers CSS code completion) i.imgur.com/9eKQCMS.png For that I had to clone bundled Language Injection rule for html and adjust it to be CSS (so no need for manual injections) i.imgur.com/tKVXM7O.png . Please note: I'm not JavaScript person at all and do not know if just prefixing a template string with css is enough -- maybe some actual code is also needed (that handles that css prefix in some way). — LazyOne
– LazyOne, Commented Feb 23, 2022 at 20:12

henk · Accepted Answer · 2022-02-24 09:29:55Z

1

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

Here you will find in detail documentation of that feature.

Short version.

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

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

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

edited Feb 24, 2022 at 9:29

answered Feb 23, 2022 at 7:58

henk

2,8683 gold badges25 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

eliezra236 Over a year ago

Thanks a lot! that solves it, do you know if there's maybe an easier way like @Arjit Tiwari offered for vscode? As it gets repetitive to do it for every component?

henk Over a year ago

I don't know another way, but I think it should be possible to automate this. If you are using styles like that in many places, also take a look at Styled Components.

henk Over a year ago

@eliezra236 just found out you can do the same as Arjit Tiwari wrote for VSCode in Webstorm with // language=CSS. See my edit.

henk Over a year ago

For the automation, also see documentation on language injection rules definition

Arjit Tiwari · Accepted Answer · 2022-02-23 07:58:11Z

1

In vscode you can use ES6 String css vscode extension

Just add /*css*/ before ` like this

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

answered Feb 23, 2022 at 7:58

Arjit Tiwari

5383 silver badges13 bronze badges

2 Comments

eliezra236 Over a year ago

Is there anything similar for WebStorm?

Arjit Tiwari Over a year ago

I do not use Webstorm for web development, I think you can use Language Injection for Webstorm

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related