CSS extraction includes css-hot-loader even in production

[edmorley]

The web preset supports extraction of CSS to a separate file as of #443, via @neutrinojs/style-loader and then extract-text-webpack-plugin.

The extract-text-webpack-plugin loader/plugin doesn't support HMR hot reloading itself (unlike style-loader, which works since it's just JS) - so if one wants to use it in development, then css-hot-loader must be used alongside it.

However at the moment the web preset:

• only enables extraction in production:
  https://github.com/mozilla-neutrino/neutrino-dev/blob/ee7b3d90fe93da0b6664b194da2994d4ce79f26e/packages/web/index.js#L37
• but includes css-hot-loader whenever extraction is enabled, even if that's in production:
  https://github.com/mozilla-neutrino/neutrino-dev/blob/ee7b3d90fe93da0b6664b194da2994d4ce79f26e/packages/style-loader/index.js#L102-L104

This combination is confusing, since by default css-hot-loader is only being included in production - where it will never be used.

We should either:

1. Enable extraction in both development and production, plus in development only, also use css-hot-loader
2. Continue to enable extraction only in production by default, and remove the use of css-hot-reloader entirely
3. Continue to enable extraction only in production by default, and make the inclusion of css-hot-reloader conditional on production too. (This would allow people to force extraction to be enabled in development, and yet still have working hot loading)

Also relevant:

• extract-text-webpack-plugin doesn't support webpack 4 - so for that we're going to need to switch to mini-css-extract-plugin. For now the latter also requires the use of css-hot-reloader if being used in development, however it appears that they are hoping to add native support for HMR thereby making css-hot-reloader redundant (Hot Reload plan? webpack-contrib/mini-css-extract-plugin#34).
• the discussion in Reloading extracted css with hot module replacement webpack-contrib/extract-text-webpack-plugin#30 seems to suggest that currently the recommended solution is to not use CSS extraction in development (and instead rely on style-loader)

As such, I'm leaning towards option (2), with the understanding that we will likely enable extraction everywhere once mini-css-extract-plugin supports it natively.

@timkelty @eliperelman - thoughts?

Whilst we're on this topic - it seems like we could improve the way we set default options. This issue in part exists because at the moment, we set the style.extract default according to production, but yet for the hot option, we always set it to true and instead later use a .when() clause to decide whether to invoke devServer etc. But this means that @neutrinojs/style-loader is passed hot: true even in production. I was wondering too if we should move defaults one layer deeper? (ie in @neutrinojs/style-loader)?