Autoprefixer Breaks CSS Source Maps

[bobrocke]

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.

[ai]

Please, create issue in grunt-autoprefixer. Because it is most likely, that issue is configuration or in environment.

[jonathantneal]

This issue is not limited to grunt. For example: sindresorhus/gulp-autoprefixer#1, gulp-sourcemaps/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'));
});

[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.

[bryanerayner]

I don't believe this issue should be closed. It seems that this is still a problem, and there hasn't really been an investigation put forth here, just some work arounds. That doesn't solve the problem.

[ai]

@bryanerayner I have many user cases, where source map works perfect. Unfortunately, you should be very careful with paths to have source map between different tool. So, you should fix your environment, or move to PostCSS only solution (PostCSS has variable, mixins and nested too, and without complicated settings)'

[bryanerayner]

Thanks @ai. It's been difficult to nail this down, I'm stepping through the source with node-debug ATM and still trying to find the source of the problem. It might ultimately be caused by another part of the pipeline, but when stepping through it's ultimately being thrown by a part of gulp-postcss.

I'll report what I find here, or on the appropriate repo, wherever it ends up being. Would it be appropriate to add either a wiki page or a the gulp section of the readme, advising on known problems and solutions? It seems like there's a lot of finger pointing between all the plugins involved in this error, and it would be good to curb that somehow.

[ai]

@bryanerayner you are right, but we can't add docs section to every plugin. So we should add it to gulp-postcss. Sorry, that I try wash Autoprefixer hands, but we have many popular plugins there and I try to support them all.