refactor: use js chunk for css

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

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 {

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;