From 489014944a1544846875910d7d5e17e3d71b7e2d Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Date: Sat, 21 Jan 2023 11:01:32 +0000
Subject: [PATCH] feat: fix broken font preloading (#2980)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2980
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
---
 index.html     |  4 +---
 package.json   |  1 +
 pnpm-lock.yaml | 36 ++++++++++++++++++++++++------------
 vite.config.ts | 23 +++++++++++++++++++++++
 4 files changed, 49 insertions(+), 15 deletions(-)
diff --git a/index.html b/index.html
index dd6d6cf52..a400eff88 100644
--- a/index.html
+++ b/index.html
@@ -9,9 +9,7 @@
 
 	<link rel="icon" href="/favicon.ico">
 	<link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-180x180.png"/>
-	<link rel="preload" crossorigin="anonymous" href="/src/assets/fonts/OpenSans[wght].woff2" as="font">
-	<link rel="preload" crossorigin="anonymous" href="/src/assets/fonts/OpenSans-Italic[wght].woff2" as="font">
-	<link rel="preload" crossorigin="anonymous" href="/src/assets/fonts/Quicksand[wght].woff2" as="font">
+	<!--__vite-plugin-inject-preload__-->
 </head>
 <body>
 <noscript>
diff --git a/package.json b/package.json
index bdfe44eb4..fc5854b18 100644
--- a/package.json
+++ b/package.json
@@ -136,6 +136,7 @@
     "start-server-and-test": "1.15.2",
     "typescript": "4.9.4",
     "vite": "4.0.4",
+    "vite-plugin-inject-preload": "1.1.2",
     "vite-plugin-pwa": "0.14.1",
     "vite-svg-loader": "4.0.0",
     "vitest": "0.27.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c9a6b29a5..244306caf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,6 +83,7 @@ specifiers:
   typescript: 4.9.4
   ufo: 1.0.1
   vite: 4.0.4
+  vite-plugin-inject-preload: 1.1.2
   vite-plugin-pwa: 0.14.1
   vite-svg-loader: 4.0.0
   vitest: 0.27.2
@@ -189,6 +190,7 @@ devDependencies:
   start-server-and-test: 1.15.2
   typescript: 4.9.4
   vite: 4.0.4_4ljv3kzetn75ixk7nciffo2yk4
+  vite-plugin-inject-preload: 1.1.2_vite@4.0.4
   vite-plugin-pwa: 0.14.1_fh56thzkyakgjs6jm6gbtbzxsq
   vite-svg-loader: 4.0.0
   vitest: 0.27.2_doo2ppxqrldppg5xgkcjnkztci
@@ -1676,7 +1678,7 @@ packages:
       is-typedarray: 1.0.0
       isstream: 0.1.2
       json-stringify-safe: 5.0.1
-      mime-types: 2.1.34
+      mime-types: 2.1.35
       performance-now: 2.1.0
       qs: 6.5.3
       safe-buffer: 5.2.1
@@ -4401,7 +4403,7 @@ packages:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
     dependencies:
-      mime-types: 2.1.34
+      mime-types: 2.1.35
       negotiator: 0.6.3
     dev: true
 
@@ -7464,7 +7466,7 @@ packages:
     resolution: {integrity: sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==}
     engines: {node: '>=0.10.0'}
     dependencies:
-      mime-db: 1.51.0
+      mime-db: 1.52.0
     dev: true
 
   /ext-name/5.0.0:
@@ -7986,7 +7988,7 @@ packages:
     dependencies:
       asynckit: 0.4.0
       combined-stream: 1.0.8
-      mime-types: 2.1.34
+      mime-types: 2.1.35
     dev: true
 
   /form-data/3.0.1:
@@ -7995,7 +7997,7 @@ packages:
     dependencies:
       asynckit: 0.4.0
       combined-stream: 1.0.8
-      mime-types: 2.1.34
+      mime-types: 2.1.35
     dev: true
 
   /form-data/4.0.0:
@@ -8004,7 +8006,7 @@ packages:
     dependencies:
       asynckit: 0.4.0
       combined-stream: 1.0.8
-      mime-types: 2.1.34
+      mime-types: 2.1.35
 
   /formdata-polyfill/4.0.10:
     resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
@@ -10383,15 +10385,15 @@ packages:
       braces: 3.0.2
       picomatch: 2.3.1
 
-  /mime-db/1.51.0:
-    resolution: {integrity: sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==}
+  /mime-db/1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
 
-  /mime-types/2.1.34:
-    resolution: {integrity: sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==}
+  /mime-types/2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
     dependencies:
-      mime-db: 1.51.0
+      mime-db: 1.52.0
 
   /mime/1.6.0:
     resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
@@ -14090,7 +14092,7 @@ packages:
     engines: {node: '>= 0.6'}
     dependencies:
       media-typer: 0.3.0
-      mime-types: 2.1.34
+      mime-types: 2.1.35
     dev: true
 
   /typedarray-to-buffer/3.1.5:
@@ -14472,6 +14474,16 @@ packages:
       - terser
     dev: true
 
+  /vite-plugin-inject-preload/1.1.2_vite@4.0.4:
+    resolution: {integrity: sha512-K5q2WACSQMg3IpR4+Bopxj1nMCHHnu7FQnz3ZubvLWAJGZi6XakdtTLepMzgUBBT2LXMaRSt6b/1WhKer6n8Fg==}
+    engines: {node: '>=14.18.0'}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0
+    dependencies:
+      mime-types: 2.1.35
+      vite: 4.0.4_4ljv3kzetn75ixk7nciffo2yk4
+    dev: true
+
   /vite-plugin-pwa/0.14.1_fh56thzkyakgjs6jm6gbtbzxsq:
     resolution: {integrity: sha512-5zx7yhQ8RTLwV71+GA9YsQQ63ALKG8XXIMqRJDdZkR8ZYftFcRgnzM7wOWmQZ/DATspyhPih5wCdcZnAIsM+mA==}
     peerDependencies:
diff --git a/vite.config.ts b/vite.config.ts
index dd6ed7f70..f5fd91eba 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -7,6 +7,7 @@ import { dirname, resolve } from 'node:path'
 
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import {VitePWA}  from 'vite-plugin-pwa'
+import VitePluginInjectPreload from 'vite-plugin-inject-preload'
 import {visualizer}  from 'rollup-plugin-visualizer'
 import svgLoader from 'vite-svg-loader'
 import postcssPresetEnv from 'postcss-preset-env'
@@ -33,6 +34,20 @@ console.log(isModernBuild
 	: 'Building "legacy" build with "@vitejs/plugin-legacy"',
 )
 
+/**
+ * @param fontNames Array of the file names of the fonts without axis and hash suffixes
+ */
+function createFontMatcher(fontNames: string[]) {
+	// The `match` option for the files of VitePluginInjectPreload
+	// matches the _output_ files.
+	// Since we only want to mach variable fonts, we exploit here the fact
+	// that we added the `wght` term to indicate the variable weiht axis.
+	// The format is something like:
+	// `/assets/OpenSans-Italic_wght__c9a8fe68-5f21f1e7.woff2`
+	// see: https://regex101.com/r/UgUWr1/1
+	return new RegExp(`^.+\\/(${fontNames.join('|')})_wght__[a-z1-9]{8}-[a-z1-9]{8}\\.woff2$`)
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
 	// https://vitest.dev/config/
@@ -81,6 +96,14 @@ export default defineConfig({
 			fullInstall: true,
 			include: resolve(dirname(pathSrc), './src/i18n/lang/**'),
 		}),
+		// https://github.com/Applelo/vite-plugin-inject-preload
+		VitePluginInjectPreload({
+			files: [{
+				match: createFontMatcher(['Quicksand', 'OpenSans', 'OpenSans-Italic']),
+				attributes: {crossorigin: 'anonymous'},
+			}],
+			injectTo: 'custom',
+		}),
 		VitePWA({
 			srcDir: 'src',
 			filename: 'sw.ts',
