Filename handling does not work with query strings and source maps

[halovanic]

I use query strings in Webpack to perform cache-busting instead of placing the hash directly in the file names. This generally works with other CSS and JS loaders, but fails when it gets to this plugin:

new MiniCssExtractPlugin({
  filename: '[name].css?v=[hash]'
})

...

new OptimizeCSSAssetsPlugin({
  // Overridden since asset name does not end in .css.
  assetNameRegExp: /\.css\?/g,
  cssProcessorOptions: {
    sourcemap: true,
    map: {
      inline: false,
      annotation: true
    }
  }
})

The resulting asset has the .map half of the file extension moved to the wrong place from where it was via MiniCssExtractPlugin:

/bundle.css?v=ee9422a65cc821d372b4.map 197 KiB [emitted]

This actually results in the .map file contents being written to the .css file location, overwriting it with no errors or warnings.

There seems to be a relatively straightforward initial fix in this plugin. There are two places where the map file is determined from the asset via:
assetName + '.map'
which is what results in the extension "migrating".

This could be changed to:
assetName.replace('.css', '.css.map')

Possibly with some fallbacks if we need to cover people who don't name their stylesheets with a .css extension...

This isn't a complete fix for my use case: the file names are correct again, but cssnano/PostCSS still ends up printing the following in the CSS file:
/*# sourceMappingURL=bundle.css?v=ee9422a65cc821d372b4.map */

This might be addressable here by fiddling with the annotation argument to cssnano, but I'm unsure if that should really be fixed here rather than proper query handling in PostCSS.

Thanks,
Alex

[wallzero]

I spent hours trying to figure out why my CSS wasn't minified until I stumbled upon this. I'll have to use PostCSS and cssnano until this is fixed.

EDIT postcss and cssnano seem to have issue with css modules. For now I instead have reverted back to [email protected] which still has the minimize option.