Upgrade to Pro — share decks privately, control downloads, hide ads and more …

styled-jsx

 styled-jsx

A CSS in JS library inspire by ShadowDOM.

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

767ad16f5fb26d68793d0ffa86b37aef?s=128

Giuseppe Gurgone

December 13, 2017
Tweet

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