search

sumcumo / vue-datepicker

A datepicker Vue component. Compatible with Vue 2.x.
https://sumcumo.github.io/vue-datepicker/
Apache License 2.0
75 stars 22 forks source link

sideEffects: false causes CSS to not be included in production builds #113

Closed joakimglaving closed 3 years ago

joakimglaving commented 3 years ago

Hello, when migrating from v2 to v3, we noticed that the CSS were not being applied when building for production (but in dev everything works).

It seems as if sideEffects: false in package.json causes the CSS to not be included when building for production. See here: https://github.com/vuejs/vue-loader/issues/1435

If I remove the sideEffects flag from package.json, the CSS will be included as usual.

MrWook commented 3 years ago

Hey, how do you import the datepicker? Maybe you are using the components directly. The bundles don't have any css in them, the css is extracted out of the single file components into a css file which you need to include by your self.

joakimglaving commented 3 years ago

I import them directly in the component that is using them:

import Datepicker from '@sum.cumo/vue-datepicker' import '@sum.cumo/vue-datepicker/dist/Datepicker.css'

I have checked the CSS file after build, and can see that with sideEffects: false the CSS is not included, but when I remove it, the CSS is included.

MrWook commented 3 years ago

Wow a direct import is striped away, this is stupid not gonna lie 🤦

I found an explanation for it but i think its still pretty stupid:

And there's a final gotcha: if an npm package has any .css files that a user can import then these .css files are all "side effects", because: import 'npm-package/style.css' has no variable assigned to this import which effectively means "this imported module is not used anywhere in the application" for Webpack. And so Webpack simply discards the 'npm-package/style.css' file from the bundle as part of the "tree-shaking" process if the npm-package has sideEffects: false flag. So, instead of writing sideEffects: false always write "sideEffects": ["*.css"]. Even if your npm package doesn't export any CSS files it might do so in some future and this will guard against the aforementioned "CSS file not included" bug.

MrWook commented 3 years ago

Release a new version 3.2.2 with the fix for the sideeffects