Typescript issue with CSSObject in version 11.11.5 of @emotion/styled #3174
Description
Current behavior:
Update @emotion/styled from 11.11.0 => 11.11.5
To reproduce:
We have several styled components in our project and we started to get TS errors on a lot of them after this update:
Example component that doesn't work:
import styled from '@emotion/styled';
export const StyledHeader = styled('div')(() => {
return {
textAlign: `center`,
position: `relative`,
};
});
Gives this error:
error TS2769: No overload matches this call.
Overload 1 of 3, '(template: TemplateStringsArray, ...styles: Interpolation<{ theme?: Theme | undefined; as?: ElementType<any, keyof IntrinsicElements> | undefined; } & ClassAttributes<...> & HTMLAttributes<...> & { ...; }>[]): StyledComponent<...>', gave the following error.
Argument of type '() => { textAlign: string; position: string; }' is not assignable to parameter of type 'TemplateStringsArray'.
Overload 2 of 3, '(template: TemplateStringsArray, ...styles: Interpolation<{ theme?: Theme | undefined; as?: ElementType<any, keyof IntrinsicElements> | undefined; } & ClassAttributes<...> & HTMLAttributes<...> & { ...; }>[]): StyledComponent<...>', gave the following error.
Argument of type '() => { textAlign: string; position: string; }' is not assignable to parameter of type 'TemplateStringsArray'.
Overload 3 of 3, '(...styles: Interpolation<{ theme?: Theme | undefined; as?: ElementType<any, keyof IntrinsicElements> | undefined; } & ClassAttributes<HTMLDivElement> & HTMLAttributes<...> & { ...; }>[]): StyledComponent<...>', gave the following error.
Argument of type '() => { textAlign: string; position: string; }' is not assignable to parameter of type 'Interpolation<{ theme?: Theme | undefined; as?: ElementType<any, keyof IntrinsicElements> | undefined; } & ClassAttributes<HTMLDivElement> & HTMLAttributes<...> & { ...; }>'.
Type '() => { textAlign: string; position: string; }' is not assignable to type 'FunctionInterpolation<{ theme?: Theme | undefined; as?: ElementType<any, keyof IntrinsicElements> | undefined; } & ClassAttributes<HTMLDivElement> & HTMLAttributes<...> & { ...; }>'.
Type '{ textAlign: string; position: string; }' is not assignable to type 'Interpolation<{ theme?: Theme | undefined; as?: ElementType<any, keyof IntrinsicElements> | undefined; } & ClassAttributes<HTMLDivElement> & HTMLAttributes<...> & { ...; }>'.
Type '{ textAlign: string; position: string; }' is not assignable to type 'CSSObject'.
Types of property 'position' are incompatible.
Type 'string' is not assignable to type 'Position | readonly NonNullable<Position | undefined>[] | readonly Position[] | undefined'.
18 export const StyledHeader = styled('div')(() => {
This is a breaking change.
Strangely it seems to depend on which css-attributes you are styling. This works for example:
export const StyledRecentSearch = styled('div')(() => {
return {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'flex-start',
};
});
There are several ways around this for example these variants seem to work:
export const StyledHeader = styled.div`
textAlign: 'center',
position: 'relative',
`;
or
export const StyledHeader = styled('div')(() => {
return {
textAlign: 'center',
position: 'relative',
} as CSSObject;
});
Expected behavior:
There should be no breaking changes in patch versions (in this case TS errors)
Code like this should work since it returns a valid CSSObject:
export const StyledHeader = styled('div')(() => {
return {
textAlign: `center`,
position: `relative`,
};
});
Environment information:
reactversion: 18.2.0@emotion/reactversion: 11.11.4@emotion/styledversion: 11.11.5