Stylus pre-processor won't work inside useref with gulpif

Question

I have a very basic gulp task, and I want to process a Stylus CSS file (.styl). This is the task inside the gulpfile:

const gulp = require("gulp");
const gulpIf = require("gulp-if");
const useref = require("gulp-useref");
const stylus = require("gulp-stylus");
const cssnano = require("gulp-cssnano");

gulp.task("default", function(){
    return gulp.src("*.htm")
    .pipe(useref())
    .pipe(gulpIf("*.css", stylus()))
    .pipe(gulp.dest("dist"))
});

And this is the particular section of the html

<!--build:css css/style.min.css -->
<link rel="stylesheet" href="style.styl">
<!-- endbuild -->

For whatever reason, the Stylus file just doesn't get processed, and gets copied to css/style.min.css without any processing.

Even stranger, is that if I format the CSS as a normal CSS file and replace "stylus()" with "cssnano()", cssnano works fine and minifies the file. Stylus works fine outside of the useref and gulpIf when ran as its own task, but I preferably want to use it like this.

Answer 1

Can you try specifying the root path for useref where it can find assets:

options.searchPath

Type: String or Array Default: none

Specify the location to search for asset files, relative to the current working directory. Can be a string or array of strings.

Your task

gulp.task("default", function(){
    return gulp.src("*.htm")
    .pipe(useref({
            searchPath: 'assets_path_here'
        }))
    .pipe(gulpIf("*.css", stylus()))
    .pipe(gulp.dest("dist"))
});

I personally just set the path to the root that contains my entire app.