feat: fix broken font preloading (#2980)

Co-authored-by: Dominik Pschenitschni <mail@celement.de> Reviewed-on: vikunja/frontend#2980 Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de> Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
2 months ago · 489014944a
parent bb44beb4ba
commit 489014944a
4 changed files with 49 additions and 15 deletions
--- 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>
--- 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",
--- 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:
--- 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',