<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">I visit homepage and expect to see styled content immediately.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Webpage does not immediately render styles in <code class="notranslate">&lt;style jsx&gt;</code> tags.  It does however, render styles declared explicitly within a components <code class="notranslate">style</code> attribute.  For example, in the code below, the text is blue on page load (immediately), but the <code class="notranslate">.hello</code> styles do not load immediately.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">I am using Firebase Cloud Functions for the server portion of app.  The <code class="notranslate">.babelrc</code> file is used both for <code class="notranslate">next build</code> and for a custom deployment step I need to perform to get the source files working on Cloud Functions.  Firebase Cloud Functions do not install <code class="notranslate">devDependencies</code>, and it was complaining that both <code class="notranslate">babel-runtime</code> and <code class="notranslate">styled-jsx</code> were not found, so I added them to my dependency list.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// pages/index.js

export default () =&gt; (
  &lt;div className='hello'&gt;
    &lt;p style={{ color: 'blue' }}&gt;Hello World&lt;/p&gt;
    &lt;style jsx&gt;{`
      .hello {
        font: 15px Helvetica, Arial, sans-serif;
        background: #eee;
        padding: 100px;
        text-align: center;
        transition: 100ms ease-in background;
      }
      .hello:hover {
        background: #ccc;
      }
    `}&lt;/style&gt;
  &lt;/div&gt;
);"><pre class="notranslate"><span class="pl-c">// pages/index.js</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">'hello'</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">p</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span> <span class="pl-c1">color</span>: <span class="pl-s">'blue'</span> <span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>Hello World<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">jsx</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s">`</span>
<span class="pl-s">      .hello {</span>
<span class="pl-s">        font: 15px Helvetica, Arial, sans-serif;</span>
<span class="pl-s">        background: #eee;</span>
<span class="pl-s">        padding: 100px;</span>
<span class="pl-s">        text-align: center;</span>
<span class="pl-s">        transition: 100ms ease-in background;</span>
<span class="pl-s">      }</span>
<span class="pl-s">      .hello:hover {</span>
<span class="pl-s">        background: #ccc;</span>
<span class="pl-s">      }</span>
<span class="pl-s">    `</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">style</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// .babelrc

{
  &quot;presets&quot;: [
    [&quot;env&quot;, { &quot;targets&quot;: { &quot;node&quot;: &quot;6.11&quot; } }],
    &quot;next/babel&quot;,
    &quot;stage-0&quot;
  ],
  &quot;plugins&quot;: [
    &quot;transform-inline-environment-variables&quot;,
    [&quot;styled-jsx/babel&quot;, { &quot;optimizeForSpeed&quot;: true }]
  ]
}"><pre class="notranslate"><span class="pl-ii">// .babelrc</span>

{
  <span class="pl-ent">"presets"</span>: [
    [<span class="pl-s"><span class="pl-pds">"</span>env<span class="pl-pds">"</span></span>, { <span class="pl-ent">"targets"</span>: { <span class="pl-ent">"node"</span>: <span class="pl-s"><span class="pl-pds">"</span>6.11<span class="pl-pds">"</span></span> } }],
    <span class="pl-s"><span class="pl-pds">"</span>next/babel<span class="pl-pds">"</span></span>,
    <span class="pl-s"><span class="pl-pds">"</span>stage-0<span class="pl-pds">"</span></span>
  ],
  <span class="pl-ent">"plugins"</span>: [
    <span class="pl-s"><span class="pl-pds">"</span>transform-inline-environment-variables<span class="pl-pds">"</span></span>,
    [<span class="pl-s"><span class="pl-pds">"</span>styled-jsx/babel<span class="pl-pds">"</span></span>, { <span class="pl-ent">"optimizeForSpeed"</span>: <span class="pl-c1">true</span> }]
  ]
}</pre></div>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
// from package.json

{
  &quot;dependencies&quot;: {
    &quot;babel-cli&quot;: &quot;^6.26.0&quot;,
    &quot;babel-plugin-transform-inline-environment-variables&quot;: &quot;^0.2.0&quot;,
    &quot;babel-preset-env&quot;: &quot;^1.6.1&quot;,
    &quot;babel-preset-stage-0&quot;: &quot;^6.24.1&quot;,
    &quot;babel-runtime&quot;: &quot;^6.26.0&quot;,
    &quot;firebase-admin&quot;: &quot;^5.5.1&quot;,
    &quot;firebase-functions&quot;: &quot;^0.7.3&quot;,
    &quot;next&quot;: &quot;^4.2.0&quot;,
    &quot;react&quot;: &quot;^16.2.0&quot;,
    &quot;react-dom&quot;: &quot;^16.2.0&quot;,
    &quot;styled-jsx&quot;: &quot;^2.2.1&quot;
  },
}"><pre class="notranslate"><span class="pl-ii">// from package.json</span>

{
  <span class="pl-ent">"dependencies"</span>: {
    <span class="pl-ent">"babel-cli"</span>: <span class="pl-s"><span class="pl-pds">"</span>^6.26.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"babel-plugin-transform-inline-environment-variables"</span>: <span class="pl-s"><span class="pl-pds">"</span>^0.2.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"babel-preset-env"</span>: <span class="pl-s"><span class="pl-pds">"</span>^1.6.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"babel-preset-stage-0"</span>: <span class="pl-s"><span class="pl-pds">"</span>^6.24.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"babel-runtime"</span>: <span class="pl-s"><span class="pl-pds">"</span>^6.26.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"firebase-admin"</span>: <span class="pl-s"><span class="pl-pds">"</span>^5.5.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"firebase-functions"</span>: <span class="pl-s"><span class="pl-pds">"</span>^0.7.3<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"next"</span>: <span class="pl-s"><span class="pl-pds">"</span>^4.2.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react"</span>: <span class="pl-s"><span class="pl-pds">"</span>^16.2.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react-dom"</span>: <span class="pl-s"><span class="pl-pds">"</span>^16.2.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"styled-jsx"</span>: <span class="pl-s"><span class="pl-pds">"</span>^2.2.1<span class="pl-pds">"</span></span>
  },
}</pre></div>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">Hot Module Replacement doesn't reload styles when switching between pages</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">I created a demo repo here:<br>
<a href="https://github.com/scabbiaza/nextjs-test">https://github.com/scabbiaza/nextjs-test</a></p>
<p dir="auto">Steps to reproduce:</p>
<ol dir="auto">
<li>Create two pages, each one should include own CSS files:<br>
<a href="https://github.com/scabbiaza/nextjs-test/tree/master/pages">https://github.com/scabbiaza/nextjs-test/tree/master/pages</a></li>
</ol>
<p dir="auto">In my case:</p>
<ul dir="auto">
<li>home page has styles to make a text RED</li>
<li>about page has styles to make a text GREEN</li>
</ul>
<ol start="2" dir="auto">
<li>
<p dir="auto">Run <code class="notranslate">npm run dev</code></p>
</li>
<li>
<p dir="auto">Open the home page, see that CSS has styles for the current page only</p>
</li>
</ol>
<p dir="auto">Text color is red, which is correct:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/2734464/51970454-a0e01f80-247f-11e9-94f8-7111380b3e10.png"><img width="805" alt="screen shot 2019-01-30 at 11 08 20" src="https://user-images.githubusercontent.com/2734464/51970454-a0e01f80-247f-11e9-94f8-7111380b3e10.png" style="max-width: 100%;"></a></p>
<ol start="4" dir="auto">
<li>Click on the link to load About page, styles are not updated</li>
</ol>
<p dir="auto">Text color is red, which is incorrect! Should be green</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/2734464/51970506-c705bf80-247f-11e9-96d0-5db7219f5644.png"><img width="799" alt="screen shot 2019-01-30 at 11 08 31" src="https://user-images.githubusercontent.com/2734464/51970506-c705bf80-247f-11e9-96d0-5db7219f5644.png" style="max-width: 100%;"></a></p>
<p dir="auto">Although, we can see that the script to hot-reload CSS was loaded:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/2734464/51970586-fa484e80-247f-11e9-916e-09c0e8c6ef31.png"><img width="991" alt="screen shot 2019-01-30 at 11 08 44" src="https://user-images.githubusercontent.com/2734464/51970586-fa484e80-247f-11e9-916e-09c0e8c6ef31.png" style="max-width: 100%;"></a></p>
<p dir="auto">If you refresh a page, or change any code, styles will be updated on the page.</p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">Styles should be updated when switchig between pages inside a SPA.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOS</li>
<li>Browser: Chrome</li>
<li>Next: 7.0.2</li>
<li>zeit/<a class="issue-link js-issue-link notranslate" rel="noopener noreferrer nofollow" href="https://linear.app/vercel/issue/NEXT-css">next-css</a> 1.0.1</li>
</ul>
<p dir="auto">Not sure if this is an issue in NextJs configuraitons, or in Webpack. Please advise.</p>