Source maps disappear with Autoprefixer #106

Closed
jupl opened this Issue Oct 19, 2014 · 34 comments

Projects

None yet

10 participants

@jupl
jupl commented Oct 19, 2014

If I run the following, I get source maps.

gulp.src('src/styles/*.scss')
  .pipe(sourcemaps.init())
  .sass({...})
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('dist'));

However, when I introduce Autoprefixer, the source map files disappear in DevTools.

gulp.src('src/styles/*.scss')
  .pipe(sourcemaps.init())
  .sass({...})
  .autoprefixer()
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('dist'));

I don't think I can put the blame on Autoprefixer because when I use it in the same way as above with gulp-less or standalone, the source maps don't disappear as when I use it with gulp-sass.

@steffenweber

I'm having the same problem. As a workaround, you can insert the following two lines between sass() and autoprefixer():

.pipe(sourcemaps.write())
.pipe(sourcemaps.init({loadMaps: true}))

A real solution would be nice but I don't know enough about the internals to fix it myself.

@dlmanning
Owner

Alright, I'm aware of the issue. I'll need to dig into how gulp-less is handling sourcemaps differently. Probably won't be able to do this before the weekend. It's like bug whack-a-mole with all the changes in nodesass these days.

@dlmanning dlmanning added the bug label Oct 29, 2014
@nilssolanki
gulp.task('default', function () {
    return gulp.src('src/styles/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({...}))
        .pipe(autoprefixer())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist'));
});

Seems to work for me with the above config. I don't know if the problem is that you don't pipe .sass and .autoprefixer?

Check out the comment on npmjs:
https://www.npmjs.com/package/gulp-autoprefixer#source-maps

@polarathene

Have you checked that the gulp-sass sourcemap is valid? In Devtools it links to your .scss file but does it provide correct line number or just null/last line of file? In my case I've tracked it down to libsass writing an incorrect sourcemap, the mappings on the .scss file is fine but not the output .css file. This will be fixed with libsass 3.2 :) So possibly not gulp-sass at fault here.

Can read more here

@silvenon

Yeah, it also doesn't provide the correct line number for me. I use Autoprefixer via PostCSS, but when I add it, sourcemap points to a non-existing file, source/main.css instead of the .scss files. Not sure how this happens.

Those are the two issues I have. I hope they will get resolved with libsass 3.2.

@dlmanning
Owner

Issue resides with libsass or node-sass

@dlmanning dlmanning closed this Feb 14, 2015
@jonathantneal jonathantneal referenced this issue in postcss/autoprefixer Feb 19, 2015
Closed

Autoprefixer Breaks CSS Source Maps #368

@backflip
Contributor
backflip commented May 8, 2015

After updating to 2.0.0, sourcemaps don't work anymore when using gulp-autoprefixer after gulp-sass. The sources property only contains the generated file's path instead of the original ones.

Test case: unic@a88d747

sources before piping through autoprefixer:

[
  "includes/_cats.scss"
  "includes/_dogs.sass"
  "inheritance.scss"
]

sources after piping through autoprefixer:

[
  "inheritance.css"
]

While this looks like an issue with autoprefixer, it did not occur before the update.

/cc @sindresorhus @ai Any ideas?

@ai
ai commented May 8, 2015

@backflip try also gulp-postcss

@ai
ai commented May 8, 2015

Very strange, in most previous issues, sources contained Sass and CSS files. But here seems like Sass map doesn’t pass to PostCSS.

@backflip
Contributor
backflip commented May 8, 2015

Exactly the same result with gulp-postcss: unic@7315caa

I'm beginning to suspect that gulp-sass might create an incorrect sourcemap:

Before autoprefixer:

{ version: 3,
  sources: 
   [ 'includes/_cats.scss',
     'includes/_dogs.sass',
     'inheritance.scss' ],
  names: [],
  mappings: 'AAGA,IAAI,CAAC;EACH,UAAU,EAAE,IAAK,GADb;;ACAN,MAAM,CAAC;EACL,UAAU,EAAE,GAAI,GADV;;ACAR,MAAM,EAAE,SAAS,CAAV;EACL,MAAM,EAAE,IAAK;EACb,UAAU,EAAE,IAAK,GAFX;;AAKF,MAAM,UAAU,EAAE,UAAU,SAAS,CAA1B;EACf,SAAS,EAAE,KAAM;EACjB,WAAW,EAAE,IAAK,GAFF;;AAKlB,SAAS,CAAC;EAER,YAAY,EAAE,GAAI,GAFT',
  file: 'inheritance.scss',
  sourcesContent: 
   [ null,
     null,
     '@import "includes/cats";\n@import "includes/dogs";\n\n.error {\n  border: #f00;\n  background: #fdd;\n}\n\n.error.intrusion {\n  font-size: 1.3em;\n  font-weight: bold;\n}\n\n.badError {\n  @extend .error;\n  border-width: 3px;\n}\n' ] }

After autoprefixer:

{ version: 3,
  sources: [ 'inheritance.css' ],
  names: [],
  mappings: 'AAAA;EACE,iBAAiB,EAAE;;AAErB;EACE,gBAAgB,EAAE;;AAEpB;EACE,aAAa;EACb,iBAAiB,EAAE;;AAErB;EACE,iBAAiB;EACjB,kBAAkB,EAAE;;AAEtB;EACE,kBAAkB,EAAE',
  file: 'inheritance.css',
  sourcesContent: [ 'body {\n  background: pink; }\n\nfooter {\n  background: red; }\n\n.error, .badError {\n  border: #f00;\n  background: #fdd; }\n\n.error.intrusion, .intrusion.badError {\n  font-size: 1.3em;\n  font-weight: bold; }\n\n.badError {\n  border-width: 3px; }\n' ],
  sourceRoot: '/source/' }

The sourcesContent seems to be empty for the includes.

@ai
ai commented May 8, 2015

@backflip can you help me a little. Can you please build CSS + map files before and after Autoprefixer. Just in archive.

I will look at them in source map visualizer. Maybe maps was broken (like with @charset in prev libsass version).

Sorry, I can built them right now.

@backflip
Contributor
backflip commented May 8, 2015

Update: Enabling the sourceMapContents option of node-sass creates the correct sourcesContent but doesn't fix the issue, the resulting sources property is still incorrect: unic@7ba145a

Before autoprefixer:

{ version: 3,
  sources: 
   [ 'includes/_cats.scss',
     'includes/_dogs.sass',
     'inheritance.scss' ],
  names: [],
  mappings: 'AAGA,IAAI,CAAC;EACH,UAAU,EAAE,IAAK,GADb;;ACAN,MAAM,CAAC;EACL,UAAU,EAAE,GAAI,GADV;;ACAR,MAAM,EAAE,SAAS,CAAV;EACL,MAAM,EAAE,IAAK;EACb,UAAU,EAAE,IAAK,GAFX;;AAKF,MAAM,UAAU,EAAE,UAAU,SAAS,CAA1B;EACf,SAAS,EAAE,KAAM;EACjB,WAAW,EAAE,IAAK,GAFF;;AAKlB,SAAS,CAAC;EAER,YAAY,EAAE,GAAI,GAFT',
  file: 'inheritance.scss',
  sourcesContent: 
   [ '$blue: #3bbfce;\n$margin: 16px;\n\nbody {\n  background: pink;\n}\n',
     '$blue: #3bbfce;\n$margin: 16px;\n\nfooter {\n  background: red; }\n',
     '@import "includes/cats";\n@import "includes/dogs";\n\n.error {\n  border: #f00;\n  background: #fdd;\n}\n\n.error.intrusion {\n  font-size: 1.3em;\n  font-weight: bold;\n}\n\n.badError {\n  @extend .error;\n  border-width: 3px;\n}\n' ] }

After:

{ version: 3,
  sources: [ 'inheritance.css' ],
  names: [],
  mappings: 'AAAA;EACE,iBAAiB,EAAE;;AAErB;EACE,gBAAgB,EAAE;;AAEpB;EACE,aAAa;EACb,iBAAiB,EAAE;;AAErB;EACE,iBAAiB;EACjB,kBAAkB,EAAE;;AAEtB;EACE,kBAAkB,EAAE',
  file: 'inheritance.css',
  sourcesContent: [ 'body {\n  background: pink; }\n\nfooter {\n  background: red; }\n\n.error, .badError {\n  border: #f00;\n  background: #fdd; }\n\n.error.intrusion, .intrusion.badError {\n  font-size: 1.3em;\n  font-weight: bold; }\n\n.badError {\n  border-width: 3px; }\n' ],
  sourceRoot: '/source/' }
@ai
ai commented May 8, 2015

@backflip and second test. Can you check does gulp-postcss has file.sourceMap here?

@backflip
Contributor
backflip commented May 8, 2015

Using gulp-tap to log:

.pipe(tap(function(file) {
    console.log(file.contents.toString());
    console.log(file.sourceMap);
}))
@backflip
Contributor
backflip commented May 8, 2015

file.sourceMap here:

{ version: 3,
  sources: 
   [ 'includes/_cats.scss',
     'includes/_dogs.sass',
     'inheritance.scss' ],
  names: [],
  mappings: 'AAGA,IAAI,CAAC;EACH,UAAU,EAAE,IAAK,GADb;;ACAN,MAAM,CAAC;EACL,UAAU,EAAE,GAAI,GADV;;ACAR,MAAM,EAAE,SAAS,CAAV;EACL,MAAM,EAAE,IAAK;EACb,UAAU,EAAE,IAAK,GAFX;;AAKF,MAAM,UAAU,EAAE,UAAU,SAAS,CAA1B;EACf,SAAS,EAAE,KAAM;EACjB,WAAW,EAAE,IAAK,GAFF;;AAKlB,SAAS,CAAC;EAER,YAAY,EAAE,GAAI,GAFT',
  file: 'inheritance.scss',
  sourcesContent: 
   [ '$blue: #3bbfce;\n$margin: 16px;\n\nbody {\n  background: pink;\n}\n',
     '$blue: #3bbfce;\n$margin: 16px;\n\nfooter {\n  background: red; }\n',
     '@import "includes/cats";\n@import "includes/dogs";\n\n.error {\n  border: #f00;\n  background: #fdd;\n}\n\n.error.intrusion {\n  font-size: 1.3em;\n  font-weight: bold;\n}\n\n.badError {\n  @extend .error;\n  border-width: 3px;\n}\n' ] }

file.sourceMap here:

{ version: 3,
  sources: [ 'inheritance.css' ],
  names: [],
  mappings: 'AAAA;EACE,iBAAiB,EAAE;;AAErB;EACE,gBAAgB,EAAE;;AAEpB;EACE,aAAa;EACb,iBAAiB,EAAE;;AAErB;EACE,iBAAiB;EACjB,kBAAkB,EAAE;;AAEtB;EACE,kBAAkB,EAAE',
  file: 'inheritance.css',
  sourcesContent: [ 'body {\n  background: pink; }\n\nfooter {\n  background: red; }\n\n.error, .badError {\n  border: #f00;\n  background: #fdd; }\n\n.error.intrusion, .intrusion.badError {\n  font-size: 1.3em;\n  font-weight: bold; }\n\n.badError {\n  border-width: 3px; }\n' ] }
@ai
ai commented May 8, 2015

file.sourceMap shows that problem somewhere in applySourceMap. So we had a three possible places for error: Sass map, PostCSS map, map joing in applySourceMap.

@backflip
Contributor
backflip commented May 8, 2015

The map which is returned here looks like this:

{ version: 3,
  sources: [ 'inheritance.css' ],
  names: [],
  mappings: 'AAAA;EACE,iBAAiB,EAAE;;AAErB;EACE,gBAAgB,EAAE;;AAEpB;EACE,aAAa;EACb,iBAAiB,EAAE;;AAErB;EACE,iBAAiB;EACjB,kBAAkB,EAAE;;AAEtB;EACE,kBAAkB,EAAE',
  file: 'inheritance.css',
  sourcesContent: [ 'body {\n  background: pink; }\n\nfooter {\n  background: red; }\n\n.error, .badError {\n  border: #f00;\n  background: #fdd; }\n\n.error.intrusion, .intrusion.badError {\n  font-size: 1.3em;\n  font-weight: bold; }\n\n.badError {\n  border-width: 3px; }\n' ] }
@ai
ai commented May 8, 2015

Both looks like normal. But in Sass there is a missing part in .error selector. But I think it is not relevant.

@ai
ai commented May 8, 2015

@backflip can you change your Sass source? Make it more easy. Maybe there is some code that produce this error.

For example, let’s test on simple example a { color: black }

@backflip
Contributor
backflip commented May 8, 2015

Simplified example A:

inheritance.scss:

@import "includes/cats";

a {
  color: black;
}

includes/_cats.scss:

a {
  color: red;
}

Sourcemap before autoprefixer:

{ version: 3,
  sources: [ 'includes/_cats.scss', 'inheritance.scss' ],
  names: [],
  mappings: 'AAAA,CAAC,CAAC;EACA,KAAK,EAAE,GAAI,GADV;;ACEH,CAAC,CAAC;EACA,KAAK,EAAE,KAAM,GADZ',
  file: 'inheritance.scss',
  sourcesContent: 
   [ 'a {\n  color: red;\n}\n',
     '@import "includes/cats";\n\na {\n  color: black;\n}\n' ] }

Sourcemap after autoprefixer:

{ version: 3,
  sources: [ 'inheritance.css' ],
  names: [],
  mappings: 'AAAA;EACE,WAAW,EAAE;;AAEf;EACE,aAAa,EAAE',
  file: 'inheritance.css',
  sourcesContent: [ 'a {\n  color: red; }\n\na {\n  color: black; }\n' ],
  sourceRoot: '/source/' }

Simplified example B:

inheritance.scss:

a {
  color: black;
}

Sourcemap before autoprefixer:

{ version: 3,
  sources: [ 'inheritance.scss' ],
  names: [],
  mappings: 'AAAA,CAAC,CAAC;EACA,KAAK,EAAE,KAAM,GADZ',
  file: 'inheritance.scss',
  sourcesContent: [ 'a {\n  color: black;\n}\n' ] }

Sourcemap after autoprefixer:

{ version: 3,
  sources: [ 'inheritance.css' ],
  names: [],
  mappings: 'AAAA;EACE,aAAa,EAAE',
  file: 'inheritance.css',
  sourcesContent: [ 'a {\n  color: black; }\n' ],
  sourceRoot: '/source/' }
@ai
ai commented May 8, 2015

O_o seems like some issue in applySourceMap, because I have no idea right now.

@ai
ai commented May 8, 2015

@w0rm maybe you can helps us here too?

@backflip
Contributor
backflip commented May 8, 2015

Hm, if I write the sourcemaps in between (as indicated in this comment above), it seems to work all of a sudden (it did not when I started testing):

.pipe(sass.sync())
.pipe(sourcemaps.write())
.pipe(sourcemaps.init({
  loadMaps: true
}))
.pipe(autoprefixer())

Before autoprefixer:

{ version: 3,
  sources: 
   [ 'includes/_cats.scss',
     'includes/_dogs.sass',
     'inheritance.scss' ],
  names: [],
  mappings: 'AAGA,IAAI,CAAC;EACH,UAAU,EAAE,IAAK,GADb;;ACAN,MAAM,CAAC;EACL,UAAU,EAAE,GAAI,GADV;;ACAR,MAAM,EAAE,SAAS,CAAV;EACL,MAAM,EAAE,IAAK;EACb,UAAU,EAAE,IAAK,GAFX;;AAKF,MAAM,UAAU,EAAE,UAAU,SAAS,CAA1B;EACf,SAAS,EAAE,KAAM;EACjB,WAAW,EAAE,IAAK,GAFF;;AAKlB,SAAS,CAAC;EAER,YAAY,EAAE,GAAI,GAFT',
  file: 'inheritance.scss',
  sourcesContent: 
   [ null,
     null,
     '@import "includes/cats";\n@import "includes/dogs";\n\n.error {\n  border: #f00;\n  background: #fdd;\n}\n\n.error.intrusion {\n  font-size: 1.3em;\n  font-weight: bold;\n}\n\n.badError {\n  @extend .error;\n  border-width: 3px;\n}\n' ] }

After autoprefixer:

{ version: 3,
  sources: 
   [ '/source/includes/_cats.scss',
     '/source/includes/_dogs.sass',
     '/source/inheritance.scss' ],
  names: [],
  mappings: 'AAGA;EACE,iBAAiB,EADb;;ACAN;EACE,gBAAgB,EADV;;ACAR;EACE,aAAa;EACb,iBAAiB,EAFX;;AAKF;EACJ,iBAAiB;EACjB,kBAAkB,EAFF;;AAKlB;EAEE,kBAAkB,EAFT',
  file: 'inheritance.css',
  sourcesContent: 
   [ '$blue: #3bbfce;\n$margin: 16px;\n\nbody {\n  background: pink;\n}\n',
     '$blue: #3bbfce;\n$margin: 16px;\n\nfooter\n  background: red;\n',
     '@import "includes/cats";\n@import "includes/dogs";\n\n.error {\n  border: #f00;\n  background: #fdd;\n}\n\n.error.intrusion {\n  font-size: 1.3em;\n  font-weight: bold;\n}\n\n.badError {\n  @extend .error;\n  border-width: 3px;\n}\n' ],
  sourceRoot: '/source/' }

I will do some further testing tomorrow to reproduce the situation where the intermediate writing did not help.

@ai
ai commented May 8, 2015

@backflip seems like it is really issue from gulp-sourcemap

@backflip
Contributor
backflip commented May 8, 2015

@floridoo: By any chance, do you have an idea what might be going on here?

@backflip
Contributor
backflip commented May 8, 2015

Update: In my project where I initially discovered the issue, removing the base option from gulp.src "fixes" the issue.

@w0rm
w0rm commented May 8, 2015

https://github.com/dlmanning/gulp-sass/blob/master/index.js#L77 this should equal file.relative in order for the proper composition of the maps, could be the reason, but I'm not sure.
file.relative depends on base setting of gulp.src.

@w0rm
w0rm commented May 8, 2015

The following modifications fixed this test for me:

sassFileSrc = file.relative; // <--- changed this line
// Replace the stdin with the original file name
sassMap.sources[sassMap.sources.indexOf(sassMapFile)] = sassFileSrc;
// Replace the map file with the original file name
sassMap.file = gutil.replaceExtension(sassFileSrc, '.css'); // <--- changed this line
@backflip
Contributor
backflip commented May 9, 2015

Nice one! In my more complex setup, I only changed the last line (the extension), otherwise it still wouldn't work. However, this seems to be enough for the reduced test case, too.

Thanks so much for taking the time, @ai and @w0rm!

See #262

@w0rm
w0rm commented May 9, 2015

@backflip I'm glad that it worked. Dealing with gulp sourcemaps related bugs is always such a pain, I guess vinyl-sourcemaps-apply could be more verbose about mismatched sources.

@Benjaminsson

I still experience this issue. Steffens workaround solves it for now though. Dependencies:

"devDependencies": {
  "gulp": "3.8.11",
  "gulp-load-plugins": "0.10.0",
  "browser-sync": "2.7.2",
  "wiredep": "2.2.2",
  "gulp-sass": "2.0.1",
  "gulp-sourcemaps": "1.5.2",
  "gulp-autoprefixer": "2.3.0",
}

Gulp task:

    return gulp.src('sass/main.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('css'));
@w0rm
w0rm commented May 21, 2015

@Benjaminsson have you tried gulp-postcss with autoprefixer-core instead of gulp-autoprefixer?

@Benjaminsson

@w0rm Yes, tried both with same result.

@w0rm
w0rm commented May 21, 2015

@Benjaminsson can you create a test project that reproduces this issue?

@w0rm w0rm referenced this issue in postcss/gulp-postcss May 21, 2015
Closed

Cannot make sourcemaps work #40

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment