diff --git a/assets/sass/framework.scss b/assets/sass/framework.scss index 812828387..f5bfa4023 100644 --- a/assets/sass/framework.scss +++ b/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'; diff --git a/gulpfile.mjs b/gulpfile.mjs index 3fd0bda22..acd376a76 100644 --- a/gulpfile.mjs +++ b/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([ diff --git a/package-lock.json b/package-lock.json index 974dfa330..d1fb07ba0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,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", @@ -26,6 +25,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", @@ -2936,14 +2936,6 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, - "node_modules/color-support": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz", - "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==", - "bin": { - "color-support": "bin.js" - } - }, "node_modules/colors": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz", @@ -3874,17 +3866,6 @@ "node": ">=0.10.0" } }, - "node_modules/fancy-log": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-2.0.0.tgz", - "integrity": "sha512-9CzxZbACXMUXW13tS0tI8XsGGmxWzO2DmYrGuBJOJ8k8q2K7hwfJA5qHjuPPe8wtsco33YR9wc+Rlr5wYFvhSA==", - "dependencies": { - "color-support": "^1.1.3" - }, - "engines": { - "node": ">=10.13.0" - } - }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -4639,34 +4620,6 @@ "node": ">=10.13.0" } }, - "node_modules/gulp-postcss": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/gulp-postcss/-/gulp-postcss-10.0.0.tgz", - "integrity": "sha512-z1RF2RJEX/BvFsKN11PXai8lRmihZTiHnlJf7Zu8uHaA/Q7Om4IeN8z1NtMAW5OiLwUY02H0DIFl9tHl0CNSgA==", - "dependencies": { - "fancy-log": "^2.0.0", - "plugin-error": "^2.0.1", - "postcss-load-config": "^5.0.0", - "vinyl-sourcemaps-apply": "^0.2.1" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "postcss": "^8.0.0" - } - }, - "node_modules/gulp-postcss/node_modules/plugin-error": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-2.0.1.tgz", - "integrity": "sha512-zMakqvIDyY40xHOvzXka0kUvf40nYIuwRE8dWhti2WtjQZ31xAgBZBhxsK7vK3QbRXS1Xms/LO7B5cuAsfB2Gg==", - "dependencies": { - "ansi-colors": "^1.0.1" - }, - "engines": { - "node": ">=10.13.0" - } - }, "node_modules/gulp-rename": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-2.0.0.tgz", @@ -5456,17 +5409,6 @@ "node": ">=10.13.0" } }, - "node_modules/lilconfig": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz", - "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==", - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/sponsors/antonk52" - } - }, "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", @@ -6154,9 +6096,9 @@ } }, "node_modules/picocolors": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", - "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==" + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==" }, "node_modules/picomatch": { "version": "2.3.1", @@ -6219,9 +6161,9 @@ } }, "node_modules/postcss": { - "version": "8.4.45", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz", - "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==", + "version": "8.4.49", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", + "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", "funding": [ { "type": "opencollective", @@ -6238,8 +6180,8 @@ ], "dependencies": { "nanoid": "^3.3.7", - "picocolors": "^1.0.1", - "source-map-js": "^1.2.0" + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" }, "engines": { "node": "^10 || ^12 || >=14" @@ -6279,44 +6221,6 @@ "postcss": "^8.4.21" } }, - "node_modules/postcss-load-config": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-5.1.0.tgz", - "integrity": "sha512-G5AJ+IX0aD0dygOE0yFZQ/huFFMSNneyfp0e3/bT05a8OfPC5FUoZRPfGijUdGOJNMewJiwzcHJXFafFzeKFVA==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "dependencies": { - "lilconfig": "^3.1.1", - "yaml": "^2.4.2" - }, - "engines": { - "node": ">= 18" - }, - "peerDependencies": { - "jiti": ">=1.21.0", - "postcss": ">=8.0.9", - "tsx": "^4.8.1" - }, - "peerDependenciesMeta": { - "jiti": { - "optional": true - }, - "postcss": { - "optional": true - }, - "tsx": { - "optional": true - } - } - }, "node_modules/postcss-nested": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz", @@ -7115,9 +7019,9 @@ } }, "node_modules/source-map-js": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", - "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", "engines": { "node": ">=0.10.0" } diff --git a/package.json b/package.json index 6cf2f28fc..78bf0cf68 100644 --- a/package.json +++ b/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",