From 14070d674ea1b1458c028c2feecfc67a4b0d88f4 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 12 May 2023 17:48:20 +1000
Subject: [PATCH] build(ui): add style injection plugin

when building for package, CSS is all in JS files. when used as a package, it is then injected into the page. bit of a hack to missing CSS in commercial product
---
 invokeai/frontend/web/config/vite.package.config.ts | 5 ++++-
 invokeai/frontend/web/tsconfig.json                 | 8 +-------
 invokeai/frontend/web/yarn.lock                     | 5 +++++
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/invokeai/frontend/web/config/vite.package.config.ts b/invokeai/frontend/web/config/vite.package.config.ts
index 5865461b06..f87cce0bc9 100644
--- a/invokeai/frontend/web/config/vite.package.config.ts
+++ b/invokeai/frontend/web/config/vite.package.config.ts
@@ -5,6 +5,7 @@ import { PluginOption, UserConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 import eslint from 'vite-plugin-eslint';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
 
 export const packageConfig: UserConfig = {
   base: './',
@@ -16,9 +17,10 @@ export const packageConfig: UserConfig = {
     dts({
       insertTypesEntry: true,
     }),
+    cssInjectedByJsPlugin(),
   ],
   build: {
-    chunkSizeWarningLimit: 1500,
+    cssCodeSplit: true,
     lib: {
       entry: path.resolve(__dirname, '../src/index.ts'),
       name: 'InvokeAIUI',
@@ -30,6 +32,7 @@ export const packageConfig: UserConfig = {
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
+          '@emotion/react': 'EmotionReact',
         },
       },
     },
diff --git a/invokeai/frontend/web/tsconfig.json b/invokeai/frontend/web/tsconfig.json
index 3c777b9318..8276f461eb 100644
--- a/invokeai/frontend/web/tsconfig.json
+++ b/invokeai/frontend/web/tsconfig.json
@@ -20,13 +20,7 @@
       "*": ["./src/*"]
     }
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "*.d.ts",
-    "src/app/store/middleware/listenerMiddleware",
-    "src/features/nodes/util/edgeBuilders"
-  ],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "*.d.ts"],
   "exclude": ["src/services/fixtures/*", "node_modules", "dist"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/invokeai/frontend/web/yarn.lock b/invokeai/frontend/web/yarn.lock
index 90bc4055ac..2313cf91c7 100644
--- a/invokeai/frontend/web/yarn.lock
+++ b/invokeai/frontend/web/yarn.lock
@@ -6673,6 +6673,11 @@ validator@^13.7.0:
   resolved "https://registry.yarnpkg.com/validator/-/validator-13.9.0.tgz#33e7b85b604f3bbce9bb1a05d5c3e22e1c2ff855"
   integrity sha512-B+dGG8U3fdtM0/aNK4/X8CXq/EcxU2WPrPEkJGslb47qyHsxmbggTWK0yEA4qnYVNF+nxNlN88o14hIcPmSIEA==
 
+vite-plugin-css-injected-by-js@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-3.1.1.tgz#8324412636cf6fdada1a86f595aa2e78458e5ddb"
+  integrity sha512-mwrFvEEy0TuH8Ul0cb2HgjmNboQ/JnEFy+kHCWqAJph3ikMOiIuyYVdx0JO4nEIWJyzSnc4TTdmoTulsikvJEg==
+
 vite-plugin-dts@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/vite-plugin-dts/-/vite-plugin-dts-2.3.0.tgz#6ab2edf56f48261bfede03958704bfaee2fca3e4"