Inconsistent loading order of CSS Modules + global CSS

Bug report

Describe the bug

I have a global CSS imported in /pages/_app.js and name.module.css imported in a page. In production mode the CSS Module is loaded after the global CSS. In development mode, the CSS Module is loaded before the global CSS.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Repository with code needed to reproduce the issue

1. Add a global style within pages/_app.js
2. Add and import a CSS Module
3. Add CSS classes to both files with the same specificity, so the order of including files resolves the conflict.
4. Run “dev” script.
5. See order of CSS in a browser.
6. Run “build” and “start” scripts.
7. See different order of CSS in a browser.

Expected behavior

In development mode the global CSS should be loaded first and CSS Modules later on, the same as it works in production.

System information

• OS: macOS 10.15.2
• Browser: Chrome 79.0.3945.130
• Version of Next.js: 9.2.0

Additional context

The page looks different in dev and production modes because of CSS overriding.

[sparkertime]

If anyone on this thread is desperate for this fix, it is available in the 9.3.6-canary.0 next.js release (thanks @Timer for turning that around so quickly!)

[valse]

We have the same issue using the version 9.3.0 with SASS globals in _app and the CSS modules for single components