Reintroduce yarn build --watch

#1215 indirectly removed the `--watch` mode, by switching SCSS compilation
to a node.js file. This was required because the `sass` CLI doesn't support a `--function` option to pass custom functions.
Now reintroduce it back using `chokidar`. This also fixes `yarn start` command.

bin/sass-build

@@ -4,14 +4,16 @@ const path = require("path")
 const fs = require("fs")
 const sass = require("sass")
 const { optimize } = require("svgo")
+const chokidar = require("chokidar")
 
 const args = process.argv.slice(2)
 if (args.length < 2) {
-  console.error("Usage: bin/sass-build <inputFile> <outputFile>")
+  console.error("Usage: bin/sass-build <inputFile> <outputFile> (--watch)")
   process.exit(1)
 }
 const inputFile = path.resolve(args[0])
 const outputFile = path.resolve(args[1])
+const watchMode = args.includes("--watch")
 
 const basePath = path.dirname(inputFile)
 
@@ -20,20 +22,29 @@ const functions = {
     const fileName = args[0].assertString().text
     const filePath = path.resolve(basePath, fileName)
 
-    let svgContent = fs.readFileSync(filePath, "utf8");
-    svgContent = optimize(svgContent, { multipass: true, datauri: "enc" });
+    let svgContent = fs.readFileSync(filePath, "utf8")
+    svgContent = optimize(svgContent, { multipass: true, datauri: "enc" })
 
     return new sass.SassString(`url("${svgContent.data}")`, { quotes: false })
   }
 }
 
-try {
-  const result = sass.compile(inputFile, {
-    functions,
-  })
+function compile() {
+  try {
+    const result = sass.compile(inputFile, { functions })
 
-  fs.writeFileSync(outputFile, result.css, "utf8")
-} catch (error) {
-  console.error("Error compiling SCSS:", error.message)
-  process.exit(1)
+    fs.writeFileSync(outputFile, result.css, "utf8")
+  } catch (error) {
+    console.error("Error compiling SCSS:", error.message)
+  }
+}
+compile()
+
+if (watchMode) {
+  console.log(`Watching for SASS file changes under ${basePath}...`)
+  chokidar.watch(basePath).on("change", (filePath) => {
+    if (!filePath.endsWith(".scss")) return
+    console.log(`[${new Date().toLocaleTimeString()}] File changed. Recompiling...`)
+    compile()
+  })
 }

package.json

@@ -35,6 +35,7 @@
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@web/dev-server": "^0.1.34",
     "babel-eslint": "^10.1.0",
+    "chokidar": "^4.0.2",
     "concurrently": "^7.4.0",
     "eslint": "^7.32.0",
     "esm": "^3.2.25",

yarn.lock

@@ -2124,7 +2124,7 @@ chokidar@^3.4.3, chokidar@^3.5.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
-chokidar@^4.0.0:
+chokidar@^4.0.0, chokidar@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-4.0.2.tgz#97b9562c9f59de559177f069eadf5dcc67d24798"
   integrity sha512-/b57FK+bblSU+dfewfFe0rT1YjVDfOmeLQwCAuC+vwvgLkXboATqqmy+Ipux6JrF6L5joe5CBnFOw+gLWH6yKg==