From 28371cdcc6d31a1c115addb2fffae53151d40671 Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Tue, 19 Apr 2022 21:15:01 +0800 Subject: [PATCH 1/7] fix(runtime-dom): patchstyle should not overwritten the same value --- packages/runtime-dom/__tests__/patchStyle.spec.ts | 10 ++++++++++ packages/runtime-dom/src/modules/style.ts | 14 ++++++++++---- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/runtime-dom/__tests__/patchStyle.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts index 409d6936eaf..622e8961162 100644 --- a/packages/runtime-dom/__tests__/patchStyle.spec.ts +++ b/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() { diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts index f4924ea2ec6..cf9398b8afc 100644 --- a/packages/runtime-dom/src/modules/style.ts +++ b/packages/runtime-dom/src/modules/style.ts @@ -7,21 +7,27 @@ 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) { + if (next[key] !== prev[key]) { + setStyle(style, key, next[key]) + } + } + } else { + for (const key in next) { + setStyle(style, key, next[key]) + } } } else { const currentDisplay = style.display if (isCssString) { if (prev !== next) { - style.cssText = next as string + style.cssText = next } } else if (prev) { el.removeAttribute('style') From 2e4916da690b06cbb17f190c15116f1fa8474334 Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Fri, 22 Apr 2022 13:39:08 +0800 Subject: [PATCH 2/7] fix: update judgment logic --- packages/runtime-dom/src/modules/style.ts | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts index cf9398b8afc..c280159507d 100644 --- a/packages/runtime-dom/src/modules/style.ts +++ b/packages/runtime-dom/src/modules/style.ts @@ -1,5 +1,5 @@ import { isString, hyphenate, capitalize, isArray } from '@vue/shared' -import { camelize } from '@vue/runtime-core' +import { camelize, isProxy } from '@vue/runtime-core' type Style = string | Record | null @@ -7,21 +7,23 @@ 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) { + if ( + !isProxy(next) && + prev && + !isString(prev) && + prev[key] === next[key] + ) { + continue + } + 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) { - if (next[key] !== prev[key]) { - setStyle(style, key, next[key]) - } - } - } else { - for (const key in next) { - setStyle(style, key, next[key]) - } } } else { const currentDisplay = style.display From 43925dbe4fda008ca5b94859ca94b7a7691bc095 Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Fri, 22 Apr 2022 22:23:49 +0800 Subject: [PATCH 3/7] fix: store style --- packages/runtime-dom/src/modules/style.ts | 9 ++------- packages/shared/src/normalizeProp.ts | 7 +++++-- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts index c280159507d..e2e933748a5 100644 --- a/packages/runtime-dom/src/modules/style.ts +++ b/packages/runtime-dom/src/modules/style.ts @@ -1,5 +1,5 @@ import { isString, hyphenate, capitalize, isArray } from '@vue/shared' -import { camelize, isProxy } from '@vue/runtime-core' +import { camelize } from '@vue/runtime-core' type Style = string | Record | null @@ -8,12 +8,7 @@ export function patchStyle(el: Element, prev: Style, next: Style) { const isCssString = isString(next) if (next && !isCssString) { for (const key in next) { - if ( - !isProxy(next) && - prev && - !isString(prev) && - prev[key] === next[key] - ) { + if (prev && !isString(prev) && prev[key] === next[key]) { continue } setStyle(style, key, next[key]) diff --git a/packages/shared/src/normalizeProp.ts b/packages/shared/src/normalizeProp.ts index cab8090692e..4e54b650ec8 100644 --- a/packages/shared/src/normalizeProp.ts +++ b/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 @@ -23,7 +23,10 @@ export function normalizeStyle( } else if (isString(value)) { return value } else if (isObject(value)) { - return value + // store normalized style under a different key for next diff + // make sure to clone it if it's reactive, since the user likely wants + // to mutate it. + return extend({}, value) } } From 03757ff257311c90e5f439b908739686736baf1c Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Fri, 22 Apr 2022 22:35:14 +0800 Subject: [PATCH 4/7] chore: remove redundant comments --- packages/shared/src/normalizeProp.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/shared/src/normalizeProp.ts b/packages/shared/src/normalizeProp.ts index 4e54b650ec8..5e67101e1f8 100644 --- a/packages/shared/src/normalizeProp.ts +++ b/packages/shared/src/normalizeProp.ts @@ -23,7 +23,6 @@ export function normalizeStyle( } else if (isString(value)) { return value } else if (isObject(value)) { - // store normalized style under a different key for next diff // make sure to clone it if it's reactive, since the user likely wants // to mutate it. return extend({}, value) From e467d4d93adf060f97511d3eb2db7ad24778b1c4 Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Fri, 22 Apr 2022 22:37:14 +0800 Subject: [PATCH 5/7] chore: update test --- packages/runtime-dom/__tests__/patchStyle.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-dom/__tests__/patchStyle.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts index 622e8961162..ba5bea3b774 100644 --- a/packages/runtime-dom/__tests__/patchStyle.spec.ts +++ b/packages/runtime-dom/__tests__/patchStyle.spec.ts @@ -87,7 +87,7 @@ describe(`runtime-dom: style patching`, () => { expect(el.style.cssText).toBe('') }) - it('should not overwritten the same value', () => { + it('should not update style if its not change', () => { const el = document.createElement('div') patchProp(el, 'style', {}, { left: '10px' }) expect(el.style.getPropertyValue('left')).toBe('10px') From 5bc30479956d443d8b1acefe8f2ddb7cd2b4d34e Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Tue, 24 Jan 2023 08:16:42 +0800 Subject: [PATCH 6/7] fix: update patchStyle --- packages/runtime-dom/src/modules/style.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts index 0a09a5a0b91..30fbe561649 100644 --- a/packages/runtime-dom/src/modules/style.ts +++ b/packages/runtime-dom/src/modules/style.ts @@ -15,6 +15,9 @@ export function patchStyle(el: Element, prev: Style, next: Style) { } } for (const key in next) { + if (prev && !isString(prev) && prev[key] === next[key]) { + continue + } setStyle(style, key, next[key]) } } else { From 4846db038ffb5d901f823b66efa86de1feb0dcdf Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Mon, 30 Jan 2023 14:35:18 +0800 Subject: [PATCH 7/7] fix: modify next update judgment --- packages/runtime-dom/__tests__/patchStyle.spec.ts | 8 ++++++++ packages/runtime-dom/src/modules/style.ts | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/runtime-dom/__tests__/patchStyle.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts index b0b8ad0cdae..5868c9d75ed 100644 --- a/packages/runtime-dom/__tests__/patchStyle.spec.ts +++ b/packages/runtime-dom/__tests__/patchStyle.spec.ts @@ -97,6 +97,14 @@ describe(`runtime-dom: style patching`, () => { expect(el.style.getPropertyValue('left')).toBe('20px') }) + it('clearing the border should not causes other border-related style update errors', () => { + const el = document.createElement('div') + patchProp(el, 'style', {}, { border: '10px solid red','border-bottom': '10px solid blue' }) + expect(el.style.borderBottom).toBe('10px solid blue') + patchProp(el, 'style', { border: '10px solid red','border-bottom': '10px solid blue' }, { 'border-right': '10px solid red','border-bottom': '10px solid blue' }) + expect(el.style.borderBottom).toBe('10px solid blue') + }) + it('should warn for trailing semicolons', () => { const el = document.createElement('div') patchProp(el, 'style', null, { color: 'red;' }) diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts index 30fbe561649..e2f702c1b8b 100644 --- a/packages/runtime-dom/src/modules/style.ts +++ b/packages/runtime-dom/src/modules/style.ts @@ -15,7 +15,7 @@ export function patchStyle(el: Element, prev: Style, next: Style) { } } for (const key in next) { - if (prev && !isString(prev) && prev[key] === next[key]) { + if (prev && !isString(prev) && prev[key] === next[key] && style[key as keyof CSSStyleDeclaration]) { continue } setStyle(style, key, next[key])