New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Source maps disappear with Autoprefixer #106

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

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

This comment has been minimized.

Show comment
Hide comment
@steffenweber

steffenweber Oct 29, 2014

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.

steffenweber commented Oct 29, 2014

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

This comment has been minimized.

Show comment
Hide comment
@dlmanning

dlmanning Oct 29, 2014

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.

Owner

dlmanning commented Oct 29, 2014

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

This comment has been minimized.

Show comment
Hide comment
@nilssolanki

nilssolanki Dec 11, 2014

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

nilssolanki commented Dec 11, 2014

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

This comment has been minimized.

Show comment
Hide comment
@polarathene

polarathene Jan 12, 2015

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

polarathene commented Jan 12, 2015

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

This comment has been minimized.

Show comment
Hide comment
@silvenon

silvenon Feb 12, 2015

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.

silvenon commented Feb 12, 2015

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

This comment has been minimized.

Show comment
Hide comment
@dlmanning

dlmanning Feb 14, 2015

Owner

Issue resides with libsass or node-sass

Owner

dlmanning commented Feb 14, 2015

Issue resides with libsass or node-sass

@backflip

This comment has been minimized.

Show comment
Hide comment
@backflip

backflip May 8, 2015

Contributor

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?

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

This comment has been minimized.

Show comment
Hide comment
@ai

ai May 8, 2015

@backflip try also gulp-postcss

ai commented May 8, 2015

@backflip try also gulp-postcss

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

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

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

This comment has been minimized.

Show comment
Hide comment
@backflip

backflip May 8, 2015

Contributor

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.

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

This comment has been minimized.

Show comment
Hide comment
@ai

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

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

This comment has been minimized.

Show comment
Hide comment
@backflip

backflip May 8, 2015

Contributor

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/' }
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

This comment has been minimized.

Show comment
Hide comment
@ai

ai May 8, 2015

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

ai commented May 8, 2015

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

@backflip

This comment has been minimized.

Show comment
Hide comment
@backflip

backflip May 8, 2015

Contributor

Using gulp-tap to log:

.pipe(tap(function(file) {
    console.log(file.contents.toString());
    console.log(file.sourceMap);
}))
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

This comment has been minimized.

Show comment
Hide comment
@backflip

backflip May 8, 2015

Contributor

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' ] }
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

This comment has been minimized.

Show comment
Hide comment
@ai

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

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

This comment has been minimized.

Show comment
Hide comment
@backflip

backflip May 8, 2015

Contributor

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' ] }
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

This comment has been minimized.

Show comment
Hide comment
@ai

ai 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 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

This comment has been minimized.

Show comment
Hide comment
@ai

ai 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 }

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

This comment has been minimized.

Show comment
Hide comment
@backflip

backflip May 8, 2015

Contributor

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/' }
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

This comment has been minimized.

Show comment
Hide comment
@ai

ai May 8, 2015

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

ai commented May 8, 2015

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

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai May 8, 2015

@w0rm maybe you can helps us here too?

ai commented May 8, 2015

@w0rm maybe you can helps us here too?

@backflip

This comment has been minimized.

Show comment
Hide comment
@backflip

backflip May 8, 2015

Contributor

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.

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

This comment has been minimized.

Show comment
Hide comment
@ai

ai May 8, 2015

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

ai commented May 8, 2015

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

@backflip

This comment has been minimized.

Show comment
Hide comment
@backflip

backflip May 8, 2015

Contributor

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

Contributor

backflip commented May 8, 2015

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

@backflip

This comment has been minimized.

Show comment
Hide comment
@backflip

backflip May 8, 2015

Contributor

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

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

This comment has been minimized.

Show comment
Hide comment
@w0rm

w0rm 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 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

This comment has been minimized.

Show comment
Hide comment
@w0rm

w0rm 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

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

This comment has been minimized.

Show comment
Hide comment
@backflip

backflip May 9, 2015

Contributor

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

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

This comment has been minimized.

Show comment
Hide comment
@w0rm

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

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

This comment has been minimized.

Show comment
Hide comment
@Benjaminsson

Benjaminsson May 21, 2015

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'));

Benjaminsson commented May 21, 2015

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

This comment has been minimized.

Show comment
Hide comment
@w0rm

w0rm May 21, 2015

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

w0rm commented May 21, 2015

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

@Benjaminsson

This comment has been minimized.

Show comment
Hide comment
@Benjaminsson

Benjaminsson May 21, 2015

@w0rm Yes, tried both with same result.

Benjaminsson commented May 21, 2015

@w0rm Yes, tried both with same result.

@w0rm

This comment has been minimized.

Show comment
Hide comment
@w0rm

w0rm May 21, 2015

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

w0rm commented May 21, 2015

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

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