feat: fix broken font preloading (#2980)
continuous-integration/drone/push Build is passing Details

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: #2980
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
Dominik Pschenitschni 2023-01-21 11:01:32 +00:00 committed by konrad
parent bb44beb4ba
commit 489014944a
4 changed files with 49 additions and 15 deletions

View File

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

View File

@ -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",

View File

@ -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:

View File

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