From 8912c9f7f0f318e0b986e4020efb57f1a1ceee13 Mon Sep 17 00:00:00 2001
From: Yuchao Wu <yuchao.sydneyuni@gmail.com>
Date: Sat, 25 Mar 2023 16:28:30 +1100
Subject: [PATCH 1/2] fix(type): Allow undefined in StyleValue Array

close #7954
---
 packages/dts-test/tsx.test-d.tsx | 3 +++
 packages/runtime-dom/src/jsx.ts  | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/dts-test/tsx.test-d.tsx b/packages/dts-test/tsx.test-d.tsx
index 04915a9673f..5fea7b4951c 100644
--- a/packages/dts-test/tsx.test-d.tsx
+++ b/packages/dts-test/tsx.test-d.tsx
@@ -16,6 +16,9 @@ expectType<JSX.Element>(<div style={[{ color: 'red' }]} />)
 expectType<JSX.Element>(
   <div style={[{ color: 'red' }, [{ fontSize: '1em' }]]} />
 )
+expectType<JSX.Element>(
+  <div style={[undefined, {background: 'green'}]} />
+)
 
 // @ts-expect-error unknown prop
 ;<div foo="bar" />
diff --git a/packages/runtime-dom/src/jsx.ts b/packages/runtime-dom/src/jsx.ts
index d103278c6e6..bfcbe3e5a39 100644
--- a/packages/runtime-dom/src/jsx.ts
+++ b/packages/runtime-dom/src/jsx.ts
@@ -234,7 +234,7 @@ interface AriaAttributes {
 }
 
 // Vue's style normalization supports nested arrays
-export type StyleValue = string | CSSProperties | Array<StyleValue>
+export type StyleValue = undefined | string | CSSProperties | Array<StyleValue>
 
 export interface HTMLAttributes extends AriaAttributes, EventHandlers<Events> {
   innerHTML?: string

From 924059d341dab281e0b2074b47c3fd08e6395ea7 Mon Sep 17 00:00:00 2001
From: Yuchao Wu <yuchao.sydneyuni@gmail.com>
Date: Wed, 29 Mar 2023 09:46:46 +1100
Subject: [PATCH 2/2] support falsy values null & false

---
 packages/dts-test/tsx.test-d.tsx | 26 +++++++++++++++++++++++++-
 packages/runtime-dom/src/jsx.ts  |  2 +-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/dts-test/tsx.test-d.tsx b/packages/dts-test/tsx.test-d.tsx
index 5fea7b4951c..47555a03c0b 100644
--- a/packages/dts-test/tsx.test-d.tsx
+++ b/packages/dts-test/tsx.test-d.tsx
@@ -16,10 +16,34 @@ expectType<JSX.Element>(<div style={[{ color: 'red' }]} />)
 expectType<JSX.Element>(
   <div style={[{ color: 'red' }, [{ fontSize: '1em' }]]} />
 )
+
+// #7955
 expectType<JSX.Element>(
-  <div style={[undefined, {background: 'green'}]} />
+  <div style={[undefined, '', null, false]} />
 )
 
+expectType<JSX.Element>(
+  <div style={undefined} />
+)
+
+expectType<JSX.Element>(
+  <div style={null} />
+)
+
+expectType<JSX.Element>(
+  <div style={''} />
+)
+
+expectType<JSX.Element>(
+  <div style={false} />
+)
+
+// @ts-expect-error
+;<div style={[0]} />
+
+// @ts-expect-error
+;<div style={0} />
+
 // @ts-expect-error unknown prop
 ;<div foo="bar" />
 
diff --git a/packages/runtime-dom/src/jsx.ts b/packages/runtime-dom/src/jsx.ts
index bfcbe3e5a39..cc54d09091c 100644
--- a/packages/runtime-dom/src/jsx.ts
+++ b/packages/runtime-dom/src/jsx.ts
@@ -234,7 +234,7 @@ interface AriaAttributes {
 }
 
 // Vue's style normalization supports nested arrays
-export type StyleValue = undefined | string | CSSProperties | Array<StyleValue>
+export type StyleValue = false | null | undefined | string | CSSProperties | Array<StyleValue>
 
 export interface HTMLAttributes extends AriaAttributes, EventHandlers<Events> {
   innerHTML?: string