Auto-updating scss styles

master
Kuba Orlik 2 years ago
parent 651cd48220
commit 18757bb2d4

@ -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);
});
}
);
}
});
}
})();

15
package-lock.json generated

@ -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"

@ -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",

@ -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";

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

Loading…
Cancel
Save