<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">When using a custom document <code class="notranslate">_document.tsx</code>, styled-jsx does not SSR styled-jsx and there is a flash of unstyled content unless I duplicate the static <code class="notranslate">getInitialProps</code> method.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto"><strong>FOUC</strong></p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';

import fonts from '../styles/fonts.css';
import reset from '../styles/reset.css';

export default class MyDocument extends Document {
  public render() {
    return (
      &lt;html lang=&quot;en&quot;&gt;
        &lt;Head&gt;
          &lt;style dangerouslySetInnerHTML={{ __html: reset + fonts }} /&gt;
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/html&gt;
    );
  }
}
"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-smi">Document</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-smi">Head</span><span class="pl-kos">,</span> <span class="pl-smi">Main</span><span class="pl-kos">,</span> <span class="pl-smi">NextScript</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'next/document'</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-s1">fonts</span> <span class="pl-k">from</span> <span class="pl-s">'../styles/fonts.css'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">reset</span> <span class="pl-k">from</span> <span class="pl-s">'../styles/reset.css'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-smi">MyDocument</span> <span class="pl-k">extends</span> <span class="pl-smi">Document</span> <span class="pl-kos">{</span>
  <span class="pl-k">public</span> <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">html</span> <span class="pl-c1">lang</span><span class="pl-c1">=</span><span class="pl-s">"en"</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-smi">Head</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">dangerouslySetInnerHTML</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span> <span class="pl-c1">__html</span>: <span class="pl-s1">reset</span> <span class="pl-c1">+</span> <span class="pl-s1">fonts</span> <span class="pl-kos">}</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">Head</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">body</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-smi">Main</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-smi">NextScript</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">body</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">html</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>NO FOUC</strong></p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import flush from 'styled-jsx/server';

import fonts from '../styles/fonts.css';
import reset from '../styles/reset.css';

export default class MyDocument extends Document {
  public static getInitialProps({ renderPage }) {
    const { html, head, buildManifest } = renderPage();
    const styles = flush();
    return { html, head, styles, buildManifest };
  }

  public render() {
    return (
      &lt;html lang=&quot;en&quot;&gt;
        &lt;Head&gt;
          &lt;style dangerouslySetInnerHTML={{ __html: reset + fonts }} /&gt;
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/html&gt;
    );
  }
}

"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-smi">Document</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-smi">Head</span><span class="pl-kos">,</span> <span class="pl-smi">Main</span><span class="pl-kos">,</span> <span class="pl-smi">NextScript</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'next/document'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">flush</span> <span class="pl-k">from</span> <span class="pl-s">'styled-jsx/server'</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-s1">fonts</span> <span class="pl-k">from</span> <span class="pl-s">'../styles/fonts.css'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">reset</span> <span class="pl-k">from</span> <span class="pl-s">'../styles/reset.css'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-smi">MyDocument</span> <span class="pl-k">extends</span> <span class="pl-smi">Document</span> <span class="pl-kos">{</span>
  <span class="pl-k">public</span> <span class="pl-k">static</span> <span class="pl-en">getInitialProps</span><span class="pl-kos">(</span><span class="pl-kos">{</span> renderPage <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> html<span class="pl-kos">,</span> head<span class="pl-kos">,</span> buildManifest <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">renderPage</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-s1">styles</span> <span class="pl-c1">=</span> <span class="pl-en">flush</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-kos">{</span> html<span class="pl-kos">,</span> head<span class="pl-kos">,</span> styles<span class="pl-kos">,</span> buildManifest <span class="pl-kos">}</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">public</span> <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">html</span> <span class="pl-c1">lang</span><span class="pl-c1">=</span><span class="pl-s">"en"</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-smi">Head</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">dangerouslySetInnerHTML</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span> <span class="pl-c1">__html</span>: <span class="pl-s1">reset</span> <span class="pl-c1">+</span> <span class="pl-s1">fonts</span> <span class="pl-kos">}</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">Head</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">body</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-smi">Main</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-smi">NextScript</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">body</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">html</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>
</pre></div>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOS</li>
<li>Version of Next.js: 7.0.0</li>
</ul>
<h1 dir="auto">Feature request</h1>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto"><code class="notranslate">readline.cursorTo</code> and <code class="notranslate">readline.clearScreenDown</code> (<a href="https://github.com/zeit/next.js/blob/78bcfa07b2b3f495d7bf4d215b9f5442802fcdf6/packages/next/build/output/store.ts#L25">here</a>) help to make the outputs clean for developing react components and pages, but it ruins the outputs when we are doing some testing because it changes the output format, prints so many blank rows and wipes out other outputs such as <code class="notranslate">console.log</code>s for debugging purpose.</p>
<p dir="auto">Besides, managing the outputs and avoiding using plain <code class="notranslate">console.log</code>s is a good practice for libraries.</p>
<h2 dir="auto">Describe the solution you'd like</h2>
<ul dir="auto">
<li>Provide an option to disable the feature.</li>
<li>wrap <code class="notranslate">unistore</code> instance into a new class which accepts the option above</li>
</ul>
<p dir="auto">Or</p>
<p dir="auto">Is it possible to allow us to change the unistore subscriber?</p>
<h2 dir="auto">Describe alternatives you've considered</h2>
<blockquote>
<p dir="auto">A clear and concise description of any alternative solutions or features you've considered.</p>
</blockquote>
<h2 dir="auto">Additional context</h2>
<blockquote>
<p dir="auto">Add any other context or screenshots about the feature request here.</p>
</blockquote>