From c9b84dbe5bf5e054e6cd561d6da1e1548e1489d1 Mon Sep 17 00:00:00 2001
From: Cerber-Ursi <dev+node@cerbe.ru>
Date: Sat, 30 Mar 2024 01:32:15 +0700
Subject: [PATCH] Fix mismatch between CSSInterpolation and
 Interpolation<Props> (#3164)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add explicit test for uncovered regression; fix interpolation type to make it pass

* Reorder overloads for styled component creator

Formerly, the first overload to be tried was not accepting template strings array as first argument. Therefore, it couldn't be used when `styled` was used as a tag for template string. So in this case TS skipped this overload and fell through to the next.
Now, though, with `ArrayInterpolation` type changed, `TemplateStringsArray` matches the definition of `ArrayInterpolation`; therefore, this overload becomes used for template strings, confusing type inference.

This change moves this overload to the end of the list, i.e. to be used as fallback when there's actually a direct function call, without template string.

* yarn changeset

* Apply suggestions from code review

* Create tiny-snails-watch.md

---------

Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
---
 .changeset/curly-planets-search.md  |  5 +++++
 .changeset/tiny-snails-watch.md     |  5 +++++
 packages/react/types/tests.tsx      |  4 ++++
 packages/serialize/types/index.d.ts |  2 +-
 packages/styled/types/base.d.ts     | 20 ++++++++++----------
 5 files changed, 25 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/curly-planets-search.md
 create mode 100644 .changeset/tiny-snails-watch.md

diff --git a/.changeset/curly-planets-search.md b/.changeset/curly-planets-search.md
new file mode 100644
index 000000000..e969fe573
--- /dev/null
+++ b/.changeset/curly-planets-search.md
@@ -0,0 +1,5 @@
+---
+'@emotion/serialize': patch
+---
+
+Make `ArrayInterpolation` to extend `ReadonlyArray` to match a similar recent change to `ArrayCSSInterpolation`. It fixes some compatibility issues when those 2 get mixed together.
diff --git a/.changeset/tiny-snails-watch.md b/.changeset/tiny-snails-watch.md
new file mode 100644
index 000000000..80b95fb7e
--- /dev/null
+++ b/.changeset/tiny-snails-watch.md
@@ -0,0 +1,5 @@
+---
+"@emotion/styled": patch
+---
+
+Reordered `styled` overloads to accommodate the recent change in `@emotion/serialize`'s types.
diff --git a/packages/react/types/tests.tsx b/packages/react/types/tests.tsx
index 0a2d59143..332566a6b 100644
--- a/packages/react/types/tests.tsx
+++ b/packages/react/types/tests.tsx
@@ -9,6 +9,7 @@ import {
   withEmotionCache
 } from '@emotion/react'
 import { JSX as EmotionJSX } from '@emotion/react/jsx-runtime'
+import { CSSInterpolation } from '@emotion/serialize'
 
 declare module '@emotion/react' {
   // tslint:disable-next-line: strict-export-declare-modifiers
@@ -23,6 +24,9 @@ declare module '@emotion/react' {
 ;<Global styles={[]} />
 ;<Global styles={theme => [theme.primaryColor]} />
 
+declare const getStyles: () => CSSInterpolation
+;<Global styles={getStyles()} />
+
 declare const getRandomColor: () => string
 
 const ComponentWithCache = withEmotionCache((_props: {}, cache) => {
diff --git a/packages/serialize/types/index.d.ts b/packages/serialize/types/index.d.ts
index 12482c98e..1971b748b 100644
--- a/packages/serialize/types/index.d.ts
+++ b/packages/serialize/types/index.d.ts
@@ -52,7 +52,7 @@ export type Keyframes = {
 } & string
 
 export interface ArrayInterpolation<Props>
-  extends Array<Interpolation<Props>> {}
+  extends ReadonlyArray<Interpolation<Props>> {}
 
 export interface FunctionInterpolation<Props> {
   (props: Props): Interpolation<Props>
diff --git a/packages/styled/types/base.d.ts b/packages/styled/types/base.d.ts
index 05efbaea4..c75842c6f 100644
--- a/packages/styled/types/base.d.ts
+++ b/packages/styled/types/base.d.ts
@@ -63,10 +63,18 @@ export interface CreateStyledComponent<
   SpecificComponentProps extends {} = {},
   JSXProps extends {} = {}
 > {
+  (
+    template: TemplateStringsArray,
+    ...styles: Array<
+      Interpolation<ComponentProps & SpecificComponentProps & { theme: Theme }>
+    >
+  ): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>
+
   /**
    * @typeparam AdditionalProps  Additional props to add to your styled component
    */
-  <AdditionalProps extends {} = {}>(
+  <AdditionalProps extends {}>(
+    template: TemplateStringsArray,
     ...styles: Array<
       Interpolation<
         ComponentProps &
@@ -80,18 +88,10 @@ export interface CreateStyledComponent<
     JSXProps
   >
 
-  (
-    template: TemplateStringsArray,
-    ...styles: Array<
-      Interpolation<ComponentProps & SpecificComponentProps & { theme: Theme }>
-    >
-  ): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>
-
   /**
    * @typeparam AdditionalProps  Additional props to add to your styled component
    */
-  <AdditionalProps extends {}>(
-    template: TemplateStringsArray,
+  <AdditionalProps extends {} = {}>(
     ...styles: Array<
       Interpolation<
         ComponentProps &