Source maps disappear with Autoprefixer #106

jupl · 2014-10-19T05:30:50Z

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 · 2014-10-29T18:21:49Z

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 · 2014-10-29T18:39:14Z

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.

nilssolanki · 2014-12-11T13:19:23Z

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 · 2015-01-12T06:54:59Z

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 · 2015-02-12T14:15:34Z

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 · 2015-02-14T19:32:59Z

Issue resides with libsass or node-sass

backflip · 2015-05-08T18:04:28Z

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 · 2015-05-08T18:05:59Z

@backflip try also gulp-postcss

ai · 2015-05-08T18:07:32Z

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

backflip · 2015-05-08T19:05:40Z

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 · 2015-05-08T19:14:21Z

@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 · 2015-05-08T19:15:06Z

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 · 2015-05-08T19:17:07Z

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

backflip · 2015-05-08T19:22:54Z

Built CSS (before autoprefixer): https://gist.github.com/backflip/8cab915096c487933614
Sourcemap (before autoprefixer): https://gist.github.com/backflip/db4b657fc58fd361f44b
Built CSS (after autoprefixer): https://gist.github.com/backflip/3ddea63443f328e09779
Sourcemap (after autoprefixer): https://gist.github.com/backflip/3e49a046e67541356af6

Using gulp-tap to log:

.pipe(tap(function(file) {
    console.log(file.contents.toString());
    console.log(file.sourceMap);
}))

backflip · 2015-05-08T19:27:54Z

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 · 2015-05-08T19:29:52Z

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 · 2015-05-08T19:32:27Z

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 · 2015-05-08T19:43:08Z

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

ai · 2015-05-08T19:44:05Z

@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 · 2015-05-08T20:17:50Z

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 · 2015-05-08T20:18:56Z

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

ai · 2015-05-08T20:19:17Z

@w0rm maybe you can helps us here too?

backflip · 2015-05-08T20:30:39Z

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 · 2015-05-08T20:33:19Z

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

backflip · 2015-05-08T20:42:01Z

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

backflip · 2015-05-08T21:04:38Z

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

w0rm · 2015-05-08T22:52:39Z

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 · 2015-05-08T23:08:31Z

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 · 2015-05-09T10:19:03Z

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 · 2015-05-09T10:32:56Z

@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 · 2015-05-21T11:19:28Z

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 · 2015-05-21T14:16:03Z

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

Benjaminsson · 2015-05-21T14:21:49Z

@w0rm Yes, tried both with same result.

w0rm · 2015-05-21T15:59:38Z

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

dlmanning added the bug label Oct 29, 2014

ByScripts mentioned this issue Nov 8, 2014

Problem with gulp-sass ? Or gulp-autoprefixer ? Or gulp-sourcemaps ? gulp-sourcemaps/gulp-sourcemaps#60

Closed

dlmanning closed this as completed Feb 14, 2015

jonathantneal mentioned this issue Feb 19, 2015

Autoprefixer Breaks CSS Source Maps postcss/autoprefixer#368

Closed

backflip mentioned this issue May 9, 2015

Fix issue with sourcemaps when using gulp-sourcemaps and autoprefixer #262

Merged

w0rm mentioned this issue May 21, 2015

Cannot make sourcemaps work postcss/gulp-postcss#40

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Source maps disappear with Autoprefixer #106

Source maps disappear with Autoprefixer #106

jupl commented Oct 19, 2014

steffenweber commented Oct 29, 2014

dlmanning commented Oct 29, 2014

nilssolanki commented Dec 11, 2014

polarathene commented Jan 12, 2015

silvenon commented Feb 12, 2015

dlmanning commented Feb 14, 2015

backflip commented May 8, 2015

ai commented May 8, 2015

ai commented May 8, 2015

backflip commented May 8, 2015

ai commented May 8, 2015

backflip commented May 8, 2015

ai commented May 8, 2015

backflip commented May 8, 2015

backflip commented May 8, 2015

ai commented May 8, 2015

backflip commented May 8, 2015

ai commented May 8, 2015

ai commented May 8, 2015

backflip commented May 8, 2015

ai commented May 8, 2015

ai commented May 8, 2015

backflip commented May 8, 2015

ai commented May 8, 2015

backflip commented May 8, 2015

backflip commented May 8, 2015

w0rm commented May 8, 2015

w0rm commented May 8, 2015

backflip commented May 9, 2015

w0rm commented May 9, 2015

Benjaminsson commented May 21, 2015

w0rm commented May 21, 2015

Benjaminsson commented May 21, 2015

w0rm commented May 21, 2015

Source maps disappear with Autoprefixer #106

Source maps disappear with Autoprefixer #106

Comments

jupl commented Oct 19, 2014

steffenweber commented Oct 29, 2014

dlmanning commented Oct 29, 2014

nilssolanki commented Dec 11, 2014

polarathene commented Jan 12, 2015

silvenon commented Feb 12, 2015

dlmanning commented Feb 14, 2015

backflip commented May 8, 2015

ai commented May 8, 2015

ai commented May 8, 2015

backflip commented May 8, 2015

ai commented May 8, 2015

backflip commented May 8, 2015

ai commented May 8, 2015

backflip commented May 8, 2015

backflip commented May 8, 2015

ai commented May 8, 2015

backflip commented May 8, 2015

ai commented May 8, 2015

ai commented May 8, 2015

backflip commented May 8, 2015

Simplified example A:

Simplified example B:

ai commented May 8, 2015

ai commented May 8, 2015

backflip commented May 8, 2015

ai commented May 8, 2015

backflip commented May 8, 2015

backflip commented May 8, 2015

w0rm commented May 8, 2015

w0rm commented May 8, 2015

backflip commented May 9, 2015

w0rm commented May 9, 2015

Benjaminsson commented May 21, 2015

w0rm commented May 21, 2015

Benjaminsson commented May 21, 2015

w0rm commented May 21, 2015