Typescript issue with CSSObject in version 11.11.5 of @emotion/styled

[valleywood]

Typescript issue with CSSObject in version 11.11.5 of @emotion/styled

[Andarist]

As a workaround, you can use as const on the returned object. I suspect the reason why it fails now is that we have reordered styled overloads.

TypeScript, currently, caches some types resolved while trying to match against the first overload. This is a long-standing issue and there is a recent-ish fix for this open here. You can even quickly verify that it does indeed fix this issue since there is a TS playground with that build available: TS playground

[valleywood]

Thanks for rapid action on this! 🙏 Can confirm that as const also fixes/hides the issue (just as as CSSObject did)
Perhaps the issue can be fixed anyway with a new release as it forces code changes otherwise? 🤔

[Andarist]

Perhaps the issue can be fixed anyway with a new release as it forces code changes otherwise? 🤔

Yeah, maybe - we have to investigate this further to determine which tradeoff is better and if we can do anything to mitigate the issue on our side without reverting the change that changed this.

[valleywood]

Perhaps the issue can be fixed anyway with a new release as it forces code changes otherwise? 🤔

Yeah, maybe - we have to investigate this further to determine which tradeoff is better and if we can do anything to mitigate the issue on our side without reverting the change that changed this.

Alternatively make a release that indicates a breaking change and update documentation accordingly

[Cerber-Ursi]

Thanks for notifying, looking into it. Looks really strange for now, to be honest, since I can't understand why this worked before if it's broken now.

Strangely it seems to depend on which css-attributes you are styling.

Essentially, every attribute with the closed set of values (like testAlign, which has the type Globals | "center" | "end" | "justify" | "left" | "match-parent" | "right" | "start") is broken, while the attribute with open set (i.e. the one which can handle any string, like fontFamily, which is Globals | DataType.GenericFamily | (string & {})) works correctly.

[Cerber-Ursi]

Minimized example of the same error, in case someone wants to investigate too:

interface Styles {
    position?: 'left';
}

type StylesCreator = () => Styles;

interface Styled {
    // (creator: StylesCreator): void // uncomment this to remove error
    (styles: Styles): void
    (creator: StylesCreator): void
}

declare const styled: Styled

styled(() => ({ position: 'left' })) // type `string` is not assignable to type `"left"`

[Andarist]

Yeah, I mentioned above that it's related to signature caching that happens when resolving the first overload. The fix would be to add a leading overload that would be capable of introducing proper contextual types for those creator functions