css is now correctly loading

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';

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,

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"
   }
 }

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 (

packages/interface/src/index.ts

@@ -1,3 +1,5 @@
 import App from './App';
 
+import './style.scss';
+
 export default App;

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: {

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: ''
+  }
 });