Skip to content

Commit d5a1822

Browse files
authored
fix: style directive not updating when style attribute is present and style directive is updated via an object prop. fixes #9185 (#9187)
fixes #9185. I narrowed down the issue to the bug surfacing when we use object properties to update style attributes and directives. This fix removes the size check (because a single object will be of size 1 but can affect n attributes/directives via its properties). In addition, the order of the OR is switched as the earlier condition has some reactive assignments which are not run in the current order when style_changed_var is truthy.
1 parent 115ea1f commit d5a1822

File tree

4 files changed

+38
-5
lines changed

4 files changed

+38
-5
lines changed

.changeset/chilled-tigers-tie.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': patch
3+
---
4+
5+
fix: update style directive when style attribute is present and is updated via an object prop

packages/svelte/src/compiler/compile/render_dom/wrappers/Element/index.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1240,11 +1240,7 @@ export default class ElementWrapper extends Wrapper {
12401240
}
12411241
if (this.dynamic_style_dependencies.size > 0) {
12421242
maybe_create_style_changed_var();
1243-
// If all dependencies are same as the style attribute dependencies, then we can skip the dirty check
1244-
condition =
1245-
all_deps.size === this.dynamic_style_dependencies.size
1246-
? style_changed_var
1247-
: x`${style_changed_var} || ${condition}`;
1243+
condition = x`${condition} || ${style_changed_var}`;
12481244
}
12491245
block.chunks.update.push(b`
12501246
if (${condition}) {
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export default {
2+
html: `
3+
<p style="background-color: green; font-size: 12px;"></p>
4+
`,
5+
6+
test({ assert, target, window, component }) {
7+
const p = target.querySelector('p');
8+
const styles = window.getComputedStyle(p);
9+
assert.equal(styles.backgroundColor, 'green');
10+
assert.equal(styles.fontSize, '12px');
11+
12+
{
13+
component.modify = true;
14+
const p = target.querySelector('p');
15+
const styles = window.getComputedStyle(p);
16+
assert.equal(styles.backgroundColor, 'green');
17+
assert.equal(styles.fontSize, '50px');
18+
}
19+
}
20+
};
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script>
2+
let settings = {
3+
fontSize: 12,
4+
bg: 'green'
5+
};
6+
export let modify = false;
7+
$: if (modify) {
8+
settings.fontSize = 50;
9+
}
10+
</script>
11+
12+
<p style:font-size="{settings.fontSize}px" style="background-color: {settings.bg}" />

0 commit comments

Comments
 (0)