<style> tag support in JSX

[thescientist13]

Summary

Currently there does not seem to be a way to do <style> tags in JSX content.

export default class Header extends HTMLElement {

  connectedCallback() {
    this.render();
  }

  render() {
    return (
      <div>
        <style>
          :host p {
            text-align: 'center';
          }
        </style>
        <header>
          <p>Welcome to my site</p>
        </header>
      </div>
    );
  }
}

customElements.define('app-header', Header);

    [0] file:///Users/owenbuckley/Workspace/project-evergreen/wcc/node_modules/acorn/dist/acorn.mjs:3454
    [0]   var err = new SyntaxError(message);
    [0]             ^
    [0] 
    [0] SyntaxError: Unexpected token (12:22)
    [0]     at pp$4.raise (file:///Users/owenbuckley/Workspace/project-evergreen/wcc/node_modules/acorn/dist/acorn.mjs:3454:13)
    [0]     at pp$9.unexpected (file:///Users/owenbuckley/Workspace/project-evergreen/wcc/node_modules/acorn/dist/acorn.mjs:750:8)
    [0]     at pp$9.expect (file:///Users/owenbuckley/Workspace/project-evergreen/wcc/node_modules/acorn/dist/acorn.mjs:744:26)
    [0]     at Parser.jsx_parseExpressionContainer (/Users/owenbuckley/Workspace/project-evergreen/wcc/node_modules/acorn-jsx/index.js:329:12)
    [0]     at Parser.jsx_parseElementAt (/Users/owenbuckley/Workspace/project-evergreen/wcc/node_modules/acorn-jsx/index.js:399:32)
    [0]     at Parser.jsx_parseElementAt (/Users/owenbuckley/Workspace/project-evergreen/wcc/node_modules/acorn-jsx/index.js:391:32)
    [0]     at Parser.jsx_parseElement (/Users/owenbuckley/Workspace/project-evergreen/wcc/node_modules/acorn-jsx/index.js:436:19)
    [0]     at Parser.parseExprAtom (/Users/owenbuckley/Workspace/project-evergreen/wcc/node_modules/acorn-jsx/index.js:443:21)
    [0]     at pp$5.parseExprSubscripts (file:///Users/owenbuckley/Workspace/project-evergreen/wcc/node_modules/acorn/dist/acorn.mjs:2621:19)
    [0]     at pp$5.parseMaybeUnary (file:///Users/owenbuckley/Workspace/project-evergreen/wcc/node_modules/acorn/dist/acorn.mjs:2587:17) {
    [0]   pos: 198,
    [0]   loc: Position { line: 12, column: 22 },
    [0]   raisedAt: 199
    [0] }
    [0] 
    [0] Node.js v18.12.1
  

You can also the IDE complaining as well

Details

Something like this will work though

const styles = `
  :host p {
    text-align: 'center';
  }
`

export default class Header extends HTMLElement {

  connectedCallback() {
    this.render();
  }

  render() {
    return (
      <div>
        <style>
          {styles}
        <header>
          <p>Welcome to my site</p>
        </header>
      </div>
    );
  }
}

customElements.define('app-header', Header);

Seems like this is the state of things and not sure there's any good solution around it, so not sure what our options are here though, if any?