Implement mini-css-extract-plugin

[timneutkens]

Fixes #127
Fixes #226
Fixes #71
Fixes #187
Fixes #205
Fixes #209
Fixes #196
Fixes #208
Fixes #193
Fixes #177
Fixes #192
Fixes #180
Fixes #170
Fixes #168
Fixes #145
Fixes #150
Fixes #64
Fixes #134
Fixes #11

• Webpack 4 support for next-css/sass/less/stylus with mini-css-extract-plugin
• Custom _document.js is no longer needed for next-css/sass/less/stylus
• Automatically adds chunkhash to file when building for production

Depends on vercel/next.js#4861

Breaking

• Replaced extract-text-plugin with mini-css-extract-plugin
• commons-chunk-config.js was removed
• css-loader-config.js no longer accepts the extractPlugin parameter. The default configuration is now tailored to Next.js
• _document.js is no longer needed, Next.js now knows how to handle .css chunks attached to pages

Changes

Major

• Replaced extract-text-plugin with mini-css-extract-plugin
• commons-chunk-config.js was removed
• css-loader-config.js no longer accepts the extractPlugin parameter. The default configuration is now tailored to Next.js
• _document.js is no longer needed, Next.js now knows how to handle .css chunks attached to pages

Minor

• next-css/sass/stylus/less can now all be applied together. Previously this led to only one of the plugin's output being generated in production
• chunkhash is now applied in production automatically, and again, Next.js handles adding the chunk file automatically
• importing css in dynamic imports should now work

[timneutkens]

✅ed by @alexindigo

[curran]

Wow that's a lot of Fixes! Excellent work, thank you for this awesome effort.

[kachkaev]

Is there a way to print the contents of the stylesheet inline right inside _document.js? Automatically added <link rel="stylesheet" href="/_next/static/css/styles.5f88a3eb.chunk.css"/> is easy for developers, but comes at a cost for users. In my case, it blocks rendering by ≈1 second and shows this warning in the lighthouse report:

External stylesheets are blocking the first paint of your page. Consider delivering critical CSS via > <style> tags and deferring non-critical styles. Learn more.

See original discovery of this performance issue in #11 (comment).

It'd be great to be able to use <style>...inline...</style> instead (perhaps, as an opt-in).

[kachkaev]

I opened a separate issue re. the comment above: #238

cc @r0b-

[lqmanh]

Has this come out in the latest release (v0.2) yet?

[kachkaev]

You can use it in canary

yarn add next@canary
yarn add -D @zeit/next-css@canary

Don’t forget to upgrade other next plugins if you are using them.

[StarpTech]

@kachkaev thank your for the tip. @timneutkens The last canary version of next-css fix an really important issue with a stale cache in HMR mode. Any informations when it will be released as stable?

Before

http://127.0.0.1:8082/_next/static/chunks/styles.chunk.css

After

http://127.0.0.1:8082/_next/static/chunks/styles.chunk.css?unix=1555617006657

Thank you!