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 <[email protected]>
emotion-js · Aug 5, 2024 · 0ce3ed0 · 0ce3ed0
1 parent e819f9c
commit 0ce3ed0
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/.changeset/heavy-pets-rule.md 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
@@ -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
@@ -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/[email protected]
   // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/98fa4486aefd5a1916aa385402467a7157e3c73f/types/react/v17/index.d.ts#L540-L548