Source Maps not working with Webpack 4.8

[hbobenicio]

My version of optimize-css-assets-webpack-plugin: 4.0.1

The issue I'm facing is the same as described here:
webpack-contrib/mini-css-extract-plugin#141

In summary, I'm defining source-maps on my configuration. I'm also using MiniCssExtractPlugin to extract the css modules to a specific bundle, but when using optimize-css-assets-webpack-plugin on webpacks 4 optimization.minimizer, the source-maps are not generated. Here is a snippet:

  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true // set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({}) // <---- THIS. Commenting/Uncommenting results in: No Optimization with source-maps/ Optimization without source-maps
    ]
  },

  plugins: [

    new webpack.DefinePlugin({
      'process.env.NODE_ENV': 'production'
    }),
    new MiniCssExtractPlugin({
      filename: 'foo.min.css'
    }),
  ],
  devtools: 'source-maps'

Maybe optimize-css-assets-webpack-plugin is truncating source-maps some how?!

[hbobenicio]

Just figured it out! (this helped with a useful snippet: cssnano/cssnano#302)

Actually this is not a bug, but can be improved (with docs or better defaults to identify if there are settings in webpack to generate source-maps...)

You just need to set the map property to cssProcessorOptions (something like this):

      new OptimizeCSSAssetsPlugin({
        cssProcessorOptions: {
          map: {
            inline: false
          }
        }
      })

If no other cssProcessor is specified, then cssnano is used by default.
Then the plugin will pass the cssProcessorOptions as options to it. So searching on how to do it with cssnano gave me that hint on how to properly configure cssnano.

Maybe docs improvements could be made so that it would become clearer on how to use cssProcessorOptions (at least for the default processor, cssnano). Or maybe this plugin could somehow know if the webpack setup is configured to use source-maps or if the css itself has it to set map property to cssnano in that case (sorry if I'm talking silliness, I'm not a webpack nor a cssnano expert at all... It was just a painful debugging session...)

[hbobenicio]

Just created the PR above and added some docs about source-maps.

[NMFR]

I agree that the "source map" section should be added to the README to help people who encounter this problem.

Thanks for the help :)

PS: You didn't open a PR on this repo (it was opened on the forked repo).

PS2: Do you mind if i change the wording of the README a bit on your PR?

[hbobenicio]

Woops! xP
My bad. Gonna fix the PR.
But sure, totally welcome to change its content! I'm not a native English speaker, so there can be a lot of flaws and bad expressions xP
Thanks!

[hbobenicio]

fixed it. @NMFR could you review it?

[pldg]

@hbobenicio unfortunately your solution only partially solve the problem 😢 filename reference are not correct, here is a test repository (please read the readme file)

[hbobenicio]

I see...
Maybe more configs are missing then... :x
I don't know cssnano at all to know what could it be though :x

[heyalbert]

Same issue here...

[frenzzy]

I found a workaround: if you will use inline source maps inside postcss-loader options, then this plugin will be able to use them and even create an external source map.

[hbobenicio]

@pldg Finally got some time to take a look at your test repo.
Is the only issue about it is the filename? It's getting it correctly, I think. MiniCssExtractPlugin is the responsible for the filename of the CSS extract. The default filename is the bundle name, and you've not set it on your example. So it's using main.css accordingly.
So, in order to get the expected style.css (or style.min.css) you should be using this:

    new MiniCssExtractPlugin({
      filename: 'style.min.css' // or 'style.css' if preferred...
    }),

instead of this

    new MiniCssExtractPlugin({}),

Then you get the minified css named style.min.css and style.min.css.map, which sees can be used in debugging, and everything seems fine.

Gonna contribute to your test repo. Can you se other concerns about the inline workaround?

[hbobenicio]

@pldg Just created a PR to your test repo. Could you check it and re-test it for us?

[pldg]

@hbobenicio set a specific filename doesn't solve the problem

[hbobenicio]

Yes... I see now your point, @pldg . You're totally correct, this is still buggy. Sorry for my blidness! And thanks for taking the time to explaining it.