Bundle CSS

plugin/esbuild.config.mjs

@@ -69,7 +69,52 @@ let wasmPlugin = {
 		);
 	},
 };
-const context = await esbuild.context({
+
+const copyBundle = {
+	name: "post-compile",
+	setup(build) {
+		build.onEnd(async (result) => {
+			if (prod) {
+				await fs.promises.copyFile(
+					"manifest.json",
+					"build/manifest.json"
+				);
+				return;
+			}
+
+			if (result.errors.length === 0) {
+				await copyFiles(
+					["manifest.json", ".hotreload"],
+					"/mnt/c/Users/Andras/Desktop/test/test/.obsidian/plugins/my-plugin"
+				);
+
+				await copyFiles(
+					"build",
+					"/mnt/c/Users/Andras/Desktop/test/test/.obsidian/plugins/my-plugin"
+				);
+
+				await copyFiles(
+					["manifest.json", ".hotreload"],
+					"/mnt/c/Users/Andras/Desktop/test/test2/.obsidian/plugins/my-plugin"
+				);
+
+				await copyFiles(
+					"build",
+					"/mnt/c/Users/Andras/Desktop/test/test2/.obsidian/plugins/my-plugin"
+				);
+			}
+		});
+	},
+};
+
+const cssContext = await esbuild.context({
+	entryPoints: ["src/styles.css"],
+	bundle: true,
+	outfile: "build/styles.css",
+	plugins: [copyBundle],
+});
+
+const jsContext = await esbuild.context({
 	entryPoints: ["src/plugin.ts"],
 	bundle: true,
 	external: [
@@ -91,6 +136,7 @@ const context = await esbuild.context({
 	format: "cjs",
 	target: "es2020",
 	logLevel: "info",
+	resolveExtensions: [".ts"],
 	sourcemap: prod ? false : "inline",
 	treeShaking: false,
 	outfile: "build/main.js",
@@ -103,47 +149,13 @@ const context = await esbuild.context({
 					target: "web",
 					path: "../backend/sync_lib",
 			  }),
-		{
+		copyBundle,
-			name: "post-compile",
-			setup(build) {
-				build.onEnd(async (result) => {
-					if (prod) {
-						await fs.promises.copyFile(
-							"manifest.json",
-							"build/manifest.json"
-						);
-					}
-
-					if (result.errors.length === 0) {
-						await copyFiles(
-							["manifest.json", "versions.json", ".hotreload"],
-							"/mnt/c/Users/Andras/Desktop/test/test/.obsidian/plugins/my-plugin"
-						);
-
-						await copyFiles(
-							"build",
-							"/mnt/c/Users/Andras/Desktop/test/test/.obsidian/plugins/my-plugin"
-						);
-
-						await copyFiles(
-							["manifest.json", "versions.json", ".hotreload"],
-							"/mnt/c/Users/Andras/Desktop/test/test2/.obsidian/plugins/my-plugin"
-						);
-
-						await copyFiles(
-							"build",
-							"/mnt/c/Users/Andras/Desktop/test/test2/.obsidian/plugins/my-plugin"
-						);
-					}
-				});
-			},
-		},
 	].filter(Boolean),
 });
 
 if (prod) {
-	await context.rebuild();
+	await Promise.all([cssContext.rebuild(), jsContext.rebuild()]);
 	process.exit(0);
 } else {
-	await context.watch();
+	await Promise.all([cssContext.watch(), jsContext.watch()]);
 }

plugin/src/plugin.ts

@@ -1,7 +1,5 @@
 import { Editor, MarkdownView, Plugin, WorkspaceLeaf } from "obsidian";
 
-import "./styles.css";
-
 import * as lib from "../../backend/sync_lib/pkg/sync_lib.js";
 import * as wasmBin from "../../backend/sync_lib/pkg/sync_lib_bg.wasm";
 import { SyncSettingsTab } from "./views/settings-tab";

plugin/src/styles.css

@@ -1,12 +1,4 @@
-/*
+.sync-settings-access-token textarea {
-
+    width: 100%;
-This CSS file will be included with your plugin, and
+    height: 100px;
-available in the app when your plugin is enabled.
-
-If your plugin does not need CSS, delete this file.
-
-*/
-
-main {
-    background-color: brown;
 }

plugin/src/views/settings-tab.ts

@@ -108,6 +108,7 @@ export class SyncSettingsTab extends PluginSettingTab {
 
 		new Setting(containerEl)
 			.setName("Access token")
+			.setClass("sync-settings-access-token")
 			.setDesc(
 				"Set the access token for the server that you can get from the server"
 			)