optimization.sideEffects = true causes issues with local CSS

Do you want to request a feature or report a bug?
bug

What is the current behavior?
When optimization.sideEffects = true like in mode: "production", local (not from node_modules) CSS is not added to the chunk and is lost.

If the current behavior is a bug, please provide the steps to reproduce.
Don’t have one as of yet, but will try and make something.

// package.json
{
  "name": "project",
  "module": "src/index.js",
  "sideEffects": false
}
// src/index.js
import './foo.css';                       // <- this is not preserved
import 'highlight.js/styles/default.css'; // <- this is preserved

// some other stuff
// foo.css
.foo { color: red; }
// webpack.config.js

module.export = {
  mode: "production",
  module: {
    rules: [{
      test: /\.css$/,
      use: ['extracted-loader'].concat(
        ExtractTextPlugin.extract({
          fallback: style,
          use: [
            cssLoader,
            postcssLoader,
          ],
        })
      ),
    }]
  }
}

What is the expected behavior?
CSS should not be tree shaken.

Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.
webpack 4.1.1
node 8.10.0
macOS latest

Author: Fantashit

2 thoughts on “optimization.sideEffects = true causes issues with local CSS

  1. CSS has a side effect: “adding CSS to the DOM”. You can’t mark it as side-effect-free. Instead do this:

    "sideEffects": [
      "*.css"
    ]
  2. @evan-scott-zocdoc I just stumbled across this issue again and I didn’t know about this API capability here. So yes, I definitely believe that we should have a documentation piece for this. Would you mind creating an issue?

Comments are closed.