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
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
童醫院敏捷轉型的實踐經驗
cclai999
0
180
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
240
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
210
ReadMoreTextView
fornewid
1
460
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
260
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
110
Create a website using Spatial Web
akkeylab
0
300
Select API from Kotlin Coroutine
jmatsu
1
190
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
420
Deep Dive into ~/.claude/projects
hiragram
7
1.2k
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
170
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
337
57k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Designing for Performance
lara
609
69k
Designing Experiences People Love
moore
142
24k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Producing Creativity
orderedlist
PRO
346
40k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
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
▲