fix(build): Workarounds for sass

Author: AaronDewes

script/sass.js

@@ -1,11 +1,19 @@
-import fs from 'fs';
-import sass from 'sass';
+import fs from "fs";
+import * as sass from "sass";
+import customImporter from "./sass_importer.js";
 
-const result = sass.renderSync({
-  file: "assets/sass/styles.scss",
-  includePaths: ["node_modules"],
-  outputStyle: "compressed",
-});
+const result = sass.compileString(
+  sass
+    .compile("assets/sass/styles.scss", {
+      importers: [customImporter],
+    })
+    .css.replaceAll("@import '@primer", "@use 'pkg:@primer"),
+  {
+    importers: [sass.NodePackageImporter()],
+  }
+);
 
-fs.mkdirSync("assets/dist");
-fs.writeFileSync("assets/dist/styles.css", result.css.toString());
+fs.mkdirSync("assets/dist", {
+  recursive: true,
+});
+fs.writeFileSync("assets/dist/styles.css", result.css);

script/sass_importer.js

@@ -0,0 +1,23 @@
+import * as fs from "fs";
+import * as path from "path";
+
+export default {
+    findFileUrl(url, ctx) {
+      let originalFile = ctx.containingUrl.pathname;
+      let resolvedUrl = path.resolve(path.dirname(originalFile), url);
+      if (fs.existsSync(resolvedUrl)) {
+        return new URL(`file://${resolvedUrl}`);
+      } else {
+        let nodeModulePath = path.resolve("node_modules", url);
+        if (fs.existsSync(nodeModulePath)) {
+          return new URL(`file://${nodeModulePath}`);
+        } else if (fs.existsSync(nodeModulePath + ".scss")) {
+          return new URL(`file://${resolvedUrl}.scss`);
+        } else if (fs.existsSync(nodeModulePath + ".css")) {
+          return new URL(`file://${nodeModulePath}.css`);
+        } else {
+          throw new Error(`File not found: ${url}`);
+        }
+      }
+    },
+};

script/watchsass.js

@@ -1,22 +1,33 @@
-import fs from 'fs';
-import sass from 'sass';
+import fs from "fs";
+import * as sass from "sass";
+import customImporter from "./sass_importer.js";
 
-const result = sass.renderSync({
-    file: "assets/sass/styles.scss",
-    includePaths: ["node_modules"],
-    outputStyle: "compressed"
-});
+const result = sass.compileString(
+  sass
+    .compile("assets/sass/styles.scss", {
+      importers: [customImporter],
+    })
+    .css.replaceAll("@import '@primer", "@use 'pkg:@primer"),
+  {
+    importers: [sass.NodePackageImporter()],
+  }
+);
 
-fs.writeFileSync("assets/dist/styles.css", result.css.toString());
+fs.writeFileSync("assets/dist/styles.css", result.css);
 
 console.log(`Watching for file changes in assets/sass`);
 
 fs.watch("assets/sass", () => {
-    const result = sass.renderSync({
-        file: "assets/sass/styles.scss",
-        includePaths: ["node_modules"],
-        outputStyle: "compressed"
-    });
+  const result = sass.compileString(
+    sass
+      .compile("assets/sass/styles.scss", {
+        importers: [customImporter],
+      })
+      .css.replaceAll("@import '@primer", "@use 'pkg:@primer"),
+    {
+      importers: [sass.NodePackageImporter()],
+    }
+  );
 
-    fs.writeFileSync("assets/dist/styles.css", result.css.toString());
-});
+  fs.writeFileSync("assets/dist/styles.css", result.css);
+});