From 27b4f2da0ff81b9a14ad75db8f7fa28bd54bc1bf Mon Sep 17 00:00:00 2001
From: Anton Golub <antongolub@antongolub.com>
Date: Fri, 25 Feb 2022 19:33:24 +0300
Subject: [PATCH] fix: expost `FilteringStyledOptions` from native, tweak up
 some tests, add some comments

---
 packages/native/types/base.d.ts  |  5 ++++-
 packages/native/types/index.d.ts |  1 +
 packages/native/types/tests.tsx  | 29 ++++++++++++++++-------------
 packages/styled/types/base.d.ts  |  5 ++++-
 packages/styled/types/tests.tsx  |  4 ++--
 5 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/packages/native/types/base.d.ts b/packages/native/types/base.d.ts
index 3de80df19..f5bf6e683 100644
--- a/packages/native/types/base.d.ts
+++ b/packages/native/types/base.d.ts
@@ -58,7 +58,10 @@ export type Interpolation<
   | ArrayInterpolation<MergedProps, StyleType>
   | FunctionInterpolation<MergedProps, StyleType>
 
-/** Same as StyledOptions but shouldForwardProp must be a type guard */
+/**
+ * Same as StyledOptions but shouldForwardProp must be a type guard (https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates).
+ * Practical sense: you can define and reuse atomic `shouldForwardProp` filters that are strictly bound with some `ForwardedProps` type.
+ */
 export interface FilteringStyledOptions<
   Props = Record<PropertyKey, any>,
   ForwardedProps extends keyof Props = keyof Props
diff --git a/packages/native/types/index.d.ts b/packages/native/types/index.d.ts
index 4e6bb9a12..975f2a7bf 100644
--- a/packages/native/types/index.d.ts
+++ b/packages/native/types/index.d.ts
@@ -18,6 +18,7 @@ export {
   ArrayInterpolation,
   CreateStyledComponent,
   CSSInterpolation,
+  FilteringStyledOptions,
   FunctionInterpolation,
   Interpolation,
   InterpolationPrimitive,
diff --git a/packages/native/types/tests.tsx b/packages/native/types/tests.tsx
index b855213e6..c80814cea 100644
--- a/packages/native/types/tests.tsx
+++ b/packages/native/types/tests.tsx
@@ -7,7 +7,12 @@ import {
   TextStyle,
   View
 } from 'react-native'
-import styled, { css, ReactNativeStyle, StyledOptions } from '@emotion/native'
+import styled, {
+  css,
+  ReactNativeStyle,
+  StyledOptions,
+  FilteringStyledOptions
+} from '@emotion/native'
 
 declare module '@emotion/react' {
   // tslint:disable-next-line: strict-export-declare-modifiers
@@ -168,16 +173,14 @@ export const ImageFullWidthContained = styled.Image`
 }
 
 {
-  const styledOpts: StyledOptions = {
-    shouldForwardProp: p => true
-  }
-  const styledOptsParameterized: StyledOptions<{ foo: string }> = {
-    shouldForwardProp: (p: 'foo') => true
-  }
-  const styledOptsParameterizedBroken: StyledOptions<{ foo: string }> = {
-    shouldForwardProp: (p: 'bar') => true // $ExpectError
-  }
-  const styledOptsBroken: StyledOptions = {
-    shouldForwardProp: (p1, p2) => true // $ExpectError
-  }
+  // Props forwarding through StyledOptions and FilteringStyledOptions
+
+  styled(View, { shouldForwardProp: (prop: 'testID') => true })({})
+
+  styled(View, {
+    shouldForwardProp: (prop: 'testID'): prop is 'testID' => true
+  })({})
+
+  // $ExpectError
+  styled(View, { shouldForwardProp: (prop: 'foo') => true })({})
 }
diff --git a/packages/styled/types/base.d.ts b/packages/styled/types/base.d.ts
index 4c9721107..007013f8b 100644
--- a/packages/styled/types/base.d.ts
+++ b/packages/styled/types/base.d.ts
@@ -17,7 +17,10 @@ export {
 
 export { ComponentSelector, Interpolation }
 
-/** Same as StyledOptions but shouldForwardProp must be a type guard */
+/**
+ * Same as StyledOptions but shouldForwardProp must be a type guard (https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates).
+ * Practical sense: you can define and reuse atomic `shouldForwardProp` filters that are strictly bound with some `ForwardedProps` type.
+ */
 export interface FilteringStyledOptions<
   Props = Record<PropertyKey, any>,
   ForwardedProps extends keyof Props = keyof Props
diff --git a/packages/styled/types/tests.tsx b/packages/styled/types/tests.tsx
index d4bbb1fec..6e9cd4951 100644
--- a/packages/styled/types/tests.tsx
+++ b/packages/styled/types/tests.tsx
@@ -266,13 +266,13 @@ const Input5 = styled.input`
   const shouldForwardProp9: FilteringStyledOptions<
     { foo: string; bar: string },
     'foo'
-  >['shouldForwardProp'] = (prop: 'foo'): prop is 'foo' => true
+  >['shouldForwardProp'] = (prop: 'foo' | 'bar'): prop is 'foo' => true
 
   // $ExpectError
   const shouldForwardProp10: FilteringStyledOptions<
     { foo: string; bar: string },
     'foo'
-  >['shouldForwardProp'] = (prop: 'bar'): prop is 'bar' => true
+  >['shouldForwardProp'] = (prop: 'foo' | 'bar'): prop is 'bar' => true
 
   styled('div', { shouldForwardProp: (prop: 'color') => true })({})