sideEffects: false causes imported CSS file to be optimized away by Webpack 4+

[jaydiablo]

I'm importing the CSS file for this component in the JS of my app like so:

import 'ng2-daterangepicker/assets/daterangepicker.css';

Which works fine, until a production build is done. This component's package.json file has this line in it:

"sideEffects": false,

Which tells Webpack 4 that if there are unused imports, they can be optimized away (tree shaken: https://webpack.js.org/guides/tree-shaking/), and since this CSS file isn't exported or used in the app directly, Webpack just removes the import during the production build.

There might be something I can do in the app to prevent this from happening (import to a variable and export that maybe, or override that sideEffects setting locally (not sure if that's possible, but going to try)), but I think the better solution is for this component to change the sideEffects property in the dist package.json to something like this:

"sideEffects": ["*.css"],

Which would allow any consumers of this component to import the CSS files in Webpack and not have them tree-shaken away.

I'm using version 3.0.1 of this component, but I suspect that this issue applies to all versions.

This Github issue in the webpack project explains the issue well, and shows the fix for a different library that exhibited the same issue: https://github.com/webpack/webpack/issues/8814

Thanks!

[evansmwendwa]

If you found a fix maybe you can consider opening a PR?