From 01c3557a397f5c05d17bf724c07a6ff3bf6381da Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Wed, 11 Feb 2026 17:39:48 +0900
Subject: [PATCH 1/7] chore: try

---
 app/app.vue    | 3 +++
 nuxt.config.ts | 4 ++++
 uno.config.ts  | 5 +++++
 3 files changed, 12 insertions(+)

diff --git a/app/app.vue b/app/app.vue
index 2b0a58740..4547b13cb 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -3,6 +3,9 @@ import type { Directions } from '@nuxtjs/i18n'
 import { useEventListener, onKeyDown, onKeyUp } from '@vueuse/core'
 import { isEditableElement } from '~/utils/input'
 
+import 'uno.css'
+import('uno:icons.css') // make icon css a separate, async chunk
+
 const route = useRoute()
 const router = useRouter()
 const { locale, locales } = useI18n()
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 5965c351e..e64c2f5bf 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -49,6 +49,10 @@ export default defineNuxtConfig({
     },
   },
 
+  unocss: {
+    autoImport: false,
+  },
+
   devtools: { enabled: true },
 
   devServer: {
diff --git a/uno.config.ts b/uno.config.ts
index b75446763..7a3513622 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -35,6 +35,11 @@ export default defineConfig({
     // keep this preset last
     ...(process.env.CI ? [] : [presetRtl(), presetA11y()]),
   ].filter(Boolean),
+  content: {
+    pipeline: {
+      exclude: [/\.(css|postcss|sass|scss|less|stylus|styl)($|\?)/, /[/\\]node_modules[/\\]/],
+    },
+  },
   transformers: [transformerDirectives(), transformerVariantGroup()],
   theme: {
     spacing: { DEFAULT: '4px' },

From 040b0c6dec18aa63ca76ed1acc90f27f555dc8bb Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Wed, 11 Feb 2026 18:11:03 +0900
Subject: [PATCH 2/7] chore: try

---
 app/components/Package/TrendsChart.vue         | 5 ++++-
 app/components/Package/VersionDistribution.vue | 5 ++++-
 app/components/Package/WeeklyDownloadStats.vue | 7 ++++++-
 nuxt.config.ts                                 | 2 +-
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index a62c7ccf2..4a9cb1df7 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { VueUiXyDatasetItem } from 'vue-data-ui'
-import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
 import { useDebounceFn, useElementSize } from '@vueuse/core'
 import { useCssVariables } from '~/composables/useColors'
 import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch } from '~/utils/colors'
@@ -17,6 +16,10 @@ import type {
   YearlyDataPoint,
 } from '~/types/chart'
 
+import('vue-data-ui/style.css')
+
+const VueUiXy = defineAsyncComponent(() => import('vue-data-ui/vue-ui-xy').then(m => m.VueUiXy))
+
 const props = withDefaults(
   defineProps<{
     // For single package downloads history
diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index f151f8471..308b25ae6 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/app/components/Package/VersionDistribution.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
 import type {
   VueUiXyDatasetItem,
   VueUiXyDatasetBarItem,
@@ -19,6 +18,10 @@ type TooltipParams = MinimalCustomFormatParams<VueUiXyDatapointItem[]> & {
   bars: VueUiXyDatasetBarItem[]
 }
 
+import('vue-data-ui/style.css')
+
+const VueUiXy = defineAsyncComponent(() => import('vue-data-ui/vue-ui-xy').then(m => m.VueUiXy))
+
 const props = defineProps<{
   packageName: string
   inModal?: boolean
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index dfe7da4f6..76e638edd 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
-import { VueUiSparkline } from 'vue-data-ui/vue-ui-sparkline'
 import { useCssVariables } from '~/composables/useColors'
 import type { WeeklyDataPoint } from '~/types/chart'
 import { OKLCH_NEUTRAL_FALLBACK, lightenOklch } from '~/utils/colors'
 
+import('vue-data-ui/style.css')
+
+const VueUiSparkline = defineAsyncComponent(() =>
+  import('vue-data-ui/vue-ui-sparkline').then(m => m.VueUiSparkline),
+)
+
 const props = defineProps<{
   packageName: string
   createdIso: string | null
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e64c2f5bf..11b3d5db3 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -30,7 +30,7 @@ export default defineNuxtConfig({
     storageKey: 'npmx-color-mode',
   },
 
-  css: ['~/assets/main.css', 'vue-data-ui/style.css'],
+  css: ['~/assets/main.css'],
 
   runtimeConfig: {
     sessionPassword: '',

From 2a23d20fefa9453b6fbde3e297883d0f3458b50a Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Wed, 11 Feb 2026 18:26:08 +0900
Subject: [PATCH 3/7] chore: update knip

---
 knip.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/knip.ts b/knip.ts
index e0a3199b3..d6851231f 100644
--- a/knip.ts
+++ b/knip.ts
@@ -44,6 +44,10 @@ const config: KnipConfig = {
         /** Oxlint plugins don't get picked up yet */
         '@e18e/eslint-plugin',
         'eslint-plugin-regexp',
+
+        /** Virtual Modules */
+        'uno.css',
+        'uno',
       ],
       ignoreUnresolved: ['#components', '#oauth/config'],
     },

From 4743856de44e7637d5666694590f3a45de94d267 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 11 Feb 2026 20:28:16 +0000
Subject: [PATCH 4/7] fix: add inline-block for icon classes, with transformer

---
 uno-transformer-icon-inline-block.ts | 27 +++++++++++++++++++++++++++
 uno.config.ts                        |  4 ++--
 2 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 uno-transformer-icon-inline-block.ts

diff --git a/uno-transformer-icon-inline-block.ts b/uno-transformer-icon-inline-block.ts
new file mode 100644
index 000000000..4ee985769
--- /dev/null
+++ b/uno-transformer-icon-inline-block.ts
@@ -0,0 +1,27 @@
+import type { SourceCodeTransformer } from 'unocss'
+
+/**
+ * Transformer that automatically adds `inline-block` next to any icon class
+ * (`i-*`) in the source code, so the class appears in the rendered HTML.
+ */
+export function transformerIconInlineBlock(): SourceCodeTransformer {
+  return {
+    name: 'icon-inline-block',
+    enforce: 'pre',
+    transform(s) {
+      const code = s.original
+      // Match icon classes like i-lucide-star, i-mdi-home, i-custom-vlt etc.
+      const iconClassRe = /\bi-[\w:-]+/g
+      let match: RegExpExecArray | null
+
+      while ((match = iconClassRe.exec(code)) !== null) {
+        const end = match.index + match[0].length
+        // Skip if `inline-block` already follows (with optional whitespace)
+        if (/^\s+inline-block\b/.test(code.slice(end))) {
+          continue
+        }
+        s.appendRight(end, ' inline-block')
+      }
+    },
+  }
+}
diff --git a/uno.config.ts b/uno.config.ts
index 7a3513622..afafb13d6 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -8,6 +8,7 @@ import {
 import type { Theme } from '@unocss/preset-wind4/theme'
 import { presetRtl } from './uno-preset-rtl'
 import { presetA11y } from './uno-preset-a11y'
+import { transformerIconInlineBlock } from './uno-transformer-icon-inline-block'
 
 const customIcons = {
   'agent-skills':
@@ -23,7 +24,6 @@ export default defineConfig({
     presetWind4(),
     presetIcons({
       extraProperties: {
-        'display': 'inline-block',
         'forced-color-adjust': 'preserve-parent-color',
       },
       warn: true,
@@ -40,7 +40,7 @@ export default defineConfig({
       exclude: [/\.(css|postcss|sass|scss|less|stylus|styl)($|\?)/, /[/\\]node_modules[/\\]/],
     },
   },
-  transformers: [transformerDirectives(), transformerVariantGroup()],
+  transformers: [transformerDirectives(), transformerVariantGroup(), transformerIconInlineBlock()],
   theme: {
     spacing: { DEFAULT: '4px' },
     font: {

From 9fc9b0b0849f9cbee01c7c0a65d099b6d7b479a8 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 11 Feb 2026 20:33:27 +0000
Subject: [PATCH 5/7] fix: also add w/h

---
 uno-transformer-icon-inline-block.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/uno-transformer-icon-inline-block.ts b/uno-transformer-icon-inline-block.ts
index 4ee985769..555728fd1 100644
--- a/uno-transformer-icon-inline-block.ts
+++ b/uno-transformer-icon-inline-block.ts
@@ -20,7 +20,7 @@ export function transformerIconInlineBlock(): SourceCodeTransformer {
         if (/^\s+inline-block\b/.test(code.slice(end))) {
           continue
         }
-        s.appendRight(end, ' inline-block')
+        s.appendRight(end, ' inline-block w-[1.2em] h-[1.2em]')
       }
     },
   }

From 78808f0498043b6b85913d02dc7b32b247434c9d Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 11 Feb 2026 20:45:24 +0000
Subject: [PATCH 6/7] fix: importance

---
 uno-transformer-icon-inline-block.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/uno-transformer-icon-inline-block.ts b/uno-transformer-icon-inline-block.ts
index 555728fd1..668eb989b 100644
--- a/uno-transformer-icon-inline-block.ts
+++ b/uno-transformer-icon-inline-block.ts
@@ -20,7 +20,7 @@ export function transformerIconInlineBlock(): SourceCodeTransformer {
         if (/^\s+inline-block\b/.test(code.slice(end))) {
           continue
         }
-        s.appendRight(end, ' inline-block w-[1.2em] h-[1.2em]')
+        s.appendRight(end, ' inline-block w-[1.2em]! h-[1.2em]!')
       }
     },
   }

From 5e7c7c4c58f037062f7a876076a477dcb8269397 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 11 Feb 2026 20:53:23 +0000
Subject: [PATCH 7/7] test: reenable auto import in browser tests

---
 vitest.config.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/vitest.config.ts b/vitest.config.ts
index 9b96a1dbe..4bf31c962 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -40,6 +40,11 @@ export default defineConfig({
                   pwaAssets: { disabled: true },
                 },
                 ogImage: { enabled: false },
+                unocss: {
+                  // app.vue (which imports 'uno.css') is stubbed out by
+                  // @nuxt/test-utils, leaving utility classes missing.
+                  autoImport: true,
+                },
               },
             },
           },