Update gulp

gulpfile.js

@@ -1,71 +1,90 @@
-const
-  browserSync = require('browser-sync'),
-  gulp = require('gulp'),
-  gulpAutoprefixer = require('gulp-autoprefixer'),
-  gulpCleanCss = require('gulp-clean-css'),
-  gulpDest = require('gulp-dest'),
-  gulpPlumber = require('gulp-plumber'),
-  gulpRename = require('gulp-rename'),
-  gulpSass = require('gulp-sass'),
-  gulpSourcemaps = require('gulp-sourcemaps'),
-  gulpStylus = require('gulp-stylus')
+// Load plugins
+const browsersync = require('browser-sync').create();
+const gulp = require('gulp');
+const autoprefixer = require('autoprefixer');
+const sass = require('gulp-sass');
+const stylus = require('gulp-stylus');
+const cssnano = require('cssnano');
+const postcss = require('gulp-postcss');
+const dest = require('gulp-dest');
+const plumber = require('gulp-plumber');
+const rename = require('gulp-rename');
+const sourcemaps = require('gulp-sourcemaps');
+const cleanCss = require('gulp-clean-css');
+const merge = require('merge-stream');
 
-gulp.task('browser-sync', function () {
-  browserSync({
-    server: {
-      baseDir: './'
-    }
-  })
-})
+// BrowserSync
+function browserSync(done) {
+	browsersync.init({
+		server: {
+			baseDir: './'
+		},
+		port: 3000
+	});
+	done();
+}
 
-gulp.task('bs-reload', function () {
-  browserSync.reload()
-})
+// BrowserSync Reload
+function browserSyncReload(done) {
+	browsersync.reload();
+	done();
+}
 
-gulp.task('scss', function () {
-  gulp.src(['scss/**/*.scss'])
-    .pipe(gulpPlumber({
-      errorHandler: function (error) {
-        console.log(error.message)
-        this.emit('end')
-      }}))
-    .pipe(gulpSourcemaps.init())
-    .pipe(gulpSass())
-    .pipe(gulpAutoprefixer())
-    .pipe(gulp.dest('css/'))
-    .pipe(gulpRename({suffix: '.min'}))
-    .pipe(gulpCleanCss({compatibility: 'ie8'}))
-    .pipe(gulpSourcemaps.write('.'))
-    .pipe(gulp.dest('css/'))
-    .pipe(browserSync.reload({stream: true}))
-})
+// SCSS task
+function scss() {
+	return gulp
+		.src('./scss/**/[^_]*.scss')
+		.pipe(plumber())
+		.pipe(sourcemaps.init())
+		.pipe(sass())
+		.pipe(postcss([autoprefixer(), cssnano()]))
+		.pipe(gulp.dest('css/'))
+		.pipe(rename({ suffix: '.min' }))
+		.pipe(cleanCss({ compatibility: 'ie8' }))
+		.pipe(sourcemaps.write('.'))
+		.pipe(gulp.dest('css/'))
+		.pipe(browsersync.stream());
+}
 
-gulp.task('styl', function () {
-  gulp.src(['./node_modules/sanitize.css/sanitize.css'])
-    .pipe(gulpDest('tmp', {ext: '.styl'}))
-    .pipe(gulp.dest('./'))
-  gulp.src(['styl/**/[^_]*.styl'])
-    .pipe(gulpPlumber({
-      errorHandler: function (error) {
-        console.log(error.message)
-        this.emit('end')
-      }}))
-    .pipe(gulpSourcemaps.init())
-    .pipe(gulpStylus())
-    .pipe(gulpAutoprefixer())
-    .pipe(gulpRename({suffix: '.styl'}))
-    .pipe(gulp.dest('css/'))
-    .pipe(gulpRename({suffix: '.min'}))
-    .pipe(gulpCleanCss({compatibility: 'ie8'}))
-    .pipe(gulpSourcemaps.write('.'))
-    .pipe(gulp.dest('css/'))
-    .pipe(browserSync.reload({stream: true}))
-})
+// SCSS task
+function styl() {
+	var sanitize = gulp
+		.src(['./node_modules/sanitize.css/sanitize.css'])
+		.pipe(dest('styl', { ext: '.styl' }))
+		.pipe(rename({ prefix: '_' }))
+		.pipe(gulp.dest('./'));
 
-gulp.task('styles', ['scss', 'styl'])
+	var compile = gulp
+		.src(['styl/**/[^_]*.styl'])
+		.pipe(plumber())
+		.pipe(sourcemaps.init())
+		.pipe(stylus())
+		.pipe(postcss([autoprefixer(), cssnano()]))
+		.pipe(rename({ suffix: '.styl' }))
+		.pipe(gulp.dest('css/'))
+		.pipe(rename({ suffix: '.min' }))
+		.pipe(cleanCss({ compatibility: 'ie8' }))
+		.pipe(sourcemaps.write('.'))
+		.pipe(gulp.dest('css/'))
+		.pipe(browsersync.stream());
 
-gulp.task('default', ['browser-sync'], function () {
-  gulp.watch('scss/**/*.scss', ['scss'])
-  gulp.watch('styl/**/*.styl', ['styl'])
-  gulp.watch('*.html', ['bs-reload'])
-})
+	return merge(sanitize, compile);
+}
+
+// Watch files
+function watchFiles() {
+	gulp.watch('./scss/**/*', scss);
+	gulp.watch('./styl/**/*', styl);
+	gulp.watch('*.html', browserSyncReload);
+}
+
+// define complex tasks
+const build = gulp.series(gulp.parallel(scss, styl));
+const watch = gulp.parallel(watchFiles, browserSync);
+
+// export tasks
+exports.scss = scss;
+exports.styl = styl;
+exports.build = build;
+exports.watch = watch;
+exports.default = build;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "marx-css",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "The classless CSS reset (perfect for Communists).",
   "browserslist": [
     "> 0.5%",
@@ -64,17 +64,20 @@
   "homepage": "https://github.com/mblode/marx",
   "dependencies": {},
   "devDependencies": {
-    "browser-sync": "^2.24.4",
-    "browserslist": "^3.2.8",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^5.0.0",
-    "gulp-clean-css": "^3.9.4",
+    "autoprefixer": "^9.4.3",
+    "browser-sync": "^2.26.3",
+    "browserslist": "^4.3.7",
+    "cssnano": "^4.1.8",
+    "gulp": "^4.0.0",
+    "gulp-clean-css": "^4.0.0",
     "gulp-dest": "^0.2.3",
-    "gulp-plumber": "^1.2.0",
-    "gulp-rename": "^1.2.3",
-    "gulp-sass": "^4.0.1",
+    "gulp-plumber": "^1.2.1",
+    "gulp-postcss": "^8.0.0",
+    "gulp-rename": "^1.4.0",
+    "gulp-sass": "^4.0.2",
     "gulp-sourcemaps": "^2.6.4",
     "gulp-stylus": "^2.7.0",
-    "sanitize.css": "^5.0.0"
+    "merge-stream": "^1.0.1",
+    "sanitize.css": "^8.0.0"
   }
 }

scss/_form.scss

@@ -134,7 +134,6 @@ input[type="checkbox"]:focus:invalid:focus {
 }
 
 select {
-  -webkit-appearance: menulist-button;
   border: $border;
   vertical-align: sub;
 }

styl/_form.styl

@@ -123,7 +123,6 @@ input[type="checkbox"]:focus:invalid:focus
   outline-color: $red
 
 select
-  -webkit-appearance: menulist-button
   border: $border
   vertical-align: sub