Change Array to ReadonlyArray in CSS type declarations (#3141)

Cerber-Ursi · web-flow · commit 45c440fbc86b · 2023-12-24T06:32:25.000+10:00
diff --git a/.changeset/warm-pugs-applaud.md 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
@@ -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
@@ -10,12 +10,13 @@ export type CSSProperties = CSS.PropertiesFallback<number | string>
 export type CSSPropertiesWithMultiValues = {
   [K in keyof CSSProperties]:
     | CSSProperties[K]
-    | Array<Extract<CSSProperties[K], string>>
+    | ReadonlyArray<Extract<CSSProperties[K], string>>
 }
 
 export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject }
 
-export interface ArrayCSSInterpolation extends Array<CSSInterpolation> {}
+export interface ArrayCSSInterpolation
+  extends ReadonlyArray<CSSInterpolation> {}
 
 export type InterpolationPrimitive =
   | null
diff --git 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
   }
 }
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@emotion/serialize': patch
 +---
++
 +Replace arrays with readonly arrays in CSS type definitions, following changes in `csstype`
Original file line number	Diff line number	Diff line change
`@@ -48,8 +48,12 @@ serializeStyles({}, {})`
`48`	`48`
`49`	`49`	`let cssObject: CSSObject = {`
`50`	`50`	`fontWeight: 400,`
	`51`	`+ background: ['red'],`
	`52`	`+ otherProp: ['some-value'],`
`51`	`53`	`':hover': {`
`52`		`- fontWeight: 700`
	`54`	`+ fontWeight: 700,`
	`55`	`+ background: ['red'] as const,`
	`56`	`+ otherProp: ['some-value'] as const`
`53`	`57`	`}`
`54`	`58`	`}`
`55`	`59`