fix(runtime-dom): style update error when component use shorthand properties (#7425)

* fix(runtime-dom): style update error when component use shorthand properties

* test(runtime-dom): style update with shorthand properties

diff --git a/packages/runtime-dom/__tests__/patchStyle.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts
index ba5d795504f00d8e8595732bf0f80f19311f59f4..4199293abefd5e72fb6e5bf743cb7ba2701da34c 100644 (file)
--- a/packages/runtime-dom/__tests__/patchStyle.spec.ts
+++ b/packages/runtime-dom/__tests__/patchStyle.spec.ts
@@ -106,6 +106,18 @@ describe(`runtime-dom: style patching`, () => {
     expect(el.style.getPropertyValue('--custom')).toBe('100\\;')
   })
 
+  it('shorthand properties', () => {
+    const el = document.createElement('div')
+    patchProp(
+      el as any,
+      'style',
+      { borderBottom: '1px solid red' },
+      { border: '1px solid green' }
+    )
+    expect(el.style.border).toBe('1px solid green')
+    expect(el.style.borderBottom).toBe('1px solid green')
+  })
+
   // JSDOM doesn't support custom properties on style object so we have to
   // mock it here.
   function mockElementWithStyle() {

diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts
index 203f55779690b2b01da9598e54a56c797bde39db..4eeeffe96b941f348d50e588b9517eb99c5a43e2 100644 (file)
--- a/packages/runtime-dom/src/modules/style.ts
+++ b/packages/runtime-dom/src/modules/style.ts
@@ -7,9 +7,6 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
   const style = (el as HTMLElement).style
   const isCssString = isString(next)
   if (next && !isCssString) {
-    for (const key in next) {
-      setStyle(style, key, next[key])
-    }
     if (prev && !isString(prev)) {
       for (const key in prev) {
         if (next[key] == null) {
@@ -17,6 +14,9 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
         }
       }
     }
+    for (const key in next) {
+      setStyle(style, key, next[key])
+    }
   } else {
     const currentDisplay = style.display
     if (isCssString) {