perf: only load vue-data-ui css in components that use it

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

Author: danielroe

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;
 }

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 {

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;

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: '',