Break up buildFuncs into multiple files

tools/lib/build.ts

@@ -1,14 +1,12 @@
 import fs from "node:fs/promises";
-import {
-	buildCSS,
-	copyFiles,
-	getSport,
-	minifyIndexHTML,
-	reset,
-} from "./buildFuncs.ts";
-import generateJSONSchema from "./generateJSONSchema.ts";
-import buildJS from "./build-js.ts";
-import buildSW from "./build-sw.ts";
+import { buildCss } from "./buildCss.ts";
+import { buildJs } from "./buildJs.ts";
+import { buildSw } from "./buildSw.ts";
+import { copyFiles } from "./copyFiles.ts";
+import { generateJsonSchema } from "./generateJsonSchema.ts";
+import { getSport } from "./getSport.ts";
+import { minifyIndexHtml } from "./minifyIndexHtml.ts";
+import { reset } from "./reset.ts";
 
 export default async () => {
 	const sport = getSport();
@@ -18,20 +16,20 @@ export default async () => {
 	await reset();
 	await copyFiles();
 
-	const jsonSchema = generateJSONSchema(sport);
+	const jsonSchema = generateJsonSchema(sport);
 	await fs.mkdir("build/files", { recursive: true });
 	await fs.writeFile(
 		"build/files/league-schema.json",
 		JSON.stringify(jsonSchema, null, 2),
 	);
 
 	console.log("Bundling JavaScript files...");
-	await buildJS();
+	await buildJs();
 
 	console.log("Processing CSS/HTML files...");
-	await buildCSS();
-	await minifyIndexHTML();
+	await buildCss();
+	await minifyIndexHtml();
 
 	console.log("Generating sw.js...");
-	await buildSW();
+	await buildSw();
 };

tools/lib/buildCss.ts

@@ -0,0 +1,104 @@
+import { Buffer } from "node:buffer";
+import fs from "node:fs";
+import browserslist from "browserslist";
+import * as lightningCSS from "lightningcss";
+import { PurgeCSS } from "purgecss";
+import * as sass from "sass";
+import { fileHash } from "./fileHash.ts";
+import { replace } from "./replace.ts";
+
+export const buildCss = async (watch: boolean = false) => {
+	const filenames = ["light", "dark"];
+	const rawCSS = filenames.map((filename) => {
+		const sassFilePath = `public/css/${filename}.scss`;
+		const sassResult = sass.renderSync({
+			file: sassFilePath,
+		});
+		return sassResult.css.toString();
+	});
+
+	const purgeCSSResults = watch
+		? []
+		: await new PurgeCSS().purge({
+				content: ["build/gen/*.js"],
+				css: rawCSS.map((raw) => ({ raw })),
+				safelist: {
+					standard: [/^qc-cmp2-persistent-link$/],
+					greedy: [
+						// react-bootstrap stuff
+						/^modal/,
+						/^navbar/,
+						/^popover/,
+						/^tooltip/,
+						/^bs-tooltip/,
+
+						// For align="end" in react-bootstrap
+						/^dropdown-menu-end$/,
+
+						// flag-icons
+						/^fi$/,
+						/^fi-/,
+
+						/^dark-select/,
+						/^bar-graph/,
+						/^watch-active/,
+						/^dashboard-top-link-other/,
+					],
+				},
+			});
+
+	for (let i = 0; i < filenames.length; i++) {
+		const filename = filenames[i];
+
+		let output;
+		if (!watch) {
+			// https://zengm.com/blog/2022/07/investigating-a-tricky-performance-bug/
+			const DANGER_CSS = ".input-group.has-validation";
+			if (!rawCSS[i].includes(DANGER_CSS)) {
+				throw new Error(
+					`rawCSS no longer contains ${DANGER_CSS} - same problem might exist with another name?`,
+				);
+			}
+
+			const purgeCSSResult = purgeCSSResults[i].css;
+
+			const { code } = lightningCSS.transform({
+				filename: `${filename}.css`,
+				code: Buffer.from(purgeCSSResult),
+				minify: true,
+				sourceMap: false,
+				targets: lightningCSS.browserslistToTargets(
+					browserslist("Chrome >= 75, Firefox >= 78, Safari >= 12.1"),
+				),
+			});
+
+			output = code.toString();
+
+			if (output.includes(DANGER_CSS)) {
+				throw new Error(`CSS output contains ${DANGER_CSS}`);
+			}
+		} else {
+			output = rawCSS[i];
+		}
+
+		let outFilename;
+		if (watch) {
+			outFilename = `build/gen/${filename}.css`;
+		} else {
+			const hash = fileHash(output);
+			outFilename = `build/gen/${filename}-${hash}.css`;
+
+			replace({
+				paths: ["build/index.html"],
+				replaces: [
+					{
+						searchValue: `CSS_HASH_${filename.toUpperCase()}`,
+						replaceValue: hash,
+					},
+				],
+			});
+		}
+
+		fs.writeFileSync(outFilename, output);
+	}
+};