From 70f0a6a9dcdebf7c2d06b9c8ddc28e6b9b272835 Mon Sep 17 00:00:00 2001 From: zhoulixiang <18366276315@163.com> Date: Wed, 21 Feb 2024 12:32:48 +0000 Subject: [PATCH 1/3] fix: should clear previous css string value --- packages/runtime-dom/__tests__/patchStyle.spec.ts | 9 +++++++++ packages/runtime-dom/src/modules/style.ts | 14 +++++++++++--- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/packages/runtime-dom/__tests__/patchStyle.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts index e7cd0984a19..d8e879fb05c 100644 --- a/packages/runtime-dom/__tests__/patchStyle.spec.ts +++ b/packages/runtime-dom/__tests__/patchStyle.spec.ts @@ -158,4 +158,13 @@ describe(`runtime-dom: style patching`, () => { ) expect(el.style.display).toBe('flex') }) + + it('should clear previous css string value', async () => { + const el = document.createElement('div') + patchProp(el, 'style', {}, 'color:red') + expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red;') + + patchProp(el, 'style', 'color:red', { fontSize: '12px' }) + expect(el.style.cssText.replace(/\s/g, '')).toBe('font-size:12px;') + }) }) diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts index 9f897a6b2b0..e53864092d4 100644 --- a/packages/runtime-dom/src/modules/style.ts +++ b/packages/runtime-dom/src/modules/style.ts @@ -13,9 +13,17 @@ export function patchStyle(el: Element, prev: Style, next: Style) { const currentDisplay = style.display let hasControlledDisplay = false if (next && !isCssString) { - if (prev && !isString(prev)) { - for (const key in prev) { - if (next[key] == null) { + if (prev) { + if (!isString(prev)) { + for (const key in prev) { + if (next[key] == null) { + setStyle(style, key, '') + } + } + } else { + const prevStyles = prev.split(';') + for (const prevStyle of prevStyles) { + const key = prevStyle.split(':')[0]?.trim() setStyle(style, key, '') } } From 1c5cef10a7e9d3db1daf9cd7e1c2b7f940b0a6a6 Mon Sep 17 00:00:00 2001 From: zhoulixiang <18366276315@163.com> Date: Wed, 21 Feb 2024 12:36:22 +0000 Subject: [PATCH 2/3] fix: should clear previous css string value --- 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 d8e879fb05c..8b2765e2149 100644 --- a/packages/runtime-dom/__tests__/patchStyle.spec.ts +++ b/packages/runtime-dom/__tests__/patchStyle.spec.ts @@ -159,7 +159,7 @@ describe(`runtime-dom: style patching`, () => { expect(el.style.display).toBe('flex') }) - it('should clear previous css string value', async () => { + it('should clear previous css string value', () => { const el = document.createElement('div') patchProp(el, 'style', {}, 'color:red') expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red;') From 4060b04efeaf993ce9837ffc5c86dc1998c7e6ab Mon Sep 17 00:00:00 2001 From: Evan You Date: Sun, 25 Feb 2024 20:51:02 +0800 Subject: [PATCH 3/3] refactor: simplify implementation --- packages/runtime-dom/src/modules/style.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts index e53864092d4..11f7ce1c027 100644 --- a/packages/runtime-dom/src/modules/style.ts +++ b/packages/runtime-dom/src/modules/style.ts @@ -21,10 +21,11 @@ export function patchStyle(el: Element, prev: Style, next: Style) { } } } else { - const prevStyles = prev.split(';') - for (const prevStyle of prevStyles) { - const key = prevStyle.split(':')[0]?.trim() - setStyle(style, key, '') + for (const prevStyle of prev.split(';')) { + const key = prevStyle.slice(0, prevStyle.indexOf(':')).trim() + if (next[key] == null) { + setStyle(style, key, '') + } } } }