half working css props

Author: Rich-Harris

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -960,9 +960,12 @@ function serialize_element_spread_attributes(
  * @param {import('#compiler').Component | import('#compiler').SvelteComponent | import('#compiler').SvelteSelf} node
  * @param {string | import('estree').Expression} component_name
  * @param {import('./types').ComponentContext} context
- * @returns {import('estree').Statement}
+ * @returns {import('estree').Statement[]}
  */
 function serialize_inline_component(node, component_name, context) {
+	/** @type {import('./types').Template[]} */
+	const parts = [];
+
 	/** @type {Array<import('estree').Property[] | import('estree').Expression>} */
 	const props_and_spreads = [];
 
@@ -1124,37 +1127,43 @@ function serialize_inline_component(node, component_name, context) {
 					b.array(props_and_spreads.map((p) => (Array.isArray(p) ? b.object(p) : p)))
 				);
 
-	/** @type {import('estree').Statement} */
-	let statement = b.stmt(
-		(typeof component_name === 'string' ? b.call : b.maybe_call)(
-			context.state.options.dev
-				? b.call(
-						'$.validate_component',
-						typeof component_name === 'string' ? b.id(component_name) : component_name
-					)
-				: component_name,
-			b.id('$$payload'),
-			props_expression
-		)
-	);
+	/** @type {import('estree').Statement[]} */
+	let statements = [
+		b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(block_open.value))),
+		b.stmt(
+			(typeof component_name === 'string' ? b.call : b.maybe_call)(
+				context.state.options.dev
+					? b.call(
+							'$.validate_component',
+							typeof component_name === 'string' ? b.id(component_name) : component_name
+						)
+					: component_name,
+				b.id('$$payload'),
+				props_expression
+			)
+		),
+		b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(block_close.value)))
+	];
 
 	if (custom_css_props.length > 0) {
-		statement = b.stmt(
-			b.call(
-				'$.css_props',
-				b.id('$$payload'),
-				b.literal(context.state.metadata.namespace === 'svg' ? false : true),
-				b.object(custom_css_props),
-				b.thunk(b.block([statement]))
+		statements = [
+			b.stmt(
+				b.call(
+					'$.css_props',
+					b.id('$$payload'),
+					b.literal(context.state.metadata.namespace === 'svg' ? false : true),
+					b.object(custom_css_props),
+					b.thunk(b.block(statements))
+				)
 			)
-		);
+		];
 	}
 
 	if (snippet_declarations.length > 0) {
-		statement = b.block([...snippet_declarations, statement]);
+		statements.unshift(...snippet_declarations);
 	}
 
-	return statement;
+	return statements;
 }
 
 /**
@@ -1653,29 +1662,27 @@ const template_visitors = {
 		}
 	},
 	Component(node, context) {
-		const state = context.state;
-		state.template.push(block_open);
-		const call = serialize_inline_component(node, node.name, context);
-		state.template.push(t_statement(call));
-		state.template.push(block_close);
+		context.state.template.push(
+			...serialize_inline_component(node, node.name, context).map((statement) =>
+				t_statement(statement)
+			)
+		);
 	},
 	SvelteSelf(node, context) {
-		const state = context.state;
-		state.template.push(block_open);
-		const call = serialize_inline_component(node, context.state.analysis.name, context);
-		state.template.push(t_statement(call));
-		state.template.push(block_close);
+		context.state.template.push(
+			...serialize_inline_component(node, context.state.analysis.name, context).map((statement) =>
+				t_statement(statement)
+			)
+		);
 	},
 	SvelteComponent(node, context) {
-		const state = context.state;
-		state.template.push(block_open);
-		const call = serialize_inline_component(
-			node,
-			/** @type {import('estree').Expression} */ (context.visit(node.expression)),
-			context
+		context.state.template.push(
+			...serialize_inline_component(
+				node,
+				/** @type {import('estree').Expression} */ (context.visit(node.expression)),
+				context
+			).map((statement) => t_statement(statement))
 		);
-		state.template.push(t_statement(call));
-		state.template.push(block_close);
 	},
 	LetDirective(node, { state }) {
 		if (node.expression && node.expression.type !== 'Identifier') {

packages/svelte/src/internal/client/dom/blocks/css-props.js

@@ -1,25 +1,31 @@
 import { namespace_svg } from '../../../../constants.js';
-import { hydrate_anchor, hydrate_start, hydrating } from '../hydration.js';
+import { hydrate_anchor, hydrating } from '../hydration.js';
 import { empty } from '../operations.js';
 import { render_effect } from '../../reactivity/effects.js';
 
 /**
- * @param {Element | Text | Comment} anchor
+ * @param {HTMLElement | SVGElement | Comment} node
  * @param {boolean} is_html
  * @param {() => Record<string, string>} props
  * @param {(anchor: Element | Text | Comment) => any} component
  * @returns {void}
  */
-export function css_props(anchor, is_html, props, component) {
+export function css_props(node, is_html, props, component) {
 	/** @type {HTMLElement | SVGElement} */
 	let element;
 
+	/** @type {Comment} */
+	let anchor;
+
 	/** @type {Text | Comment} */
 	let component_anchor;
 
 	if (hydrating) {
 		// Hydration: css props element is surrounded by a ssr comment ...
-		element = /** @type {HTMLElement | SVGElement} */ (hydrate_start);
+		element = /** @type {HTMLElement | SVGElement} */ (node);
+
+		anchor = /** @type {Comment} */ (element.nextSibling);
+
 		// ... and the child(ren) of the css props element is also surround by a ssr comment
 		component_anchor = /** @type {Comment} */ (
 			hydrate_anchor(/** @type {Comment} */ (element.firstChild))
@@ -32,6 +38,8 @@ export function css_props(anchor, is_html, props, component) {
 			element = document.createElementNS(namespace_svg, 'g');
 		}
 
+		anchor = /** @type {Comment} */ (node);
+
 		anchor.before(element);
 		component_anchor = element.appendChild(empty());
 	}

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

@@ -171,15 +171,15 @@ export function attr(name, value, boolean) {
 export function css_props(payload, is_html, props, component) {
 	const styles = style_object_to_string(props);
 	if (is_html) {
-		payload.out += `<div style="display: contents; ${styles}"><!--[-->`;
+		payload.out += `<div style="display: contents; ${styles}">`;
 	} else {
-		payload.out += `<g style="${styles}"><!--[-->`;
+		payload.out += `<g style="${styles}">`;
 	}
 	component();
 	if (is_html) {
-		payload.out += `<!--]--></div>`;
+		payload.out += `<!----></div>`;
 	} else {
-		payload.out += `<!--]--></g>`;
+		payload.out += `<!----></g>`;
 	}
 }