Mini-css-extract-plugin: CSS module hash is the same for two different components with the same name

[besh]

Context

I'm going through the process for migrating from webpack 3 to webpack 4, and was previously using extract-text-webpack-plugin. The problem I'm about to describe was not an issue previously, and I wasn't able to find anything stating an API change that would help fix this issue.

The problem

Here's my scenario. I have two different components nested in two different directories that share the same file name (Show). Both of these files have a .root style class associated with them.

When these class names are transformed through the localIdentName specification, the same hash gets applied to both of them, thus causing them to share styles.

Relevant portion from my webpack config:

        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              minimize: {
                safe: true
              },
              modules: true,
              importLoaders: true,
              localIdentName: '[name]__[local]___[hash:base64]'
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                autoprefixer,
                atImport({
                  addDependencyTo: webpack,
                  path: [APP_DIR]
                }),
                precss
              ]
            }
          }
        ]

And with two different css files in two different directories

FirstDirectory/Show.css

.root {
  background: #fff
}

SecondDirectory/Show.css

.root {
  border: 1px solid #d8d8d8;
  position: relative;
}

The final output looks like this:

As you can see, that div is getting styling from both .roots within two different Show.css files. Is there a way for me to ensure that both get a unique hash to prevent this collision?

Why do we have components that are named the same!?

Because we were sick of having container components that were MyDomainShowContainer.js. We now attach all components to an object and import the object when needed, referencing the component via dot notation.

import { MyDomain, MyOtherDomain } from 'components/containers';

<MyDomain.Show />
<MyOtherDomain.Show />
<MyOtherDomain.Delete />

[besh]

Hmm, I think I stupidly opened this issue in here. This doesn't seem to be a problem with mini css extract plugin at all.

[besh]

If anyone comes looking in here for whatever reason, I have to provide a context now. Not sure why we didn't need one before.

              minimize: {
                safe: true
              },
              modules: true,
              importLoaders: true,
              localIdentName: '[name]__[local]___[hash:base64]',
              context: __dirname