fix: strip trailing semicolons from style directive values before setProperty

When a reactive style directive value contains a trailing semicolon (e.g.
`style:background={`conic-gradient(...);'`}`), the initial render works
because it goes through cssText which tolerates semicolons, but subsequent
reactive updates call el.style.setProperty() which silently rejects values
containing semicolons, leaving the style unchanged.

Strip trailing semicolons from the value in update_styles before calling
setProperty, making reactive updates consistent with the initial render.

Fixes #18182
pull/18200/head
OfirHaf 3 months ago
parent af5b9724ab
commit 81458c0696

@ -15,7 +15,10 @@ function update_styles(dom, prev = {}, next, priority) {
if (next[key] == null) {
dom.style.removeProperty(key);
} else {
dom.style.setProperty(key, value, priority);
// setProperty rejects values with trailing semicolons; strip them so that
// reactive updates behave consistently with the initial cssText assignment
var str_value = String(value).replace(/;+\s*$/, '');
dom.style.setProperty(key, str_value, priority);
}
}
}

Loading…
Cancel
Save