diff --git a/.changeset/warm-pugs-applaud.md b/.changeset/warm-pugs-applaud.md new file mode 100644 index 000000000..10a667e0a --- /dev/null +++ b/.changeset/warm-pugs-applaud.md @@ -0,0 +1,5 @@ +--- +'@emotion/serialize': patch +--- + +Replace arrays with readonly arrays in CSS type definitions, following changes in `csstype` diff --git a/packages/react/types/tests-css.tsx b/packages/react/types/tests-css.tsx index 2915c6341..e61e3561a 100644 --- a/packages/react/types/tests-css.tsx +++ b/packages/react/types/tests-css.tsx @@ -32,8 +32,10 @@ css` // $ExpectError css(() => 'height: 300px;') -// $ExpectError css` position: relative; - flexgrow: ${() => 20}; + flexgrow: ${ + // $ExpectError + () => 20 + }; ` diff --git a/packages/serialize/types/index.d.ts b/packages/serialize/types/index.d.ts index 8f41fce31..12482c98e 100644 --- a/packages/serialize/types/index.d.ts +++ b/packages/serialize/types/index.d.ts @@ -10,12 +10,13 @@ export type CSSProperties = CSS.PropertiesFallback export type CSSPropertiesWithMultiValues = { [K in keyof CSSProperties]: | CSSProperties[K] - | Array> + | ReadonlyArray> } export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject } -export interface ArrayCSSInterpolation extends Array {} +export interface ArrayCSSInterpolation + extends ReadonlyArray {} export type InterpolationPrimitive = | null diff --git a/packages/serialize/types/tests.ts b/packages/serialize/types/tests.ts index cffb64451..74f58a2f9 100644 --- a/packages/serialize/types/tests.ts +++ b/packages/serialize/types/tests.ts @@ -48,8 +48,12 @@ serializeStyles({}, {}) let cssObject: CSSObject = { fontWeight: 400, + background: ['red'], + otherProp: ['some-value'], ':hover': { - fontWeight: 700 + fontWeight: 700, + background: ['red'] as const, + otherProp: ['some-value'] as const } }