message: bundle all static CSS into a fragment
diff: import React from 'react'
  import Document, {Head, Main, NextScript} from 'next/document'
  -// this relies on the raw-loader rule in next.config.js's webpack()
  -import baseCSS from '../dist/primer-components.css'
  import {ServerStyleSheet} from 'styled-components'
  import {extractCritical} from 'emotion-server'
  @@ -9,14 +7,17 @@ export default class MyDocument extends Document {
  static getInitialProps({renderPage}) {
  const sheet = new ServerStyleSheet()
  const page = renderPage(App => props => sheet.collectStyles(<App {...props} />))
  - const styles = sheet.getStyleElement()
  - const {css} = extractCritical(page.html)
  - return {...page, styles, css}
  + const styles = (
  + <>
  + <style id="emotion-static">{extractCritical(page.html).css}</style>
  + {sheet.getStyleElement()}
  + </>
  + )
  + return {...page, styles}
  }
  render() {
  const {
  - css,
  styles,
  // the assetPrefix is set in next.config.js
  __NEXT_DATA__: {assetPrefix = ''}
  @@ -31,12 +32,10 @@ export default class MyDocument extends Document {
  <meta charSet="utf8" />
  <link rel="icon" href={asset('/static/assets/favicon.png')} />
  <link rel="apple-touch-icon" href={asset('/static/assets/apple-touch-icon.png')} />
  - <style id="primer-components">{baseCSS}</style>
  - <style id="emotion-static">{css}</style>
  - {styles}
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="og:title" content="Primer React" />
  <meta name="description" content="Primer components built with React.js." />
  + {styles}
  </Head>
  <body>
  <Main />
  