<p dir="auto">When using <code class="notranslate">styled-jsx</code> in the latest beta, CSS animation keyframes are missing in production. I only noticed this happening today.</p>

<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">A production build should include CSS animation keyframes.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">CSS animation keyframes do not appear in the production build, causing a loss of all animations on the front end.</p>
<h2 dir="auto">Your Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>4.0.0-beta.3</td>
</tr>
<tr>
<td>node</td>
<td>v8.6.0</td>
</tr>
</tbody>
</table>
<p dir="auto">I am using styled-jsx throughout my app and I am getting a flicker when the server loads the initial page.<br>
This only happens when I use a custom _document.js, so it must be something with that page.</p>
<p dir="auto">This is the code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import Document, { Head, Main, NextScript } from 'next/document'
import GoogleTagManager from '../utils/GTM'
import flush from 'styled-jsx/server'

export default class MyDocument extends Document {
    static async getInitialProps ({ renderPage }) {
        const { html, head } = renderPage()
        const styles = flush()
        return { html, head, styles }
    }
    render () {
        console.log('styles: ', this.props.styles)
        return (
            &lt;html&gt;
                &lt;head&gt;
                    &lt;script src={`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_KEY}`} /&gt;
                    &lt;meta charSet=&quot;utf-8&quot; /&gt;
                    {this.props.styles}
                &lt;/head&gt;
                &lt;body className=&quot;body&quot;&gt;
                    &lt;GoogleTagManager gtmId='GTM-xxx' /&gt;
                    &lt;div id=&quot;fb-root&quot; /&gt;
                    &lt;Main /&gt;
                    &lt;NextScript /&gt;
                &lt;/body&gt;
            &lt;/html&gt;
        )
    }
}"><pre class="notranslate"><code class="notranslate">import Document, { Head, Main, NextScript } from 'next/document'
import GoogleTagManager from '../utils/GTM'
import flush from 'styled-jsx/server'

export default class MyDocument extends Document {
    static async getInitialProps ({ renderPage }) {
        const { html, head } = renderPage()
        const styles = flush()
        return { html, head, styles }
    }
    render () {
        console.log('styles: ', this.props.styles)
        return (
            &lt;html&gt;
                &lt;head&gt;
                    &lt;script src={`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_KEY}`} /&gt;
                    &lt;meta charSet="utf-8" /&gt;
                    {this.props.styles}
                &lt;/head&gt;
                &lt;body className="body"&gt;
                    &lt;GoogleTagManager gtmId='GTM-xxx' /&gt;
                    &lt;div id="fb-root" /&gt;
                    &lt;Main /&gt;
                    &lt;NextScript /&gt;
                &lt;/body&gt;
            &lt;/html&gt;
        )
    }
}
</code></pre></div>
<p dir="auto">Output:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="styles: []
styles: []"><pre class="notranslate"><code class="notranslate">styles: []
styles: []
</code></pre></div>
<p dir="auto">The console output for props.style is always empty arrays.  Should this be done in a different way? I'm unsure what to do as the docs seem to say this is all that is needed.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>2.4.6</td>
</tr>
<tr>
<td>node</td>
<td>7.7.4</td>
</tr>
<tr>
<td>OS</td>
<td>w10/macos/centos</td>
</tr>
<tr>
<td>browser</td>
<td>all</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>