fix: dynamically import unocss styles

Author: Amine

package.json

@@ -39,18 +39,16 @@
     "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
-    "@nuxt/devtools-kit": "^2.6.2",
-    "@nuxt/devtools-ui-kit": "^2.6.2",
     "@iconify-json/carbon": "^1.2.13",
+    "@journeyapps/wa-sqlite": "^1.2.6",
     "@nuxt/devtools": "^2.6.2",
+    "@nuxt/devtools-kit": "^2.6.2",
+    "@nuxt/devtools-ui-kit": "^2.6.2",
     "@nuxt/kit": "^4.0.3",
-    "@journeyapps/wa-sqlite": "^1.2.6",
     "@powersync/kysely-driver": "^1.3.0",
     "@powersync/vue": "^0.4.0",
     "@powersync/web": "^1.27.1",
     "@tanstack/vue-table": "^8.21.3",
-    "@unocss/nuxt": "^66.5.2",
-    "unocss": "^66.5.2",
     "@vueuse/nuxt": "^13.9.0",
     "consola": "^3.4.2",
     "defu": "^6.1.4",
@@ -60,6 +58,7 @@
     "reka-ui": "^2.5.0",
     "shiki": "^3.13.0",
     "sirv": "^3.0.1",
+    "unocss": "^66.5.2",
     "unstorage": "^1.17.1"
   },
   "peerDependencies": {

playground/nuxt.config.ts

@@ -67,11 +67,7 @@ export default defineNuxtConfig({
     },
   },
 
-  // unocss: {
-  //   autoImport: false,
-  //   preflight: true,
-  //   icons: true,
-  //   wind4: true,
-  //   attributify: true,
-  // },
+  unocss: {
+    autoImport: false,
+  },
 })

pnpm-lock.yaml

@@ -10,12 +10,6 @@ import {
   installModule,
 } from '@nuxt/kit'
 import { defu } from 'defu'
-import UnoCSS from 'unocss/vite'
-import {
-  presetWind4,
-  presetAttributify,
-  presetIcons,
-} from 'unocss'
 import { setupDevToolsUI } from './devtools'
 import { addImportsFrom } from './runtime/utils/addImportsFrom'
 
@@ -65,23 +59,6 @@ export default defineNuxtModule<PowerSyncNuxtModuleOptions>({
     await installModule('@nuxt/devtools-ui-kit')
     await installModule('@vueuse/nuxt')
 
-    // Configure UnoCSS as a scoped Vite plugin
-    const unocssVitePlugin = UnoCSS({
-      mode: 'per-module',
-      configFile: false,
-      content: {
-        filesystem: [resolver.resolve('runtime/**/*.{vue,ts}')],
-      },
-      presets: [
-        presetWind4(),
-        presetAttributify(),
-        presetIcons(),
-      ],
-    })
-
-    nuxt.options.vite.plugins = nuxt.options.vite.plugins || []
-    nuxt.options.vite.plugins.push(unocssVitePlugin)
-
     addPlugin(resolver.resolve('./runtime/plugin.client'))
 
     // expose the composables

src/module.ts

@@ -51,7 +51,6 @@
 
 <script setup lang="ts">
 import { useRuntimeConfig } from '#imports'
-import '../assets/powersync-inspector.css'
 
 const useDiagnostics = useRuntimeConfig().public.powerSyncModuleOptions.useDiagnostics ?? false
 </script>

src/runtime/assets/powersync-inspector.css

@@ -1,9 +1,18 @@
-import { defineNuxtPlugin, useRuntimeConfig } from '#app'
+import { defineNuxtPlugin, useRoute, useRuntimeConfig } from '#app'
 
 export default defineNuxtPlugin((nuxtApp) => {
   // Expose PowerSync module options globally
   const runtimeConfig = useRuntimeConfig()
 
   nuxtApp.vueApp.config.globalProperties.$powerSyncModuleOptions
     = runtimeConfig.public.powerSyncModuleOptions
+
+  const route = useRoute()
+
+  nuxtApp.hook('page:finish', () => {
+    if (route.path.startsWith('/__powersync-inspector')) {
+      // Dynamically import UnoCSS only when on inspector route
+      import('virtual:uno.css')
+    }
+  })
 })