<p dir="auto">In this case, picture is worth 1000 words:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3394202/33049327-275cc750-ce25-11e7-8936-153e4a5acc1b.png"><img width="989" alt="nextjs-css-bug" src="https://user-images.githubusercontent.com/3394202/33049327-275cc750-ce25-11e7-8936-153e4a5acc1b.png" style="max-width: 100%;"></a></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>
<ul dir="auto">
<li>Data urls should be left unmodified</li>
</ul>
<h2 dir="auto">Current Behavior</h2>
<ul dir="auto">
<li><code class="notranslate">filter: url('data:image/svg+xml;...</code> gets mangled into <code class="notranslate">filter: url("http://localhost:3000//'data:image/svg+xml;...</code></li>
</ul>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Clone <a href="https://github.com/agurtovoy/nextjs-css-substitution-bug">https://github.com/agurtovoy/nextjs-css-substitution-bug</a></li>
<li><code class="notranslate">npm install</code></li>
<li><code class="notranslate">npm dev</code></li>
<li>Open <a href="http://localhost:3000/" rel="nofollow">http://localhost:3000/</a> in Firefox, go to dev console's Style Editor tab, select "Show original sources" option to see the compiled CSS:</li>
</ol>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3394202/33049500-0ba9afea-ce26-11e7-83eb-3e27bb3f3fc7.png"><img width="886" alt="screen shot 2017-11-20 at 7 06 37 pm" src="https://user-images.githubusercontent.com/3394202/33049500-0ba9afea-ce26-11e7-83eb-3e27bb3f3fc7.png" style="max-width: 100%;"></a></p>
<h2 dir="auto">Context</h2>
<p dir="auto">Note that <strong>the issue has more severe impact in production</strong>: a side-effect of this bug is that the browser ignores the rest of the CSS line in question due to unmatched <code class="notranslate">"</code>; because in production the CSS is likely to be minimized into a single line of text, that means that all styles following the <code class="notranslate">filter: drop-shadow</code> property will be silently ignored.</p>
<p dir="auto">You can see that effect in the repo with the reproduce: if you do <code class="notranslate">npm build &amp;&amp; npm start</code>, you'll see that the "Hello" text loses its red styling.</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.1.4</td>
</tr>
<tr>
<td>node</td>
<td>v6.11.1</td>
</tr>
<tr>
<td>OS</td>
<td>macOS</td>
</tr>
<tr>
<td>browser</td>
<td>any</td>
</tr>
</tbody>
</table>
<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>
<p dir="auto">We use semantic-ui for our styling. I have tried the latest 5.0.1-canary17 and the problem is also there.</p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">When simply upgrading from 5.0.0 to 5.0.1-canary.1 I expect the CSS to be the same</p>
<p dir="auto">This is a screenshot with 5.0.0<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3585707/37816745-7a817ffc-2e74-11e8-9188-838a3d6a55cd.png"><img src="https://user-images.githubusercontent.com/3585707/37816745-7a817ffc-2e74-11e8-9188-838a3d6a55cd.png" alt="syjzry15z-screen5 0 0" style="max-width: 100%;"></a></p>
<p dir="auto">This is a screenshot with 5.0.1-canary.1<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3585707/37816735-73e9c168-2e74-11e8-9707-073bf7023ef2.png"><img src="https://user-images.githubusercontent.com/3585707/37816735-73e9c168-2e74-11e8-9707-073bf7023ef2.png" alt="r1e1whty5z-screen5 0 1 canary1" style="max-width: 100%;"></a><br>
I have made a small project where the problem can be seen. The repo can be found here -&gt;</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The layout is rendered as we think it should look</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li></li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="git clone https://github.com/LarsBuur/test-semantic-ui-next-canary.git
cd test-semantic-ui-next-canary
npm install &amp;&amp; npm run build &amp;&amp; npm start"><pre class="notranslate"><code class="notranslate">git clone https://github.com/LarsBuur/test-semantic-ui-next-canary.git
cd test-semantic-ui-next-canary
npm install &amp;&amp; npm run build &amp;&amp; npm start
</code></pre></div>
<ol start="2" dir="auto">
<li>
<p dir="auto">open <a href="http://localhost:3000" rel="nofollow">http://localhost:3000</a></p>
</li>
<li>
<p dir="auto">confirm the layout renders with padding around black area</p>
</li>
<li>
<p dir="auto">change "next": "^5.0.0" to "next": "^5.0.1-canary.1" in package.json</p>
</li>
<li></li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="npm run clean &amp;&amp; npm install &amp;&amp; npm run build &amp;&amp; npm start"><pre class="notranslate"><code class="notranslate">npm run clean &amp;&amp; npm install &amp;&amp; npm run build &amp;&amp; npm start
</code></pre></div>
<ol start="5" dir="auto">
<li>open <a href="http://localhost:3000" rel="nofollow">http://localhost:3000</a></li>
<li>confirm that the layout renders without padding around the black area</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">Build a next app with custom server for our endpoints.</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>5.0.0</td>
</tr>
<tr>
<td>node</td>
<td>v.9.0.0</td>
</tr>
<tr>
<td>OS</td>
<td>OSX 10.13.4 Beta (17E182a)</td>
</tr>
<tr>
<td>browser</td>
<td>Google Chrome 65.0.3325.162 (Officiel version) (64-bit)</td>
</tr>
</tbody>
</table>
<p dir="auto">|<br>
-- | --</p>