A native implementation of styled-jsx for Go
MIT License
A native implementation of styled-jsx for Go. Works with both JSX and TSX files.
It's built on:
class
and className
variants<style scoped>
and <style jsx>
variantsGiven the following JSX:
export default () => (
<main class="main">
<h1>hello</h1>
<style scoped>{`
.main {
background: blue;
}
h1 {
color: red;
}
`}</style>
</main>
)
Rewrite that JSX with the following:
out, _ = styledjsx.Rewrite("input.jsx", jsx)
Resulting in:
import Style from "styled-jsx"
export default () => (
<main class="jsx-8mUTT main">
<h1 class="jsx-8mUTT">hello</h1>
<Style scoped>{`
.main.jsx-8mUTT{background:#00f}
h1.jsx-8mUTT{color:red}
`}</Style>
</main>
)
Note: you'll need to bring your own <Style/>
component. The JS library styled-jsx/style
might work, but it's currently untested.
@keyframe
names:global()
support<style scoped>
(fork this repo)styled-jsx
styled-jsx has a plethora of ways to include CSS. I tend to stick with the very basics. Here are some features that are not planned and what the alternative is:
<style global>
: Use <style>
instead.Styled JSX is still the most natural way to write CSS in JSX.
You'll probably use this library alongside a bundler like ESBuild.
go get github.com/matthewmueller/styledjsx
MIT