feat: add option for css preloads when prerendering

`KitConfig.prerender.generateCssPreloadTags` will configure whether preload tags for stylesheets are generated during prerendering.
sveltejs · Sep 14, 2024 · 6d9a52f · 6d9a52f
1 parent 247aeb7
commit 6d9a52f
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 0 deletions.
diff --git a/.changeset/sixty-planets-love.md b/.changeset/sixty-planets-love.md
@@ -0,0 +1,5 @@
+---
+"@sveltejs/kit": minor
+---
+
+feat: add option for css preloads when prerendering
diff --git a/packages/kit/src/core/config/index.spec.js b/packages/kit/src/core/config/index.spec.js
@@ -106,6 +106,7 @@ const get_defaults = (prefix = '') => ({
 			concurrency: 1,
 			crawl: true,
 			entries: ['*'],
+			generateCssPreloadTags: false,
 			origin: 'http://sveltekit-prerender'
 		},
 		version: {

diff --git a/packages/kit/src/core/config/options.js b/packages/kit/src/core/config/options.js
@@ -197,6 +197,7 @@ const options = object(
 					return input;
 				}),
 
+				generateCssPreloadTags: boolean(false),
 				handleHttpError: validate(
 					(/** @type {any} */ { message }) => {
 						throw new Error(

diff --git a/packages/kit/src/core/sync/write_server.js b/packages/kit/src/core/sync/write_server.js
@@ -41,6 +41,7 @@ export const options = {
 	embedded: ${config.kit.embedded},
 	env_public_prefix: '${config.kit.env.publicPrefix}',
 	env_private_prefix: '${config.kit.env.privatePrefix}',
+	generate_css_preload_tags: ${config.kit.prerender.generateCssPreloadTags},
 	hooks: null, // added lazily, via \`get_hooks\`
 	preload_strategy: ${s(config.kit.output.preloadStrategy)},
 	root,

diff --git a/packages/kit/src/exports/public.d.ts b/packages/kit/src/exports/public.d.ts
@@ -544,6 +544,13 @@ export interface KitConfig {
 		 * @default ["*"]
 		 */
 		entries?: Array<'*' | `/${string}`>;
+		/**
+		 * Whether SvelteKit should generate `<link rel="preload">` tags for stylesheets.
+		 * This is useful for Cloudflare Pages's [Early Hints](https://developers.cloudflare.com/pages/configuration/early-hints/) feature, which looks for these tags to automatically generate Link headers.
+		 *
+		 * @default false
+		 */
+		generateCssPreloadTags?: boolean;
 		/**
 		 * How to respond to HTTP errors encountered while prerendering the app.
 		 *

diff --git a/packages/kit/src/runtime/server/page/render.js b/packages/kit/src/runtime/server/page/render.js
@@ -236,6 +236,9 @@ export async function render_response({
 			if (resolve_opts.preload({ type: 'css', path })) {
 				const preload_atts = ['rel="preload"', 'as="style"'];
 				link_header_preloads.add(`<${encodeURI(path)}>; ${preload_atts.join(';')}; nopush`);
+				if (options.generate_css_preload_tags && state.prerendering) {
+					head += `\n\t\t<link href="${path}" ${preload_atts.join(' ')}>`;
+				}
 			}
 		}
 

diff --git a/packages/kit/src/types/internal.d.ts b/packages/kit/src/types/internal.d.ts
@@ -360,6 +360,7 @@ export interface SSROptions {
 	embedded: boolean;
 	env_public_prefix: string;
 	env_private_prefix: string;
+	generate_css_preload_tags: boolean;
 	hooks: ServerHooks;
 	preload_strategy: ValidatedConfig['kit']['output']['preloadStrategy'];
 	root: SSRComponent['default'];

diff --git a/packages/kit/types/index.d.ts b/packages/kit/types/index.d.ts
@@ -526,6 +526,13 @@ declare module '@sveltejs/kit' {
 			 * @default ["*"]
 			 */
 			entries?: Array<'*' | `/${string}`>;
+			/**
+			 * Whether SvelteKit should generate `<link rel="preload">` tags for stylesheets.
+			 * This is useful for Cloudflare Pages's [Early Hints](https://developers.cloudflare.com/pages/configuration/early-hints/) feature, which looks for these tags to automatically generate Link headers.
+			 *
+			 * @default false
+			 */
+			generateCssPreloadTags?: boolean;
 			/**
 			 * How to respond to HTTP errors encountered while prerendering the app.
 			 *