ProjectEvergreen / ProjectEvergreen/wcc
`<style>` tag support in JSX
Open
Nobody has claimed this yet.
feature
JSX
question
- Dominant language
- JavaScript
- Stars
- 126
- Forks
- 17
- PR merge metrics
- No merged PRs in 30d
Description
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?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the acorn-jsx entry points Parser.jsx_parseExpressionContainer and Parser.jsx_parseElementAt shown in the stack trace, then trace how wcc invokes JSX parsing. The first example should parse and compile with inline <style> content, while the existing {styles} form remains supported.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- compilers
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100