How do I create a sourcemap back to the original .less files from a minified CSS file?

Question

I am working with Gulp.js, and I am stumped trying to get gulp-sourcemaps to point all the way back at the original less files, after I do a minification step.

Since gulp-minify-css doesn't support sourcemaps, I am using postcss & csswring.

Ideally, I'd like to end up with:

• ss.css (unminified)
• ss.css.map (pointing from ss.css back to original .less files)
• ss.min.css (minified)
• ss.min.css.map (pointing from ss.min.css back to original .less files)

For now, I've stopped trying to output both the minified and non-minified versions, but even getting the minified version to point back to the original .less files doesn't seem to work.

Without doing a minification step, my .map file works great and looks like this:

{"version":3,"sources":["ss.less"],"names":[],"mappings":";AAEA;...

When I do the minification step, it changes the map to point the minified file back at the compiled CSS, not the original Less files:

{"version":3,"sources":["ss-min.css"],"names":[],"mappings":";AAEA;...

Here's my gulpfile.js:

var csswring = require('csswring'),
    gulp = require('gulp'),
    less = require('gulp-less'),
    path = require('path'),
    postcss = require('gulp-postcss'),
    rename = require('gulp-rename'),
    sourcemaps = require('gulp-sourcemaps');

var sourceLess = path.join(__dirname, 'app', 'assets', 'less');
var targetCss = path.join(__dirname, 'app', 'assets', 'css');

// Compile Less to CSS and then Minify, Include Sourcemaps
gulp.task('less-and-minify-css', function () {
    return gulp.src(lessFiles)
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(rename({suffix: "-min"}))
        .pipe(postcss([csswring]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(targetCss));
});

As always, any thoughts appreciated!

I have experimented with using a filter to only rename the generated .css files and nothing else, but that doesn't seem to fix the core issue.

Answer 1

After more fiddling, I was able to get it to work with minification, although I still wasn't able to save the minified and non-minified versions in a single task.

The use of a function for the rename was required because just adding a suffix ends up with the map being named 'file.css.min.map' instead of 'file.min.css.map' which is what's required to get them to match up.

I added the gulpif to save time running the .less files through the csswring command.

gulp.task('less-css-and-minify', function () {
    return gulp.src(lessFiles)
       .pipe(sourcemaps.init())
       .pipe(less())
       .pipe(gulpif('**/*.css', postcss([csswring])))
       .pipe(rename(function (path) {
          if (path.extname === '.map') {
             path.basename = path.basename.replace('.css', '.min.css');
          }
          if (path.extname === '.css') {
             path.basename += '.min';
          }
       }))
       .pipe(sourcemaps.write('.'))
       .pipe(gulp.dest(targetCss));
});