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
130
CSS in JS | Tech Movie Night vol.4
giuseppe
0
28
view-source:https://twitter.com
giuseppe
0
470
CSS convo over lunch
giuseppe
1
140
Other Decks in Programming
See All in Programming
Honoアップデート 2025年夏
yusukebe
1
910
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
130
Claude Codeで挑むOSSコントリビュート
eycjur
0
190
CSC305 Summer Lecture 12
javiergs
PRO
0
130
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
200
RDoc meets YARD
okuramasafumi
4
160
1から理解するWeb Push
dora1998
7
1.7k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
250
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
150
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
240
testingを眺める
matumoto
1
130
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Writing Fast Ruby
sferik
628
62k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Visualization
eitanlees
148
16k
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Designing for Performance
lara
610
69k
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
▲