How to use the linaria/server.collect function in linaria

replaceHeadComponents,
  getPostBodyComponents,
  replacePostBodyComponents,
}) => {
  let styles = []
  const headComponents = getHeadComponents().filter(({ type, props }) => {
    if (type === 'style' && LINARIA_STYLESHEET_RULE.test(props['data-href'])) {
      styles.push({
        href: props['data-href'],
        text: props.dangerouslySetInnerHTML.__html,
      })
      return false
    }
    return true
  })
  const { critical } = collect(
    bodyHTML,
    styles.map(style => style.text).join('')
  )
  // Attach critical CSS into bottom of head
  replaceHeadComponents([
    ...headComponents,
    <style data-linaria-critical="{pathname}">,
  ])
  // Attach other and critical into bottom of body
  // This also includes critical css because of cache hit
  replacePostBodyComponents([
    ...getPostBodyComponents(),</style>

router.get('/', async ctx => {
  const html = ReactDOMServer.renderToStaticMarkup();

  const { critical, other } = collect(html, css);
  const slug = crypto
    .createHash('md5')
    .update(other)
    .digest('hex');

  cache[slug] = other;

  ctx.type = 'html';
  ctx.body = dedent`
    
    
      
        
        

        <title>Linaria – zero-runtime CSS in JS library</title>

.then(html => {
        const { critical, other }  = collect(html, css);

        response.status = 200;

        response.body = `
          
          
            
              <title>React Apollo Universal</title>
              
              
              
              
              
              <style>
                @import url('https://fonts.googleapis.com/css?family=Roboto');
              </style>