Bundle all dynamically loaded css (#28)

* static css

* Fix css import in tests

jest.config.ts

@@ -15,6 +15,7 @@ const jestConfig: JestConfigWithTsJest = {
 	testTimeout: 10000,
 	moduleNameMapper: {
 		"^src/(.*)$": "<rootDir>/src/$1",
+		'\\.(css|less|scss|sass)$': 'identity-obj-proxy',
 	},
 };
 

package-lock.json

@@ -17,6 +17,7 @@
         "@types/jest": "^29.5.12",
         "babel-plugin-transform-import-meta": "^2.2.1",
         "babel-plugin-transform-rename-import": "^2.3.0",
+        "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "ts-jest": "^29.1.4",
@@ -4615,6 +4616,12 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true
     },
+    "node_modules/harmony-reflect": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
+      "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==",
+      "dev": true
+    },
     "node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -4702,6 +4709,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/identity-obj-proxy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
+      "integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==",
+      "dev": true,
+      "dependencies": {
+        "harmony-reflect": "^1.4.6"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/import-local": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "@types/jest": "^29.5.12",
     "babel-plugin-transform-import-meta": "^2.2.1",
     "babel-plugin-transform-rename-import": "^2.3.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "ts-jest": "^29.1.4",

src/extensions/core/groupNodeManage.js

@@ -1,9 +1,8 @@
 import { $el, ComfyDialog } from "../../scripts/ui";
 import { DraggableList } from "../../scripts/ui/draggableList";
-import { addStylesheet } from "../../scripts/utils";
 import { GroupNodeConfig, GroupNodeHandler } from "./groupNode";
+import "./groupNodeManage.css";
 
-addStylesheet(import.meta.url);
 
 const ORDER = Symbol();
 

src/scripts/ui/spinner.ts

@@ -1,7 +1,5 @@
-import { addStylesheet } from "../utils";
+import "./spinner.css";
 
-// @ts-ignore
-addStylesheet(import.meta.url);
 
 export function createSpinner() {
 	const div = document.createElement("div");

src/scripts/ui/userSelection.ts

@@ -1,7 +1,8 @@
 import { api } from "../api";
 import { $el } from "../ui";
-import { addStylesheet } from "../utils";
 import { createSpinner } from "./spinner";
+import "./userSelection.css";
+
 
 interface SelectedUser {
 	username: string;
@@ -9,11 +10,9 @@ interface SelectedUser {
 	created: boolean;
 }
 
+
 export class UserSelectionScreen {
 	async show(users, user): Promise<SelectedUser>{
-		// This will rarely be hit so move the loading to on demand
-		// @ts-ignore
-		await addStylesheet(import.meta.url);
 		const userSelection = document.getElementById("comfy-user-selection");
 		userSelection.style.display = "";
 		return new Promise((resolve) => {