Gulp & Browser-sync serving page initially with no CSS after adding gulp-stylelint to task

Question

When running the serve command, and browser-sync launches the new tab with the running page, on this initial launch the page is without the CSS. The minified CSS file is available, it's in the dist folder, but until an additional refresh or save of a file the CSS is not applied.

Removing the gulp-stylelint pipe in the CSS Gulp task stops this happening, and then for the first launch the page will have the CSS.

const autoprefixer = require('autoprefixer');
const babel = require('gulp-babel');
const browserSync = require('browser-sync').create();
const concat = require('gulp-concat');
const cssnano = require('cssnano');
const del = require('del');
const eslint = require('gulp-eslint');
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const plumber = require('gulp-plumber');
const postcss = require('gulp-postcss');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const stylelint = require('gulp-stylelint');
const template = require('gulp-template');
const uglify = require('gulp-uglify');

function browser(done) {
  browserSync.init({
    server: {
      baseDir: 'dist',
    },
    port: 9999,
  });
  done();
}

function clean(done) {
  del.sync('dist');
  done();
}

function css(done) {
  gulp
    .src('src/sass/**/*.scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(
      stylelint({
        failAfterError: false,
        reporters: [{ formatter: 'string', console: true }],
      }),
    )
    .pipe(sass())
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(rename('build.min.css'))
    .pipe(gulp.dest('dist/css'));
  done();
}

function js(done) {
  gulp
    .src('src/js/*.js')
    .pipe(plumber())
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(babel({ presets: ['@babel/env'] }))
    .pipe(concat('build.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
  done();
}

function html(done) {
  gulp
    .src('src/*.html')
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist'));
  done();
}

function watch(done) {
  gulp
    .watch('src/sass/**/*.scss', gulp.series(css))
    .on('change', browserSync.reload);
  gulp
    .watch('src/js/**/*.js', gulp.series(js))
    .on('change', browserSync.reload);
  gulp
    .watch('src/*.html', gulp.series(html))
    .on('change', browserSync.reload);
  done();
}

const build = gulp.series(clean, gulp.series(css, js, html));
const serve = gulp.series(build, watch, browser);

exports.serve = serve;
exports.build = build;

Terminal output:

[11:29:01] Starting 'serve'...
[11:29:01] Starting 'clean'...
[11:29:01] Finished 'clean' after 8.47 ms
[11:29:01] Starting 'css'...
[11:29:01] Finished 'css' after 12 ms
[11:29:01] Starting 'js'...
[11:29:01] Finished 'js' after 39 ms
[11:29:01] Starting 'html'...
[11:29:01] Finished 'html' after 2.16 ms
[11:29:01] Starting 'watch'...
[11:29:01] Finished 'watch' after 14 ms
[11:29:01] Starting 'browser'...
[11:29:01] Finished 'browser' after 9.56 ms
[11:29:01] Finished 'serve' after 89 ms