The css prop is not attached to a type of props if it is a disjoint union type on className field.

[ENvironmentSet]

Current behavior:

WithConditionalCSSProp<P> doesn't create the css prop if P is a disjoin union type on className field. Therefore we can't use some components optionally taking className field, like Link of wouter.

To reproduce:

Since it's not a problem inherent in emotion or react but a problem of treating union types, we can reproduce it with following simplified snippet.

type WithConditionalCSSProp<P> = 'className' extends keyof P
  ? string extends P['className' & keyof P]
    ? { css?: 'Interpolation<Theme>' } // To make the snippet simpler, I've just used string literal instead.
    : {}
  : {}

type BUG = WithConditionalCSSProp<{ className: string, foo: number } | { bar: boolean }> 

typescript playground

However, It's always good to have detailed reproduction. Here is the case I encountered.

Expected behavior:

I think it might be more accurate to add css prop to branches where proper className field is available. Therefore pass type check for components optionally taking className like wouter's.

I suggest following as a fix:

// Make LibraryManagedAttributes distributed over unions
type LibraryManagedAttributes<C, P> = P extends unknown ? 
  WithConditionalCSSProp<P> & ReactJSXLibraryManagedAttributes<C, P> 
  : never

Environment information:

• react version: 18.2.0
• @emotion/react version: 11.11.4