Keeping LESS sourceMaps for minified css with cssmin

Question

My LESS files are compiled with grunt-contrib-less and corresponding grunt task with the following config:

module.exports = {

    options: {
        sourceMap: true,
        sourceMapFilename: 'Content/styles/e-life.css.map'
    },
    compile: {
        files: {
            'Content/styles/e-life.css' : 'Content/styles/common.less'
        }
    }

}

Then I procced with cssmin for output css file. I get it minified, but I want to bind source maps from the previous step for the minified css.

module.exports = {

    options: {
        sourceMap: 'Content/styles/e-life.css.map'
    },
    all: {
        files: {
            'Content/styles/e-life.css': ['Content/styles/e-life.css']
        }
    }

}

The task fails if I mention source map path in options.sourceMap. I see the following in css-clean docs:

sourceMap - exposes source map under sourceMap property, e.g. new CleanCSS().minify(source).sourceMap (default is false) If input styles are a product of CSS preprocessor (Less, Sass) an input source map can be passed as a string.

But i can not understand how to pass this string to the task. Is it even possible? How can I do this?

Answer 1

grunt-contrib-cssmin does NOT let you chain sourcemaps. Its sourceMap option is true/false only, and will generate a map from the minified css to the original css, not to the original Less, sorry.

Considering that source mapping is useful mainly for debugging, I would suggest:

• do not use cssmin in your development environment, that way you get mapping from css to your Less files if needed.
• use cssmin without mapping for production.

Answer 2

You could also avoid the Grunt cssmin task and use the Less compression with compress option.

module.exports = {

    options: {
        compress: true,
        sourceMap: true,
        sourceMapFilename: 'Content/styles/e-life.css.map'
    },
    compile: {
        files: {
            'Content/styles/e-life.css' : 'Content/styles/common.less'
        }
    }
}

https://github.com/gruntjs/grunt-contrib-less#compress