Vuepress: 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: https://github.com/ulivz/vuepress-718/pull/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: https://github.com/webpack/webpack/issues/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

[ulivz]

Well, I think we should emit a warning.

Since the next version (monorepo) is almost done, adding a new feature request to the master will take time to resolve the conflict, so we try to avoid new commits (except docs or bug fixes) to the master. and I'll add this warning directly at next version.

but we can document it now.