Incorrect source maps with sass output style set to compressed

[JoshMoreno]

When I compile sass using outputStyle: 'compressed' in conjunction with autoprefixer, the source map becomes inaccurate.

If I set the outputStyle to any of the other 3 options, the source map is fine.

If I leave it set to compressed and remove autoprefixer from the task, the source map is fine.

Bug Demo

Download - autoprefixer-bug.zip

Run npm install

Then gulp not-working

Open index.html and inspect #footer

It should be pointing to the _header.scss file... which is wrong.

Now run gulp working

Refresh page and inspect #footer

It should be pointing to _footer.scss which is correct

Source Code

package.json

{
  "name": "autoprefixer-bug",
  "version": "1.0.0",
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "gulp": "^3.9.1",
    "gulp-postcss": "^6.3.0",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.4.1"
  }
}

gulpfile.js

'use strict';

var gulp         = require('gulp');
var sass         = require('gulp-sass');
var sourcemaps   = require('gulp-sourcemaps');
var postcss      = require('gulp-postcss');
var autoprefixer = require('autoprefixer');

gulp.task('working', function(){
	return gulp
		.src('sass/main.scss')
		.pipe(sourcemaps.init())
		.pipe(sass({outputStyle: 'compressed'}))
		.pipe(sourcemaps.write('.'))
		.pipe(gulp.dest('css'));
});

gulp.task('not-working', function(){
	return gulp
		.src('sass/main.scss')
		.pipe(sourcemaps.init())
		.pipe(sass({outputStyle: 'compressed'}))
		.pipe(postcss([autoprefixer()]))
		.pipe(sourcemaps.write('.'))
		.pipe(gulp.dest('css'));
});

main.scss

@import 'header';
@import 'footer';

_header.scss

#header {
  background: #000;
}

_footer.scss

#footer{
  background: red;
}

If you need more info just let me know. Thanks!

[ai]

It is PostCSS issue, not Autoprefixer. I think it was already reported postcss/postcss#926

[JoshMoreno]

@ai thanks for the fast response!

Do you know when the issue will be fixed?

I doubt I have the skills to fix it myself, but I can try if you point me in the right direction.

[ai]

Honestly, not soon. I now spend all my free time on Logux, because I will have a talk on React London. This error is not so critical and need a lot of time to fix it.

[JoshMoreno]

Ah bummer. Good for you though!

There's no hack to get this working or a way to use autoprefixer without postcss is there?

[ai]

@JoshMoreno Autoprefixer is a PostCSS plugin. gulp-autoprefixer and other just contain PostCSS inside.

Technically, without PostCSS nobody will update previous source map. Main problem that updating previous source map is a very complicated work and most of tools (like Sass) just don’t have this feature.

The best solution — use pure-PostCSS stack. PostCSS for linting (Stylelint is thet best CSS ever) preprocessor (PreCSS or cssnext), prefixers, assets (postcss-assets, postcss-inline-svg), minification (cssnano). It will be the fastest (only one parsing for all tools) way without compatibility problems.