feat: Little improvement to set_style() (#13836)

* improvement to set_style()

* add __styles to Element prototype

Author: adiguba

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

@@ -291,13 +291,7 @@ export function RegularElement(node, context) {
 
 	// class/style directives must be applied last since they could override class/style attributes
 	build_class_directives(class_directives, node_id, context, is_attributes_reactive);
-	build_style_directives(
-		style_directives,
-		node_id,
-		context,
-		is_attributes_reactive,
-		lookup.has('style') || has_spread
-	);
+	build_style_directives(style_directives, node_id, context, is_attributes_reactive);
 
 	// Apply the src and loading attributes for <img> elements after the element is appended to the document
 	if (node.name === 'img' && (has_spread || lookup.has('loading'))) {

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

@@ -109,7 +109,7 @@ export function SvelteElement(node, context) {
 
 	// class/style directives must be applied last since they could override class/style attributes
 	build_class_directives(class_directives, element_id, inner_context, is_attributes_reactive);
-	build_style_directives(style_directives, element_id, inner_context, is_attributes_reactive, true);
+	build_style_directives(style_directives, element_id, inner_context, is_attributes_reactive);
 
 	const get_tag = b.thunk(/** @type {Expression} */ (context.visit(node.tag)));
 

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

@@ -94,14 +94,12 @@ export function build_set_attributes(
  * @param {Identifier} element_id
  * @param {ComponentContext} context
  * @param {boolean} is_attributes_reactive
- * @param {boolean} force_check Should be `true` if we can't rely on our cached value, because for example there's also a `style` attribute
  */
 export function build_style_directives(
 	style_directives,
 	element_id,
 	context,
-	is_attributes_reactive,
-	force_check
+	is_attributes_reactive
 ) {
 	const state = context.state;
 
@@ -126,8 +124,7 @@ export function build_style_directives(
 				element_id,
 				b.literal(directive.name),
 				value,
-				/** @type {Expression} */ (directive.modifiers.includes('important') ? b.true : undefined),
-				force_check ? b.true : undefined
+				/** @type {Expression} */ (directive.modifiers.includes('important') ? b.true : undefined)
 			)
 		);
 

packages/svelte/src/internal/client/dom/elements/attributes.js

@@ -105,6 +105,11 @@ export function set_attribute(element, attribute, value, skip_warning) {
 
 	if (attributes[attribute] === (attributes[attribute] = value)) return;
 
+	if (attribute === 'style' && '__styles' in element) {
+		// reset styles to force style: directive to update
+		element.__styles = {};
+	}
+
 	if (attribute === 'loading') {
 		// @ts-expect-error
 		element[LOADING_ATTR_SYMBOL] = value;
@@ -289,6 +294,10 @@ export function set_attributes(
 				}
 			}
 		}
+		if (key === 'style' && '__styles' in element) {
+			// reset styles to force style: directive to update
+			element.__styles = {};
+		}
 	}
 
 	// On the first run, ensure that events are added after bindings so

packages/svelte/src/internal/client/dom/elements/style.js

@@ -3,23 +3,20 @@
  * @param {string} key
  * @param {string} value
  * @param {boolean} [important]
- * @param {boolean} [force_check] Should be `true` if we can't rely on our cached value, because for example there's also a `style` attribute
  */
-export function set_style(dom, key, value, important, force_check) {
+export function set_style(dom, key, value, important) {
 	// @ts-expect-error
-	var attributes = (dom.__attributes ??= {});
-	var style = dom.style;
-	var style_key = 'style-' + key;
+	var styles = (dom.__styles ??= {});
 
-	if (attributes[style_key] === value && (!force_check || style.getPropertyValue(key) === value)) {
+	if (styles[key] === value) {
 		return;
 	}
 
-	attributes[style_key] = value;
+	styles[key] = value;
 
 	if (value == null) {
-		style.removeProperty(key);
+		dom.style.removeProperty(key);
 	} else {
-		style.setProperty(key, value, important ? 'important' : '');
+		dom.style.setProperty(key, value, important ? 'important' : '');
 	}
 }

packages/svelte/src/internal/client/dom/operations.js

@@ -44,6 +44,8 @@ export function init_operations() {
 	// @ts-expect-error
 	element_prototype.__attributes = null;
 	// @ts-expect-error
+	element_prototype.__styles = null;
+	// @ts-expect-error
 	element_prototype.__e = undefined;
 
 	// @ts-expect-error