gulp-stylus used with sourcemaps + resolve url fails

[akselnordal]

As referenced in the discussion https://github.com/stevelacy/gulp-stylus/issues/20 - it seems as if using gulp-stylus with stylus files using @import directives to stylus files that includes image-references using relative paths faile (eg. background-image: url('relative-path.png')).

gulp.task('gulp-stylus-task', function(){
    // need to use wildcard to write css/map-files to correct path
    return gulp.src('**/*.styl')
        .pipe(sourcemaps.init())
        .pipe(gstylus({
            define: {
                url: stylus.resolver()
            }
        }))
        .pipe(sourcemaps.write())
        .on('error', function(e) {
            console.log(e);
        })
        .pipe(gulp.dest('.'));
});

running the above snippet (given the correct input files and project structure - check out sample repo here https://github.com/akselnordal/stylus-example) results in the following error:

Potentially unhandled rejection [2] Error: /Users/akselnordal/stylus-example/node_modules/gulp-stylus/examples/css/nib.styl:1:9
   1| @import 'nib'
--------------^
   2|
   3| #back-to-top
   4|   fixed: bottom right

failed to locate @import file nib.styl

    at Evaluator.visitImport (/Users/akselnordal/stylus-example/node_modules/stylus/lib/visitor/evaluator.js:898:21)
    at Evaluator.Visitor.visit (/Users/akselnordal/stylus-example/node_modules/stylus/lib/visitor/index.js:28:40)
    at Evaluator.visit (/Users/akselnordal/stylus-example/node_modules/stylus/lib/visitor/evaluator.js:153:18)
    at Evaluator.visitRoot (/Users/akselnordal/stylus-example/node_modules/stylus/lib/visitor/evaluator.js:689:27)
    at Evaluator.Visitor.visit (/Users/akselnordal/stylus-example/node_modules/stylus/lib/visitor/index.js:28:40)
    at Evaluator.visit (/Users/akselnordal/stylus-example/node_modules/stylus/lib/visitor/evaluator.js:153:18)
    at Evaluator.evaluate (/Users/akselnordal/stylus-example/node_modules/stylus/lib/visitor/evaluator.js:229:15)
    at Renderer.render (/Users/akselnordal/stylus-example/node_modules/stylus/lib/renderer.js:86:26)
    at dispatch (/Users/akselnordal/stylus-example/node_modules/gulp-stylus/node_modules/accord/node_modules/when/node.js:71:15)
    at callAndResolve (/Users/akselnordal/stylus-example/node_modules/gulp-stylus/node_modules/accord/node_modules/when/lib/apply.js:30:12)

[stephenlacy]

There were many errors in your setup.

• you were including all files in every folder (including files in node_modules) thus the nib error
• there were file name errors and external sourcemap maping errors in the gulpfile
• the files were getting deleted before the check was called

I have fixed the errors here, and added an index.html to prove the completeness of the result. https://github.com/stevelacy/gulp-stylus-20

[akselnordal]

@stevelacy thank you for patience; after reviewing your fixes everything seems to be in order. I'm still a bit new to building using gulp (just switched from grunt)..

[stephenlacy]

I am glad you are using gulp!