Can't get Gulp to reference Stylus files to generate sourcemaps

Question

I'm having issues trying to generate sourcemaps for my CSS files.

My current stack is:

• Gulp
• Stylus
• Autoprefixer

There are two compiling steps:

1. Gulp pre-compiles to CSS;
2. Autoprefixer post-compiles the CSS to add browser vendor prefixes;

I can't generate the sourcemaps on the first compilation, as the second one will add new lines to the CSS, and I'm quite lost on how to make them "talk" with each other.

This is what I got so far.

var gulp = require('gulp');

var paths = {
    src: 'src',
    dist: 'dist'
};

// ---------------------------------------
// STYLUS
var stylus = require('gulp-stylus');
var rename = require('gulp-rename');

gulp.task('stylus', ['clean:css'], function () {
    return gulp.src(paths.src + '/stylus/*.styl')
        .pipe(stylus({
            compress: true,
            sourcemap: {
                inline: true,
                sourceRoot: '.',
                basePath: paths.dist + '/css'
            }
        }))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest(paths.dist + '/css'));
});

// ---------------------------------------
// BROWSERSYNC
var browserSync = require('browser-sync');

// Sets up a static server
gulp.task('browser-sync', function() {
    return browserSync({
        server: {
            baseDir: './'
        }
    });
});

// ---------------------------------------
// AUTOPREFIXER
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');

gulp.task('autoprefixer', ['stylus'], function () {
    return gulp.src(paths.dist + '/css/*.css')
        .pipe(autoprefixer())
        .pipe(sourcemaps.init({
             loadMaps: true
        }))
        .pipe(sourcemaps.write('.', {
            includeContent: false,
            sourceRoot: '.'
        }))
        .pipe(gulp.dest(paths.dist + '/css'))
        .pipe(browserSync.reload({stream:true}));
});

// ---------------------------------------
// CLEAN
var del = require('del');

gulp.task('clean:css', function (cb) {
    return del([
        paths.dist + '/**/*.css',
        paths.dist + '/**/*.map'
    ], cb);
});

// ---------------------------------------
// WATCH
gulp.task('watch', ['browser-sync'], function() {
    gulp.watch(paths.src + '/stylus/**/*.styl', ['clean:css', 'stylus', 'autoprefixer']);
    gulp.watch('*.html', ['compress', browserSync.reload]);
});