sideEffects: false changes rules order in production

[Hypnosphi]

Maybe related: #188 #202

• Operating System: Mac OS Catalina
• Node Version: 12.15.0
• NPM Version: 6.13.4
• webpack Version: 4.41.4
• mini-css-extract-plugin Version: 0.9.0

Expected Behavior

Rules order is consistent between development and production

Actual Behavior

Rule order is defined by imports order in development, and by usage order in production

Code / How Do We Reproduce?

https://github.com/Hypnosphi/style-loader-duplicates/tree/mcep

Note that I import a before b, but use b before a. This leads to text being red in dev and blue in prod

import {a} from './a.css'
import {b} from './b.css'

document.body.innerHTML = `<div class="${b} ${a}">Text</div>`

[alexander-akait]

Please open the issue in webpack, it is out of scope this plugin