styled-jsx

A CSS in JS library inspire by ShadowDOM.

https://github.com/zeit/styled-jsx

Transcript

1. styled-jsx
2. CSS in JS library for React inspired by ShadowDOM
3. zeit/styled-jsx
4. Guillermo Rauch Naoyuki Kanezawa Giuseppe Gurgone
5. Guillermo Rauch Naoyuki Kanezawa Giuseppe Gurgone
6. styled-jsx
7. CSS in HTML
8. <style> .container { background: black } h1 { color: white } </style>
9. CSS in JSX
10. <style>{` .container { background: black } h1 { color: white } `}</style>
11. <style>{` .container { background: black } h1 { color: white } `}</style>
12. CSS in styled-jsx
13. <style jsx>{` .container { background: black } h1 { color: white } `}</style>
14. <style jsx>{` .container { background: black } h1 { color: white } `}</style>
15. Rendered inside a JSX element
16. <div className=’container’> <h1>Zeit rocks</h1> <style jsx>{` .container { background: black } h1 { color: white } `}</style> </div>
17. <div className=’container’> <h1>Zeit rocks</h1> <style jsx>{` .container { background: black } h1 { color: white } `}</style> </div>
18. Styles encapsulation Controlled Cascade Full CSS support
19. Simplicity and DX
20. <div className=’container’> <h1>Zeit rocks</h1> <style jsx>{` .container { background: black } h1 { color: white } `}</style> </div>
21. Zero learning curve
22. How?
23. Rewrite JSX with a Babel plugin
24. npm i --save styled-jsx
25. { “plugins“: [ “styled-jsx/babel“ ] }
26. <div className=’container’> <h1>Zeit rocks</h1> <style jsx>{` .container { background: black } h1 { color: white } `}</style> </div>
27. becomes
28. 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>
29. 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>
30. 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
31. Built-in CSS vendor prefixing Source maps Prettier
32. just by adding a single jsx attribute
33. <style jsx>{` .container { background: black } h1 { color: white } `}</style>
34. Simplicity
35. Advanced features
36. Global styles
37. <style jsx global>{` .container { background: black } h1 { color: white } `}</style>
38. One-off global selectors with :global()
39. .container > :global(h1)
40. .container.jsx-123 > h1
41. Dynamic styles and themes
42. (props) => <h1> {props.children} <style jsx>{` h1 { color: ${props.color} } `}</style> </h1>
43. External CSS.js modules
44. import css from ‘styled-jsx/css’ export default css` h1 { color: white } `
45. import styles from ‘./styles’ <style jsx>{styles}</style>
46. import styles from ‘./styles’ <style jsx global>{styles}</style>
47. css works in the same file
48. const styles = css` h1 { color: white } ` <style jsx>{styles}</style>
49. CSS preprocessing via plugins
50. (css: string, settings: Object) => string
51. Trade-offs
52. Strings not as powerful as Object Literals
53. Interpolations not preprocessed or scoped
54. Styling Shadow DOM from the outside world is tricky
55. :global() makes it easier but it is not perfect
56. 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>
57. 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>
58. function resolveScopedStyles(scope) { return { className: scope.props.className, Styles: () => scope.props.children, classes: (className) => scope.props.className + ‘ ‘ + className } } // © Anton Ignatov
59. Function resolveScopedStyles(scope) { return { className: scope.props.className, Styles: () => scope.props.children, classes: (className) => scope.props.className + ‘ ‘ + className } } // © Anton Ignatov
60. <Link className="link"> Zeit <style jsx>{` .link { font-weight: bold } } `}</style> </Link>
61. Styling third parties components
62. styled-jsx/css produces scoped and global CSS for now
63. Recap
64. Add a jsx attribute to a style element
65. Rendered inside a JSX element
66. Profit
67. Simplicity
68. It is just CSS
69. encapsulated
70. “if the poo is trapped in a box then it only smells when you open it.” – @danwrong, on software modularization.
71. @giuseppegurgone
72. ▲