Tweak type-level tests around shouldForwardProp

emotion-js · May 30, 2022 · 59e8aec · 59e8aec
1 parent fce092c
commit 59e8aec
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 17 deletions.
diff --git a/packages/native/types/base.d.ts b/packages/native/types/base.d.ts
@@ -63,14 +63,14 @@ export type Interpolation<
  * Practical sense: you can define and reuse atomic `shouldForwardProp` filters that are strictly bound with some `ForwardedProps` type.
  */
 export interface FilteringStyledOptions<
-  Props = {},
+  Props = Record<string, any>,
   ForwardedProps extends keyof Props = keyof Props
 > {
-  shouldForwardProp?: (propName: PropertyKey) => propName is ForwardedProps
+  shouldForwardProp?: (propName: string) => propName is ForwardedProps & string
 }
 
-export interface StyledOptions<Props = {}> {
-  shouldForwardProp?: (propName: PropertyKey) => boolean
+export interface StyledOptions<Props = Record<string, any>> {
+  shouldForwardProp?: (propName: string) => boolean
 }
 
 /**

diff --git a/packages/native/types/tests.tsx b/packages/native/types/tests.tsx
@@ -175,9 +175,15 @@ export const ImageFullWidthContained = styled.Image`
 {
   // Props forwarding through StyledOptions and FilteringStyledOptions
 
+  styled(View, { shouldForwardProp: (prop: string) => true })({})
+  // $ExpectError
   styled(View, { shouldForwardProp: (prop: 'testID') => true })({})
 
   styled(View, {
+    shouldForwardProp: (prop: string): prop is 'testID' => true
+  })({})
+  styled(View, {
+    // $ExpectError
     shouldForwardProp: (prop: 'testID'): prop is 'testID' => true
   })({})
 

diff --git a/packages/styled/types/base.d.ts b/packages/styled/types/base.d.ts
@@ -18,19 +18,17 @@ export { ComponentSelector, Interpolation }
  * Practical sense: you can define and reuse atomic `shouldForwardProp` filters that are strictly bound with some `ForwardedProps` type.
  */
 export interface FilteringStyledOptions<
-  Props = {},
+  Props = Record<string, any>,
   ForwardedProps extends keyof Props = keyof Props
 > {
   label?: string
-  // we can't use `keyof Props` here because we need to include `AdditionalProps` and those aren't available yet
-  // `Props` represent the actual props of a component while `AdditionalProps` represent props used only for styling purposes
-  shouldForwardProp?: (propName: PropertyKey) => propName is ForwardedProps
+  shouldForwardProp?: (propName: string) => propName is ForwardedProps & string
   target?: string
 }
 
-export interface StyledOptions<Props = {}> {
+export interface StyledOptions<Props = Record<string, any>> {
   label?: string
-  shouldForwardProp?: (propName: PropertyKey) => boolean
+  shouldForwardProp?: (propName: string) => boolean
   target?: string
 }
 

diff --git a/packages/styled/types/tests.tsx b/packages/styled/types/tests.tsx
@@ -223,13 +223,16 @@ const Input5 = styled.input`
 
   const fc: React.FC<{ foo: string }> = () => null
 
+  // we can't accept a "known" prop here because we need to include `AdditionalProps` and those aren't available yet
+  // `Props` represent the actual props of a component while `AdditionalProps` represent props used only for styling purposes
+  // $ExpectError
   styled(fc, { shouldForwardProp: (prop: 'foo') => true })({})
 
   styled(fc, { shouldForwardProp: (prop: string) => true })({})
 
   // $ExpectError
   styled(fc, { shouldForwardProp: (prop: 'bar') => true })({})
-
+  // $ExpectError
   styled(fc, { shouldForwardProp: (prop: 'foo') => true })({})
 
   // $ExpectError
@@ -246,6 +249,8 @@ const Input5 = styled.input`
     foo: string
   }>['shouldForwardProp'] = (prop: 'unknown') => true
 
+  styled(fc, { shouldForwardProp: (prop: string): prop is 'foo' => true })({})
+  // $ExpectError
   styled(fc, { shouldForwardProp: (prop: 'foo'): prop is 'foo' => true })({})
 
   const shouldForwardProp3: FilteringStyledOptions['shouldForwardProp'] = (
@@ -259,33 +264,37 @@ const Input5 = styled.input`
 
   const shouldForwardProp5: FilteringStyledOptions<{
     foo: string
+  }>['shouldForwardProp'] = (prop: string): prop is 'foo' => true
+  // $ExpectError
+  const shouldForwardProp6: FilteringStyledOptions<{
+    foo: string
   }>['shouldForwardProp'] = (prop: 'foo'): prop is 'foo' => true
 
   // $ExpectError
-  const shouldForwardProp6: FilteringStyledOptions<{
+  const shouldForwardProp7: FilteringStyledOptions<{
     foo: string
   }>['shouldForwardProp'] = (prop: 'unknown'): prop is 'unknown' => true
 
-  const shouldForwardProp7: FilteringStyledOptions<
+  const shouldForwardProp8: FilteringStyledOptions<
     { foo: string; bar: string },
     'foo'
-  >['shouldForwardProp'] = (prop: 'foo' | 'bar'): prop is 'foo' => true
+  >['shouldForwardProp'] = (prop: string): prop is 'foo' => true
 
   // $ExpectError
-  const shouldForwardProp8: FilteringStyledOptions<
+  const shouldForwardProp9: FilteringStyledOptions<
     { foo: string; bar: string },
     'foo'
   >['shouldForwardProp'] = (prop: 'foo' | 'bar'): prop is 'bar' => true
 
   styled('div', {
-    shouldForwardProp: (prop: keyof JSX.IntrinsicElements['div']) => true
+    shouldForwardProp: (prop: string) => true
   })({})
 
   // $ExpectError
   styled('div', { shouldForwardProp: (prop: 'color') => true })({})
 
-  // $ExpectError
   styled('div', {
+    // $ExpectError
     shouldForwardProp: (prop: 'color'): prop is 'color' => true
   })({})