From 4f2deb3ca12daa7ff16afd587a85d787a265a544 Mon Sep 17 00:00:00 2001
From: Thorsten Luenborg <t.luenborg@googlemail.com>
Date: Mon, 31 Jan 2022 12:50:13 +0100
Subject: [PATCH 1/2] fix(runtime-dom): styleprops with initial falsy values
 should not be added as styles.

fix: #5322
---
 packages/runtime-dom/__tests__/patchStyle.spec.ts | 13 ++++++++++++-
 packages/runtime-dom/src/modules/style.ts         |  1 +
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-dom/__tests__/patchStyle.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts
index 92b30aa5815..4e7d4e42b48 100644
--- 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
index a9cc67ba5e2..1816623bfeb 100644
--- 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 {

From 59a6eb5661736135d7a3eb14861697dcac6fbb51 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Wed, 13 Apr 2022 18:16:00 +0800
Subject: [PATCH 2/2] fix: do not handle false + move into lower branch

---
 packages/runtime-dom/__tests__/patchStyle.spec.ts | 4 ++--
 packages/runtime-dom/src/modules/style.ts         | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/runtime-dom/__tests__/patchStyle.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts
index 4e7d4e42b48..409d6936eaf 100644
--- a/packages/runtime-dom/__tests__/patchStyle.spec.ts
+++ b/packages/runtime-dom/__tests__/patchStyle.spec.ts
@@ -39,15 +39,15 @@ describe(`runtime-dom: style patching`, () => {
     const el = document.createElement('div')
     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 }
+      { color: null, borderRadius: undefined }
     )
     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
index 1816623bfeb..f4924ea2ec6 100644
--- a/packages/runtime-dom/src/modules/style.ts
+++ b/packages/runtime-dom/src/modules/style.ts
@@ -42,10 +42,10 @@ 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 {
+    if (val == null) val = ''
     if (name.startsWith('--')) {
       // custom property definition
       style.setProperty(name, val)