chore: partial revert of 11f35ee

- Removes esbuild system (may™ return in future)
- Moves SASS back to src/static/css/ (rather than src/css/)
- Re-adds PostCSS, Gulp tasks for SASS transpilation

gulpfile.ts

@@ -14,6 +14,7 @@ import {
 } from "./src/build/utils";
 
 const gulp = require("gulp");
+const postcss = require("gulp-postcss");
 const fs = require("node:fs");
 const path = require("node:path");
 const through = require("through2");
@@ -22,7 +23,7 @@ const rubric: RubricQuestion[] = loadRubric();
 const contributors: Contributor[] = loadContributors();
 const products: Product[] = loadProducts(rubric, contributors);
 
-gulp.task("clean", () => {
+gulp.task("clean", async () => {
   return fs.rmSync(path.join(__dirname, "dist"), {
     recursive: true,
     force: true,
@@ -94,11 +95,57 @@ gulp.task(
   )
 );
 
+gulp.task("collect dependencies", () => {
+  return gulp
+    .src(["./node_modules/lunr/lunr.min.js"])
+    .pipe(gulp.dest("./dist/static/deps/"));
+});
+
+gulp.task("collect static", () => {
+  return gulp
+    .src([
+      "./src/static/**/*",
+      "./node_modules/@fortawesome/fontawesome-free/**/*.{woff2,woff}",
+      "!./src/static/**/*.{css,scss}",
+    ])
+    .pipe(gulp.dest("./dist/static/"));
+});
+
+gulp.task("collect root favicon", () => {
+  return gulp.src(["./src/static/img/*.ico"]).pipe(gulp.dest("./dist/"));
+});
+
+gulp.task("collect product icons", () => {
+  return gulp.src(["./icons/**/*"]).pipe(gulp.dest("./dist/static/icons/"));
+});
+
+gulp.task("build css", async () => {
+  return gulp
+    .src(["./src/static/css/base.scss"])
+    .pipe(postcss())
+    .pipe(through.obj((file, _, cb) => { // change to .css extension
+      if (file.isBuffer()) {
+        const fp = path.format({
+          dir: path.dirname(file.path),
+          name: path.basename(file.path, ".scss"),
+          ext: '.css'
+        })
+      }
+      cb(null, file);
+    }))
+    .pipe(gulp.dest("./dist/static/css/"));
+});
+
 gulp.task(
   "default",
   gulp.series([
     "clean",
     "build pages",
+    "collect dependencies",
+    "collect static",
+    "collect product icons",
+    "collect root favicon",
+    "build css"
   ])
 );
 

package.json

@@ -14,6 +14,7 @@
     "autoprefixer": "^10.4.20",
     "gulp": "^5.0.0",
     "gulp-hb": "^8.0.0",
+    "gulp-postcss": "^10.0.0",
     "hbl-arrays": "^0.1.2",
     "hbl-cmark": "^0.1.2",
     "hbl-comparison": "^0.1.4",
@@ -27,7 +28,7 @@
     "postcss-import": "^16.1.0",
     "postcss-scss": "^4.0.9",
     "simple-git": "^3.27.0",
-    "tailwindcss": "^2.1.2",
+    "tailwindcss": "^2.2.19",
     "through2": "^4.0.2",
     "ts-node": "^10.9.2",
     "typescript": "^5.7.3"

postcss.config.js

@@ -0,0 +1,27 @@
+const purgecss = require('@fullhuman/postcss-purgecss')({
+    // Specify the paths to all of the template files in your project
+    content: ["./src/**/*.hbs", "./src/**/*.js", "./src/**/*.ts", "./gulpfile.ts"],
+
+    // This is the function used to extract class names from your templates
+    defaultExtractor: content => {
+        // Capture as liberally as possible, including things like `h-(screen-1.5)`
+        const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
+
+        // Capture classes within other delimiters like .block(class="w-1/2") in Pug
+        const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []
+
+        return broadMatches.concat(innerMatches)
+    }
+});
+
+module.exports = {
+    plugins: [
+        require("postcss-import"),
+        require("tailwindcss")("tailwind.config.js"),
+        require("autoprefixer"),
+        ...process.env.NODE_ENV === 'production'
+            ? [purgecss]
+            : []
+    ],
+    syntax: require("postcss-scss")
+}