Process SCSS as a part of the build script

package.json

@@ -5,7 +5,6 @@
   "type": "module",
   "scripts": {
     "build": "bun run --bun scripts/build.js",
-    "build:css": "sass --style compressed --source-map --embed-sources --no-error-css --load-path=node_modules src/scss/:src/css/",
     "build:release": "bun run --bun scripts/release.js",
     "watch": "bun run --bun --watch scripts/watch.js",
     "check": "bun biome check src/ scripts/",

scripts/build.js

@@ -1,13 +1,16 @@
 #!/usr/bin/env bun
 
-import Bun, { $ } from "bun";
+import Bun, { $, Glob } from "bun";
 
 import fs from "node:fs/promises";
 import path from "node:path";
+import * as sass from "sass";
 
+const nodeModulesDir = path.join(process.cwd(), "node_modules");
 const srcDir = path.join(process.cwd(), "src");
-const browserSrcDir = path.join(process.cwd(), "src/clients/browser");
-const symbioteSrcDir = path.join(process.cwd(), "src/clients/symbiote");
+const sharedDir = path.join(process.cwd(), "build/shared");
+const browserSrcDir = path.join(srcDir, "clients/browser");
+const symbioteSrcDir = path.join(srcDir, "clients/symbiote");
 const browsers = ["firefox", "chrome"];
 
 const inlineSVG = {
@@ -56,8 +59,13 @@ const bunBuild = async (config) => {
   }
 };
 
+const buildShared = async () => {
+  await fs.mkdir(sharedDir, { recursive: true });
+  await $`cp -rf ${srcDir}/{icons,options.html} LICENSE README.md CHANGELOG.md ${sharedDir}`;
+};
+
 const buildBrowser = async () => {
-  const sharedDir = path.join(process.cwd(), "build/shared-browser");
+  const sharedBrowserDir = path.join(process.cwd(), "build/shared-browser");
 
   const { version } = await Bun.file(
     path.join(process.cwd(), "package.json"),
@@ -70,20 +78,19 @@ const buildBrowser = async () => {
     for (const js of script.js) {
       await bunBuild({
         entrypoints: [path.join(browserSrcDir, js)],
-        outdir: sharedDir,
+        outdir: sharedBrowserDir,
       });
     }
   }
 
   for (const js of ["options.js"]) {
     await bunBuild({
       entrypoints: [path.join(srcDir, js)],
-      outdir: sharedDir,
+      outdir: sharedBrowserDir,
     });
   }
 
-  await $`cp -rf ${browserSrcDir}/background.js ${sharedDir}`;
-  await $`cp -rf ${srcDir}/{icons,css,options.html} LICENSE README.md CHANGELOG.md ${sharedDir}`;
+  await $`cp -rf ${browserSrcDir}/background.js ${sharedBrowserDir}`;
 
   for (const browser of browsers) {
     const buildDir = path.join(process.cwd(), "build", browser);
@@ -92,6 +99,9 @@ const buildBrowser = async () => {
     await fs.cp(sharedDir, buildDir, {
       recursive: true,
     });
+    await fs.cp(sharedBrowserDir, buildDir, {
+      recursive: true,
+    });
 
     const browserManifest = await Bun.file(
       path.join(browserSrcDir, `manifest.${browser}.json`),
@@ -142,8 +152,12 @@ const buildSymbiote = async () => {
     });
   }
 
+  // Shared files
+  await fs.cp(sharedDir, buildDir, {
+    recursive: true,
+  });
+
   await $`cp -rf ${symbioteSrcDir}/index.html ${buildDir}`;
-  await $`cp -rf ${srcDir}/{icons,css,options.html} LICENSE README.md CHANGELOG.md ${buildDir}`;
 
   // Manifest
   const manifest = { version, ...manifestBase };
@@ -153,7 +167,36 @@ const buildSymbiote = async () => {
   );
 };
 
+const buildSCSS = async () => {
+  const scssFiles = path.join(srcDir, "scss/*.scss");
+  const cssPath = path.join(sharedDir, "css");
+
+  const glob = new Glob(scssFiles);
+  for await (const file of glob.scan(".")) {
+    const result = sass.compile(file, {
+      style: "compressed",
+      sourceMap: true,
+      sourceMapIncludeSources: true,
+      loadPaths: [nodeModulesDir],
+      // https://github.com/twbs/bootstrap/issues/29853
+      silenceDeprecations: ["import"],
+      quietDeps: true,
+    });
+
+    await Bun.write(
+      path.format({
+        ...path.parse(path.join(cssPath, path.basename(file))),
+        base: "",
+        ext: ".css",
+      }),
+      result.css,
+    );
+  }
+};
+
 export const build = async () => {
+  await buildSCSS();
+  await buildShared();
   await buildBrowser();
   await buildSymbiote();
   console.log("Build complete");

src/scss/contextmenu.scss

@@ -0,0 +1,65 @@
+.tales-beyond-extension-contextmenu {
+  h2 {
+    color: #ab79d6;
+    margin: 0rem 0 0 0;
+    display: flex;
+    gap: .5rem;
+    line-height: 1.2;
+    align-items: center;
+    font-size: 1rem;
+    img {
+      width: 1.5rem;
+    }
+  }
+
+  .arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    top: calc(50% - 10px);
+    .left {
+      border-right: 10px solid #27272c;
+      left: -10px;
+    }
+    .right {
+      border-left: 10px solid #27272c;
+      right: -10px;
+    }
+  }
+  .menu {
+    position: absolute;
+    z-index: 2000;
+    background: #27272c;
+    padding: 6px 8px;
+    color: #c5c5ce;
+    border-radius: .5em;
+    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.3);
+    text-align: center;
+    font-size: 12px;
+    min-width: max-content;
+    /* Required because of Popover API */
+    inset: 0px auto auto 0px;
+    margin: 0;
+    border: none;
+  }
+
+  .item {
+    padding: 6px 8px;
+    margin: 2px;
+    line-height: 18px;
+
+    &:hover {
+      background-color: #ab79d6;
+      color: #351d4a;
+      cursor: pointer;
+    }
+    .advantage:not(:hover) {
+      text-decoration: green wavy underline;
+    }
+    .disadvantage:not(:hover) {
+      text-decoration: red wavy underline;
+    }
+  }
+}