feat: better dynamic component css props (#11792)

* feat: better dynamic component css props

* chore: fix tests

* chore: remove anchor from `$.component`

* chore: better old test fixing

* changeset

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>

Author: paoloricciuti

.changeset/smart-spiders-fetch.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+feat: always create wrapper `<div>` for `<svelte:component>` with CSS custom properties

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -916,6 +916,27 @@ function serialize_inline_component(node, component_name, context) {
 			);
 	}
 
+	if (node.type === 'SvelteComponent') {
+		const prev = fn;
+		fn = (node_id) => {
+			let component = b.call(
+				'$.component',
+				b.thunk(/** @type {import('estree').Expression} */ (context.visit(node.expression))),
+				b.arrow(
+					[b.id(component_name)],
+					b.block([
+						b.stmt(
+							context.state.options.dev
+								? b.call('$.validate_dynamic_component', b.thunk(prev(node_id)))
+								: prev(node_id)
+						)
+					])
+				)
+			);
+			return component;
+		};
+	}
+
 	if (Object.keys(custom_css_props).length > 0) {
 		const prev = fn;
 		fn = (node_id) =>
@@ -2938,7 +2959,6 @@ export const template_visitors = {
 				b.stmt(
 					b.call(
 						'$.component',
-						context.state.node,
 						// TODO use untrack here to not update when binding changes?
 						// Would align with Svelte 4 behavior, but it's arguably nicer/expected to update this
 						b.thunk(
@@ -2962,19 +2982,8 @@ export const template_visitors = {
 		context.state.template.push('<!>');
 
 		let component = serialize_inline_component(node, '$$component', context);
-		if (context.state.options.dev) {
-			component = b.stmt(b.call('$.validate_dynamic_component', b.thunk(b.block([component]))));
-		}
-		context.state.init.push(
-			b.stmt(
-				b.call(
-					'$.component',
-					context.state.node,
-					b.thunk(/** @type {import('estree').Expression} */ (context.visit(node.expression))),
-					b.arrow([b.id('$$component')], b.block([component]))
-				)
-			)
-		);
+
+		context.state.init.push(component);
 	},
 	Attribute(node, context) {
 		if (is_event_attribute(node)) {

packages/svelte/src/internal/client/dom/blocks/svelte-component.js

@@ -5,12 +5,11 @@ import { block, branch, pause_effect } from '../../reactivity/effects.js';
 /**
  * @template P
  * @template {(props: P) => void} C
- * @param {Comment} anchor
  * @param {() => C} get_component
  * @param {(component: C) => import('#client').Dom | void} render_fn
  * @returns {void}
  */
-export function component(anchor, get_component, render_fn) {
+export function component(get_component, render_fn) {
 	/** @type {C} */
 	let component;
 

packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties/_config.js

@@ -61,7 +61,7 @@ export default test({
 		component.componentName = 'Slider2';
 		assert_slider_2();
 		component.componentName = undefined;
-		assert.equal(window.document.querySelector('div'), null);
+		assert.equal(window.document.querySelector('div')?.firstElementChild, null);
 		component.componentName = 'Slider1';
 		assert_slider_1();
 	}

packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties2/_config.js

@@ -63,7 +63,7 @@ export default test({
 		component.componentName = 'Slider2';
 		assert_slider_2();
 		component.componentName = undefined;
-		assert.equal(window.document.querySelector('div'), null);
+		assert.equal(window.document.querySelector('div')?.firstElementChild, null);
 		component.componentName = 'Slider1';
 		assert_slider_1();
 	}

packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties2/_config.js

@@ -35,7 +35,6 @@ export default test({
 			const nest_track_color1 = target.querySelector('#nest-component1 span');
 			const nest_rail_color2 = target.querySelector('#nest-component2 p');
 			const nest_track_color2 = target.querySelector('#nest-component2 span');
-
 			assert_ok(rail_color1);
 			assert_ok(track_color1);
 			assert_ok(rail_color2);
@@ -96,7 +95,7 @@ export default test({
 		component.componentName = 'Slider2';
 		assert_slider_2();
 		component.componentName = undefined;
-		assert.equal(window.document.querySelector('div'), null);
+		assert.equal(window.document.querySelector('div')?.firstElementChild, null);
 		component.componentName = 'Slider1';
 		assert_slider_1();
 	}