perf: only load vue-data-ui css in components that use it (#1918)

Co-authored-by: Anthony Fu <github@antfu.me>

Author: danielroe

app/components/Package/TrendsChart.vue

@@ -22,6 +22,8 @@ import { applyDataCorrection } from '~/utils/chart-data-correction'
 import { applyBlocklistCorrection, getAnomaliesForPackages } from '~/utils/download-anomalies'
 import { copyAltTextForTrendLineChart } from '~/utils/charts'
 
+import('vue-data-ui/style.css')
+
 const props = withDefaults(
   defineProps<{
     // For single package downloads history

app/components/Package/VersionDistribution.vue

@@ -11,6 +11,8 @@ import {
 import TooltipApp from '~/components/Tooltip/App.vue'
 import { copyAltTextForVersionsBarChart } from '~/utils/charts'
 
+import('vue-data-ui/style.css')
+
 const props = defineProps<{
   packageName: string
   inModal?: boolean

app/components/Package/WeeklyDownloadStats.vue

@@ -9,6 +9,8 @@ import type { RepoRef } from '#shared/utils/git-providers'
 import type { VueUiSparklineConfig, VueUiSparklineDatasetItem } from 'vue-data-ui'
 import { onKeyDown } from '@vueuse/core'
 
+import('vue-data-ui/style.css')
+
 const props = defineProps<{
   packageName: string
   createdIso: string | null

nuxt.config.ts

@@ -31,7 +31,7 @@ export default defineNuxtConfig({
     storageKey: 'npmx-color-mode',
   },
 
-  css: ['~/assets/main.css', 'vue-data-ui/style.css'],
+  css: ['~/assets/main.css'],
 
   runtimeConfig: {
     sessionPassword: '',