fix: style directive not reactive in {#each} loop (#7140)

Author: tanhauhau

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -199,7 +199,7 @@ export default class ElementWrapper extends Wrapper {
 		}
 
 		// add directive and handler dependencies
-		[node.animation, node.outro, ...node.actions, ...node.classes].forEach(directive => {
+		[node.animation, node.outro, ...node.actions, ...node.classes, ...node.styles].forEach(directive => {
 			if (directive && directive.expression) {
 				block.add_dependencies(directive.expression.dependencies);
 			}

test/runtime/samples/inline-style-directive-shorthand/_config.js

@@ -1,18 +1,25 @@
 export default {
 	html: `
 		<p style="color: red;"></p>
+		<p style="color: red;"></p>
 	`,
 
 	test({ assert, component, target, window }) {
-		const p = target.querySelector('p');
+		const [p1, p2] = target.querySelectorAll('p');
 
-		let styles = window.getComputedStyle(p);
-		assert.equal(styles.color, 'red');
+		assert.equal(window.getComputedStyle(p1).color, 'red');
+		assert.equal(window.getComputedStyle(p2).color, 'red');
 
 		component.color = 'blue';
-		assert.htmlEqual(target.innerHTML, '<p style="color: blue;"></p>');
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p style="color: blue;"></p>
+			<p style="color: blue;"></p>
+		`
+		);
 
-		styles = window.getComputedStyle(p);
-		assert.equal(styles.color, 'blue');
+		assert.equal(window.getComputedStyle(p1).color, 'blue');
+		assert.equal(window.getComputedStyle(p2).color, 'blue');
 	}
 };

test/runtime/samples/inline-style-directive-shorthand/main.svelte

@@ -3,3 +3,7 @@
 </script>
 
 <p style:color />
+
+{#each [1] as _}
+	<p style:color />
+{/each}