feat(vscode): If uno.root is not set, auto-detection

packages/core/src/config.ts

@@ -218,7 +218,7 @@ function mergeAutocompleteShorthands(shorthands: Record<string, string | string[
 }
 
 export function definePreset<Options extends object | undefined = undefined, Theme extends object = object>(preset: PresetFactory<Theme, Options>): PresetFactory<Theme, Options>
-export function definePreset<Theme extends object = object>(preset: Preset<Theme>): Preset<Theme> 
+export function definePreset<Theme extends object = object>(preset: Preset<Theme>): Preset<Theme>
 export function definePreset(preset: any) {
   return preset
 }

packages/inspector/client/auto-imports.d.ts

@@ -284,5 +284,5 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
 }

packages/rule-utils/src/utilities.ts

@@ -34,7 +34,6 @@ export function getBracket(str: string, open: string, close: string) {
   }
 }
 
-
 export function getStringComponent(str: string, open: string, close: string, separators: string | string[]) {
   if (str === '')
     return

packages/vscode/package.json

@@ -1,6 +1,6 @@
 {
   "publisher": "antfu",
-  "name": "@unocss/vscode",
+  "name": "unocss",
   "displayName": "UnoCSS",
   "version": "0.56.0",
   "private": true,
@@ -108,6 +108,7 @@
     "@unocss/nuxt": "workspace:*",
     "@unocss/preset-uno": "workspace:*",
     "esno": "^0.17.0",
+    "find-up": "^6.3.0",
     "jiti": "^1.20.0",
     "prettier": "^2.8.8",
     "tsup": "^7.2.0",

packages/vscode/src/index.ts

@@ -1,6 +1,9 @@
 import path from 'path'
+import { watch } from 'fs'
 import type { ExtensionContext, StatusBarItem } from 'vscode'
 import { StatusBarAlignment, commands, window, workspace } from 'vscode'
+import { findUp } from 'find-up'
+import { createFilter } from '@rollup/pluginutils'
 import { version } from '../package.json'
 import { log } from './log'
 import { registerAnnotations } from './annotation'
@@ -11,7 +14,6 @@ import { isFulfilled, isRejected } from './utils'
 
 async function registerRoot(ext: ExtensionContext, status: StatusBarItem, cwd: string) {
   const contextLoader = new ContextLoader(cwd)
-
   await contextLoader.ready
 
   const hasConfig = await contextLoader.loadContextInDirectory(cwd)
@@ -44,10 +46,11 @@ export async function activate(ext: ExtensionContext) {
   status.text = 'UnoCSS'
 
   const root = config.get<string | string[]>('root')
+  const exclude = config.get<string | string[]>('exclude')
+  const include = config.get<string | string[]>('include')
 
   if (Array.isArray(root) && root.length) {
     const cwds = root.map(dir => path.resolve(projectPath, dir))
-
     const contextLoadersResult = await Promise.allSettled(
       cwds.map(cwd => registerRoot(ext, status, cwd)),
     )
@@ -70,29 +73,74 @@ export async function activate(ext: ExtensionContext) {
     }
     return
   }
-
   // now if the root is an array, then it is an empty array
-  const cwd = (root && !Array.isArray(root))
-    ? path.resolve(projectPath, root)
-    : projectPath
 
-  const contextLoader = await registerRoot(ext, status, cwd)
-  ext.subscriptions.push(
-    commands.registerCommand('unocss.reload', async () => {
-      log.appendLine('🔁 Reloading...')
-      if (contextLoader.contextsMap.get(cwd) === null) {
-        contextLoader.contextsMap.delete(cwd)
-        const hasConfig = await contextLoader.loadContextInDirectory(cwd)
-        if (hasConfig) {
-          registerAutoComplete(cwd, contextLoader, ext)
-          registerAnnotations(cwd, contextLoader, status, ext)
-          registerSelectionStyle(cwd, contextLoader)
+  const cacheMap = new Set()
+  const contextCache = new Map()
+  const watchConfigMap = ['uno.config.js', 'uno.config.ts', 'unocss.config.js', 'unocss.config.ts']
+  const useWatcherUnoConfig = (filepath: string) => {
+    const watcher = watch(filepath, 'utf-8', async (type, filename) => {
+      if (type === 'change') {
+        contextCache.get(filepath)()
+      }
+      else if (type === 'rename') {
+        watcher.close()
+        if (filename && watchConfigMap.includes(filename)) {
+          const originContextReload = contextCache.get(filepath)
+          contextCache.delete(filepath)
+          const newConfigUrl = path.resolve(path.dirname(filepath), filename)
+          contextCache.set(newConfigUrl, originContextReload)
+          useWatcherUnoConfig(newConfigUrl)
         }
       }
-      contextLoader.reload()
+    })
+  }
+
+  const registerUnocss = async () => {
+    const url = window.activeTextEditor?.document.uri.fsPath
+    if (!url)
+      return
+
+    if (cacheMap.has(url))
+      return
+
+    const defaultExclude = exclude && exclude.length ? exclude : /[\/](node_modules|dist|\.temp|\.cache|\.vscode)[\/]/
+    const defaultInclude = include && include.length ? include : /.*\.(ts|js|tsx|jsx|solid|svelte|vue|html)$/
+
+    const filter = createFilter(defaultInclude, defaultExclude)
+    if (!filter(url))
+      return
+
+    const target = await findUp(watchConfigMap, { cwd: url })
+
+    if (!target || cacheMap.has(target))
+      return
+
+    cacheMap.add(url)
+    cacheMap.add(target)
+    const cwd = path.dirname(target)
+
+    const contextLoader = await registerRoot(ext, status, cwd)
+    const reload = async () => {
+      log.appendLine('🔁 Reloading...')
+      await contextLoader.reload()
       log.appendLine('✅ Reloaded.')
-    }),
-  )
+    }
+    contextCache.set(url, () => reload())
+    useWatcherUnoConfig(url)
+    ext.subscriptions.push(
+      commands.registerCommand('unocss.reload', reload),
+    )
+  }
+
+  try {
+    await registerUnocss()
+    if (!root || !root.length)
+      ext.subscriptions.push(window.onDidChangeActiveTextEditor(registerUnocss))
+  }
+  catch (e: any) {
+    log.appendLine(String(e.stack ?? e))
+  }
 }
 
-export function deactivate() {}
+export function deactivate() { }

test/assets/variant-group.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 const a = 1
 const b = 2
-// eslint-disable-next-line @stylistic/ts/space-infix-ops
-const _c = a-(b -a -b)
+ 
+const _c = a - (b - a - b)
 </script>
 
 <template>

test/transformer-variant-group.test.ts

@@ -51,8 +51,8 @@ describe('transformer-variant-group', () => {
       "<script setup lang=\\"ts\\">
       const a = 1
       const b = 2
-      // eslint-disable-next-line @stylistic/ts/space-infix-ops
-      const _c = a-(b -a -b)
+       
+      const _c = a - (b - a - b)
       </script>
 
       <template>