CSS files being treeshaken even when sideEffects=true

Bug report

What is the current behavior? Css files that are imported without named imports is currently removed even though css files have sideEffects=true defined in the webpack config.

If the current behavior is a bug, please provide the steps to reproduce. I’ve created a repo to help reproduce it: https://github.com/k2snowman69/bug-css-tree-shaking

Basic textual intepretation:

1. In a js file, add import "somecss.css" so that javascript file is importing the css file without named modules
2. Make sure your webpack config specifies that css files have sideEffects

{
  sideEffects: true,
  test: /\.css$/,
  use: [
    // MiniCssExtractPlugin is not necessary to replicate this issue.
    // I added it as it is easier to view the order of the generated CSS.
    // However, you can still see the issue by searching for the generated
    // class names in the .js bundle. They're still out of order.
    MiniCssExtractPlugin.loader,
    "css-loader",
  ],
},

What is the expected behavior? That the css file is included in the final build output. In my sample repository there should be two classes available:

.component--import-modules {
  color: black;
}

.component--import-no-modules {
  color: lightblue;
}

However currently only one is compiled:

.component--import-modules {
  color: black;
}

Other relevant information: webpack version: 5.28.0 Node.js version: 14.15.4 Operating System: OSX Additional tools: babel@7.x.x

[alexander-akait]

IMO if file A imports B where B has sideEffects, then A should be calculated to have sideEffects as well to be on the safer side.

No

[paztis]

facing the same issue: all the css imported in the index.js files are removed, while not the others. I’ve found a workaround by adding this in my package.json

"sideEffects": [
    "index.js",
    "*.css",
    "*.scss"
],

I hope index.js in the sideEffects will not keep too much code…