https://medium.com/styled-components/with-styled-components-into-the-future-d1d917e7c22c https://github.com/thysultan/stylis.js https://github.com/cssinjs/istf-spec https://developer.mozilla.org/en-US/docs/Web/Events/CssRuleViewRefreshed https://github.com/zeit/next.js#fetching-data-and-component-lifecycle

const overlay = styled.todo position: fixed;

const modalOverlay = styled.todo ${overlay} background-color: $colors-primary-background;

// can combine on element or to string with each other @modalOverlay // can call decorator to transpile immediately before render or only when rendered @overlay() class Component {}

const {div, header} = styled

const styles = styled.todo color: blue;

const HeaderWrap = div .attributes({ static: true }) .styles(styles) // here it is easy to default, error, // connect to react props mobx types etc .types() // and other recompose-like-as-a-chain .rename({ from: 'to', })

const Traditional = header .class('name') .extend(HeaderWrap)

const StyledHTML = styled.html `

  <section copyright-wrapper>
    <p>{contextName}</p>
    <footer copyright>
      {copyright}
    </footer>
  </section>