From 564809e12be00f9c55fa915c960df6ef36f13488 Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Sun, 17 Apr 2022 16:27:25 -0700
Subject: [PATCH] css is now correctly loading

---
 apps/desktop/src/index.tsx            |  1 +
 apps/desktop/vite.config.ts           |  6 +++---
 packages/interface/package.json       |  9 +++++----
 packages/interface/src/App.tsx        |  7 -------
 packages/interface/src/index.ts       |  2 ++
 packages/interface/tailwind.config.js |  2 +-
 packages/interface/vite.config.ts     | 24 ++++++++----------------
 7 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/apps/desktop/src/index.tsx b/apps/desktop/src/index.tsx
index 88e104f82..bcb8d29de 100644
--- a/apps/desktop/src/index.tsx
+++ b/apps/desktop/src/index.tsx
@@ -3,6 +3,7 @@ import { createRoot } from 'react-dom/client';
 
 // import Spacedrive interface
 import SpacedriveInterface from '@sd/interface';
+import '@sd/interface/dist/style.css';
 
 // import types from Spacedrive core (TODO: re-export from client would be cleaner)
 import { ClientCommand, ClientQuery, CoreEvent } from '@sd/core';
diff --git a/apps/desktop/vite.config.ts b/apps/desktop/vite.config.ts
index 0b354cc68..3270f519e 100644
--- a/apps/desktop/vite.config.ts
+++ b/apps/desktop/vite.config.ts
@@ -10,14 +10,14 @@ export default defineConfig({
   plugins: [
     react({
       jsxRuntime: 'classic'
-    }),
-    tsconfigPaths()
+    })
   ],
   esbuild: {
     jsxInject: 'import {jsx as _jsx} from "react/jsx-runtime"'
   },
+
   root: 'src',
-  publicDir: '../../packages/interface/src/assets',
+  publicDir: '@sd/interface/src/assets',
   build: {
     outDir: '../dist',
     emptyOutDir: false,
diff --git a/packages/interface/package.json b/packages/interface/package.json
index 8cb4126b1..a4a56d5df 100644
--- a/packages/interface/package.json
+++ b/packages/interface/package.json
@@ -10,13 +10,14 @@
     ".": {
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.js"
-    }
+    },
+    "./dist/style.css": "./dist/style.css"
   },
   "types": "./src/index.ts",
   "license": "MIT",
   "private": true,
   "scripts": {
-    "vite": "vite",
+    "dev": "vite build --watch",
     "build": "vite build"
   },
   "resolutions": {
@@ -72,13 +73,13 @@
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
     "@types/tailwindcss": "^3.0.10",
+    "@vitejs/plugin-react": "^1.3.1",
     "concurrently": "^7.1.0",
     "prettier": "^2.6.2",
     "typescript": "^4.6.3",
     "vite": "^2.9.1",
     "vite-plugin-filter-replace": "^0.1.9",
     "vite-plugin-react-svg": "^0.2.0",
-    "vite-tsconfig-paths": "^3.4.1",
-    "@vitejs/plugin-react": "^1.3.1"
+    "vite-tsconfig-paths": "^3.4.1"
   }
 }
diff --git a/packages/interface/src/App.tsx b/packages/interface/src/App.tsx
index d809b4853..550bc00f7 100644
--- a/packages/interface/src/App.tsx
+++ b/packages/interface/src/App.tsx
@@ -26,9 +26,6 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { ClientProvider } from '@sd/client';
 import { CoreEvent } from '@sd/core';
 
-// import './style.scss';
-import 'tailwindcss/tailwind.css';
-
 const queryClient = new QueryClient();
 
 export const AppPropsContext = React.createContext<AppProps | null>(null);
@@ -160,10 +157,6 @@ function NotFound() {
   );
 }
 
-// useHotkeys('command+q', () => {
-//   process.exit();
-// });
-
 function AppContainer() {
   useCoreEvents();
   return (
diff --git a/packages/interface/src/index.ts b/packages/interface/src/index.ts
index f1f2a246e..993a75dce 100644
--- a/packages/interface/src/index.ts
+++ b/packages/interface/src/index.ts
@@ -1,3 +1,5 @@
 import App from './App';
 
+import './style.scss';
+
 export default App;
diff --git a/packages/interface/tailwind.config.js b/packages/interface/tailwind.config.js
index 2898d49c6..949731cb2 100644
--- a/packages/interface/tailwind.config.js
+++ b/packages/interface/tailwind.config.js
@@ -3,7 +3,7 @@
 // const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
-  content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
+  content: ['./src/index.html', './src/**/*.{js,ts,jsx,tsx}'],
   darkMode: 'media',
   mode: 'jit',
   theme: {
diff --git a/packages/interface/vite.config.ts b/packages/interface/vite.config.ts
index 1365111d9..db866d9f8 100644
--- a/packages/interface/vite.config.ts
+++ b/packages/interface/vite.config.ts
@@ -1,6 +1,4 @@
 import { defineConfig } from 'vite';
-import tsconfigPaths from 'vite-tsconfig-paths';
-import filterReplace from 'vite-plugin-filter-replace';
 import reactSvgPlugin from 'vite-plugin-react-svg';
 import react from '@vitejs/plugin-react';
 
@@ -13,18 +11,7 @@ export default defineConfig({
     react({
       jsxRuntime: 'classic'
     }),
-    tsconfigPaths(),
     reactSvgPlugin()
-    // filterReplace([
-    //   {
-    //     filter: /\.js$/,
-    //     replace: {
-    //       // this is a hotfix for broken import in react-virtualized
-    //       from: `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`,
-    //       to: ''
-    //     }
-    //   }
-    // ])
   ],
   esbuild: {
     jsxInject: 'import {jsx as _jsx} from "react/jsx-runtime"'
@@ -43,10 +30,15 @@ export default defineConfig({
       input: {
         index: path.resolve(__dirname, 'src', 'index.ts')
       },
-      external: ['react', 'react-dom']
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          'react': 'React',
+          'react-dom': 'ReactDOM'
+        }
+      }
     },
     target: 'esnext',
     sourcemap: true
-  },
-  base: ''
+  }
 });