use sass

.github/workflows/release.yml

@@ -31,4 +31,4 @@ jobs:
           gh release create "$tag" \
             --title="$tag" \
             --draft \
-            main.js manifest.json styles.css
+            ./dist/*

.gitignore

@@ -20,3 +20,6 @@ data.json
 
 # Exclude macOS Finder (System Explorer) View States
 .DS_Store
+
+# build
+dist

esbuild.config.mjs

@@ -1,21 +1,21 @@
 import esbuild from "esbuild";
 import process from "process";
 import builtins from "builtin-modules";
+import {sassPlugin} from "esbuild-sass-plugin";
 
-const banner =
-`/*
+const banner = `/*
 THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
 if you want to view the source, please visit the github repository of this plugin
 */
 `;
 
-const prod = (process.argv[2] === "production");
+const prod = process.argv[2] === "production";
 
 const context = await esbuild.context({
 	banner: {
 		js: banner,
 	},
-	entryPoints: ["src/main.ts"],
+	entryPoints: ["src/styles.scss", "src/main.ts"],
 	bundle: true,
 	external: [
 		"obsidian",
@@ -31,18 +31,20 @@ const context = await esbuild.context({
 		"@lezer/common",
 		"@lezer/highlight",
 		"@lezer/lr",
-		...builtins],
+		...builtins,
+	],
 	format: "cjs",
 	target: "es2018",
 	logLevel: "info",
 	sourcemap: prod ? false : "inline",
 	treeShaking: true,
-	outfile: "main.js",
+	outdir: "dist",
+	plugins: [sassPlugin()],
 });
 
 if (prod) {
 	await context.rebuild();
 	process.exit(0);
 } else {
 	await context.watch();
-}
+}