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
25
view-source:https://twitter.com
giuseppe
0
450
CSS convo over lunch
giuseppe
1
140
Other Decks in Programming
See All in Programming
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.7k
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
760
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
kasacchiful
0
300
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを実現する
rokuosan
0
120
赤裸々に公開。 TSKaigiのオフシーズン
takezoux2
0
110
PT AI без купюр
v0lka
0
230
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
740
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
620
Blueskyのプラグインを作ってみた
hakkadaikon
1
480
生成AIで日々のエラー調査を進めたい
yuyaabo
0
500
Use Perl as Better Shell Script
karupanerura
0
690
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
480
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
It's Worth the Effort
3n
184
28k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Docker and Python
trallard
44
3.4k
Into the Great Unknown - MozCon
thekraken
39
1.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Facilitating Awesome Meetings
lara
54
6.4k
The Cult of Friendly URLs
andyhume
79
6.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
A designer walks into a library…
pauljervisheath
206
24k
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
▲