'css-loader' options not being applied to extracted media query files

[robhalkema-pbx]

Hi,

I am trying to incorporate the media-query-plugin into our Webpack build but it is not working as expected, and I'm wondering if there something obvious that I am doing wrong or missing, or if it's a bug?

The problem is with css-loader options not being applied to media query files. Specifically I use the modules option and set localIdentname in css-loader. This works correctly for rules in the non-media query bundle:

.Button__default__1OhNF {
 ...
}

but rules in the extracted media query bundles are not getting modified:

@media screen and (min-width: 960px) {
.container--slim > div {
  ...
}

This is what my config looks like:

plugins: [
    ...
    new MediaQueryPlugin({
      include: true,
      queries: {
        'screen and (min-width: 640px)': 'medium',
        'screen and (min-width: 960px)': 'large',
        'screen and (min-width: 1280px)': 'x-large',
      },
      groups: {
        bundle: /.*/
      },
    }),
    new MiniCssExtractWebpackPlugin(
      {
        filename: '[name].[contenthash].css',
      }
    ),
  ],
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: [
          MiniCssExtractWebpackPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: isDev ? '[name]__[local]__[hash:base64:5]' : '[hash:base64:5]',
              },
              importLoaders: 2,
            },
          },
          MediaQueryPlugin.loader,
          'postcss-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: getBrandResources(__dirname, brandName),
            },
          },
        ],
      },
    ],
  },

Thanks.

[SassNinja]

Hi @robhalkema-pbx

this seems to be related to #17

The problem is no loaders get applied to the generated media chunks.
I've to do some research to find a solution for this.

[robhalkema-pbx]

Hi @SassNinja, thanks for the update and for confirming that this is a bug.

As an aside, I also looked at https://github.com/mike-diamond/media-query-splitting-plugin which splits and generates the media query files after the loader has been applied. I needed to rework it a bit, as the configuration doesn't suit a mobile first approach, but it may be a way around the loader issue. I did encounter a problem with our CSS nested in @supports rules not being extracted, and haven't taken it any further.

[ajayjaggi97]

Hey @SassNinja @robhalkema-pbx any updates on this??