Fix TypeScript error when writing higher order components while using Emotion's JSX namespace

Author: emmatown

.changeset/nervous-pigs-reflect.md

@@ -0,0 +1,5 @@
+---
+'@emotion/react': patch
+---
+
+Fix TypeScript error when writing higher order components while using `@emotion/react` `jsx` pragma/`jsxImportSource`

packages/react/src/jsx-namespace.ts

@@ -6,11 +6,15 @@ type IsPreReact19 = 2 extends Parameters<React.FunctionComponent<any>>['length']
   ? true
   : false
 
-type WithConditionalCSSProp<P> = 'className' extends keyof P
-  ? string extends P['className' & keyof P]
-    ? { css?: Interpolation<Theme> }
-    : {}
-  : {}
+type WithConditionalCSSProp<P> =
+  | (P extends unknown
+      ? 'className' extends keyof P
+        ? string extends P['className' & keyof P]
+          ? { css?: Interpolation<Theme> }
+          : {}
+        : {}
+      : {})
+  | {}
 
 // unpack all here to avoid infinite self-referencing when defining our own JSX namespace for the pre-React 19 case
 
@@ -91,9 +95,8 @@ export namespace EmotionJSX {
   export interface ElementChildrenAttribute
     extends ReactJSXElementChildrenAttribute {}
 
-  export type LibraryManagedAttributes<C, P> = P extends unknown
-    ? WithConditionalCSSProp<P> & ReactJSXLibraryManagedAttributes<C, P>
-    : never
+  export type LibraryManagedAttributes<C, P> = WithConditionalCSSProp<P> &
+    ReactJSXLibraryManagedAttributes<C, P>
 
   export interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
   export interface IntrinsicClassAttributes<T>

packages/react/types/tests.tsx

@@ -255,3 +255,63 @@ const anim1 = keyframes`
   // $ExpectError
   ;<WithOptionalUndefinedClassName css={{ color: 'hotpink' }} />
 }
+
+{
+  const withSomething = <Props extends object>(
+    SomeComponent: (props: Props & { something: string }) => React.ReactNode
+  ) => {
+    return (props: Props) => {
+      return <SomeComponent something="something" {...props} />
+    }
+  }
+  const RendersSomething = withSomething(props => <div>{props.something}</div>)
+  ;<RendersSomething />
+
+  const WithSomeStyle = <Props extends { className?: string }>(
+    SomeComponent: (props: Props) => React.ReactNode
+  ) => {
+    return (props: Props) => {
+      return (
+        <SomeComponent
+          {...props}
+          // this expect type is important over this just not erroring because an excess property in this case is allowed
+          // but this lets us roughly test that `css` is in autocomplete/etc.
+          // $ExpectType Interpolation<Theme>
+          css={{ direction: 'rtl' }}
+        />
+      )
+    }
+  }
+  const Something = WithSomeStyle((props: { className?: string }) => null)
+  ;<Something css={{ color: 'green' }} />
+  ;<Props extends { className?: string }>(
+    SomeComponent: (props: Props) => React.ReactNode
+  ) => {
+    return (props: Props) => {
+      return (
+        <SomeComponent
+          {...props}
+          css={{
+            // ideally this would error but it also doesn't matter much
+            // (this particular css={{ direction: 'does not exist' }} does error when used normally)
+            direction: 'does not exist'
+          }}
+        />
+      )
+    }
+  }
+  ;<Props extends object>(SomeComponent: (props: Props) => React.ReactNode) => {
+    return (props: Props) => {
+      return (
+        <SomeComponent
+          {...props}
+          // this isn't an error because excess properties is a best effort thing in ts etc.
+          // (and in this case with a generic, not erroring here makes a lot of sense)
+          // but expecting this type is a way to test that `css` isn't in autocomplete/etc.
+          // $ExpectType {}
+          css={{}}
+        />
+      )
+    }
+  }
+}