From 5595c8d82a94e35c25fd2ea40438f7336e28a62f Mon Sep 17 00:00:00 2001
From: Sam Magura <srmagura@gmail.com>
Date: Sat, 21 May 2022 10:28:22 -0400
Subject: [PATCH 1/2] styled.shouldForwardProp: require prop to be a string

---
 packages/is-prop-valid/types/index.d.ts |  2 +-
 packages/native/types/base.d.ts         | 12 +++++++-----
 packages/styled/types/base.d.ts         | 15 +++++++++------
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/is-prop-valid/types/index.d.ts b/packages/is-prop-valid/types/index.d.ts
index 2ca137567..e7d00bfdb 100644
--- a/packages/is-prop-valid/types/index.d.ts
+++ b/packages/is-prop-valid/types/index.d.ts
@@ -1,5 +1,5 @@
 // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
 // TypeScript Version: 2.1
 
-declare function isPropValid(string: PropertyKey): boolean
+declare function isPropValid(prop: string): boolean
 export default isPropValid
diff --git a/packages/native/types/base.d.ts b/packages/native/types/base.d.ts
index 82aae23be..2afa5f427 100644
--- a/packages/native/types/base.d.ts
+++ b/packages/native/types/base.d.ts
@@ -61,13 +61,13 @@ export type Interpolation<
 /** Same as StyledOptions but shouldForwardProp must be a type guard */
 export interface FilteringStyledOptions<
   Props,
-  ForwardedProps extends keyof Props = keyof Props
+  ForwardedProps extends keyof Props & string = keyof Props & string
 > {
-  shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps
+  shouldForwardProp?(propName: string): propName is ForwardedProps
 }
 
 export interface StyledOptions<Props> {
-  shouldForwardProp?(propName: PropertyKey): boolean
+  shouldForwardProp?(propName: string): boolean
 }
 
 /**
@@ -146,7 +146,8 @@ export interface CreateStyledComponent<
 export interface CreateStyled {
   <
     C extends React.ComponentClass<React.ComponentProps<C>>,
-    ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>
+    ForwardedProps extends keyof React.ComponentProps<C> &
+      string = keyof React.ComponentProps<C> & string
   >(
     component: C,
     options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
@@ -175,7 +176,8 @@ export interface CreateStyled {
 
   <
     C extends React.ComponentType<React.ComponentProps<C>>,
-    ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>
+    ForwardedProps extends keyof React.ComponentProps<C> &
+      string = keyof React.ComponentProps<C> & string
   >(
     component: C,
     options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
diff --git a/packages/styled/types/base.d.ts b/packages/styled/types/base.d.ts
index c39200c75..4383b0caf 100644
--- a/packages/styled/types/base.d.ts
+++ b/packages/styled/types/base.d.ts
@@ -16,16 +16,16 @@ export { ComponentSelector, Interpolation }
 /** Same as StyledOptions but shouldForwardProp must be a type guard */
 export interface FilteringStyledOptions<
   Props,
-  ForwardedProps extends keyof Props = keyof Props
+  ForwardedProps extends keyof Props & string = keyof Props & string
 > {
   label?: string
-  shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps
+  shouldForwardProp?(propName: string): propName is ForwardedProps
   target?: string
 }
 
 export interface StyledOptions<Props> {
   label?: string
-  shouldForwardProp?(propName: PropertyKey): boolean
+  shouldForwardProp?(propName: string): boolean
   target?: string
 }
 
@@ -118,7 +118,8 @@ export interface CreateStyledComponent<
 export interface CreateStyled {
   <
     C extends React.ComponentClass<React.ComponentProps<C>>,
-    ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>
+    ForwardedProps extends keyof React.ComponentProps<C> &
+      string = keyof React.ComponentProps<C> & string
   >(
     component: C,
     options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
@@ -147,7 +148,8 @@ export interface CreateStyled {
 
   <
     C extends React.ComponentType<React.ComponentProps<C>>,
-    ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>
+    ForwardedProps extends keyof React.ComponentProps<C> &
+      string = keyof React.ComponentProps<C> & string
   >(
     component: C,
     options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
@@ -168,7 +170,8 @@ export interface CreateStyled {
 
   <
     Tag extends keyof JSX.IntrinsicElements,
-    ForwardedProps extends keyof JSX.IntrinsicElements[Tag] = keyof JSX.IntrinsicElements[Tag]
+    ForwardedProps extends keyof JSX.IntrinsicElements[Tag] &
+      string = keyof JSX.IntrinsicElements[Tag] & string
   >(
     tag: Tag,
     options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps>

From 09df01db4b4ef02141f40344e037fc9d1dbb5098 Mon Sep 17 00:00:00 2001
From: Sam Magura <srmagura@gmail.com>
Date: Sat, 21 May 2022 10:37:57 -0400
Subject: [PATCH 2/2] Add PropertyKey->string changesets

---
 .changeset/good-cars-roll.md        | 6 ++++++
 .changeset/purple-ladybugs-think.md | 5 +++++
 2 files changed, 11 insertions(+)
 create mode 100644 .changeset/good-cars-roll.md
 create mode 100644 .changeset/purple-ladybugs-think.md

diff --git a/.changeset/good-cars-roll.md b/.changeset/good-cars-roll.md
new file mode 100644
index 000000000..4d0921056
--- /dev/null
+++ b/.changeset/good-cars-roll.md
@@ -0,0 +1,6 @@
+---
+'@emotion/native': patch
+'@emotion/styled': patch
+---
+
+Change the argument of the `shouldForwardProp` option of `styled` from `PropertyKey` to `string` in the TypeScript definitions.
diff --git a/.changeset/purple-ladybugs-think.md b/.changeset/purple-ladybugs-think.md
new file mode 100644
index 000000000..b30341024
--- /dev/null
+++ b/.changeset/purple-ladybugs-think.md
@@ -0,0 +1,5 @@
+---
+'@emotion/is-prop-valid': patch
+---
+
+Change the type of the argument to `isPropValid` from `PropertyKey` to `string` in the TypeScript definitions.