Merge pull request #1216 from basecamp/fix-yarn-start

Reintroduce yarn build --watch

bin/sass-build

@@ -4,38 +4,47 @@ 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)
 
 const functions = {
-  "svg($file)": (svgFileName) => {
-    const filename = path.resolve(basePath, svgFileName.getValue())
+  "svg($file)": (args) => {
+    const fileName = args[0].assertString().text
+    const filePath = path.resolve(basePath, fileName)
 
-    let svgContent = fs.readFileSync(filename, "utf8")
+    let svgContent = fs.readFileSync(filePath, "utf8")
     svgContent = optimize(svgContent, { multipass: true, datauri: "enc" })
 
     return new sass.SassString(`url("${svgContent.data}")`, { quotes: false })
-  },
+  }
 }
 
-sass.render(
-  {
-    file: inputFile,
-    functions
-  },
-  (err, result) => {
-    if (err) {
-      console.error("Error compiling SCSS:", err)
-    } else {
-      fs.writeFileSync(outputFile, result.css, "utf8")
-    }
+function compile() {
+  try {
+    const result = sass.compile(inputFile, { functions })
+
+    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()}] ${filePath} 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==