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. ▲