CSSInterpolation Type is Incompatible with CSS Prop

[mmarcuccio]

Current behavior:

An object of type CSSInterpolation can no longer be passed as the css prop. This was not the case prior to @emotion/serialize@1.1.3.

This is likely due to this recent change #3141

This can be resolved by also changing ArrayInterpolation from Array<Interpolation<Props>> to ReadonlyArray<Interpolation<Props>> {}. However, I am unsure if this would cause other issues (I only tested using @emotion/react via CSS prop).

To reproduce:
Visit the repro below and hover over the CSS prop to see the following error:

Type 'CSSInterpolation' is not assignable to type 'Interpolation<Theme>'.
  Type 'ArrayCSSInterpolation' is not assignable to type 'Interpolation<Theme>'.
    Type 'readonly CSSInterpolation[]' is missing the following properties from type 'ArrayInterpolation<Theme>': pop, push, reverse, shift, and 6 more.

Repro of issue

Expected behavior:

This should not cause a TS issue.

Environment information:

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

[mmarcuccio]

Sorry, an integration automatically closed this issue on my behalf. @Cerber-Ursi do you happen to have time to investigate? You might have the most context.

[Cerber-Ursi]

Thanks for the ping, will look into it in a couple of days, probably today.

[Cerber-Ursi]

Sorry for the delay - wasn't able to properly setup working environment and was bitten a little by the dependencies (versions in yarn.lock don't work with Node 20, so I had to tinker with them for a while before it built). Patch is on its way.