From 0ce3ed0ff3f7d1ddf91db2859f863f230b063e13 Mon Sep 17 00:00:00 2001
From: Jaewon Seo <sbshw1@gmail.com>
Date: Mon, 5 Aug 2024 17:11:08 +0900
Subject: [PATCH] Distribute `css` prop attachment over props that are union
 types (#3232)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Let 'css' prop attachment be distributed over union types.

* Add a test case to check LibraryManagedAttributes distributes over unions.

* Fix the test case

* Delete unused imports

* Replace with an integration test

* Update .changeset/heavy-pets-rule.md

---------

Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
---
 .changeset/heavy-pets-rule.md           |  5 +++++
 packages/react/types/jsx-namespace.d.ts |  5 +++--
 packages/react/types/tests.tsx          | 17 +++++++++++++++++
 3 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/heavy-pets-rule.md

diff --git a/.changeset/heavy-pets-rule.md b/.changeset/heavy-pets-rule.md
new file mode 100644
index 000000000..84b813edb
--- /dev/null
+++ b/.changeset/heavy-pets-rule.md
@@ -0,0 +1,5 @@
+---
+'@emotion/react': patch
+---
+
+Distribute `css` prop attachment over props that are union types
diff --git a/packages/react/types/jsx-namespace.d.ts b/packages/react/types/jsx-namespace.d.ts
index b43dc4fa0..ad92eaea4 100644
--- a/packages/react/types/jsx-namespace.d.ts
+++ b/packages/react/types/jsx-namespace.d.ts
@@ -86,8 +86,9 @@ export namespace EmotionJSX {
     extends ReactJSXElementAttributesProperty {}
   interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute {}
 
-  type LibraryManagedAttributes<C, P> = WithConditionalCSSProp<P> &
-    ReactJSXLibraryManagedAttributes<C, P>
+  type LibraryManagedAttributes<C, P> = P extends unknown
+    ? WithConditionalCSSProp<P> & ReactJSXLibraryManagedAttributes<C, P>
+    : never
 
   interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
   interface IntrinsicClassAttributes<T>
diff --git a/packages/react/types/tests.tsx b/packages/react/types/tests.tsx
index e4b71ec8e..06f8785c7 100644
--- a/packages/react/types/tests.tsx
+++ b/packages/react/types/tests.tsx
@@ -182,6 +182,23 @@ const anim1 = keyframes`
   ;<CompWithoutProps css={{ backgroundColor: 'hotpink' }} />
 }
 
+{
+  const CompWithConditionalClassNameSupport = (
+    _props: { foo: true; className?: string } | { foo: false }
+  ) => {
+    return null
+  }
+  ;<CompWithConditionalClassNameSupport
+    foo={true}
+    css={{ backgroundColor: 'hotpink' }}
+  />
+  ;<CompWithConditionalClassNameSupport
+    foo={false}
+    // $ExpectError
+    css={{ backgroundColor: 'hotpink' }}
+  />
+}
+
 {
   // based on the code from @types/react@17.x
   // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/98fa4486aefd5a1916aa385402467a7157e3c73f/types/react/v17/index.d.ts#L540-L548