webpack omits rmwc css in production mode due to "sideEffects: false"

[darrencruse]

• What RMWC Version are you using [major.minor.patch]: 5.7.2

• Name your build system [Webpack, Rollup...]: Webpack

• Describe the bug with as much detail as possible:

For the life of me I couldn't figure out why my rmwc css was working in dev but not getting bundled via webpack in production.

Finally learned that it was being tree shaken out because webpack thought it wasn't actually needed!!

Googling this is clearly an area for improvement in webpack however they say by putting (as rmwc does):

  "sideEffects": false,

in the package.json files webpack interprets a css import e.g.

import '@rmwc/tooltip/tooltip.css'

as having no side effects and therefore the entire contents of tooltip.css is tree shaken away!!!

atm I've worked around the issue by doing this:

import tooltipCss from '@rmwc/tooltip/tooltip.css'
// eslint-disable-next-line no-unused-vars
const seeAsUsed = tooltipCss

however there are various suggestions that this is what the package.json(s) really should have:

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

• What happened: rmwc components broken in production cause of missing css!

• And what was supposed to happen: rmwc widgets looking nice with css found in the bundle!! :)

• References:
  The current issue with "sideEffects: false" pops up in various repos (though it's webpack's fault :):
  react-scripts@next drops css import in production build facebook/create-react-app#5140 (comment)
  mini-css-extract-plugin & sideEffects incompatibility webpack-contrib/mini-css-extract-plugin#118 (comment)

Note the warning they've added at the bottom here:
https://vue-loader.vuejs.org/guide/#manual-setup

Open issue asking to make webpack smarter about this:
webpack/webpack#6571

[jamesmfriedman]

This isn’t a bug, maybe just a lack of documentation. RMWC itself doesn’t include or specify how you should include the CSS. In your own package.json you are correct to put *.css in side effects If you are including the CSS with webpack imports.

[darrencruse]

Hi James thanks for your comments so fwiw I just tried what you said I added the:

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

In my package.json but that made no difference webpack still didn't bundle the rmwc css files.

My understanding (and I'm not pretending to be an expert but fwiw) was that in putting "sideEffects": false in your (e.g.) tooltip/package.json you are asserting that none of the files (whether javascript or css) within that tooltip package cause side effects.

At least this is what I read how webpack has chosen to interpret that and their explanation for why they consider it fair for their tree shaking to omit that css from the final bundle.

Let me google again and see if there's something (maybe something I can add in my webpack.config.js?) to override your setting without the rmwc side changing. I thought there wasn't but let me look again and confirm.

[jamesmfriedman]

You very well may be right on this one. I'll get a patch out that adds *.css into the RMWC sideffects package.json

[darrencruse]

so I found where I am able to do this in my webpack.config.js to override your sideEffects: false setting:

  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /.css$/,
        sideEffects: true,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },

I guess my thoughts are still (unless there's a downside I'm not aware of) that it does seem nicer for your rmwc users that use webpack if you changed your package.json files to include it

[nickshulhin]

Faced exactly the same issue, solution was to disable side effects in optimisation of webpack configuration:

  mode: 'production',
  optimization: {
    sideEffects: false
  } ... 

[jamesmfriedman]

Fixed in 6.0.0