Autoprefixer Breaks CSS Source Maps

Here’s my gruntfile.js:

module.exports = function(grunt) {

    // Load Grunt tasks declared in the package.json file
    require('load-grunt-tasks')(grunt);

    grunt.initConfig({
        sass: {
        options: {
            sourceMap: true
        },
            dist: {
                files: {
                    'user/themes/br/css-compiled/bobmess.css': 'user/themes/br/scss/bobmess.scss'
                }
            }
        },

        autoprefixer: {
            dist: {
                src: 'user/themes/br/css-compiled/bobmess.css'
            }
        },

        watch: {
            scss: {
                files: ['user/themes/br/scss/*.scss'],
                tasks: ['sass', 'autoprefixer'],
            },

            livereload: {
                files: ['user/**/*.{css,md,twig,js,yaml}'],
                options: {
                    livereload: true
                }
            }
        }
    });

    grunt.registerTask('default', ['watch']);
};

Running it creates a css file and a source map with LibSass via grunt-sass. But Chrome does not recognize the source map. If I comment out the autoprefixer task, the source map is recognized by Chrome. I’ve tried it with grunt-contrib-sass (which uses Ruby Sass) and I find the same behavior.

It seems as if autoprefixer is messing up the source map, or the reference to it, somehow.

[bobrocke]

I eventually got it working with:

module.exports = function(grunt) {

    // Load Grunt tasks declared in the package.json file
    require('load-grunt-tasks')(grunt);

    grunt.initConfig({
        sass: {
            options: {
                sourceMap: true
            },
            dist: {
                files: {
                    'user/themes/br/css-compiled/bobmess.css': 'user/themes/br/scss/bobmess.scss'
                }
            }
        },

        autoprefixer: {
            options: {
                map: true
            },
            dist: {
                src: 'user/themes/br/css-compiled/bobmess.css'
            }
        },

        watch: {
            scss: {
                files: ['user/themes/br/scss/*.scss'],
                tasks: ['sass', 'autoprefixer'],
            },

            livereload: {
                files: ['user/**/*.{css,md,twig,js,yaml}'],
                options: {
                    livereload: true
                }
            }
        }
    });

    grunt.registerTask('default', ['watch']);
};

Explicitly turning on source maps for autoprefixer was the trick for me.

[jonathantneal]

This issue is not limited to grunt. For example: sindresorhus/gulp-autoprefixer#1, floridoo/gulp-sourcemaps#60, dlmanning/gulp-sass#106, appleboy/gulp-compass#92

We can produce a bogus sourcemap by adding gulp-sass to the current gulp example.

gulp.task('autoprefixer', function () {
    var postcss      = require('gulp-postcss');
    var sourcemaps   = require('gulp-sourcemaps');
    var autoprefixer = require('autoprefixer-core');
    var sass         = require('gulp-sass');

    return gulp.src('./src/*.css')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(postcss([ autoprefixer({ browsers: ['last 2 version'] }) ]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dest'));
});

One work-around has been to roll back gulp-sass to ~1.2.4 and to re-initialize sourcemaps before Autoprefixer is run.

gulp.task('autoprefixer', function () {
    var postcss      = require('gulp-postcss');
    var sourcemaps   = require('gulp-sourcemaps');
    var autoprefixer = require('autoprefixer-core');
    var sass         = require('gulp-sass');

    return gulp.src('./src/*.css')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(sourcemaps.write('.'))
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(postcss([ autoprefixer({ browsers: ['last 2 version'] }) ]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dest'));
});