Trying to integrate clean-css with node-sass on webpack

We are working at clean-css-loader on a Webpack loader for Clean CSS. Right now we are having trouble with sourcemaps.

As it stands, we can’t get clean-css to play nicely with the sourcemap from sass-loader. I modified clean-css-loader to accept the sourcemap from the the previous loader in the chain (in this case, sass-loader) like this:

// Standard webpack loader header, receives file content and sourcemap from previous loader
module.exports = function(css, map) {
	//...

	cleanCssOpti.returnPromise = true;

	new CleanCSS(cleanCssOpti).minify(css, map)
        .then(function (minified) {
		// ...
		// pass content and sourcemap to next webpack loader
		callback(null, minified.styles, minified.sourceMap);
        })

However on the next loader after clean-css, the sourcemap’s only source is the main.scss file. But when omitting clean-css-loader from the loader chain, the correct sourcemap from sass-loader is received in the next loader.

This shouldn’t be too difficult to get around, I just don’t know what clean-css expects in a sourcemap and what does it do with it.

Thanks in advance.

CC: @jakubpawlowicz

[stereokai]

Nice! That’s good news and looks like it was a straightforwards solution. I couldn’t get back on this, couldn’t fit it in my schedule. Thanks for updating!

[jakubpawlowicz]

4.2 will add integration with optimize-css-assets-webpack-plugin so I’m closing this now unless someone wants to work on it. If so I’ll reopen the issue.