Repository: sveltejs/svelte
File: packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js (JavaScript)

Code before:
		if (attribute.metadata.expression.has_state && has_call) {
			const id = b.id(state.scope.generate('class_derived'));
			state.init.push(b.const(id, create_derived(state, b.thunk(value))));
			value = b.call('$.get', id);
			has_call = false;
		}
		update = b.stmt(
			b.call(
				is_svg ? '$.set_svg_class' : is_mathml ? '$.set_mathml_class' : '$.set_class',
				node_id,
				value
			)
		);
	} else if (name === 'value') {
		update = b.stmt(b.call('$.set_value', node_id, value));
	} else if (name === 'checked') {
		update = b.stmt(b.call('$.set_checked', node_id, value));
	} else if (is_dom_property(name)) {
		update = b.stmt(b.assignment('=', b.member(node_id, name), value));
	} else {
		if (name === 'style' && attribute.metadata.expression.has_state && has_call) {
			const id = b.id(state.scope.generate('style_derived'));
			state.init.push(b.const(id, create_derived(state, b.thunk(value))));
			value = b.call('$.get', id);
			has_call = false;
		}
		const callee = name.startsWith('xlink') ? '$.set_xlink_attribute' : '$.set_attribute';
		update = b.stmt(
			b.call(
				callee,
				node_id,
				b.literal(name),
				value,
				is_ignored(element, 'hydration_attribute_changed') && b.true
			)
		);
	}

	const inlinable_expression =
		attribute.value === true
			? false // not an expression
			: is_inlinable_expression(
					Array.isArray(attribute.value) ? attribute.value : [attribute.value],
					context.state
				);
	if (attribute.metadata.expression.has_state) {
		if (has_call) {
			state.init.push(build_update(update));
		} else {
			state.update.push(update);
		}

Review comment (suggestion):
```suggestion
			// ensure we're not creating a separate template effect for this so that
			// potential style directives are added to the same effect and therefore always apply
			const id = b.id(state.scope.generate('style_derived'));
```

Code after:
		if (attribute.metadata.expression.has_state && has_call) {
			// ensure we're not creating a separate template effect for this so that
			// potential class directives are added to the same effect and therefore always apply
			const id = b.id(state.scope.generate('class_derived'));
			state.init.push(b.const(id, create_derived(state, b.thunk(value))));
			value = b.call('$.get', id);
			has_call = false;
		}
		update = b.stmt(
			b.call(
				is_svg ? '$.set_svg_class' : is_mathml ? '$.set_mathml_class' : '$.set_class',
				node_id,
				value
			)
		);
	} else if (name === 'value') {
		update = b.stmt(b.call('$.set_value', node_id, value));
	} else if (name === 'checked') {
		update = b.stmt(b.call('$.set_checked', node_id, value));
	} else if (is_dom_property(name)) {
		update = b.stmt(b.assignment('=', b.member(node_id, name), value));
	} else {
		if (name === 'style' && attribute.metadata.expression.has_state && has_call) {
			// ensure we're not creating a separate template effect for this so that
			// potential style directives are added to the same effect and therefore always apply
			const id = b.id(state.scope.generate('style_derived'));
			state.init.push(b.const(id, create_derived(state, b.thunk(value))));
			value = b.call('$.get', id);
			has_call = false;
		}
		const callee = name.startsWith('xlink') ? '$.set_xlink_attribute' : '$.set_attribute';
		update = b.stmt(
			b.call(
				callee,
				node_id,
				b.literal(name),
				value,
				is_ignored(element, 'hydration_attribute_changed') && b.true
			)
		);
	}

	const inlinable_expression =
		attribute.value === true
			? false // not an expression
			: is_inlinable_expression(
					Array.isArray(attribute.value) ? attribute.value : [attribute.value],
					context.state
				);
	if (attribute.metadata.expression.has_state) {
		if (has_call) {