fix: correctly ssr component in svelte:head with $props.id() or css='injected' (#15291)

Author: paoloricciuti

.changeset/thirty-feet-tap.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly ssr component in `svelte:head` with `$props.id()` or `css='injected'`

packages/svelte/src/internal/server/index.js

@@ -34,7 +34,9 @@ export function copy_payload({ out, css, head, uid }) {
 		css: new Set(css),
 		head: {
 			title: head.title,
-			out: head.out
+			out: head.out,
+			css: new Set(head.css),
+			uid: head.uid
 		},
 		uid
 	};
@@ -99,12 +101,13 @@ function props_id_generator() {
  * @returns {RenderOutput}
  */
 export function render(component, options = {}) {
+	const uid = options.uid ?? props_id_generator();
 	/** @type {Payload} */
 	const payload = {
 		out: '',
 		css: new Set(),
-		head: { title: '', out: '' },
-		uid: options.uid ?? props_id_generator()
+		head: { title: '', out: '', css: new Set(), uid },
+		uid
 	};
 
 	const prev_on_destroy = on_destroy;

packages/svelte/src/internal/server/types.d.ts

@@ -17,6 +17,8 @@ export interface Payload {
 	head: {
 		title: string;
 		out: string;
+		uid: () => string;
+		css: Set<{ hash: string; code: string }>;
 	};
 	/** Function that generates a unique ID */
 	uid: () => string;

packages/svelte/tests/server-side-rendering/samples/head-component-props-id/HeadNested.svelte

@@ -0,0 +1,5 @@
+<script>
+	let id = $props.id();
+</script>
+
+<meta name="id" content={id} />

packages/svelte/tests/server-side-rendering/samples/head-component-props-id/_config.js

@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});

packages/svelte/tests/server-side-rendering/samples/head-component-props-id/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import HeadNested from './HeadNested.svelte';
+</script>
+
+<svelte:head>
+	<HeadNested />
+</svelte:head>
+