From 579f2414ee5e2f845d621efbc191a8077a038ac8 Mon Sep 17 00:00:00 2001
From: Josh Oakes <josh@joshoak.es>
Date: Thu, 21 Nov 2024 17:48:27 -0600
Subject: [PATCH] Remove deprecated warnings from gulp

---
 gulp/tasks/js.js     | 66 +++++++++++++++++++++++++-------------------
 gulp/tasks/styles.js | 32 +++++++++++++++------
 gulp/tasks/watch.js  | 17 ++++++++----
 package-lock.json    |  3 +-
 package.json         |  3 +-
 5 files changed, 77 insertions(+), 44 deletions(-)

diff --git a/gulp/tasks/js.js b/gulp/tasks/js.js
index 9f3e3b201..228cb56c2 100644
--- a/gulp/tasks/js.js
+++ b/gulp/tasks/js.js
@@ -1,58 +1,68 @@
+// js.js
 const { src, dest, parallel } = require('gulp');
 const rename = require('gulp-rename');
 const minify = require('gulp-babel-minify');
+const sass = require('sass');
+const through2 = require('through2');
 const config = require('../config');
 
+// Process JavaScript files
 function processFiles() {
 	return src(['src/assets/js/*.js'])
 		.pipe(
-			rename(function (path) {
-				// Returns a completely new object, make sure you return all keys needed!
-				return {
-					dirname: path.dirname,
-					basename: path.basename,
-					extname: '.min.js',
-				};
+			rename((path) => {
+				path.extname = '.min.js';
 			})
 		)
 		.pipe(minify(config.minify))
 		.pipe(dest(config.dirs.dist + '/js'));
 }
 
+// Process vendor JavaScript files
 function copyVendorFiles() {
 	return src(['src/assets/js/vendor/*.js'])
 		.pipe(
-			rename(function (path) {
-				// We don't need to rename if .min is already in filename
-				if (path.basename.endsWith('.min')) {
-					return path;
+			rename((path) => {
+				if (!path.basename.endsWith('.min')) {
+					path.extname = '.min.js';
 				}
-
-				return {
-					dirname: path.dirname,
-					basename: path.basename,
-					extname: '.min.js',
-				};
 			})
 		)
 		.pipe(minify(config.minify))
 		.pipe(dest(config.dirs.dist + '/js'));
 }
 
-/**
- * Build standalone js files.
- *
- * @returns
- */
-function miscJs() {
-	let process = processFiles();
-
-	let copy = copyVendorFiles();
+// Process SCSS files with modern Sass API
+function styles() {
+	return src('src/assets/scss/**/*.scss')
+		.pipe(
+			through2.obj(function (file, _, callback) {
+				if (file.isBuffer()) {
+					try {
+						// Using the modern Sass API
+						const result = sass.compile(file.path, {
+							style: 'compressed',
+						});
+						file.contents = Buffer.from(result.css);
+						file.extname = '.css';
+						this.push(file);
+					} catch (err) {
+						this.emit('error', err);
+					}
+				}
+				callback();
+			})
+		)
+		.pipe(dest(config.dirs.dist + '/css'));
+}
 
-	return copy;
+// Parallel tasks for JavaScript
+function miscJs() {
+	return parallel(processFiles, copyVendorFiles)();
 }
 
 exports.miscJs = miscJs;
-
+exports.styles = styles;
 exports.buildJs = parallel(miscJs);
 exports.js = parallel(miscJs);
+exports.default = parallel(styles, miscJs);
diff --git a/gulp/tasks/styles.js b/gulp/tasks/styles.js
index d7010de06..226dbe5e7 100644
--- a/gulp/tasks/styles.js
+++ b/gulp/tasks/styles.js
@@ -1,17 +1,32 @@
 const { src, dest, parallel } = require('gulp');
-const sass = require('gulp-sass')(require('sass'));
+const sass = require('sass');
+const through2 = require('through2');
 const rename = require('gulp-rename');
 const cleancss = require('gulp-clean-css');
 const config = require('../config');
 
-/**
- * Create gulp pipeline for scss/css files.
- *
- * @param {*} sources
- * @returns
- */
 function stylesPipe(sources) {
-	return src(sources).pipe(sass(config.sass)).pipe(cleancss(config.cleancss));
+	return src(sources)
+		.pipe(
+			through2.obj(function (file, _, callback) {
+				if (file.isBuffer()) {
+					try {
+						// Using the modern Sass API
+						const result = sass.compile(file.path, {
+							sourceMap: config.sass.sourceMap,
+							style: config.sass.outputStyle,
+						});
+						file.contents = Buffer.from(result.css);
+						file.extname = '.css';
+						this.push(file);
+					} catch (err) {
+						this.emit('error', err);
+					}
+				}
+				callback();
+			})
+		)
+		.pipe(cleancss(config.cleancss));
 }
 
 function miscStyles() {
@@ -25,6 +40,5 @@ function miscStyles() {
 }
 
 exports.miscStyles = miscStyles;
-
 exports.buildStyles = parallel(miscStyles);
 exports.styles = parallel(miscStyles);
diff --git a/gulp/tasks/watch.js b/gulp/tasks/watch.js
index 280dba3ca..e1e631910 100644
--- a/gulp/tasks/watch.js
+++ b/gulp/tasks/watch.js
@@ -3,12 +3,19 @@ const jsTasks = require('./js');
 const stylesTasks = require('./styles');
 
 function miscStyles() {
-	stylesTasks.miscStyles();
-	watch(['src/assets/css/*.scss'], stylesTasks.miscStyles);
+	return stylesTasks.miscStyles();
 }
+
+function watchStyles() {
+	watch(['src/assets/css/*.scss'], miscStyles);
+}
+
 function miscJs() {
-	jsTasks.miscJs();
-	watch(['src/assets/js/*.js', 'src/assets/js/vendor/*.js'], jsTasks.miscJs);
+	return jsTasks.miscJs();
+}
+
+function watchJs() {
+	watch(['src/assets/js/*.js', 'src/assets/js/vendor/*.js'], miscJs);
 }
 
-exports.watch = parallel(miscStyles, miscJs);
+exports.watch = parallel(parallel(miscStyles, watchStyles), parallel(miscJs, watchJs));
diff --git a/package-lock.json b/package-lock.json
index b1a11db7a..fa738d8d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -59,7 +59,8 @@
 				"gulp-minify": "^3.1.0",
 				"gulp-rename": "^2.0.0",
 				"gulp-sass": "^5.1.0",
-				"prettier": "^2.8.8"
+				"prettier": "^2.8.8",
+				"sass": "^1.81.0"
 			}
 		},
 		"node_modules/@algolia/autocomplete-core": {
diff --git a/package.json b/package.json
index 1347f93e0..d8c30eee8 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
 		"gulp-minify": "^3.1.0",
 		"gulp-rename": "^2.0.0",
 		"gulp-sass": "^5.1.0",
-		"prettier": "^2.8.8"
+		"prettier": "^2.8.8",
+		"sass": "^1.81.0"
 	}
 }