I am trying to find a way to "organize" react component like vue, where it's bundled together with different section for HTML, JS and CSS.

For example

export default function HeaderExample() {
  return (
    <>
      <h1>Hello World</h1>
      <style jsx>{`
        h1 {
          color: yellow;
        }
      `}
      </style>
    </>
  )
}

I want to convert to:

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

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

It does work, but writing it is pretty hard because there is no syntax highlight or anything.

Is that a good convention in general?

And is there a way to enable syntax highlight / formatting help for this type of thing? And should it also work with SCSS or PostCSS?