<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?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">We upgraded from version <code class="notranslate">5.0.1-canary.17</code> to version <code class="notranslate">6.0.0-canary.2</code>. This was to fix a problem with pressing the back button whilst using the Safari browser. This problem was fixed but we created another issue with the stylesheets. The stylesheets were previously being bundled together and served correctly, now they're not.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">We initially had this setup in our <code class="notranslate">_document.js</code> page. However, the 'fs' module errored and we found the latest solution here: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="311991681" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/4119" data-hovercard-type="pull_request" data-hovercard-url="/vercel/next.js/pull/4119/hovercard" href="https://github.com/vercel/next.js/pull/4119">#4119</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { readFileSync } from 'fs';

const dev = process.env.NODE_ENV !== 'production';

function getStyles() {
  return readFileSync(`${process.cwd()}/src/.next/static/style.css`, {
    encoding: 'utf8',
  });
}

export default class extends Document {
  render() {
    return (
      &lt;html lang=&quot;en&quot;&gt;
        &lt;Head&gt;
          {dev &amp;&amp; (
            &lt;link
              rel=&quot;stylesheet&quot;
              href={`/_next/static/style.css?v=${Math.random().toString(32)}`}
            /&gt;
          )}
          {!dev &amp;&amp; &lt;style dangerouslySetInnerHTML={{ __html: getStyles() }} /&gt;}
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/html&gt;
    );
  }
}"><pre class="notranslate"><code class="notranslate">import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { readFileSync } from 'fs';

const dev = process.env.NODE_ENV !== 'production';

function getStyles() {
  return readFileSync(`${process.cwd()}/src/.next/static/style.css`, {
    encoding: 'utf8',
  });
}

export default class extends Document {
  render() {
    return (
      &lt;html lang="en"&gt;
        &lt;Head&gt;
          {dev &amp;&amp; (
            &lt;link
              rel="stylesheet"
              href={`/_next/static/style.css?v=${Math.random().toString(32)}`}
            /&gt;
          )}
          {!dev &amp;&amp; &lt;style dangerouslySetInnerHTML={{ __html: getStyles() }} /&gt;}
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/html&gt;
    );
  }
}
</code></pre></div>
<p dir="auto">We thus changed to the below noted, and removed the <code class="notranslate">fs</code> module causing that error.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
const dev = process.env.NODE_ENV !== 'production';

export default class extends Document {
  render() {
    const { buildManifest } = this.props;
    const { css } = buildManifest;
    console.log('buildManifest', buildManifest);
    console.log('css', css);

    return (
      &lt;html lang=&quot;en&quot;&gt;
        &lt;Head&gt;
          {css.map(file =&gt; (
            &lt;link rel=&quot;stylesheet&quot; href={`/_next/${file}?version=${ Math.random().toString(32)}`} key={file} /&gt;
          ))}
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/html&gt;
    );
  }
}"><pre class="notranslate"><code class="notranslate">import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
const dev = process.env.NODE_ENV !== 'production';

export default class extends Document {
  render() {
    const { buildManifest } = this.props;
    const { css } = buildManifest;
    console.log('buildManifest', buildManifest);
    console.log('css', css);

    return (
      &lt;html lang="en"&gt;
        &lt;Head&gt;
          {css.map(file =&gt; (
            &lt;link rel="stylesheet" href={`/_next/${file}?version=${ Math.random().toString(32)}`} key={file} /&gt;
          ))}
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/html&gt;
    );
  }
}
</code></pre></div>
<p dir="auto">However, we now have a new problem as only some of our styling is being ported over. the log of the <code class="notranslate">css</code> array pulled out of the <code class="notranslate">buildManifest</code> has two CSS paths, we suspect that one is overwriting the other perhaps instead of being bundled together.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" css: [ 'static/style.css', 'static/style.css' ],
  'main.js': [ 'static/commons/main.js' ],
  'bundles/pages/_document.js': [ 'bundles/pages/_document.js' ],
  'bundles/pages/_error.js': [ 'bundles/pages/_error.js' ],
  'bundles/pages/_app.js': [ 'bundles/pages/_app.js' ],
  'manifest.js': [ 'static/commons/manifest.js' ],
  'bundles/pages/cm/templates/homepage.js': [ 'bundles/pages/cm/templates/homepage.js' ],
  'bundles/pages/cm/templates/news.js': [ 'bundles/pages/cm/templates/news.js' ] }"><pre class="notranslate"><code class="notranslate"> css: [ 'static/style.css', 'static/style.css' ],
  'main.js': [ 'static/commons/main.js' ],
  'bundles/pages/_document.js': [ 'bundles/pages/_document.js' ],
  'bundles/pages/_error.js': [ 'bundles/pages/_error.js' ],
  'bundles/pages/_app.js': [ 'bundles/pages/_app.js' ],
  'manifest.js': [ 'static/commons/manifest.js' ],
  'bundles/pages/cm/templates/homepage.js': [ 'bundles/pages/cm/templates/homepage.js' ],
  'bundles/pages/cm/templates/news.js': [ 'bundles/pages/cm/templates/news.js' ] }
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<p dir="auto">To reproduce the issue, I've set up a very simple example at this repo: <a href="https://github.com/Rusticman/test-next">https://github.com/Rusticman/test-next</a></p>
<ol dir="auto">
<li>Pull in code</li>
<li>run <code class="notranslate">npm install</code></li>
<li>run <code class="notranslate">npm run dev</code></li>
<li>available at <code class="notranslate">localhost:3000</code><br>
There are only two paths; <code class="notranslate">/</code> (root url)  &amp; <code class="notranslate">/news</code>. They should have the same styling. homepage styling pulls through initially, but then fails to bundle on subsequent navigation to and from homepage.</li>
</ol>
<p dir="auto">If you run <code class="notranslate">npm run build</code> &amp; <code class="notranslate">npm run start</code> the homepage styling never appears.</p>
<h2 dir="auto">Context</h2>


<p dir="auto">This issue has stopped us from adopting the latest version of next.</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>6.0.0-canary.2</td>
</tr>
<tr>
<td>node</td>
<td>9.5.0</td>
</tr>
<tr>
<td>OS</td>
<td>MacOS Sierra 10.12.6</td>
</tr>
<tr>
<td>browser</td>
<td>Google Chrome   v65</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">Is there a recommended approach for page transitions... to have current page slide out and next page slide in. So something like this: <a href="https://github.com/maisano/react-router-transition">https://github.com/maisano/react-router-transition</a></p>