Style in vue files is ignored when `sideEffects: false` is defined in package.json

[posva]

Bug report

Version

0.14.0

Steps to reproduce

Create a vue component in .vuepress/components

<template>
  <p class="red">Should be red</p>
</template>

<style scoped>
.red {
  color: red
}
</style>

Add "sideEffects": false to package.json file

The scoped attribute doesn't have an impact

What is expected?

When runnig the build, the css should be extracted in a CSS file

What is actually happening?

The CSS is dropped at some point, but it works correctly under dev

Other relevant information

• Your OS: latest osx
• Node.js version: 10
• Browser version: Chrome
• Is this a global or local install? local
• Which package manager did you use for the install? yarn

[ulivz]

I just created a reproduction repo for it but cannot repro it, did I miss something?

You can find the css has been be extracted in the CSS file.

https://github.com/ulivz/vuepress-718/blob/953c15eb45918e515b2fa7fb664c170d3a5284ef/docs/.vuepress/dist/assets/css/0.styles.92dc547d.css#L128-L130

[posva]

Ups missclick, although, it's probably a problem on my end then.
The problem happens in vue router docs, but it's too big for a repro, unless you want to give it a look and maybe send a pr 😇
This is the branch: https://github.com/vuejs/vue-router/tree/feat/docs-live-examples

Closing as it looks like a problem in my end

[posva]

I'm going crazy. There is something in vue-router repo that is causing a side effect on vuepress but I don't know what. I will try adding files and dependencies. Copying the whole docs folder (plus adding raw-loader and vue-theme) yields the correct result

[posva]

Finally found the problem: it's adding sideEffects: false to package.json file (it's a webpack thing for libraries). I created a pull request adding that to the package.json file: ulivz/vuepress-718#1

[ulivz]

Oh, just confirmed for that, the styles are truly lost 😳

[posva]

maybe it's an upstream bug, coming from webpack or one the plugins or maybe a simple conf to add to webpack. I am also looking at it, trying my best to find where this comes from. Not easy 😆

[ulivz]

I found a related issue: webpack/webpack#6741.

CSS usually doesn't produce an export, so it really should be excluded from tree shaking.

After change sideEffects: false to:

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

The style comes back.

[posva]

what do we do here? Documenting this should be enough but we could even emit a warning by reading the package.json file (if this is something already being done in vuepress). I think documenting this is enough, at least now there is this issue as a reference