chore(styled): let StyledOptions generic argument be optional

packages/native/types/base.d.ts

@@ -58,16 +58,19 @@ 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,
+  Props = Record<PropertyKey, any>,
   ForwardedProps extends keyof Props = keyof Props
 > {
   shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps
 }
 
-export interface StyledOptions<Props> {
-  shouldForwardProp?(propName: PropertyKey): boolean
+export interface StyledOptions<Props = Record<PropertyKey, any>> {
+  shouldForwardProp?(propName: keyof Props): boolean
 }
 
 /**

packages/native/types/index.d.ts

@@ -18,6 +18,7 @@ export {
   ArrayInterpolation,
   CreateStyledComponent,
   CSSInterpolation,
+  FilteringStyledOptions,
   FunctionInterpolation,
   Interpolation,
   InterpolationPrimitive,

packages/native/types/tests.tsx

@@ -7,7 +7,12 @@ import {
   TextStyle,
   View
 } from 'react-native'
-import styled, { css, ReactNativeStyle } from '@emotion/native'
+import styled, {
+  css,
+  ReactNativeStyle,
+  StyledOptions,
+  FilteringStyledOptions
+} from '@emotion/native'
 
 declare module '@emotion/react' {
   // tslint:disable-next-line: strict-export-declare-modifiers
@@ -166,3 +171,16 @@ export const ImageFullWidthContained = styled.Image`
   ;<Container1 ref={containerRef1} />
   ;<Container2 ref={containerRef2} />
 }
+
+{
+  // 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 })({})
+}

packages/styled/types/base.d.ts

@@ -2,7 +2,11 @@
 // TypeScript Version: 3.2
 
 import * as React from 'react'
-import { ComponentSelector, Interpolation } from '@emotion/serialize'
+import {
+  ComponentSelector,
+  Interpolation,
+  InterpolationPrimitive
+} from '@emotion/serialize'
 import { PropsOf, DistributiveOmit, Theme } from '@emotion/react'
 
 export {
@@ -13,19 +17,22 @@ 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,
+  Props = Record<PropertyKey, any>,
   ForwardedProps extends keyof Props = keyof Props
 > {
   label?: string
   shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps
   target?: string
 }
 
-export interface StyledOptions<Props> {
+export interface StyledOptions<Props = Record<PropertyKey, any>> {
   label?: string
-  shouldForwardProp?(propName: PropertyKey): boolean
+  shouldForwardProp?(propName: keyof Props): boolean
   target?: string
 }
 

packages/styled/types/index.d.ts

@@ -12,6 +12,7 @@ export {
   Interpolation,
   StyledComponent,
   StyledOptions,
+  FilteringStyledOptions,
   CreateStyledComponent
 } from './base'
 

packages/styled/types/tests.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import styled from '@emotion/styled'
+import styled, { StyledOptions, FilteringStyledOptions } from '@emotion/styled'
 
 // This file uses the same Theme declaration from tests-base.tsx
 
@@ -217,3 +217,69 @@ const Input5 = styled.input`
   // $ExpectError
   ;<StyledCompWithoutAs as={Section} />
 }
+
+{
+  // Props forwarding through StyledOptions and FilteringStyledOptions
+
+  const fc: React.FC<{ foo: string }> = props => <div {...props} />
+
+  styled(fc, { shouldForwardProp: (prop: 'foo') => true })({})
+
+  styled(fc, { shouldForwardProp: (prop: string) => true })({})
+
+  // $ExpectError
+  styled(fc, { shouldForwardProp: (prop: 'bar') => true })({})
+
+  const shouldForwardProp1 = (prop: 'foo') => true
+  styled(fc, { shouldForwardProp: shouldForwardProp1 })({})
+
+  const shouldForwardProp2: StyledOptions['shouldForwardProp'] = (
+    prop: 'unknown'
+  ) => true
+  styled(fc, { shouldForwardProp: shouldForwardProp2 })({})
+
+  const shouldForwardProp3 = (prop: 'unknown') => true
+  // $ExpectError
+  styled(fc, { shouldForwardProp: shouldForwardProp3 })({})
+
+  // $ExpectError
+  const shouldForwardProp4: StyledOptions<{
+    foo: string
+  }>['shouldForwardProp'] = (prop: 'unknown') => true
+
+  const shouldForwardProp5 = (prop: 'foo'): prop is 'foo' => true
+  styled(fc, { shouldForwardProp: shouldForwardProp5 })({})
+
+  const shouldForwardProp6: FilteringStyledOptions['shouldForwardProp'] = (
+    prop: 'foo'
+  ): prop is 'foo' => true
+
+  const shouldForwardProp7: FilteringStyledOptions<{
+    foo: string
+  }>['shouldForwardProp'] = (prop: 'foo'): prop is 'foo' => true
+
+  // $ExpectError
+  const shouldForwardProp8: FilteringStyledOptions<{
+    foo: string
+  }>['shouldForwardProp'] = (prop: 'unknown'): prop is 'unknown' => true
+
+  const shouldForwardProp9: FilteringStyledOptions<
+    { foo: string; bar: string },
+    'foo'
+  >['shouldForwardProp'] = (prop: 'foo' | 'bar'): prop is 'foo' => true
+
+  // $ExpectError
+  const shouldForwardProp10: FilteringStyledOptions<
+    { foo: string; bar: string },
+    'foo'
+  >['shouldForwardProp'] = (prop: 'foo' | 'bar'): prop is 'bar' => true
+
+  styled('div', { shouldForwardProp: (prop: 'color') => true })({})
+
+  styled('div', {
+    shouldForwardProp: (prop: 'color'): prop is 'color' => true
+  })({})
+
+  // $ExpectError
+  styled('div', { shouldForwardProp: (prop: 'foo') => true })({})
+}