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.

[pldg]

@NMFR @frenzzy I've tested the new release but the bug is not solved. This issue should be open. Have a look to my repository, please read the readme file, clone the repo and run the test yourself. Thanks.

[frenzzy]

Have you read PostCSS sourcemaps options section?
For example if you need inline source maps, use:

new OptimizeCSSAssetsPlugin({
  cssProcessorOptions: {
    map: {
      inline: true,
    }
  }
})

If you need external source maps, use:

new OptimizeCSSAssetsPlugin({
  cssProcessorOptions: {
    map: {
      inline: false,
      annotation: true,
    }
  }
})

[frenzzy]

Or we may add a special sourceMap option to OptimizeCSSAssetsPlugin which will do the same under the hood similar to postcss-loader.

For example:

new OptimizeCSSAssetsPlugin({ sourceMap: true })

new OptimizeCSSAssetsPlugin({ sourceMap: 'inline' })

PR is welcome :)

[pldg]

Thanks @frenzzy adding the code you suggest works fine!

[medington]

Thanks for all the effort to get the source maps working. Using the tips here and installing the 5.0 release I am now able to get external map files generated for my project and they are working in the browser.

However, there is still something a bit off with the paths that are generated and placed into the map file. When I do a non production build without using this optimize css plugin the generated map file has entries in it that look like this:

{"version":3,
"sources":[
  "webpack:///./src/components/controlbar/css/endpoint-mode-selector.less",
  "webpack:///./src/index.css",
  "webpack:///./src/assets/Roboto-local.css", 

When I do a production build using this optimize css plugin the map file looks like this:

{"version":3,
  "sources":[
    "/data/hbird/src/components/controlbar/css/endpoint-mode-selector.less",
    "/data/hbird/src/index.css",
    "/data/hbird/src/assets/Roboto-local.css",

I am using the config suggested above.

new OptimizeCSSAssetsPlugin({
  cssProcessorOptions: {
    map: {
      inline: false,
      annotation: true,
    }
  }
})

This still works in the browser, but the file system mappings look a bit odd in the developer tools. Is there some way to get the map file to be generated using the same webpack:///./src style file references? I did experiment with turning off the source maps on the css-loader and less-loaders which did change things a bit but nothing gets the same output as not using the optimize css plugin.

Here is a snippet of the webpack config (extractCSS and genSourceMaps are true):

     {
        test: /\.less$/,
        include: props.srcRoot,
        use: [
          {loader: extractCSS ? MiniCssExtractPlugin.loader : "style-loader"},
          {loader: "css-loader", options: {sourceMap: genSourceMaps}},
          {loader: "less-loader", options: {sourceMap: genSourceMaps}}
        ]
      },

[frenzzy]

@medington you can try optimize-cssnano-plugin which is more accurate with source maps.

[EPDUED]

Is this problem solved? My sourcempas is still empty.
like this:
{"version":3,"file":"./euidocs/euidocs.css","sources":[],"mappings":";A","sourceRoot":""}

[galvarez421]

I would like to fix the issue described by @medington for the sake of privacy and consistency. Note that customizing https://webpack.js.org/configuration/output/#outputdevtoolmodulefilenametemplate doesn't help.

[onetrev]

I found @frenzzy had the solution, except for one problem. While it did finally enable source maps in production, they were not fully accurate. Many references in the source map were correct, but it was sometimes pointing at things like my variables.scss file instead of say my _headings.scss file where the actual heading style was declared.

So if anyone else has this issue too, a quick install of the latest cssnano package resolved that for me I believe.