.container { background: black }
h1 { color: white }
Slide 9
Slide 9 text
CSS in JSX
Slide 10
Slide 10 text
{`
.container { background: black }
h1 { color: white }
`}
Slide 11
Slide 11 text
{`
.container { background: black }
h1 { color: white }
`}
Slide 12
Slide 12 text
CSS in styled-jsx
Slide 13
Slide 13 text
{`
.container { background: black }
h1 { color: white }
`}
Slide 14
Slide 14 text
{`
.container { background: black }
h1 { color: white }
`}
Slide 15
Slide 15 text
Rendered inside a JSX element
Slide 16
Slide 16 text
Zeit rocks
{`
.container { background: black }
h1 { color: white }
`}
Slide 17
Slide 17 text
Zeit rocks
{`
.container { background: black }
h1 { color: white }
`}
Slide 18
Slide 18 text
Styles encapsulation
Controlled Cascade
Full CSS support
Slide 19
Slide 19 text
Simplicity and DX
Slide 20
Slide 20 text
Zeit rocks
{`
.container { background: black }
h1 { color: white }
`}
Slide 21
Slide 21 text
Zero learning curve
Slide 22
Slide 22 text
How?
Slide 23
Slide 23 text
Rewrite JSX with a Babel plugin
Slide 24
Slide 24 text
npm i --save styled-jsx
Slide 25
Slide 25 text
{
“plugins“: [
“styled-jsx/babel“
]
}
Slide 26
Slide 26 text
Zeit rocks
{`
.container { background: black }
h1 { color: white }
`}
Slide 27
Slide 27 text
becomes
Slide 28
Slide 28 text
import _JSXStyle from ’styled-jsx/style’
Zeit rocks
<_JSXStyle
styleId={’123’}
css={`
.container.jsx-123 { background: black }
h1.jsx-123 { color: white }
`}
/>
Slide 29
Slide 29 text
import _JSXStyle from ’styled-jsx/style’
Zeit rocks
<_JSXStyle
styleId={’123’}
css={`
.container.jsx-123 { background: black }
h1.jsx-123 { color: white }
`}
/>
Slide 30
Slide 30 text
Compile time transformation, Babel and Stylis
Server Side Rendering out of the box
High-performace CSS injection at runtime
Critical CSS and style tags deduping