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
旅行プランAIエージェント開発の裏側
ippo012
2
920
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
530
楽して成果を出すためのセルフリソース管理
clipnote
0
180
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.8k
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
560
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.4k
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
330
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Docker and Python
trallard
46
3.6k
Rails Girls Zürich Keynote
gr2m
95
14k
Making Projects Easy
brettharned
117
6.4k
RailsConf 2023
tenderlove
30
1.2k
Scaling GitHub
holman
463
140k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Building Adaptive Systems
keathley
43
2.7k
Documentation Writing (for coders)
carmenintech
74
5k
Thoughts on Productivity
jonyablonski
70
4.8k
Agile that works and the tools we love
rasmusluckow
330
21k
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
▲