From b67b642d5eb96fd2b6f7c0ffd4617711d446b9fa Mon Sep 17 00:00:00 2001
From: Jacopo Beschi <jacopobeschi@37signals.com>
Date: Tue, 17 Dec 2024 13:23:05 +0100
Subject: [PATCH 1/2] SCSS: Switch to `compile`

Use `compile` instead the deprecated `render` method.
No changes to the generated `.css`.

See https://sass-lang.com/documentation/js-api/functions/render/
---
 bin/sass-build | 34 ++++++++++++++++------------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/bin/sass-build b/bin/sass-build
index 2006902d0..669f81d65 100755
--- a/bin/sass-build
+++ b/bin/sass-build
@@ -16,26 +16,24 @@ const outputFile = path.resolve(args[1])
 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")
-    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 })
-  },
+  }
 }
 
-sass.render(
-  {
-    file: inputFile,
-    functions
-  },
-  (err, result) => {
-    if (err) {
-      console.error("Error compiling SCSS:", err)
-    } else {
-      fs.writeFileSync(outputFile, result.css, "utf8")
-    }
-  }
-)
+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)
+}

From 37e94646c287d4867011fdb0c372e677e8e97c48 Mon Sep 17 00:00:00 2001
From: Jacopo Beschi <jacopobeschi@37signals.com>
Date: Tue, 17 Dec 2024 13:57:44 +0100
Subject: [PATCH 2/2] Reintroduce `yarn build --watch`

https://github.com/basecamp/trix/pull/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 the `--function` for custom functions.
Now reintroduce it back using `chokidar`. This also fixes `yarn start` command.
---
 bin/sass-build | 33 ++++++++++++++++++++++-----------
 package.json   |  1 +
 yarn.lock      |  2 +-
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/bin/sass-build b/bin/sass-build
index 669f81d65..10ff998db 100755
--- a/bin/sass-build
+++ b/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()}] ${filePath} changed. Recompiling...`)
+    compile()
+  })
 }
diff --git a/package.json b/package.json
index 3125a3432..eb3a80ef0 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index f6a80def6..064eba330 100644
--- a/yarn.lock
+++ b/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==