New webpack mini-css-extract-plugin didn't work with imported styles because of wrong sideEffects flag value

[iAdramelk]

Bug report

I'm trying to migrate to webpack@4. Webpack after 4.x.x didn't support extract-text-webpack-plugin and developers recommends to use mini-css-extract-plugin. It works fine but didn't imports following files:

import '@blueprintjs/core/lib/css/blueprint.css';
import '@blueprintjs/icons/lib/css/blueprint-icons.css';

While investigatin source of this problem I found following issue webpack-contrib/mini-css-extract-plugin#102 and following comment in it: webpack-contrib/mini-css-extract-plugin#102 (comment)

It says:

react-live has sideEffects: false in it's package.json. This flags all modules as side effect free. But this is incorrect as css files have a side effect (adding styles to the DOM). As you are not using any export of the imported css webpack flags the css file as unneeded and doesn't include it in the css bundle.

Instead the package.json should do sideEffects: [ "*.css" ].

@blueprint packages also use sideEffects: false flag in their package.json files, so I tried to replace it with sideEffects: [ "*.css" ] and it fixed this issue for me.

Can we update it in repo?

[giladgray]

yes we should definitely update this in the package.json files! this same issue just surfaced internally.