feat: add link header when preloading font (#14200)

* Add link header when preloading font

* add test

* beef up test

* only inject `<link>` tags when prerendering

* remove .only

* fix test

* changeset

---------

Co-authored-by: Rich Harris <[email protected]>
Co-authored-by: Rich Harris <[email protected]>

Author: gjung56

.changeset/nervous-socks-happen.md

@@ -0,0 +1,5 @@
+---
+"@sveltejs/kit": patch
+---
+
+fix: add link header when preloading font

packages/kit/src/runtime/server/page/render.js

@@ -72,8 +72,18 @@ export async function render_response({
 	const stylesheets = new Set(client.stylesheets);
 	const fonts = new Set(client.fonts);
 
-	/** @type {Set<string>} */
-	const link_header_preloads = new Set();
+	/**
+	 * The value of the Link header that is added to the response when not prerendering
+	 * @type {Set<string>}
+	 */
+	const link_headers = new Set();
+
+	/**
+	 * `<link>` tags that are added to prerendered responses
+	 * (note that stylesheets are always added, prerendered or not)
+	 * @type {Set<string>}
+	 */
+	const link_tags = new Set();
 
 	/** @type {Map<string, string>} */
 	// TODO if we add a client entry point one day, we will need to include inline_styles with the entry, otherwise stylesheets will be linked even if they are below inlineStyleThreshold
@@ -264,8 +274,7 @@ export async function render_response({
 			attributes.push('disabled', 'media="(max-width: 0)"');
 		} else {
 			if (resolve_opts.preload({ type: 'css', path })) {
-				const preload_atts = ['rel="preload"', 'as="style"'];
-				link_header_preloads.add(`<${encodeURI(path)}>; ${preload_atts.join(';')}; nopush`);
+				link_headers.add(`<${encodeURI(path)}>; rel="preload"; as="style"; nopush`);
 			}
 		}
 
@@ -277,15 +286,12 @@ export async function render_response({
 
 		if (resolve_opts.preload({ type: 'font', path })) {
 			const ext = dep.slice(dep.lastIndexOf('.') + 1);
-			const attributes = [
-				'rel="preload"',
-				'as="font"',
-				`type="font/${ext}"`,
-				`href="${path}"`,
-				'crossorigin'
-			];
 
-			head += `\n\t\t<link ${attributes.join(' ')}>`;
+			link_tags.add(`<link rel="preload" as="font" type="font/${ext}" href="${path}" crossorigin>`);
+
+			link_headers.add(
+				`<${encodeURI(path)}>; rel="preload"; as="font"; type="font/${ext}"; crossorigin; nopush`
+			);
 		}
 	}
 
@@ -322,15 +328,22 @@ export async function render_response({
 
 			for (const path of included_modulepreloads) {
 				// see the kit.output.preloadStrategy option for details on why we have multiple options here
-				link_header_preloads.add(`<${encodeURI(path)}>; rel="modulepreload"; nopush`);
+				link_headers.add(`<${encodeURI(path)}>; rel="modulepreload"; nopush`);
+
 				if (options.preload_strategy !== 'modulepreload') {
 					head += `\n\t\t<link rel="preload" as="script" crossorigin="anonymous" href="${path}">`;
-				} else if (state.prerendering) {
-					head += `\n\t\t<link rel="modulepreload" href="${path}">`;
+				} else {
+					link_tags.add(`<link rel="modulepreload" href="${path}">`);
 				}
 			}
 		}
 
+		if (state.prerendering && link_tags.size > 0) {
+			head += Array.from(link_tags)
+				.map((tag) => `\n\t\t${tag}`)
+				.join('');
+		}
+
 		// prerender a `/path/to/page/__route.js` module
 		if (manifest._.client.routes && state.prerendering && !state.prerendering.fallback) {
 			const pathname = add_resolution_suffix(event.url.pathname);
@@ -545,8 +558,8 @@ export async function render_response({
 			headers.set('content-security-policy-report-only', report_only_header);
 		}
 
-		if (link_header_preloads.size) {
-			headers.set('link', Array.from(link_header_preloads).join(', '));
+		if (link_headers.size) {
+			headers.set('link', Array.from(link_headers).join(', '));
 		}
 	}
 

packages/kit/test/apps/basics/src/hooks.server.js

@@ -192,7 +192,10 @@ export const handle = sequence(
 			e.locals.message = 'hello from hooks.server.js';
 		}
 
-		return resolve(event);
+		return resolve(event, {
+			// needed for asset-preload tests
+			preload: () => true
+		});
 	}
 );
 

packages/kit/test/apps/basics/src/routes/asset-preload/+page.svelte

@@ -0,0 +1,11 @@
+<script>
+	import './styles.css';
+</script>
+
+<h1>asset-preload</h1>
+
+<style>
+	h1 {
+		font-family: Shlop;
+	}
+</style>

packages/kit/test/apps/basics/src/routes/asset-preload/prerendered/+page.server.js

@@ -0,0 +1 @@
+export const prerender = true;

packages/kit/test/apps/basics/src/routes/asset-preload/prerendered/+page.svelte

@@ -0,0 +1,9 @@
+<h1>asset-preload/prerendered</h1>
+
+<style>
+	@import '../styles.css';
+
+	h1 {
+		font-family: Shlop;
+	}
+</style>

packages/kit/test/apps/basics/src/routes/asset-preload/shlop.woff2

@@ -0,0 +1,5 @@
+@font-face {
+	/* we need a font file that exceeds assetsInlineLimit */
+	font-family: 'Shlop';
+	src: url(./shlop.woff2);
+}

packages/kit/test/apps/basics/src/routes/asset-preload/styles.css

@@ -1233,3 +1233,41 @@ test.describe('remote functions', () => {
 		expect(fs.existsSync(path.join(root, 'dist'))).toBe(false);
 	});
 });
+
+test.describe('asset preload', () => {
+	if (!process.env.DEV) {
+		test('injects Link headers', async ({ request }) => {
+			const response = await request.get('/asset-preload');
+
+			const header = response.headers()['link'];
+
+			expect(header).toContain('rel="modulepreload"');
+			expect(header).toContain('as="font"');
+		});
+
+		test('does not inject Link headers on prerendered pages', async ({ request }) => {
+			const response = await request.get('/asset-preload/prerendered');
+
+			const header = response.headers()['link'];
+			expect(header).toBeUndefined();
+		});
+
+		test('injects <link> tags on prerendered pages', async ({ request }) => {
+			const response = await request.get('/asset-preload/prerendered');
+
+			const body = await response.text();
+
+			expect(body).toContain('rel="modulepreload"');
+			expect(body).toContain('as="font"');
+		});
+
+		test('does not inject <link> tags on non-prerendered pages', async ({ request }) => {
+			const response = await request.get('/asset-preload');
+
+			const body = await response.text();
+
+			expect(body).not.toContain('rel="modulepreload"');
+			expect(body).not.toContain('as="font"');
+		});
+	}
+});