gulp.watch is overriding browserify-css with watchify

[ghost]

I have two watchers set up in my gulp, one with browserify-css transform (for styles.js) and another gulp.watch(for the sass). The idea is that editing my scss files will trigger the sass watch and generate the compiled css, and that new compiled css will in turn trigger the browserify-css watcher and create the main css bundle (requested by my index.html) ready for my testing. Sounds brilliant but I can't get it to work D:

The problem is each time the sass task runs it overrides the whole stylesBundle.css with the compiled css, and it seems like browserify-css is ignoring the styles.css file.

public/styles.js

'use strict';

require('./assets/css/site-theme.css'); // compiled from site-theme.scss
require('./assets/css/styles.css');

gulpfile

var gulp = require('gulp')
var glob = require('glob')
var sass = require('gulp-sass')
var watchify = require('watchify')
var browserify = require('browserify')
var Fiber = require('fibers')

browserifyWatchStyles = watchify(browserify({
        cache: {},
        packageCache: {},
        debug: true,
        entries: [glob.sync('./public/styles.js')]
    })).transform('browserify-css', {
        output: './public/assets/css/static/stylesBundle.css',
        rootDir: './public/',
        rebaseUrls: true,
        processRelativeUrl: //...stuff
    });

gulp.task('sass', function () {
    return gulp
        .src('./public/assets/scss/**/*.scss')
        .pipe(sass({
            fiber: Fiber
        }).on('error', sass.logError))
        .pipe(gulp.dest('./public/assets/css'));
});

gulp.task('watch:styles', function () {
    return browserifyWatchStyles
        .bundle()
        .pipe(source('stylesBundle.js'))
        .on('error', log.error.bind(log, 'watchStyles error'))
        .pipe(gulp.dest('./public/assets/css/static'));
});

gulp.task('watch', gulp.parallel(
    'watch:styles',
    sassWatch
)));

function sassWatch() {
    gulp.watch('./public/assets/scss/*.*', gulp.series('sass'));
}

index.html <link rel="stylesheet" href="/assets/css/static/stylesBundle.css">

Expected behaviour: I run gulp watch and I get the stlylesBundle.css with css code from site-theme.css and styles.css. Any subsequent edits to scss files will generate a full bundle.

What happens: the stylesBundle.css is generated correctly the first time I run gulp watch, but when gulp.watch detects an edit in site-theme.scss the styles.css code is not included in the bundle.