Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Filename handling does not work with query strings and source maps #62

Open
halovanic opened this issue Jul 9, 2018 · 1 comment
Open

Comments

@halovanic
Copy link

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
Copy link

wallzero commented Jan 26, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants