fix(runtime-dom): style update error when component use shorthand pro…

…perties (#7425) * fix(runtime-dom): style update error when component use shorthand properties * test(runtime-dom): style update with shorthand properties
vuejs · Jan 9, 2023 · b7cfa6f · b7cfa6f
1 parent 686c829
commit b7cfa6f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git 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
@@ -7,16 +7,16 @@ 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) {
           setStyle(style, key, '')
         }
       }
     }
+    for (const key in next) {
+      setStyle(style, key, next[key])
+    }
   } else {
     const currentDisplay = style.display
     if (isCssString) {