Distribute css prop attachment over props that are union types (#3232)

* 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

@@ -0,0 +1,5 @@
+---
+'@emotion/react': patch
+---
+
+Distribute `css` prop attachment over props that are union types

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>

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