fix(runtime-dom): styleprops with initial falsy values should not be …

…added as styles. fix: #5322
vuejs · Apr 13, 2022 · 4f2deb3 · 4f2deb3
1 parent f4d2c9f
commit 4f2deb3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/runtime-dom/__tests__/patchStyle.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts
@@ -37,7 +37,18 @@ describe(`runtime-dom: style patching`, () => {
 
   it('remove if falsy value', () => {
     const el = document.createElement('div')
-    patchProp(el, 'style', { color: 'red' }, { color: undefined })
+    patchProp(el, 'style', null, {
+      color: undefined,
+      '--color': false,
+      borderRadius: null
+    })
+    expect(el.style.cssText.replace(/\s/g, '')).toBe('')
+    patchProp(
+      el,
+      'style',
+      { color: 'red' },
+      { color: undefined, '--color': false, borderRadius: false }
+    )
     expect(el.style.cssText.replace(/\s/g, '')).toBe('')
   })
 

diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts
@@ -42,6 +42,7 @@ function setStyle(
   name: string,
   val: string | string[]
 ) {
+  val = val == null || (val as any) === false ? '' : val
   if (isArray(val)) {
     val.forEach(v => setStyle(style, name, v))
   } else {