fix(runtime-dom): should not update style if its not change

packages/runtime-dom/__tests__/patchStyle.spec.ts

@@ -87,6 +87,16 @@ describe(`runtime-dom: style patching`, () => {
     expect(el.style.cssText).toBe('')
   })
 
+  it('should not overwritten the same value', () => {
+    const el = document.createElement('div')
+    patchProp(el, 'style', {}, { left: '10px' })
+    expect(el.style.getPropertyValue('left')).toBe('10px')
+    el.style.left = '20px'
+    expect(el.style.getPropertyValue('left')).toBe('20px')
+    patchProp(el, 'style', { left: '10px' }, { left: '10px' })
+    expect(el.style.getPropertyValue('left')).toBe('20px')
+  })
+
   // JSDOM doesn't support custom properties on style object so we have to
   // mock it here.
   function mockElementWithStyle() {

packages/runtime-dom/src/modules/style.ts

@@ -8,6 +8,9 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
   const isCssString = isString(next)
   if (next && !isCssString) {
     for (const key in next) {
+      if (prev && !isString(prev) && prev[key] === next[key]) {
+        continue
+      }
       setStyle(style, key, next[key])
     }
     if (prev && !isString(prev)) {
@@ -21,7 +24,7 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
     const currentDisplay = style.display
     if (isCssString) {
       if (prev !== next) {
-        style.cssText = next as string
+        style.cssText = next
       }
     } else if (prev) {
       el.removeAttribute('style')

packages/shared/src/normalizeProp.ts

@@ -1,4 +1,4 @@
-import { isArray, isString, isObject, hyphenate } from './'
+import { isArray, isString, isObject, hyphenate, extend } from './'
 import { isNoUnitNumericStyleProp } from './domAttrConfig'
 
 export type NormalizedStyle = Record<string, string | number>
@@ -23,7 +23,9 @@ export function normalizeStyle(
   } else if (isString(value)) {
     return value
   } else if (isObject(value)) {
-    return value
+    // make sure to clone it if it's reactive, since the user likely wants
+    // to mutate it.
+    return extend({}, value)
   }
 }