From aea4196980c6a9664b66f1d5956c573551e8daf3 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 4 Mar 2026 11:40:51 +0000
Subject: [PATCH 1/2] perf: only load vue-data-ui css in components that use it

Co-authored-by: Anthony Fu <github@antfu.me>
---
 app/components/Package/TrendsChart.vue         | 2 ++
 app/components/Package/VersionDistribution.vue | 2 ++
 app/components/Package/WeeklyDownloadStats.vue | 2 ++
 nuxt.config.ts                                 | 2 +-
 4 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index d8391b4ebb..a163dc845d 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -2181,6 +2181,8 @@ watch(selectedMetric, value => {
 </template>
 
 <style>
+@import 'vue-data-ui/style.css';
+
 .vue-ui-pen-and-paper-actions {
   background: var(--bg-elevated) !important;
 }
diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index 7e41968694..ea8eee3823 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/app/components/Package/VersionDistribution.vue
@@ -672,6 +672,8 @@ const chartConfig = computed<VueUiXyConfig>(() => {
 </style>
 
 <style>
+@import 'vue-data-ui/style.css';
+
 /* Override default placement of the refresh button to have it to the minimap's side */
 @media screen and (min-width: 767px) {
   #version-distribution .vue-data-ui-refresh-button {
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 74f3daa90b..6229361b25 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -498,6 +498,8 @@ const config = computed<VueUiSparklineConfig>(() => {
 </style>
 
 <style>
+@import 'vue-data-ui/style.css';
+
 /** Overrides */
 .vue-ui-sparkline-title span {
   padding: 0 !important;
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7191bb477e..3a4c167ece 100644
--- a/nuxt.config.ts
+++ b/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: '',

From 186d92aa160c9055a9ff70536df817372045b2d0 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 4 Mar 2026 12:00:37 +0000
Subject: [PATCH 2/2] refactor: use js chunk for css

---
 app/components/Package/TrendsChart.vue         | 4 ++--
 app/components/Package/VersionDistribution.vue | 4 ++--
 app/components/Package/WeeklyDownloadStats.vue | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index a163dc845d..663596da04 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/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
@@ -2181,8 +2183,6 @@ watch(selectedMetric, value => {
 </template>
 
 <style>
-@import 'vue-data-ui/style.css';
-
 .vue-ui-pen-and-paper-actions {
   background: var(--bg-elevated) !important;
 }
diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index ea8eee3823..670b47bdf2 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/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
@@ -672,8 +674,6 @@ const chartConfig = computed<VueUiXyConfig>(() => {
 </style>
 
 <style>
-@import 'vue-data-ui/style.css';
-
 /* Override default placement of the refresh button to have it to the minimap's side */
 @media screen and (min-width: 767px) {
   #version-distribution .vue-data-ui-refresh-button {
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 6229361b25..7f03a8c1d8 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/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
@@ -498,8 +500,6 @@ const config = computed<VueUiSparklineConfig>(() => {
 </style>
 
 <style>
-@import 'vue-data-ui/style.css';
-
 /** Overrides */
 .vue-ui-sparkline-title span {
   padding: 0 !important;