fix(vite): search for config from vite root

packages/cli/src/index.ts

@@ -47,7 +47,7 @@ export async function resolveOptions(options: CliOptions) {
 
 export async function build(_options: CliOptions) {
   const options = await resolveOptions(_options)
-  const loadConfig = createConfigLoader()
+  const loadConfig = createConfigLoader(process.cwd())
   const { config, sources: configSources } = await loadConfig()
 
   uno = createGenerator(

packages/config/src/index.ts

@@ -6,53 +6,53 @@ import { createConfigLoader as createLoader } from 'unconfig'
 
 export type { LoadConfigResult, LoadConfigSource }
 
-export function createConfigLoader<U extends UserConfig>(configOrPath: string | U = process.cwd(), extraConfigSources: LoadConfigSource[] = []): () => Promise<LoadConfigResult<U>> {
+export function createConfigLoader<U extends UserConfig>(_configOrPath: string | U, extraConfigSources: LoadConfigSource[] = []) {
   let inlineConfig = {} as U
 
-  if (typeof configOrPath !== 'string') {
-    inlineConfig = configOrPath
-    if (inlineConfig.configFile === false) {
-      return async() => ({
-        config: inlineConfig as U,
-        sources: [],
-      })
+  return async(configOrPath = _configOrPath): Promise<LoadConfigResult<U>> => {
+    if (typeof configOrPath !== 'string') {
+      inlineConfig = configOrPath
+      if (inlineConfig.configFile === false) {
+        return {
+          config: inlineConfig as U,
+          sources: [],
+        }
+      }
+      else {
+        configOrPath = inlineConfig.configFile || process.cwd()
+      }
     }
-    else {
-      configOrPath = inlineConfig.configFile || process.cwd()
-    }
-  }
 
-  const resolved = resolve(configOrPath)
-  let cwd = resolved
+    const resolved = resolve(configOrPath)
+    let cwd = resolved
 
-  let isFile = false
-  if (fs.existsSync(resolved) && fs.statSync(resolved).isFile()) {
-    isFile = true
-    cwd = dirname(resolved)
-  }
+    let isFile = false
+    if (fs.existsSync(resolved) && fs.statSync(resolved).isFile()) {
+      isFile = true
+      cwd = dirname(resolved)
+    }
 
-  const loader = createLoader<U>({
-    sources: isFile
-      ? [
-          {
-            files: resolved,
-            extensions: [],
-          },
-        ]
-      : [
-          {
-            files: [
-              'unocss.config',
-              'uno.config',
-            ],
-          },
-          ...extraConfigSources,
-        ],
-    cwd,
-    defaults: inlineConfig,
-  })
+    const loader = createLoader<U>({
+      sources: isFile
+        ? [
+            {
+              files: resolved,
+              extensions: [],
+            },
+          ]
+        : [
+            {
+              files: [
+                'unocss.config',
+                'uno.config',
+              ],
+            },
+            ...extraConfigSources,
+          ],
+      cwd,
+      defaults: inlineConfig,
+    })
 
-  return async() => {
     const result = await loader.load()
     result.config = result.config || inlineConfig
     if (result.config.configDeps) {
@@ -61,6 +61,7 @@ export function createConfigLoader<U extends UserConfig>(configOrPath: string |
         ...result.config.configDeps.map(i => resolve(cwd, i)),
       ]
     }
+
     return result
   }
 }

packages/core/src/types.ts

@@ -306,7 +306,7 @@ export interface ConfigBase<Theme extends {} = {}> {
   extendTheme?: Arrayable<ThemeExtender<Theme>>
 
   /**
-   * Addtional options for auto complete
+   * Additional options for auto complete
    */
   autocomplete?: {
     /**
@@ -440,6 +440,9 @@ export interface UnocssPluginContext<Config extends UserConfig = UserConfig> {
 
   invalidate: () => void
   onInvalidate: (fn: () => void) => void
+
+  root: string
+  updateRoot: (root: string) => Promise<LoadConfigResult<Config>>
 }
 
 export interface SourceMap {

packages/plugins-common/context.ts

@@ -12,7 +12,8 @@ export function createContext<Config extends UserConfig = UserConfig>(
   extraConfigSources: LoadConfigSource[] = [],
   resolveConfigResult: (config: LoadConfigResult<Config>) => void = () => {},
 ): UnocssPluginContext<Config> {
-  const loadConfig = createConfigLoader(configOrPath, extraConfigSources)
+  let root = process.cwd()
+  const loadConfig = createConfigLoader(configOrPath || root, extraConfigSources)
 
   let rawConfig = {} as Config
   const uno = createGenerator(rawConfig, defaults)
@@ -23,10 +24,10 @@ export function createContext<Config extends UserConfig = UserConfig>(
   const modules = new BetterMap<string, string>()
   const tokens = new Set<string>()
 
-  const ready = reloadConfig()
+  let ready = reloadConfig()
 
   async function reloadConfig() {
-    const result = await loadConfig()
+    const result = await loadConfig(configOrPath || root)
     resolveConfigResult(result)
 
     rawConfig = result.config
@@ -43,6 +44,14 @@ export function createContext<Config extends UserConfig = UserConfig>(
     return result
   }
 
+  async function updateRoot(newRoot: string) {
+    if (newRoot !== root) {
+      root = newRoot
+      ready = reloadConfig()
+    }
+    return await ready
+  }
+
   function invalidate() {
     invalidations.forEach(cb => cb())
   }
@@ -66,7 +75,9 @@ export function createContext<Config extends UserConfig = UserConfig>(
   }
 
   return {
-    ready,
+    get ready() {
+      return ready
+    },
     tokens,
     modules,
     invalidate,
@@ -78,5 +89,7 @@ export function createContext<Config extends UserConfig = UserConfig>(
     uno,
     extract,
     getConfig,
+    root,
+    updateRoot,
   }
 }

packages/vite/src/config-hmr.ts

@@ -5,8 +5,8 @@ export function ConfigHMRPlugin(ctx: UnocssPluginContext): Plugin | undefined {
   const { ready, uno } = ctx
   return {
     name: 'unocss:config',
-    async configResolved() {
-      await ready
+    async configResolved(config) {
+      await ctx.updateRoot(config.root)
     },
     async configureServer(server) {
       uno.config.envMode = 'dev'

packages/vite/src/index.ts

@@ -33,9 +33,9 @@ export default function UnocssPlugin(
   const mode = inlineConfig.mode ?? 'global'
 
   const plugins = [
+    ConfigHMRPlugin(ctx),
     ...initTransformerPlugins(ctx),
     ...createDevtoolsPlugin(ctx),
-    ConfigHMRPlugin(ctx),
   ]
 
   if (inlineConfig.inspector !== false)

playground/src/auto-imports.d.ts

@@ -13,6 +13,7 @@ declare global {
   const createApp: typeof import('vue')['createApp']
   const createEventHook: typeof import('@vueuse/core')['createEventHook']
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
@@ -85,6 +86,7 @@ declare global {
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
   const triggerRef: typeof import('vue')['triggerRef']
+  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
   const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
   const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']

playground/src/components.d.ts

@@ -1,8 +1,9 @@
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/vue-next/pull/3399
+import '@vue/runtime-core'
 
-declare module 'vue' {
+declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     CodeMirror: typeof import('./../../packages/inspector/client/components/CodeMirror.vue')['default']
     Editor: typeof import('./components/Editor.vue')['default']
@@ -15,10 +16,12 @@ declare module 'vue' {
     Playground: typeof import('./components/Playground.vue')['default']
     Preview: typeof import('./components/Preview.vue')['default']
     ReplPlayground: typeof import('./../../packages/inspector/client/components/ReplPlayground.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
     Sidebar: typeof import('./../../packages/inspector/client/components/Sidebar.vue')['default']
     StatusBar: typeof import('./../../packages/inspector/client/components/StatusBar.vue')['default']
     TitleBar: typeof import('./../../packages/inspector/client/components/TitleBar.vue')['default']
   }
 }
 
-export { }
+export {}