simplify

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

@@ -2,57 +2,54 @@ import { namespace_svg } from '../../../../constants.js';
 import { current_hydration_fragment, hydrate_block_anchor, hydrating } from '../../hydration.js';
 import { empty } from '../../operations.js';
 import { render_effect } from '../../reactivity/computations.js';
-import { insert, remove } from '../../reconciler.js';
+import { insert } from '../../reconciler.js';
-import { push_destroy_fn } from '../../runtime.js';
 
 /**
  * @param {Element | Text | Comment} anchor
  * @param {boolean} is_html
- * @param {() => Record<string, string>} props
+ * @param {() => Record<string, string>} get_props
  * @param {(anchor: Element | Text | Comment) => any} component
  * @returns {void}
  */
-export function css_props(anchor, is_html, props, component) {
+export function css_props(anchor, is_html, get_props, component) {
 	hydrate_block_anchor(anchor);
 
 	/** @type {HTMLElement | SVGElement} */
-	let tag;
+	let element;
 
 	/** @type {Text | Comment} */
 	let component_anchor;
+
 	if (hydrating) {
 		// Hydration: css props element is surrounded by a ssr comment ...
-		tag = /** @type {HTMLElement | SVGElement} */ (current_hydration_fragment[0]);
+		element = /** @type {HTMLElement | SVGElement} */ (current_hydration_fragment[0]);
 		// ... and the child(ren) of the css props element is also surround by a ssr comment
-		component_anchor = /** @type {Comment} */ (tag.firstChild);
+		component_anchor = /** @type {Comment} */ (element.firstChild);
 	} else {
+		// TODO surely we need to determine this at runtime?
 		if (is_html) {
-			tag = document.createElement('div');
+			element = document.createElement('div');
-			tag.style.display = 'contents';
+			element.style.display = 'contents';
 		} else {
-			tag = document.createElementNS(namespace_svg, 'g');
+			element = document.createElementNS(namespace_svg, 'g');
 		}
-		insert(tag, null, anchor);
+
+		insert(element, null, anchor);
 		component_anchor = empty();
-		tag.appendChild(component_anchor);
+		element.appendChild(component_anchor);
 	}
+
 	component(component_anchor);
 
-	/** @type {Record<string, string>} */
+	render_effect(() => {
-	let current_props = {};
+		const props = get_props();
-	const effect = render_effect(() => {
+
-		const next_props = props();
+		for (const key in props) {
-		for (const key in current_props) {
+			if (props[key] === undefined) {
-			if (!(key in next_props)) {
+				element.style.removeProperty(key);
-				tag.style.removeProperty(key);
+			} else {
+				element.style.setProperty(key, props[key]);
 			}
 		}
-		for (const key in next_props) {
-			tag.style.setProperty(key, next_props[key]);
-		}
-		current_props = next_props;
-	});
-	push_destroy_fn(effect, () => {
-		remove(tag);
 	});
 }