Skip to content

Commit f42edd8

Browse files
stafyniaksachastafyniaksacha
committed
chore: use injected tags
1 parent 784667a commit f42edd8

File tree

5 files changed

+90
-38
lines changed

5 files changed

+90
-38
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export default {
5454
google: {
5555
/**
5656
* enable preconnect link injection
57+
* <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
5758
* default: true
5859
*/
5960
preconnect: false,

‎pnpm-lock.yaml

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/google-fonts.ts

Lines changed: 41 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import type { HtmlTagDescriptor } from 'vite'
2+
13
export type GoogleFontFamily = {
24
name: string
35
styles?: string
@@ -17,15 +19,15 @@ function injectFonts({
1719
text,
1820
preconnect = true,
1921
display = 'swap',
20-
}: GoogleFonts, html: string): string {
22+
}: GoogleFonts): HtmlTagDescriptor[] {
2123
const specs: string[] = []
2224
const deferedSpecs: string[] = []
23-
let links = ''
25+
const tags: HtmlTagDescriptor[] = []
2426

2527
if (!Array.isArray(families)) {
2628
console.warn('Google font families is required')
27-
28-
return html
29+
30+
return tags
2931
}
3032

3133
if (families.length >= 0) {
@@ -63,38 +65,56 @@ function injectFonts({
6365

6466
// warm up the fonts’ origin
6567
if (preconnect && specs.length + deferedSpecs.length > 0)
66-
links += '<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />'
68+
tags.push({
69+
tag: 'link',
70+
attrs: {
71+
rel: 'preconnect',
72+
href: 'https://fonts.gstatic.com/',
73+
crossorigin: '',
74+
}
75+
})
6776

68-
// defer loading font-faces definitions
77+
// defer loading font-faces definitions
6978
// @see https://web.dev/optimize-lcp/#defer-non-critical-css
7079
if (deferedSpecs.length > 0) {
71-
let deferedFonts = `${GoogleFontsBase}?family=${deferedSpecs.join('&family=')}`
80+
let href = `${GoogleFontsBase}?family=${deferedSpecs.join('&family=')}`
7281

7382
if (typeof display === 'string' && display !== 'auto')
74-
deferedFonts += `&display=${display}`
75-
76-
if (typeof text === 'string' && text.length > 0)
77-
deferedFonts += `&text=${text}`
83+
href += `&display=${display}`
7884

79-
links += `<link rel="preload" href="${deferedFonts}" as="style" onload="this.rel='stylesheet'">`
85+
if (typeof text === 'string' && text.length > 0)
86+
href += `&text=${text}`
87+
88+
tags.push({
89+
tag: 'link',
90+
attrs: {
91+
rel: 'preload',
92+
as: 'style',
93+
onload: "this.rel='stylesheet'",
94+
href,
95+
}
96+
})
8097
}
8198

8299
// load critical fonts
83100
if (specs.length > 0) {
84-
let criticalFonts = `${GoogleFontsBase}?family=${specs.join('&family=')}`
101+
let href = `${GoogleFontsBase}?family=${specs.join('&family=')}`
85102

86103
if (typeof display === 'string' && display !== 'auto')
87-
criticalFonts += `&display=${display}`
88-
104+
href += `&display=${display}`
105+
89106
if (typeof text === 'string' && text.length > 0)
90-
criticalFonts += `&text=${text}`
107+
href += `&text=${text}`
91108

92-
links += `<link rel="stylesheet" href="${criticalFonts}" />`
109+
tags.push({
110+
tag: 'link',
111+
attrs: {
112+
rel: 'stylesheet',
113+
href,
114+
}
115+
})
93116
}
94117

95-
return html.replace(
96-
/<head>/,
97-
`<head>${links}`,
98-
)
118+
return tags
99119
}
100120
export default injectFonts

‎src/index.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
import type { Plugin } from 'vite'
2+
import type { Plugin, HtmlTagDescriptor } from 'vite'
33
import injectGoogleFonts, { GoogleFonts } from './google-fonts'
44
import injectTypekitFonts, { TypeKitFonts } from './typekit'
55

@@ -12,16 +12,16 @@ function VitePluginFonts(options: VitePluginFontsOptions = {}) {
1212
return {
1313
name: 'vite-plugin-fonts',
1414

15-
transformIndexHtml(html: string) {
16-
let transformedHtml = html
17-
15+
transformIndexHtml(): HtmlTagDescriptor[] {
16+
const tags: HtmlTagDescriptor[] = []
17+
1818
if (options.typekit)
19-
transformedHtml = injectTypekitFonts(options.typekit, transformedHtml)
19+
tags.push(...injectTypekitFonts(options.typekit))
2020

2121
if (options.google)
22-
transformedHtml = injectGoogleFonts(options.google, transformedHtml)
22+
tags.push(...injectGoogleFonts(options.google))
2323

24-
return transformedHtml
24+
return tags;
2525
},
2626
}
2727
}

‎src/typekit.ts

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import type { HtmlTagDescriptor } from 'vite'
2+
13
export type TypeKitFonts = {
24
id: string
35
defer?: boolean
@@ -8,24 +10,35 @@ const TypekitFontBase = 'https://use.typekit.net/'
810
function injectFonts({
911
id,
1012
defer = true,
11-
}: TypeKitFonts, html: string): string {
12-
let links = ''
13+
}: TypeKitFonts): HtmlTagDescriptor[] {
14+
const tags: HtmlTagDescriptor[] = []
1315

1416
if (typeof id !== 'string') {
1517
console.warn('A Typekit id is required')
16-
17-
return html
18+
19+
return tags
1820
}
1921

2022
if (defer)
21-
links += `<link rel="preload" href="${TypekitFontBase}${id}.css" as="style" onload="this.rel='stylesheet'">`
23+
tags.push({
24+
tag: 'link',
25+
attrs: {
26+
rel: 'preload',
27+
as: 'style',
28+
onload: "this.rel='stylesheet'",
29+
href: `${TypekitFontBase}${id}.css`,
30+
}
31+
})
2232
else
23-
links += `<link rel="stylesheet" href="${TypekitFontBase}${id}.css" />`
33+
tags.push({
34+
tag: 'link',
35+
attrs: {
36+
rel: 'stylesheet',
37+
href: `${TypekitFontBase}${id}.css`,
38+
}
39+
})
2440

25-
return html.replace(
26-
/<head>/,
27-
`<head>${links}`,
28-
)
41+
return tags
2942
}
3043

3144
export default injectFonts

0 commit comments

Comments
 (0)