CSS files cannot be treeshaken with side effects

Describe the bug

vue-cli(webpack) VS vite

Reproduction

https://github.com/BuptStEve/vite-css-treeshake

• npm start to run vue-cli

• npm run vite to run vite

• npm run build to run vue-cli

• npm run vite:build to run vite

System Info

System:
    OS: macOS 11.4
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
    Memory: 2.44 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 92.0.4515.107
    Safari: 14.1.1
  npmPackages:
    vite: ^2.4.3 => 2.4.3

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[BuptStEve]

Yeah, this feature is useful for UI library to auto import component’s own style by default. And when you build app, it also helps treeshake unused ones(with style).

[bluwy]

@mayank99 I don’t think there’s a workaround today, but I agree there should be a way around this, like the sideEffects field discussed above. I’ll put this on the team board to confirm if this is the design we want, or if there’s an alternate API design.