<p dir="auto">Moved from <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="567188582" data-permission-text="Title is private" data-url="https://github.com/webpack-contrib/mini-css-extract-plugin/issues/501" data-hovercard-type="issue" data-hovercard-url="/webpack-contrib/mini-css-extract-plugin/issues/501/hovercard" href="https://github.com/webpack-contrib/mini-css-extract-plugin/issues/501">webpack-contrib/mini-css-extract-plugin#501</a></p>
<ul dir="auto">
<li>Operating System: Mac OS Catalina</li>
<li>Node Version: 12.15.0</li>
<li>NPM Version: 6.13.4</li>
<li>webpack Version: 4.41.4</li>
<li>mini-css-extract-plugin Version: 0.9.0</li>
</ul>
<h3 dir="auto">Expected Behavior</h3>
<p dir="auto">Rules order is consistent between development and production</p>
<h3 dir="auto">Actual Behavior</h3>
<p dir="auto">Rule order is defined by imports order in development, and by usage order in production</p>
<h3 dir="auto">Code / How Do We Reproduce?</h3>
<p dir="auto"><a href="https://github.com/Hypnosphi/style-loader-duplicates/tree/mcep">https://github.com/Hypnosphi/style-loader-duplicates/tree/mcep</a></p>
<p dir="auto">Note that I import <code class="notranslate">a</code> before <code class="notranslate">b</code>, but use <code class="notranslate">b</code> before <code class="notranslate">a</code>. This leads to text being red in dev and blue in prod</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {a} from './a.css'
import {b} from './b.css'

document.body.innerHTML = `&lt;div class=&quot;${b} ${a}&quot;&gt;Text&lt;/div&gt;`"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-s1">a</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./a.css'</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-s1">b</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./b.css'</span>

<span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">.</span><span class="pl-c1">innerHTML</span> <span class="pl-c1">=</span> <span class="pl-s">`&lt;div class="<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">b</span><span class="pl-kos">}</span></span> <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">a</span><span class="pl-kos">}</span></span>"&gt;Text&lt;/div&gt;`</span></pre></div>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Bug</p>


<p dir="auto"><strong>What is the current behavior?</strong><br>
CSS seems to be out of order in "development" vs "production" mode. It appears somehow related to <code class="notranslate">sideEffects</code> and tree shaking.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>



<p dir="auto">Here's a repo demonstrating the issue: <a href="https://github.com/brycehill/webpack-css-order">https://github.com/brycehill/webpack-css-order</a>.</p>
<p dir="auto">There are instructions in the readme. Basically, if you build in <code class="notranslate">development</code> mode, the outputted CSS is different from <code class="notranslate">production</code> mode.</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
CSS order is consistent from one environment to another.</p>
<p dir="auto">I don't want to depend on a specific CSS order, but I do expect it to be consistent from when I develop to when I build for production.</p>
<p dir="auto"><strong>If this is a feature request, what is motivation or use case for changing the behavior?</strong><br>
N/A</p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.</strong></p>
<p dir="auto">Node: v8.9.1<br>
Webpack: v4.6.0<br>
OS: MacOS High Sierra</p>