webpack 4 tree-shaking sideEffects: false removes styles for single-file vue components in production builds

Version

15.4.0

Reproduction link

https://github.com/WireWheel/style-tree-shaking-bug

Steps to reproduce

Pull down the repo.

1. Install deps: npx lerna bootstrap --hoist
2. Run npm run build

Take a look in dist/css/index.[hash].css and notice that the styles in packages/one/components/HelloWorld.vue are not in the extracted css file.

1. Set sideEffects: true in packages/one/package.json
2. Rebuild with npm run build

Styles are now included in the dist/css/index.[hash].css.

What is expected?

styles are not removed for components included in the bundle.

What is actually happening?

styles are omitted from the bundled css.

---

The solution here could be to say that you cannot use sideEffects: false as a valid setting for any package that includes single-file Vue components. If so, it’d might be sufficient to document that. It’d be great if tree shaking could still be used in this setup without losing the styles.

The key components here are:

1. webpack 4 tree-shaking
2. a mono-repo (or at least a single-file Vue component in a separate package) with sideEffects: false in the package.json

I’m opening this against vue-loader since it seems appropriate for the vue-ecosystem—but things at play are webpack, vue-loader, css-loader, etc.

[gombosg]

An important update. As of now, I need to use

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

in package.json, in order to use Webpack tree shaking in Production mode. Just CSS is not enough.

You can try it by running Webpack in Development mode, with usedExports: true, then search for unused harmony in the output. It marks CSS files as unused exports, discarding them in Production.

[nskazki]

I have my own set of UI components and a file re-exporting those components, so I can spare a few keystrokes, i.e.

// ui-components/index.js
export { default as ComponentA } from './ComponentA.vue
export { default as ComponentB } from './ComponentB.vue
...

// my-view.js
import { ComponentA } from '../ui'
...

And I struggled to exclude unused Vue modules without excluding the styles of the used ones until I came across @thelonecabbage’s answer (https://github.com/vuejs/vue-loader/issues/1435#issuecomment-477626015) and I’m sincerely thankful for giving me an idea of how the tree-shaking can finally be fixed in my project:

{
  module: { 
    rules: [{
      test: /\.vue$/,
      sideEffects: false
    }, {
      test: /\.vue$/,
      resourceQuery: /type=style/,
      sideEffects: true
    }]
  }
}