Correct Global and Local CSS Loading Order in Dev

[sparkertime]

This fixes #10148 by ensuring that global CSS scripts are loaded before module scripts in dev. This passes all CSS tests but may still need massaging before it's ready for primetime.

Thanks!

[ijjk]

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall decrease ✓

	zeit/next.js canary	sparkertime/next.js canary	Change
buildDuration	11.7s	11.9s	⚠️ +237ms
nodeModulesSize	55.5 MB	55.5 MB	-64 B

Page Load Tests Overall increase ✓

	zeit/next.js canary	sparkertime/next.js canary	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.238	2.284	⚠️ +0.05
/ avg req/sec	1117.19	1094.62	-22.57
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.36	1.324	-0.04
/error-in-render avg req/sec	1838.91	1888.85	⚠️ +49.94

Client Bundles (main, webpack, commons)

	zeit/next.js canary	sparkertime/next.js canary	Change
main-HASH.js gzip	6.25 kB	6.25 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..93a0.js gzip	10.3 kB	10.3 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.4 kB	56.4 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	sparkertime/next.js canary	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.84 kB	6.84 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.5 kB	51.5 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	sparkertime/next.js canary	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	sparkertime/next.js canary	Change
_app.js gzip	1.24 kB	1.24 kB	✓
_error.js gzip	3.15 kB	3.15 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.88 kB	7.88 kB	✓

Client Pages Modern

	zeit/next.js canary	sparkertime/next.js canary	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.3 kB	5.3 kB	✓

Client Build Manifests

	zeit/next.js canary	sparkertime/next.js canary	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	zeit/next.js canary	sparkertime/next.js canary	Change
index.html gzip	925 B	925 B	✓
link.html gzip	934 B	934 B	✓
withRouter.html gzip	922 B	922 B	✓
Overall change	2.78 kB	2.78 kB	✓

---

Serverless Mode (Decrease detected ✓)

General Overall decrease ✓

	zeit/next.js canary	sparkertime/next.js canary	Change
buildDuration	12.2s	12.5s	⚠️ +290ms
nodeModulesSize	55.5 MB	55.5 MB	-64 B

Client Bundles (main, webpack, commons)

	zeit/next.js canary	sparkertime/next.js canary	Change
main-HASH.js gzip	6.25 kB	6.25 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..93a0.js gzip	10.3 kB	10.3 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.4 kB	56.4 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	sparkertime/next.js canary	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.84 kB	6.84 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.5 kB	51.5 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	sparkertime/next.js canary	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	sparkertime/next.js canary	Change
_app.js gzip	1.24 kB	1.24 kB	✓
_error.js gzip	3.15 kB	3.15 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.06 kB	2.06 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.88 kB	7.88 kB	✓

Client Pages Modern

	zeit/next.js canary	sparkertime/next.js canary	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.3 kB	5.3 kB	✓

Client Build Manifests

	zeit/next.js canary	sparkertime/next.js canary	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	zeit/next.js canary	sparkertime/next.js canary	Change
_error.js	557 kB	557 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	557 kB	557 kB	✓
link.js	594 kB	594 kB	✓
routerDirect.js	586 kB	586 kB	✓
withRouter.js	586 kB	586 kB	✓
Overall change	2.89 MB	2.89 MB	✓

[Timer]

This is an absolutely fantastic first contribution. Thank you so much for this!

[belgattitude]

Thanks a lot @sparkertime

[fabinppk]

I have a question 🤔

Ths fix didn't resolve all my problems.

Case:

My element:

My modules acting inside the element

With @zeit/next-css the same code had color: #fff as preference, why?

[malimccalla]

Would this change fix the issue I was having in #8534?

[Timer]

No

[newtoniumx3]

What's the solution for now? I have same problem, I import bootstrap css then right after I try to import a styled component Global but its loaded before and not after the bootstrap css import.

import 'bootstrap/dist/css/bootstrap.min.css'
import GlobalStyle from 'styles/_global';