diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index cadc1abbaa..62392fcb7e 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -1,4 +1,5 @@ import { has_prop } from './utils'; +import { normalize_style_value } from './style_manager'; // Track which nodes are claimed during hydration. Unclaimed nodes can then be removed from the DOM // at the end of hydration without touching the remaining nodes. @@ -530,11 +531,11 @@ export function set_input_type(input, type) { } } -export function set_style(node, key, value, important) { +export function set_style(node, key: string, value: unknown, important: boolean) { if (value === null) { node.style.removeProperty(key); } else { - node.style.setProperty(key, value, important ? 'important' : ''); + node.style.setProperty(key, normalize_style_value(value), important ? 'important' : ''); } } diff --git a/src/runtime/internal/ssr.ts b/src/runtime/internal/ssr.ts index bb1b1b8f73..7e67c4fa6e 100644 --- a/src/runtime/internal/ssr.ts +++ b/src/runtime/internal/ssr.ts @@ -2,6 +2,7 @@ import { set_current_component, current_component } from './lifecycle'; import { run_all, blank_object } from './utils'; import { boolean_attributes } from '../../shared/boolean_attributes'; export { is_void } from '../../shared/utils/names'; +import { normalize_style_value } from './style_manager'; export const invalid_attribute_name_character = /[\s'">/=\u{FDD0}-\u{FDEF}\u{FFFE}\u{FFFF}\u{1FFFE}\u{1FFFF}\u{2FFFE}\u{2FFFF}\u{3FFFE}\u{3FFFF}\u{4FFFE}\u{4FFFF}\u{5FFFE}\u{5FFFF}\u{6FFFE}\u{6FFFF}\u{7FFFE}\u{7FFFF}\u{8FFFE}\u{8FFFF}\u{9FFFE}\u{9FFFF}\u{AFFFE}\u{AFFFF}\u{BFFFE}\u{BFFFF}\u{CFFFE}\u{CFFFF}\u{DFFFE}\u{DFFFF}\u{EFFFE}\u{EFFFF}\u{FFFFE}\u{FFFFF}\u{10FFFE}\u{10FFFF}]/u; // https://html.spec.whatwg.org/multipage/syntax.html#attributes-2 @@ -186,14 +187,14 @@ export function add_classes(classes) { return classes ? ` class="${classes}"` : ''; } -function style_object_to_string(style_object) { +function style_object_to_string(style_object: { [key: string]: unknown }): string { return Object.keys(style_object) .filter(key => style_object[key]) - .map(key => `${key}: ${style_object[key]};`) + .map(key => `${key}: ${normalize_style_value(style_object[key])};`) .join(' '); } -export function add_styles(style_object) { +export function add_styles(style_object: { [key: string]: unknown }): string { const styles = style_object_to_string(style_object); return styles ? ` style="${styles}"` : ''; diff --git a/src/runtime/internal/style_manager.ts b/src/runtime/internal/style_manager.ts index 6907e5af02..6f83884e73 100644 --- a/src/runtime/internal/style_manager.ts +++ b/src/runtime/internal/style_manager.ts @@ -79,3 +79,7 @@ export function clear_rules() { managed_styles.clear(); }); } + +export function normalize_style_value(value: unknown): unknown { + return (typeof value === 'string' && value.slice(-1) === ';') ? value.slice(0, -1) : value; +}