chore: vite-plugin-webfont-dl

package.json

@@ -34,6 +34,7 @@
     "ts-enum-util": "^4.1.0",
     "utils4u": "^2.3.0",
     "vant": "^4.9.4",
+    "vite-plugin-webfont-dl": "^3.9.5",
     "vue": "^3.4.38",
     "vue-page-stack": "^3.2.0",
     "vue-router": "^4.4.3"

pnpm-lock.yaml

@@ -67,6 +67,9 @@ importers:
       vant:
         specifier: ^4.9.4
         version: 4.9.4(vue@3.4.38(typescript@5.5.4))
+      vite-plugin-webfont-dl:
+        specifier: ^3.9.5
+        version: 3.9.5(vite@5.4.2(@types/node@22.5.0)(less@4.2.0))
       vue:
         specifier: ^3.4.38
         version: 3.4.38(typescript@5.5.4)
@@ -1547,6 +1550,10 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==, tarball: https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz}
     engines: {node: '>= 8.10.0'}
 
+  clean-css@5.3.3:
+    resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==, tarball: https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz}
+    engines: {node: '>= 10.0'}
+
   cli-cursor@5.0.0:
     resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==, tarball: https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz}
     engines: {node: '>=18'}
@@ -1888,6 +1895,10 @@ packages:
     resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==, tarball: https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz}
     engines: {node: ^10.12.0 || >=12.0.0}
 
+  flat-cache@5.0.0:
+    resolution: {integrity: sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ==, tarball: https://registry.npmjs.org/flat-cache/-/flat-cache-5.0.0.tgz}
+    engines: {node: '>=18'}
+
   flatted@3.3.1:
     resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==, tarball: https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz}
 
@@ -3099,6 +3110,11 @@ packages:
     peerDependencies:
       vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0
 
+  vite-plugin-webfont-dl@3.9.5:
+    resolution: {integrity: sha512-PSVM7s1XurzMPYXgUHBpZOJYsuzRNq3DGIABdUyq/mNFan1n434+NbmGTK9f9+dIDVHpitXFiE3CmbAdDyDQMg==, tarball: https://registry.npmjs.org/vite-plugin-webfont-dl/-/vite-plugin-webfont-dl-3.9.5.tgz}
+    peerDependencies:
+      vite: ^2 || ^3 || ^4 || ^5
+
   vite@5.4.2:
     resolution: {integrity: sha512-dDrQTRHp5C1fTFzcSaMxjk6vdpKvT+2/mIdE07Gw2ykehT49O0z/VHS3zZ8iV/Gh8BJJKHWOe5RjaNrW5xf/GA==, tarball: https://registry.npmjs.org/vite/-/vite-5.4.2.tgz}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -4851,6 +4867,10 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  clean-css@5.3.3:
+    dependencies:
+      source-map: 0.6.1
+
   cli-cursor@5.0.0:
     dependencies:
       restore-cursor: 5.1.0
@@ -5230,6 +5250,11 @@ snapshots:
       keyv: 4.5.4
       rimraf: 3.0.2
 
+  flat-cache@5.0.0:
+    dependencies:
+      flatted: 3.3.1
+      keyv: 4.5.4
+
   flatted@3.3.1: {}
 
   follow-redirects@1.15.6: {}
@@ -6029,8 +6054,7 @@ snapshots:
 
   source-map-js@1.2.0: {}
 
-  source-map@0.6.1:
+  source-map@0.6.1: {}
-    optional: true
 
   sourcemap-codec@1.4.8: {}
 
@@ -6519,6 +6543,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  vite-plugin-webfont-dl@3.9.5(vite@5.4.2(@types/node@22.5.0)(less@4.2.0)):
+    dependencies:
+      axios: 1.7.5
+      clean-css: 5.3.3
+      flat-cache: 5.0.0
+      picocolors: 1.0.1
+      vite: 5.4.2(@types/node@22.5.0)(less@4.2.0)
+    transitivePeerDependencies:
+      - debug
+
   vite@5.4.2(@types/node@22.5.0)(less@4.2.0):
     dependencies:
       esbuild: 0.21.5

src/pages/index-page.vue

@@ -47,4 +47,26 @@ const FComponent: FunctionalComponent<{ prop: string }> = (props, context) => (
     <DefineRender />
   </div>
   <Icons />
+
+  <div :class="$style.hero" mt-8>
+    <h1><i>🔌</i> Vite Plugin Webfont DL <i>⚡</i></h1>
+    <h2>Fonts are downloaded directly from Google Fonts</h2>
+    <p>{{ JSON.stringify({ $style }) }}</p>
+  </div>
 </template>
+
+<style module>
+h1 {
+  font-family: 'Press Start 2P', cursive;
+  color: #646cff;
+}
+
+h2 {
+  font-family: 'Fira Code', monospace;
+  background-color: #42b983;
+}
+
+.hero {
+  border: 1px solid #42b983;
+}
+</style>

vite.config.ts

@@ -18,6 +18,7 @@ import { createSplitChunkOutput } from 'utils4u/rollup';
 import { defineConfig, loadEnv, PluginOption } from 'vite';
 import cdnImport from 'vite-plugin-cdn-import';
 import vueDevTools from 'vite-plugin-vue-devtools';
+import { ViteWebfontDownload } from 'vite-plugin-webfont-dl';
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode, command }) => {
@@ -109,6 +110,15 @@ function Plugins() {
 
   plugins.push([vueDevTools()]);
 
+  plugins.push(
+    // https://github.com/feat-agency/vite-plugin-webfont-dl?tab=readme-ov-file#-usage-simple-config-method-b-
+    ViteWebfontDownload([
+      'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap',
+      'https://fonts.googleapis.com/css2?family=Fira+Code&display=swap',
+      'https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,900',
+    ]),
+  );
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const unused = () => {
     plugins.push(
       // https://github.com/unplugin/unplugin-vue-components/issues/664$0