perf: optimize css chunks

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()

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'
@@ -18,6 +17,10 @@ import type {
 } from '~/types/chart'
 import { DATE_INPUT_MAX } from '~/utils/input'
 
+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

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

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

knip.ts

@@ -51,6 +51,10 @@ const config: KnipConfig = {
         '@e18e/eslint-plugin',
         'eslint-plugin-regexp',
 
+        /** Virtual Modules */
+        'uno.css',
+        'uno',
+
         /** Used in test/e2e/helpers/ which is excluded from knip project scope */
         'h3-next',
       ],

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: '',
@@ -49,6 +49,10 @@ export default defineNuxtConfig({
     },
   },
 
+  unocss: {
+    autoImport: false,
+  },
+
   devtools: { enabled: true },
 
   devServer: {

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 w-[1.2em]! h-[1.2em]!')
+      }
+    },
+  }
+}

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,
@@ -35,7 +35,12 @@ export default defineConfig({
     // keep this preset last
     ...(process.env.CI ? [] : [presetRtl(), presetA11y()]),
   ].filter(Boolean),
-  transformers: [transformerDirectives(), transformerVariantGroup()],
+  content: {
+    pipeline: {
+      exclude: [/\.(css|postcss|sass|scss|less|stylus|styl)($|\?)/, /[/\\]node_modules[/\\]/],
+    },
+  },
+  transformers: [transformerDirectives(), transformerVariantGroup(), transformerIconInlineBlock()],
   theme: {
     spacing: { DEFAULT: '4px' },
     font: {

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,
+                },
               },
             },
           },