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

Giuseppe Gurgone

December 13, 2017
Tweet

More Decks by Giuseppe Gurgone

Other Decks in Programming

Transcript

  1. 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>
  2. 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>
  3. 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
  4. const styles = css` h1 { color: white } `

    <style jsx>{styles}</style>
  5. 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>
  6. 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>
  7. function resolveScopedStyles(scope) { return { className: scope.props.className, Styles: () =>

    scope.props.children, classes: (className) => scope.props.className + ‘ ‘ + className } } // © Anton Ignatov
  8. Function resolveScopedStyles(scope) { return { className: scope.props.className, Styles: () =>

    scope.props.children, classes: (className) => scope.props.className + ‘ ‘ + className } } // © Anton Ignatov
  9. “if the poo is trapped in a box then it

    only smells when you open it.” – @danwrong, on software modularization.