fix sass deprecation warning

Change-Id: Idb97d3430010fc32d6178da9db124441b8abe09f

assets/sass/framework.scss

@@ -1,35 +1,35 @@
 // Framework
-@import 'components/root';
-@import 'components/reboot';
-@import 'components/base';
-@import 'components/utility';
-@import 'components/text';
-@import 'components/button';
-@import 'components/sidenav';
-@import 'components/stage';
-@import 'components/preview';
-@import 'components/logo';
-@import 'components/adminshortcut';
-@import 'components/countdown';
-@import 'components/cheese';
-@import 'components/shutter';
-@import 'components/buzzer';
-@import 'components/gallery';
-@import 'components/chroma';
-@import 'components/form';
-@import 'components/modal';
-@import 'components/dialog';
-@import 'components/overlay';
-@import 'components/github-corner';
-@import 'components/background';
+@use 'components/root';
+@use 'components/reboot';
+@use 'components/base';
+@use 'components/utility';
+@use 'components/text';
+@use 'components/button';
+@use 'components/sidenav';
+@use 'components/stage';
+@use 'components/preview';
+@use 'components/logo';
+@use 'components/adminshortcut';
+@use 'components/countdown';
+@use 'components/cheese';
+@use 'components/shutter';
+@use 'components/buzzer';
+@use 'components/gallery';
+@use 'components/chroma';
+@use 'components/form';
+@use 'components/modal';
+@use 'components/dialog';
+@use 'components/overlay';
+@use 'components/github-corner';
+@use 'components/background';
 
 // Experiments
-@import 'experiments/video-capture-animation';
-@import 'experiments/video-capture-result';
+@use 'experiments/video-capture-animation';
+@use 'experiments/video-capture-result';
 
 // Vendor
-@import 'vendor/photoswipe';
+@use 'vendor/photoswipe';
 
 // Themes
-@import 'themes/classic';
-@import 'themes/modern';
+@use 'themes/classic';
+@use 'themes/modern';

gulpfile.mjs

@@ -4,23 +4,63 @@ import concat from 'gulp-concat';
 import filters from 'gulp-filter';
 import gulp from 'gulp';
 import nodeSassImporter from 'node-sass-importer';
-import postcss from 'gulp-postcss';
+import postcss from 'postcss';
 import rename from 'gulp-rename';
 import sass from 'gulp-dart-sass';
+import { promisify } from 'util';
+import { compileAsync } from 'sass'
 import tailwindcss from 'tailwindcss';
 import twAdminConfig from './config/tailwind.admin.config.mjs';
 import fs from 'fs';
 import path from 'path';
 import crypto from 'crypto';
 
-gulp.task('sass', function () {
-  const twFilter = filters(['**/*', '!tailwind.admin.scss']);
+const writeFile = promisify(fs.writeFile);
 
-  return gulp
-    .src('./assets/sass/**/*.scss')
-    .pipe(twFilter)
-    .pipe(sass().on('error', sass.logError)) // Use sass() without .sync
-    .pipe(gulp.dest('./resources/css'));
+gulp.task('sass', async function () {
+  try {
+    const scssDir = './assets/sass';
+    const outputDir = './resources/css';
+    const files = fs.readdirSync(scssDir);
+
+    const scssFiles = files.filter(file => path.extname(file) === '.scss' && file !== 'tailwind.admin.scss');
+
+    for (const file of scssFiles) {
+      const inputPath = path.join(scssDir, file);
+      const outputPath = path.join(outputDir, path.basename(file, '.scss') + '.css');
+
+      const result = await compileAsync(inputPath, {
+        loadPaths: [scssDir],
+      });
+
+      await writeFile(outputPath, result.css);
+      console.log(`Compiled ${file} to ${outputPath}`);
+    }
+  } catch (error) {
+    console.error('Error compiling Sass:', error);
+  }
+});
+
+gulp.task('tailwind-admin', async function () {
+  try {
+    const inputPath = './assets/sass/tailwind.admin.scss';
+    const outputPath = './resources/css/tailwind.admin.css';
+
+    const result = await compileAsync(inputPath, {
+      loadPaths: ['./assets/sass'],
+      importer: nodeSassImporter,
+    });
+
+    const processedCss = await postcss([tailwindcss(twAdminConfig), autoprefixer()]).process(result.css, {
+      from: inputPath,
+      to: outputPath,
+    });
+
+    await writeFile(outputPath, processedCss.css);
+    console.log(`Compiled and processed Tailwind Admin SCSS to ${outputPath}`);
+  } catch (error) {
+    console.error('Error compiling Tailwind Admin:', error);
+  }
 });
 
 gulp.task('js', function () {
@@ -33,27 +73,6 @@ gulp.task('js', function () {
     .pipe(gulp.dest('./resources/js'));
 });
 
-gulp.task('tailwind-admin', function () {
-  const plugins = [
-    tailwindcss(twAdminConfig),
-    autoprefixer(),
-  ];
-
-  return gulp
-    .src('./assets/sass/tailwind.admin.scss')
-    .pipe(sass({
-      importer: nodeSassImporter
-    }).on('error', sass.logError))
-    .pipe(rename({
-      extname: '.scss'
-    }))
-    .pipe(postcss(plugins))
-    .pipe(rename({
-      extname: '.css'
-    }))
-    .pipe(gulp.dest('./resources/css'));
-});
-
 gulp.task('js-admin', function () {
   return gulp
     .src([

package.json

@@ -58,7 +58,6 @@
     "gulp-concat": "^2.6.1",
     "gulp-dart-sass": "^1.1.0",
     "gulp-filter": "^9.0.1",
-    "gulp-postcss": "^10.0.0",
     "gulp-rename": "^2.0.0",
     "jquery": "^3.7.1",
     "marvinj": "^1.0.0",
@@ -68,6 +67,7 @@
     "npm-run-all": "^4.1.5",
     "onoff": "github:PhotoboothProject/onoff#master",
     "photoswipe": "^5.4.4",
+    "postcss": "^8.4.49",
     "sass": "^1.80.5",
     "socket.io": "^4.8.1",
     "socket.io-client": "^4.8.1",