Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
styled-jsx
Search
Giuseppe Gurgone
December 13, 2017
Programming
5
2.9k
styled-jsx
A CSS in JS library inspire by ShadowDOM.
https://github.com/zeit/styled-jsx
Giuseppe Gurgone
December 13, 2017
Tweet
Share
More Decks by Giuseppe Gurgone
See All by Giuseppe Gurgone
Babel Plugins 101
giuseppe
0
120
CSS in JS | Tech Movie Night vol.4
giuseppe
0
27
view-source:https://twitter.com
giuseppe
0
460
CSS convo over lunch
giuseppe
1
140
Other Decks in Programming
See All in Programming
Porting a visionOS App to Android XR
akkeylab
0
910
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
470
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
270
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
100
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
460
AIのメモリー
watany
11
960
型で語るカタ
irof
1
810
Understanding Kotlin Multiplatform
l2hyunwoo
0
140
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
980
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
700
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
140
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Fireside Chat
paigeccino
37
3.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
A designer walks into a library…
pauljervisheath
207
24k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Why Our Code Smells
bkeepers
PRO
337
57k
Building Adaptive Systems
keathley
43
2.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
370
Music & Morning Musume
bryan
46
6.7k
Transcript
styled-jsx
CSS in JS library for React inspired by ShadowDOM
zeit/styled-jsx
Guillermo Rauch Naoyuki Kanezawa Giuseppe Gurgone
Guillermo Rauch Naoyuki Kanezawa Giuseppe Gurgone
styled-jsx
CSS in HTML
<style> .container { background: black } h1 { color: white
} </style>
CSS in JSX
<style>{` .container { background: black } h1 { color: white
} `}</style>
<style>{` .container { background: black } h1 { color: white
} `}</style>
CSS in styled-jsx
<style jsx>{` .container { background: black } h1 { color:
white } `}</style>
<style jsx>{` .container { background: black } h1 { color:
white } `}</style>
Rendered inside a JSX element
<div className=’container’> <h1>Zeit rocks</h1> <style jsx>{` .container { background: black
} h1 { color: white } `}</style> </div>
<div className=’container’> <h1>Zeit rocks</h1> <style jsx>{` .container { background: black
} h1 { color: white } `}</style> </div>
Styles encapsulation Controlled Cascade Full CSS support
Simplicity and DX
<div className=’container’> <h1>Zeit rocks</h1> <style jsx>{` .container { background: black
} h1 { color: white } `}</style> </div>
Zero learning curve
How?
Rewrite JSX with a Babel plugin
npm i --save styled-jsx
{ “plugins“: [ “styled-jsx/babel“ ] }
<div className=’container’> <h1>Zeit rocks</h1> <style jsx>{` .container { background: black
} h1 { color: white } `}</style> </div>
becomes
import _JSXStyle from ’styled-jsx/style’ <div className=’jsx-123 container’> <h1 className=’jsx-123’>Zeit rocks</h1>
<_JSXStyle styleId={’123’} css={` .container.jsx-123 { background: black } h1.jsx-123 { color: white } `} /> </div>
import _JSXStyle from ’styled-jsx/style’ <div className=’jsx-123 container’> <h1 className=’jsx-123’>Zeit rocks</h1>
<_JSXStyle styleId={’123’} css={` .container.jsx-123 { background: black } h1.jsx-123 { color: white } `} /> </div>
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
Built-in CSS vendor prefixing Source maps Prettier
just by adding a single jsx attribute
<style jsx>{` .container { background: black } h1 { color:
white } `}</style>
Simplicity
Advanced features
Global styles
<style jsx global>{` .container { background: black } h1 {
color: white } `}</style>
One-off global selectors with :global()
.container > :global(h1)
.container.jsx-123 > h1
Dynamic styles and themes
(props) => <h1> {props.children} <style jsx>{` h1 { color: ${props.color}
} `}</style> </h1>
External CSS.js modules
import css from ‘styled-jsx/css’ export default css` h1 { color:
white } `
import styles from ‘./styles’ <style jsx>{styles}</style>
import styles from ‘./styles’ <style jsx global>{styles}</style>
css works in the same file
const styles = css` h1 { color: white } `
<style jsx>{styles}</style>
CSS preprocessing via plugins
(css: string, settings: Object) => string
Trade-offs
Strings not as powerful as Object Literals
Interpolations not preprocessed or scoped
Styling Shadow DOM from the outside world is tricky
:global() makes it easier but it is not perfect
const scoped = resolveScopedStyles( <scope> <style jsx>{` .link { font-weight:
bold } `}</style> </scope> ) export default () => <h1> <Link className={scoped.classes(‘link’)}> Zeit </Link> rocks <scoped.Styles /> </h1>
const scoped = resolveScopedStyles( <scope> <style jsx>{` .link { font-weight:
bold } `}</style> </scope> ) export default () => <h1> <Link className={scoped.classes(‘link’)}> Zeit </Link> rocks <scoped.Styles /> </h1>
function resolveScopedStyles(scope) { return { className: scope.props.className, Styles: () =>
scope.props.children, classes: (className) => scope.props.className + ‘ ‘ + className } } // © Anton Ignatov
Function resolveScopedStyles(scope) { return { className: scope.props.className, Styles: () =>
scope.props.children, classes: (className) => scope.props.className + ‘ ‘ + className } } // © Anton Ignatov
<Link className="link"> Zeit <style jsx>{` .link { font-weight: bold }
} `}</style> </Link>
Styling third parties components
styled-jsx/css produces scoped and global CSS for now
Recap
Add a jsx attribute to a style element
Rendered inside a JSX element
Profit
Simplicity
It is just CSS
encapsulated
“if the poo is trapped in a box then it
only smells when you open it.” – @danwrong, on software modularization.
@giuseppegurgone
▲