gulp-stylus: Source maps not working

I’m using th efollowing script that apparently generates source maps, but they do not appear in Chrome’s devtools. In my machine, this is working with gulp-less, but fails with gulp-stylus.

Here is my gulp task:

gulp.task('stylus', ['environmentCheck'], function () 
{  
    gulp.src('./src/stylus/rwi/pages/*.*')
    .pipe( plumber( handleErrors ) )
    .pipe(changed( global.outputDir + global.dataPath + '/css', {extension: '.css'}))
    .pipe(sourcemaps.init())
        .pipe(stylus({
            compress: global.ENV === 'production',
            use: [jeet(), nib(), rupture(), typographic(), autoprefixer('ie 7', 'ie 8')] 
        }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(global.outputDir + global.dataPath + '/css'))
    .pipe(connect.reload());
});

Here is the source map generated in the end of the CSS file:

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaG9tZS5jc3MiLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlcyI6WyJob21lLnN0eWwiXSwic291cmNlc0NvbnRlbnQiOlsiXG5AaW1wb3J0ICcuLi9jb3JlLnN0eWwnXG5AaW1wb3J0ICcuLi9tb2R1bGVzL2hlcm9fY29udGFpbmVyLnN0eWwnXG5AaW1wb3J0ICcuLi9tb2R1bGVzL3RvcF9tZW51LnN0eWwnXG5AaW1wb3J0ICcuLi9tb2R1bGVzL3BvcnRmb2xpb19ncmlkLnN0eWwnXG5AaW1wb3J0ICcuLi9tb2R1bGVzL3Rlc3RpbW9uaWFsLnN0eWwnXG5AaW1wb3J0ICcuLi9tb2R1bGVzL2NvbnRhY3RfZm9ybS5zdHlsJ1xuXG4vLyBlZGl0KClcbi5zZXJ2aWNlcy1lbGVtZW50XG5cdHRleHQtYWxpZ24gY2VudGVyICFpbXBvcnRhbnRcblx0cGFkZGluZy1ib3R0b20gNCUgIWltcG9ydGFudFxuXHQuc3ZnXG5cdFx0bWFyZ2luLWJvdHRvbSAyJSAhaW1wb3J0YW50XG5cdGg1XG5cdFx0bWFyZ2luLWJvdHRvbSAyJSAhaW1wb3J0YW50XG5cdGNvbCgxLzIsIGd1dHRlcjogMClcblx0K2JlbG93KDkwMHB4KVxuXHRcdGNvbCgxLzEpXG5cdCthYm92ZSgxMjgwcHgpXG5cdFx0Y29sKDEvMSlcblx0XHRwYWRkaW5nIDIlXG5cdFx0LnN2Z1xuXHRcdFx0Y29sKDEvNClcblx0XHRcdHRleHQtYWxpZ24gbGVmdFxuXHRcdC50ZXh0XG5cdFx0XHRjb2woMy80KVxuXHRcdFx0dGV4dC1hbGlnbiBsZWZ0XG5cdHBhZGRpbmcgMiVcblxuaDFcblx0Y29sb3IgbWFpbl9hY2NlbnRcblxuLnNlcnZpY2VzLWNvbnRhaW5lclxuXHRvdXRsaW5lIDFweCBkYXNoZWQgcmVkXG4gIFx0bm9ybWFsLWNvbnRhaW5lci1wYWRkaW5ncygpXG5cdGgyXG5cdFx0Y29sb3IgbWFpbl9hY2NlbnRcblx0LmxlYWQtbGFyZ2Vcblx0XHRjb2xvciBncmV5XzFcblx0XHRtYXJnaW4tdG9wIDUwcHhcblx0LnNlcnZpY2VzLWVsZW1lbnRzXG5cdFx0bWFyZ2luLXRvcCA4MHB4XG5cdFx0XHR0ZXh0LWFsaWduIGNlbnRlclxuXHRcdFx0c3ZnXG5cdFx0XHRcdHdpZHRoIDEzMHB4XG5cdFx0XHRcdGRpc3BsYXkgdGFibGVcblx0XHRcdFx0bWFyZ2luIDAgYXV0b1xuXHRcdFx0aDVcblx0XHRcdFx0Y29sb3IgZ3JleV8xXG5cdFx0XHRcdGRpc3BsYXkgYmxvY2tcblx0XHRcdFx0bWluLWhlaWdodCA4MHB4XG5cdFx0XHRwXG5cdFx0XHRcdGRpc3BsYXkgYmxvY2tcblx0XHRcdFx0dGV4dC1yZWd1bGFyKGdyZXlfMSwgMThweCwgY2VudGVyKVxuXG4uZ3JleS1zdHJpcGVcblx0d2lkdGggMTAwJVxuXHRoZWlnaHQgMTBweFxuXHRiYWNrZ3JvdW5kLWNvbG9yICNkZGRkZGRcblxuI21hcC1jb250YWluZXJcblx0d2lkdGggMTAwJVxuXHRoZWlnaHQgNDMwcHhcblx0XG4ubWFwLWJhbG9vblxuXHRwYWRkaW5nIDZweFxuXHRoNVxuXHRcdHRleHQtYWxpZ24gbGVmdFxuXHRcdHBhZGRpbmcgMFxuXHRcdC8vIG1hcmdpbiAwXG5cdHBcblx0XHRtYXJnaW4tdG9wIDIwcHhcblx0XHRsZWFkLXNtYWxsKGdyZXlfMywgMTRweClcblx0XHRtYXJnaW4gMFxuXHRcdHBhZGRpbmcgMFxuXHRcdHRleHQtYWxpZ24gbGVmdCAhaW1wb3J0YW50XG4iXSwic291cmNlUm9vdCI6Ii9zb3VyY2UvIn0= */

And here is what I see in devtools:

http://cl.ly/image/331P471H3w0w

It shows “home.css” where it should say “home.styl” or “an_imported_stylus_file.styl”

I’m quite new to source maps perhaps I’m ding something wrong. But I use exactly the same login in gulp-less and in the devtools I correctly see “.less” files with the correct position, not “.css”.

Any help really appreciated

About this issue

Original URL
State: closed
Created 10 years ago
Comments: 21 (10 by maintainers)

Most upvoted comments

It can also be used like this, if you don’t like inlined source maps

gulp.task('stylus', function() {
  return gulp.src('public/css/main.styl')
    .pipe(plumber())
    .pipe(stylus({
      sourcemap: {
        inline: true,
        sourceRoot: '.',
        basePath: 'public/css'
      }
    }))
    .pipe(sourcemaps.init({
      loadMaps: true
    }))
    .pipe(pleeease({
      minifier: false,
      sourcemaps: true
    }))
    .pipe(sourcemaps.write('./', {
      includeContent: false,
      sourceRoot: '.'
    }))
    .pipe(gulp.dest('public/css'));
});

faergeek on Sep 8, 2014