Relaxed types for shouldForwardProp

This function needs to be able to filter a props for a generic argument of the resulting function.

.changeset/cool-candles-lie.md

@@ -0,0 +1,5 @@
+---
+'@emotion/is-prop-valid': minor
+---
+
+[TypeScript] Allow isPropValid to take any PropertyKey as an argument (instead of just string)

.changeset/dull-carrots-enjoy.md

@@ -0,0 +1,7 @@
+---
+'@emotion/styled': patch
+---
+
+Relaxed types for shouldForwardProp
+
+This function needs to be able to filter a props for a generic argument of the resulting function.

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: string): boolean
+declare function isPropValid(string: PropertyKey): boolean
 export default isPropValid

packages/is-prop-valid/types/tests.ts

@@ -5,8 +5,6 @@ isPropValid('ref')
 // $ExpectError
 isPropValid()
 // $ExpectError
-isPropValid(5)
-// $ExpectError
 isPropValid({})
 // $ExpectError
 isPropValid('ref', 'def')

packages/styled/types/base.d.ts

@@ -31,13 +31,13 @@ export interface FilteringStyledOptions<
   ForwardedProps extends keyof Props = keyof Props
 > {
   label?: string
-  shouldForwardProp?(propName: keyof Props): propName is ForwardedProps
+  shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps
   target?: string
 }
 
 export interface StyledOptions<Props> {
   label?: string
-  shouldForwardProp?(propName: keyof Props): boolean
+  shouldForwardProp?(propName: PropertyKey): boolean
   target?: string
 }
 

packages/styled/types/tests-base.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import styled from '@emotion/styled/base'
+import isPropValid from '@emotion/is-prop-valid'
 
 // tslint:disable-next-line: interface-over-type-literal
 type ReactClassProps0 = {
@@ -98,6 +99,19 @@ const Canvas1 = styled('canvas', {
 ;<Canvas0 id="id-should-be-filtered" />
 ;<Canvas1 />
 
+const styledWithForwardedExtraProp = styled('div', {
+  // this used to work, but now complains because 'priority' is not a prop of 'div'
+  shouldForwardProp: prop => prop !== 'priority' && isPropValid(prop)
+})
+
+type Priority = 'info' | 'warning' | 'error'
+
+const Alert = styledWithForwardedExtraProp<{
+  priority?: Priority
+}>(({ priority, theme }) => ({
+  backgroundColor: theme.colors[priority || 'info']
+}))
+
 interface PrimaryProps {
   readonly primary: string
 }