Merge branch 'main' into fix/vscode-highlighting

examples/vue-cli5/src/main.js

@@ -1,6 +1,8 @@
-import { createApp } from 'vue'
+import Vue from 'vue'
 import App from './App.vue'
 import '@unocss/reset/tailwind.css'
 import 'uno.css'
 
-createApp(App).mount('#app')
+new Vue({
+  render: h => h(App),
+}).$mount('#app')

interactive/components/ColorsTable.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { uno } from '~/composables/state'
+import { searcher } from '~/composables/state'
 
-const colors = (uno.config.theme as any).colors || {}
+const colors = await searcher.getThemeColors()
 </script>
 
 <template>

interactive/components/Search.vue

@@ -87,11 +87,11 @@ function clear() {
   nextTick().then(() => inputEl?.focus())
 }
 
-function openItem(item: ResultItem) {
+async function openItem(item: ResultItem) {
   if (isMobile.value && !isModalOpen.value)
     isModalOpen.value = true
   else
-    input.value = searcher.getItemId(item)
+    input.value = await searcher.getItemId(item)
 }
 
 function selectItem(item: ResultItem) {

interactive/components/Summary.vue

@@ -2,37 +2,39 @@
 import { searcher } from '~/composables/state'
 
 const isDefault = $computed(() => (userConfigRaw.value || defaultConfigRaw) === defaultConfigRaw)
+
+const info = await searcher.getInfo()
 </script>
 
 <template>
   <div h-full items-center justify-center gap6>
     <div grid="~ cols-[max-content_1fr]" w-auto text-left gap2 op80>
       <div font-bold text-right>
-        {{ searcher.uno.config.presets.length }}
+        {{ info.presetsCount }}
       </div>
       <div op50>
         Presets
       </div>
       <div font-bold text-right>
-        {{ searcher.uno.config.rulesSize }}
+        {{ info.rulesCount }}
       </div>
       <div op50>
         Rules
       </div>
       <div font-bold text-right>
-        {{ searcher.uno.config.shortcuts.length }}
+        {{ info.shortcutsCount }}
       </div>
       <div op50>
         Shortcuts
       </div>
       <div font-bold text-right>
-        {{ searcher.uno.config.variants.length }}
+        {{ info.variantsCount }}
       </div>
       <div op50>
         Variants
       </div>
       <div font-bold text-right>
-        {{ searcher.getSearchCount() }}
+        {{ info.searchCount }}
       </div>
       <div op50>
         Search entries

interactive/components/TheNav.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { currentTab, isCompact, toggleCompact, uno } from '~/composables/state'
+import { currentTab, isCompact, toggleCompact } from '~/composables/state'
+
+const tab = currentTab
+const info = await searcher.getInfo()
 </script>
 
 <template>
@@ -15,7 +18,7 @@ import { currentTab, isCompact, toggleCompact, uno } from '~/composables/state'
       </h1>
     </RouterLink>
     <div text-xs op-30 ml-2 self-end leading-12px>
-      v{{ uno.version }}
+      v{{ info.version }}
     </div>
     <div flex-auto />
     <div row gap4 text="lg gray4" items-center>
@@ -29,14 +32,14 @@ import { currentTab, isCompact, toggleCompact, uno } from '~/composables/state'
         <button
           class="i-carbon-settings"
           title="Config"
-          @click="currentTab = 'config'"
+          @click="tab = 'config'"
         />
       </template>
       <template v-else>
         <button
           class="i-carbon-close"
           title="Cancel config changes"
-          @click="currentTab = 'search'"
+          @click="tab = 'search'"
         />
       </template>
 

interactive/components/details/Rule.vue

@@ -37,6 +37,7 @@ const variantSteps = $computed(() => {
   return steps
 })
 const imageUrls = $computed(() => {
+  // @ts-expect-error cast
   return item.urls?.filter(i => i.startsWith('data:image') || i.match(/\.(png|jpg|jpeg|svg)$/ig))
 })
 

interactive/composables/state.ts

@@ -14,7 +14,7 @@ export { defaultConfigRaw }
 export const isCompact = useLocalStorage('uno-interact-compact', false)
 export const toggleCompact = useToggle(isCompact)
 
-export const uno = createGenerator({}, defaultConfig)
+const uno = createGenerator({}, defaultConfig)
 export const searcher = createSearch({ uno, docs, guides })
 
 const initParams = new URLSearchParams(location.search)

interactive/nuxt.config.ts

@@ -12,6 +12,7 @@ export default defineNuxtConfig({
   alias,
   modules: [
     '@vueuse/nuxt',
+    '@nuxt/devtools',
     '~/../packages/nuxt/src/index.ts',
     '~/modules/markdown',
   ],

interactive/package.json

@@ -10,6 +10,7 @@
   },
   "devDependencies": {
     "@antfu/utils": "^0.7.2",
+    "@nuxt/devtools": "^0.2.5",
     "@unocss/autocomplete": "workspace:*",
     "@unocss/nuxt": "workspace:*",
     "@unocss/shared-docs": "workspace:*",

package.json

@@ -6,14 +6,16 @@
   "packageManager": "pnpm@7.11.0",
   "scripts": {
     "postinstall": "esno scripts/icon-collections.ts",
+    "taze": "pnpx taze minor -rw && pnpm i && pnpm -r --parallel run update-post",
     "bench": "npm -C bench run bench",
     "build": "rimraf packages/*/dist && esno scripts/copy-files.ts && pnpm -r --filter=./packages/* run build && pnpm -r run build-post",
     "dev": "nr stub",
     "deploy": "nr build && npm -C playground run build && npm -C interactive run build",
     "interactive": "npm -C interactive run dev",
+    "inspector": "npm -C packages/inspector run dev",
+    "play": "npm -C playground run dev",
     "lint": "eslint --cache .",
     "lint:fix": "nr lint --fix",
-    "play": "npm -C playground run dev",
     "release": "bumpp -r",
     "size": "esno scripts/size.ts",
     "stub": "pnpm -r --filter=./packages/* --parallel run stub",

packages/cli/src/index.ts

@@ -1,5 +1,5 @@
 import { existsSync, promises as fs } from 'fs'
-import { basename, dirname, relative, resolve } from 'pathe'
+import { basename, dirname, normalize, relative, resolve } from 'pathe'
 import fg from 'fast-glob'
 import consola from 'consola'
 import { cyan, dim, green } from 'colorette'
@@ -33,7 +33,7 @@ export async function build(_options: CliOptions) {
 
   async function loadConfig() {
     const ctx = createContext<UserConfig>(options.config, defaultConfig)
-    const configSources = (await ctx.updateRoot(cwd)).sources
+    const configSources = (await ctx.updateRoot(cwd)).sources.map(i => normalize(i))
     return { ctx, configSources }
   }
 

packages/inspector/client/components.d.ts

@@ -9,6 +9,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    A: typeof import('./components/foo/bar/tt.vue/a.vue')['default']
     CodeMirror: typeof import('./components/CodeMirror.vue')['default']
     FileIcon: typeof import('./components/FileIcon.vue')['default']
     ModuleId: typeof import('./components/ModuleId.vue')['default']

packages/inspector/client/components/FileIcon.vue

@@ -1,11 +1,31 @@
 <script setup lang="ts">
 const props = defineProps<{ id: string }>()
 
-const ext = computed(() => props.id.split(/\./g).pop())
-const icon = computed(() => {
+const ext = computed(() => props.id.toLowerCase().replace(/\?.*$/, '').split(/\./g).pop())
+const icon = computed((): string => {
   switch (ext.value) {
     case 'vue':
-      return 'i-logos-vue'
+      return 'i-vscode-icons-file-type-vue'
+    case 'html':
+    case 'htm':
+      return 'i-vscode-icons-file-type-html'
+    case 'svelte':
+      return 'i-vscode-icons-file-type-svelte'
+    case 'ts':
+    case 'mts':
+    case 'tsx':
+    case 'cts':
+      return 'i-vscode-icons-file-type-typescript-official'
+    case 'js':
+    case 'jsx':
+    case 'mjs':
+    case 'cjs':
+      return 'i-vscode-icons-file-type-js-official'
+    case 'json':
+      return 'i-vscode-icons-file-type-json-official'
+    case 'md':
+    case 'markdown':
+      return 'i-vscode-icons-file-type-markdown'
     default:
       return 'i-carbon-document-blank'
   }

packages/inspector/client/components/ModuleTreeNode.vue

@@ -24,7 +24,7 @@ const route = useRoute()
       {{ node.name }}
     </summary>
 
-    <ModuleTreeNode v-for="e of Object.entries(node.children)" :key="e[0]" ml2 :node="e[1]" />
+    <ModuleTreeNode v-for="e of Object.entries(node.children)" :key="e[0]" ml4 :node="e[1]" />
     <div
       v-for="i of node.items"
       :key="i.full"
@@ -35,6 +35,7 @@ const route = useRoute()
         block
         text-sm
         p="x2 y1"
+        ml1
         rounded
         :to="`/module/${encodeURIComponent(i.full)}`"
         :class="{ 'bg-gray/10': i.full === route.params.id }"

packages/inspector/client/components/Sidebar.vue

@@ -38,6 +38,12 @@ import { moduleTree } from '../composables/fetch'
         p="l3 t4"
         icon="i-carbon-vmdk-disk"
       />
+      <ModuleTreeNode
+        v-if="Object.keys(moduleTree.nodeModules.children).length"
+        :node="moduleTree.nodeModules"
+        p="l3 t4"
+        icon="i-carbon-categories"
+      />
     </div>
   </div>
 </template>

packages/inspector/client/components/TitleBar.vue

@@ -22,7 +22,7 @@ const emit = defineEmits<{
   >
     <div flex @click="e => emit('titleClick', e)">
       <slot name="before" />
-      <div mr-2 op-60>
+      <div mr-2 op-60 shrink-0>
         {{ title }}
       </div>
     </div>

packages/inspector/client/composables/fetch.ts

@@ -54,16 +54,28 @@ export const moduleTree = computed(() => {
     return {
       workspace: { children: {}, items: [] },
       root: { children: {}, items: [] },
+      nodeModules: { children: {}, items: [] },
     }
   }
 
-  const modules: ModuleDest[] = info.value.modules.map(i => ({ full: i, path: i }))
-  const inWorkspace = modules.filter(i => i.full.startsWith(info.value!.root))
-  const inRoot = modules.filter(i => !i.full.startsWith(info.value!.root))
+  const inWorkspace: ModuleDest[] = []
+  const inRoot: ModuleDest[] = []
+  const inNodeModules: ModuleDest[] = []
+  info.value
+    .modules.map(i => ({ full: i, path: i }))
+    .forEach((i) => {
+      if (i.full.includes('node_modules'))
+        inNodeModules.push(i)
+      else if (i.full.startsWith(info.value!.root))
+        inWorkspace.push(i)
+      else
+        inRoot.push(i)
+    })
   inWorkspace.forEach(i => i.path = i.path.slice(info.value!.root.length + 1))
 
   return {
     workspace: toTree(inWorkspace, 'Project Root'),
+    nodeModules: toTree(inNodeModules, 'Node Modules'),
     root: toTree(inRoot, 'Disk Root'),
   }
 })
@@ -72,6 +84,9 @@ function toTree(modules: ModuleDest[], name: string) {
   const node: TreeNode = { name, children: {}, items: [] }
 
   function add(mod: ModuleDest, parts: string[], current = node) {
+    if (!mod)
+      return
+
     if (parts.length <= 1) {
       current.items.push(mod)
       return
@@ -88,5 +103,22 @@ function toTree(modules: ModuleDest[], name: string) {
     add(m, parts)
   })
 
+  function flat(node: TreeNode) {
+    if (!node)
+      return
+    const children = Object.values(node.children)
+    if (children.length === 1 && !node.items.length) {
+      const child = children[0]
+      if (child) {
+        node.name = node.name ? `${node.name}/${child.name}` : child.name
+        node.items = child.items
+        node.children = child.children
+      }
+    }
+    children.forEach(flat)
+  }
+
+  Object.values(node.children).forEach(flat)
+
   return node
 }

packages/inspector/client/main.css

@@ -32,9 +32,15 @@ html:not(.dark) {
   opacity: 1;
 }
 
+.splitpanes--vertical > .splitpanes__splitter {
+  min-width: 0 !important;
+}
+.splitpanes--horizontal > .splitpanes__splitter {
+  min-height: 0 !important;
+}
+
 .splitpanes--vertical > .splitpanes__splitter:before {
-  /* fix vertical scrollbar */
-  /*left: -10px;*/
+  left: -10px;
   right: -10px;
   height: 100%;
 }

packages/inspector/package.json

@@ -37,8 +37,8 @@
     "build": "unbuild",
     "build-post": "vite build",
     "stub": "unbuild --stub",
-    "dev": "nr play",
-    "play": "nr stub && vite"
+    "dev": "nr stub && vite",
+    "update-post": "vite build"
   },
   "dependencies": {
     "gzip-size": "^6.0.0",

packages/inspector/tsconfig.json

@@ -7,7 +7,6 @@
     "moduleResolution": "node",
     "strict": true,
     "sourceMap": true,
-    "useDefineForClassFields": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "jsx": "preserve",

packages/nuxt/src/options.ts

@@ -5,6 +5,7 @@ import presetWebFonts from '@unocss/preset-web-fonts'
 import presetTypography from '@unocss/preset-typography'
 import presetTagify from '@unocss/preset-tagify'
 import presetWind from '@unocss/preset-wind'
+import { defaultExclude } from '../../shared-integration/src/defaults'
 import type { UnocssNuxtOptions } from './types'
 
 export function resolveOptions(options: UnocssNuxtOptions) {
@@ -25,4 +26,8 @@ export function resolveOptions(options: UnocssNuxtOptions) {
         options.presets.push(preset(typeof option === 'boolean' ? {} : option))
     }
   }
+  options.exclude = options.exclude || defaultExclude
+  // ignore macro files created by Nuxt
+  if (Array.isArray(options.exclude))
+    options.exclude.push(/\?macro=true/)
 }

packages/postcss/src/apply.ts

@@ -7,7 +7,7 @@ import { expandVariantGroup, notNull, regexScopePlaceholder } from '@unocss/core
 
 type Writeable<T> = { -readonly [P in keyof T]: T[P] }
 
-export function parseApply(root: Root, uno: UnoGenerator, directiveName: string) {
+export async function parseApply(root: Root, uno: UnoGenerator, directiveName: string) {
   // @ts-expect-error types doesn't allow async callback but it seems work
   root.walkAtRules(directiveName, async (rule) => {
     if (!rule.parent)