Don't work with css-modules

[TotooriaHyperion]

• Operating System: macOS Mojave 10.14.6
• Node Version: 12.13.1
• NPM Version: 6.14.2
• webpack Version: 4.42.0
• mini-css-extract-plugin Version: 0.9.0

Expected Behavior

Should work with css-module

Actual Behavior

If any css file includes a css-module export, then the HMR breaks. a.css

:local(.aaa) {
  background-color: pink; // hmr warns: do not know how to reload themselves, and style won't update
}
.aa {
  background-color: khaki; // hmr warns: do not know how to reload themselves, and style won't update
}

b.css

.bbb {
  background-color: skyblue; // this works, no warning, style updated.
}

Those style without css-module will work. scss file is the same behaviour with css.

Code

// webpack.config.js
// If your code blocks are over 20 lines, please paste a link to a gist
// (https://gist.github.com).

// additional code, HEY YO remove this block if you don't need it
        {
          test: /\.s?css$/,
          exclude: /node_modules/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
              options: {
                hmr: !isProd,
              },
            },
            {
              loader: "css-loader",
              options: {
                importLoaders: 2,
                modules: {
                  mode: "global",
                  localIdentName: isProd
                    ? "_[hash:base64]"
                    : "[path][name]__[local]",
                },
              },
            },
            {
              loader: "postcss-loader",
              options: {
                plugins: [
                  require("autoprefixer")(),
                  require("postcss-flexbugs-fixes")(),
                ],
              },
            },
            { loader: "sass-loader" },
          ],
        },

How Do We Reproduce?

just add css-modules into the advanced example shown in readme.md. Then those css/scss file with a :local() in it will fail to hot reload. Those css/scss file without any :local() works fine.

[alexander-akait]

Please create reproducible test repo

[TotooriaHyperion]

Please create reproducible test repo

reproduce: https://github.com/TotooriaHyperion/mini-css-extract-plugin-bug

[TotooriaHyperion]

If style inside :local() block is empty, there would not be a css module and then hmr works. But if there is a css-module actually exist, the hmr breaks:

[TotooriaHyperion]

Looks like we need a similar behavior like https://github.com/webpack-contrib/style-loader/pull/298

If the locals didn't change, then it shouldn't require a full reload.

[alexander-akait]

It is bug, it is feature, css-modules doesn't support HMR

[sethomas]

replacing the loader of mini-css-extract-plugin with style-loader, I am able to HMR css-modules without a page reload.