diff --git a/.changeset/sixty-planets-love.md b/.changeset/sixty-planets-love.md new file mode 100644 index 0000000000000..a25411c732a1f --- /dev/null +++ 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 index e5639defc4c2a..04393536c3245 100644 --- 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 index 316e935a27936..5e53a6500b38b 100644 --- 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 index 3aa65f9ebe0b3..94bd64408e26f 100644 --- 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 index 861aff321902f..a8fe54e71bba1 100644 --- 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 `` 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 index d260eb18e82cb..88f4b7538c3fe 100644 --- 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`; + } } } diff --git a/packages/kit/src/types/internal.d.ts b/packages/kit/src/types/internal.d.ts index c9dbb51ce0070..adf2ccded6cb2 100644 --- 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'];