(fix) proper css management

dmx974 · dmx974 · commit b995940deae3 · 2024-09-08T09:23:50.000+04:00
diff --git a/index.html b/index.html
@@ -19,7 +19,6 @@
       console.log("ComfyUI Front-end version:", __COMFYUI_FRONTEND_VERSION__);
     </script>
     <script type="module" src="src/main.ts"></script>
-    <link rel="stylesheet" type="text/css" href="user.css" />
     <link rel="stylesheet" type="text/css" href="materialdesignicons.min.css" />
   </head>
   <body class="litegraph">
diff --git a/src/assets/css/user.css b/src/assets/css/user.css
diff --git a/src/main.ts b/src/main.ts
@@ -1,15 +1,18 @@
+import App from './App.vue'
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { i18n } from './i18n'
 import PrimeVue from 'primevue/config'
 import Aura from '@primevue/themes/aura'
 import { definePreset } from '@primevue/themes'
 import ConfirmationService from 'primevue/confirmationservice'
 import ToastService from 'primevue/toastservice'
 import Tooltip from 'primevue/tooltip'
-import 'primeicons/primeicons.css'
 
-import App from './App.vue'
-import { createPinia } from 'pinia'
-import { i18n } from './i18n'
+import '@comfyorg/litegraph/style.css'
+import '@/assets/css/style.css'
+import '@/assets/css/user.css'
+import 'primeicons/primeicons.css'
 
 const ComfyUIPreset = definePreset(Aura, {
   semantic: {
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
@@ -29,13 +29,10 @@ import {
   LGraphCanvas,
   LGraph,
   LGraphNode,
-  LiteGraph
+  LiteGraph,
+  LGraphGroup
 } from '@comfyorg/litegraph'
 import { StorageLocation } from '@/types/settingTypes'
-
-// CSS imports. style.css must be imported later as it overwrites some litegraph styles.
-import '@comfyorg/litegraph/style.css'
-import '../assets/css/style.css'
 import { ExtensionManager } from '@/types/extensionTypes'
 import {
   ComfyNodeDefImpl,
@@ -54,7 +51,6 @@ import { useToastStore } from '@/stores/toastStore'
 import { ModelStore, useModelStore } from '@/stores/modelStore'
 import type { ToastMessageOptions } from 'primevue/toast'
 import { useWorkspaceStore } from '@/stores/workspaceStateStore'
-import { LGraphGroup } from '@comfyorg/litegraph'
 
 export const ANIM_PREVIEW_WIDGET = '$$comfy_animation_preview'
 
