From b7cfa6f53952daced312862fbb3a88c86e42a77e Mon Sep 17 00:00:00 2001
From: yurj26 <54402889+yurj26@users.noreply.github.com>
Date: Mon, 9 Jan 2023 22:16:08 +0800
Subject: [PATCH] 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
---
 packages/runtime-dom/__tests__/patchStyle.spec.ts | 12 ++++++++++++
 packages/runtime-dom/src/modules/style.ts         |  6 +++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/runtime-dom/__tests__/patchStyle.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts
index ba5d795504f..4199293abef 100644
--- 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 203f5577969..4eeeffe96b9 100644
--- 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) {