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

Closed
ByScripts opened this Issue Nov 8, 2014 · 25 comments

Projects

None yet
@ByScripts

Hi,

There is a lot of issue about mixing gulp-sass and/or gulp-autoprefixer with gulp-sourcemaps.

For example : dlmanning/gulp-sass#106, sindresorhus/gulp-autoprefixer#8

I just spend 2 hours debugging to find out where the problem come from, and still no success.

But I finally noticed something (but still don't know where the problem come from).

In source-map-generator.js @ Line 359, I watched the key value.

In this configuration:

gulp.task('css', function () {
    gulp.src('./assets/sass/style.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        //.pipe(sourcemaps.write({includeContent: false}))
        //.pipe(sourcemaps.init({loadMaps: true}))
        .pipe(autoprefixer())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./public/css'))
});

The value of the key is $style.css, and it does not work

But in this configuration:

gulp.task('css', function () {
    gulp.src('./assets/sass/style.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(sourcemaps.write({includeContent: false}))
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(autoprefixer())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./public/css'))
});

The value of the key is $style.scss, and it works

Because with the two configurations, _sourcemapContents in source-map-generator.js#360 has always a $style.scss key.

Hope this helps to resolve this issue, and to find if the problem come from sourcemap, sass or autoprefixer (or something else)

@floridoo
Owner
floridoo commented Nov 8, 2014

Can you upload your test project somewhere, so I can try to debug? Thanks

@floridoo floridoo added the question label Nov 8, 2014
@thaiat
thaiat commented Nov 9, 2014

#57

@ByScripts

Don't know if it's related. In my sample I don't import any other scss files, and I don't get any error.

Here is a sample project: https://github.com/ByScripts/gulp-sample

Just running npm install then gulp should do the work.

Hope this helps.

@crocket
crocket commented Nov 17, 2014

@floridoo You can reproduce the issue by cloning https://github.com/crocket/gulp-sourcemaps-example.

@heikki
heikki commented Nov 17, 2014

@ByScripts sourcesContent seems to work in your example if you update gulp-autoprefixer to 2.0.0.

@heikki
heikki commented Nov 17, 2014

@crocket You're using gulp-ruby-sass in your example. I get an error when running it. Which sass version do you have?

@crocket
crocket commented Nov 17, 2014

@heikki I think the sass version is 3.4.8, and I suspect changes in gulp-ruby-sass broke gulp-sourcemaps. You should debug https://github.com/crocket/gulp-sourcemaps-example to confirm my suspicion.

@heikki
heikki commented Nov 17, 2014

@crocket Your example is broken. :)

@crocket
crocket commented Nov 17, 2014

@heikki How can I fix my example?

@heikki
heikki commented Nov 17, 2014

@crocket That question is more suitable to StackOverflow :)
Your example doesn't help reproducing this issue with sourcemaps because it doesn't work at all.

@crocket
crocket commented Nov 18, 2014

@heikki I updated https://github.com/crocket/gulp-sourcemaps-example so that it now uses Vagrant to set up its own environment in a new VM. Go check it up. It works.

Update 1. It seems gulp-ruby-sass is not meant to be compatible with gulp-sourcemaps and gulp-autoprefixer. Forget about my repository!

@crocket crocket pushed a commit to crocket/gulp-sourcemaps-example that referenced this issue Nov 18, 2014
doojin bek Reproduce floridoo/gulp-sourcemaps#60 fba3b51
@crocket
crocket commented Nov 18, 2014

Update. I successfully replicated the issue in a minimal test case at https://github.com/crocket/gulp-sourcemaps-example

@stevemao

I'm trying to add sourcemap feature to web-starter-kit (google/web-starter-kit#546) and I can't generate correct result either.

// Compile and Automatically Prefix Stylesheets
gulp.task('styles', function () {
  // For best performance, don't add Sass partials to `gulp.src`
  return gulp.src([
    'app/styles/*.scss',
    'app/styles/**/*.css'
  ])
    .pipe($.sourcemaps.init())
    .pipe($.changed('styles', {extension: '.scss'}))
    .pipe($.sass({
      precision: 10
    }))
    .on('error', console.error.bind(console))
    .pipe($.autoprefixer({browsers: AUTOPREFIXER_BROWSERS}))
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest('.tmp/styles'))
    // Concatenate And Minify Styles
    .pipe($.if('*.css', $.csso()))
    .pipe(gulp.dest('dist/styles'))
    .pipe($.size({title: 'styles'}));
});

Would you like to have a look at this please? Thanks

@addyosmani addyosmani referenced this issue in google/web-starter-kit Nov 24, 2014
Closed

Add sass sourcemap #546

@fingermark

Anyone working on this?

@bfanger bfanger added a commit to noprotocol/gulp-noprotocol that referenced this issue Dec 2, 2014
@bfanger bfanger Implemented notification and fixed sass sourcemap e840040
@BowlingX

Have some more problems here, the trick with sourceMaps.loadMaps works, but source maps are not generated when having a more complicated setup like:

Via bower:

Project-A (base.scss') -> references e.g.bower_components/bootstrap-sass-official/assets/stylesheets/bootstrapAnd Project B references Project A (viabower_components/project-a/sass/base`)

Source maps stop working then, it only works when Project-A does not reference anything in bower_components

@polarathene

I'm not sure if I'm having the same problem. I've been looking into this for about 2 days now. I think gulp-autoprefixer is making a correct sourcemap between it's input/output css files. gulp-sourcemaps and gulp-sass don't seem to be the issue either. I've tried compiling my scss file with node-sass and it's sourcemap feature, it seems to output a broken sourcemap regardless of settings.

I've come across an excellent visualizer tool. It would seem that the mappings for the scss file are correct but the output css file is incorrect, everything maps to 0. So the issue is likely node-sass or libsass?

You can see the scss/css I've been using to learn the gulp-sass/autoprefixer workflow with sourcemaps in the visualizer tool here . Note the bottom content identifying the mappings, each mapping starts with 0->, and as you can see in the css content on the right, it's highlighting the first line only. Am I the only one getting a result like this? (autoprefixer aside).

@polarathene

I've looked further into this and am pretty sure the issue is related to libsass or node-sass with how they're producing a sourcemap. I've manually corrected the scss-css sourcemap mappings, then used gulp-autoprefixer, mappings appear to be working and chrome/firefox dev tools are reporting the correct lines to the scss. You can see the scss/autoprefixer sourcemap here

Raised an issue on node-sass here, and just been notified it's an issue with libsass which should be solved with libsass 3.2.

@DallanQ
DallanQ commented Jan 13, 2015

Thank-you @ByScripts, your solution worked great for me! (I'm using gulp-sass)

@polarathene

@ByScripts gulp-sass was updated recently, mappings aren't broken like before. If you're using gulp-ruby-sass you should be fine with the alpha release if using external sources, embedded don't seem to work. The only other issue with gulp-ruby-sass that prevents me using it is the file paths placed in sources of the sourcemap, I think this is only an issue with windows from what I've read.

I have code examples for both here

@swieder227

npm update gulp-sass fixed the problem for me. Now working with gulp-sass, gulp-autoprefixer, and gulp-sourcemaps.

gulp.task('styles', function() {
  return gulp.src('scss/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({ style: 'expanded' }))
    .pipe(autoprefixer('last 2 version'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('css'))
    .pipe(connect.reload())
    .pipe(notify({ message: 'Styles task complete' }));
});
@heikki
heikki commented Feb 18, 2015

I think this can be closed. @ByScripts's sample tasks work identically with latest module versions.

@stevemao

I don't think having .pipe(sourcemaps.write({includeContent: false})) .pipe(sourcemaps.init({loadMaps: true})) in between sass and autoprefixer is elegant.

@heikki
heikki commented Feb 18, 2015

@stevemao Then remove them 😄 Both tasks work now.

@stevemao

Thanks @heikki , for the reference web-starter-kit is already using this.

google/web-starter-kit@8c356e1

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

Autoprefixer Breaks CSS Source Maps #368

@floridoo floridoo closed this Feb 25, 2015
@clempat clempat referenced this issue in floridoo/vinyl-sourcemaps-apply May 1, 2015
Closed

Use the same sourceFile Name when applySourceMap #8

@jonesmac jonesmac pushed a commit to jonesmac/gulp-rails-pipeline that referenced this issue Sep 9, 2015
Matt Jones write sourcemaps after auto prefixer has run to prevent errors when c…
…alling outside resources

floridoo/gulp-sourcemaps#60
ff0662b
@jonesmac jonesmac pushed a commit to jonesmac/gulp-rails-pipeline that referenced this issue Sep 9, 2015
Matt Jones write source maps after autoprefixer has run 46c53fc
@jonesmac jonesmac referenced this issue in vigetlabs/gulp-rails-pipeline Sep 9, 2015
Merged

write source maps after autoprefixer has run #32

@Tibicenas

Hi, i was reading that the new version fixed the problem, but i installed today
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-sass": "^2.3.1",
"gulp-sourcemaps": "^1.6.0",

And doesn't work if i do:

gulp.task('sass', () => {
  log('Compiling SCSS files...');
  return gulp
    .src('./src/app/**.*scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./.temp/'));
});

But if i added the @ByScripts two MAGIC LINES works

// THIS WORKS
gulp.task('sass', () => {
  log('Compiling SCSS files...');
  return gulp
    .src('./src/app/**.*scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write({includeContent: false}))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./.temp/'));
});

When this would be fixed to don't need that two lines... is like zero readable... :S

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