Auto-updating scss styles

esbuild.js

@@ -1,6 +1,8 @@
 const { build } = require("esbuild");
+const { spawn } = require("child_process");
 const { sassPlugin } = require("esbuild-sass-plugin");
 const glob = require("tiny-glob");
+const chokidar = require("chokidar");
 
 const watch = process.argv.includes("--watch");
 
@@ -16,14 +18,16 @@ const watch = process.argv.includes("--watch");
 		target: "node16",
 		format: "cjs",
 	});
-	build({
+	const scss_build = await build({
 		entryPoints: ["./src/main.scss"],
 		sourcemap: true,
 		outfile: "./public/dist/style.css",
 		logLevel: "info",
-		watch,
+		incremental: watch,
 		plugins: [sassPlugin()],
 	});
+	scss_build.rebuild();
+
 	build({
 		entryPoints: ["./src/front/index.ts"],
 		sourcemap: true,
@@ -32,4 +36,24 @@ const watch = process.argv.includes("--watch");
 		bundle: true,
 		watch,
 	});
+
+	if (watch) {
+		const scss_watcher = chokidar.watch("src", { ignoreInitial: true });
+		scss_watcher.on("all", (_, path) => {
+			if (path.endsWith(".scss")) {
+				// refresh the list of all scss files in includes.scss
+				spawn("./node_modules/.bin/sealgen", ["generate-scss-includes"]).on(
+					"close",
+					() => {
+						scss_build.rebuild().catch(async (e) => {
+							console.error(e);
+							setTimeout(() => {
+								scss_build.rebuild();
+							}, 200);
+						});
+					}
+				);
+			}
+		});
+	}
 })();

package-lock.json

@@ -12,7 +12,7 @@
 				"@babel/core": "^7.12.10",
 				"@hotwired/turbo": "^7.1.0",
 				"@koa/router": "^10.1.1",
-				"@sealcode/sealgen": "^0.1.6",
+				"@sealcode/sealgen": "^0.1.7",
 				"@sealcode/ts-predicates": "^0.4.0",
 				"esbuild-node-tsc": "^1.8.2",
 				"hint": "^7.0.1",
@@ -38,6 +38,7 @@
 				"@typescript-eslint/eslint-plugin": "^5.10.0",
 				"@typescript-eslint/parser": "^5.10.2",
 				"axios": "^0.24.0",
+				"chokidar": "^3.5.3",
 				"esbuild": "^0.14.10",
 				"esbuild-sass-plugin": "^2.0.0",
 				"eslint": "^7.19.0",
@@ -2442,9 +2443,9 @@
 			}
 		},
 		"node_modules/@sealcode/sealgen": {
-			"version": "0.1.6",
-			"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.1.6.tgz",
-			"integrity": "sha512-BHoRF6Nkb9ZEdIDsanJ6DVZ9yJ+3J58i9+LQXSKiQaKFbkS3jgvPB00kQ/Qah6xkTOh1lYXh9qRtKMeV7PGzMw==",
+			"version": "0.1.7",
+			"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.1.7.tgz",
+			"integrity": "sha512-hnDY3KSUYtUnf1ybNgsg/PDnEmD5IMar3IWt3HoPS/EBuMtevNKozu1IxvtcI6fY4aNfBAGygo0pgsYuhYsdBA==",
 			"dependencies": {
 				"@sealcode/ts-predicates": "^0.2.1",
 				"locreq": "^2.0.2"
@@ -18201,9 +18202,9 @@
 			}
 		},
 		"@sealcode/sealgen": {
-			"version": "0.1.6",
-			"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.1.6.tgz",
-			"integrity": "sha512-BHoRF6Nkb9ZEdIDsanJ6DVZ9yJ+3J58i9+LQXSKiQaKFbkS3jgvPB00kQ/Qah6xkTOh1lYXh9qRtKMeV7PGzMw==",
+			"version": "0.1.7",
+			"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.1.7.tgz",
+			"integrity": "sha512-hnDY3KSUYtUnf1ybNgsg/PDnEmD5IMar3IWt3HoPS/EBuMtevNKozu1IxvtcI6fY4aNfBAGygo0pgsYuhYsdBA==",
 			"requires": {
 				"@sealcode/ts-predicates": "^0.2.1",
 				"locreq": "^2.0.2"

package.json

@@ -20,7 +20,7 @@
 		"@babel/core": "^7.12.10",
 		"@hotwired/turbo": "^7.1.0",
 		"@koa/router": "^10.1.1",
-		"@sealcode/sealgen": "^0.1.6",
+		"@sealcode/sealgen": "^0.1.7",
 		"@sealcode/ts-predicates": "^0.4.0",
 		"esbuild-node-tsc": "^1.8.2",
 		"hint": "^7.0.1",
@@ -46,6 +46,7 @@
 		"@typescript-eslint/eslint-plugin": "^5.10.0",
 		"@typescript-eslint/parser": "^5.10.2",
 		"axios": "^0.24.0",
+		"chokidar": "^3.5.3",
 		"esbuild": "^0.14.10",
 		"esbuild-sass-plugin": "^2.0.0",
 		"eslint": "^7.19.0",

src/includes.scss

@@ -0,0 +1,4 @@
+// DO NOT EDIT! This file is generated automaticaly with npx sealgen generate-scss-includes
+
+@import "back/forms/forms.scss";
+@import "back/routes/common/ui/input.scss";

src/main.scss

@@ -21,7 +21,4 @@ body {
 	align-items: center;
 }
 
-// === Views ===
-
-@import "back/routes/common/ui/input.scss";
-@import "back/forms/forms.scss";
+@import "includes.scss";