Support shouldForwardProp in styled's options

packages/create-emotion-styled/src/index.js

@@ -6,10 +6,10 @@ import type { ElementType } from 'react'
 import typeof ReactType from 'react'
 import type { CreateStyled, StyledOptions } from './utils'
 import {
-  testOmitPropsOnComponent,
+  testPickPropsOnComponent,
   testAlwaysTrue,
-  testOmitPropsOnStringTag,
-  omitAssign,
+  testPickPropsOnStringTag,
+  pickAssign,
   setTheme
 } from './utils'
 
@@ -25,22 +25,26 @@ function createEmotionStyled(emotion: Emotion, view: ReactType) {
     let staticClassName
     let identifierName
     let stableClassName
+    let shouldForwardProp
     if (options !== undefined) {
       staticClassName = options.e
       identifierName = options.label
       stableClassName = options.target
+      shouldForwardProp = options.shouldForwardProp
     }
     const isReal = tag.__emotion_real === tag
     const baseTag =
       staticClassName === undefined
         ? (isReal && tag.__emotion_base) || tag
         : tag
 
-    const omitFn =
-      typeof baseTag === 'string' &&
-      baseTag.charAt(0) === baseTag.charAt(0).toLowerCase()
-        ? testOmitPropsOnStringTag
-        : testOmitPropsOnComponent
+    if (typeof shouldForwardProp !== 'function') {
+      shouldForwardProp =
+        typeof baseTag === 'string' &&
+        baseTag.charAt(0) === baseTag.charAt(0).toLowerCase()
+          ? testPickPropsOnStringTag
+          : testPickPropsOnComponent
+    }
 
     return function() {
       let args = arguments
@@ -86,7 +90,7 @@ function createEmotionStyled(emotion: Emotion, view: ReactType) {
         }
         render() {
           const { props, state } = this
-          this.mergedProps = omitAssign(testAlwaysTrue, {}, props, {
+          this.mergedProps = pickAssign(testAlwaysTrue, {}, props, {
             theme: (state !== null && state.theme) || props.theme || {}
           })
 
@@ -118,7 +122,11 @@ function createEmotionStyled(emotion: Emotion, view: ReactType) {
 
           return view.createElement(
             baseTag,
-            omitAssign(omitFn, {}, props, { className, ref: props.innerRef })
+            // $FlowFixMe
+            pickAssign(shouldForwardProp, {}, props, {
+              className,
+              ref: props.innerRef
+            })
           )
         }
       }
@@ -144,6 +152,7 @@ function createEmotionStyled(emotion: Emotion, view: ReactType) {
           ) {
             return 'NO_COMPONENT_SELECTOR'
           }
+          // $FlowFixMe
           return `.${stableClassName}`
         }
       })
@@ -156,7 +165,7 @@ function createEmotionStyled(emotion: Emotion, view: ReactType) {
           nextTag,
           nextOptions !== undefined
             ? // $FlowFixMe
-              omitAssign(testAlwaysTrue, {}, options, nextOptions)
+              pickAssign(testAlwaysTrue, {}, options, nextOptions)
             : options
         )(...styles)
       }

packages/create-emotion-styled/src/utils.js

@@ -7,14 +7,14 @@ export function setTheme(theme: Object) {
   this.setState({ theme })
 }
 
-export const testOmitPropsOnStringTag: (key: string) => boolean = memoize(
+export const testPickPropsOnStringTag: (key: string) => boolean = memoize(
   isPropValid
 )
-export const testOmitPropsOnComponent = (key: string) =>
+export const testPickPropsOnComponent = (key: string) =>
   key !== 'theme' && key !== 'innerRef'
 export const testAlwaysTrue = () => true
 
-export const omitAssign: (
+export const pickAssign: (
   testFn: (key: string) => boolean,
   target: {},
   ...sources: Array<{}>
@@ -33,7 +33,12 @@ export const omitAssign: (
   return target
 }
 
-export type StyledOptions = { e: string, label: string, target: string }
+export type StyledOptions = {
+  e?: string,
+  label?: string,
+  target?: string,
+  shouldForwardProp?: (?string) => boolean
+}
 
 type CreateStyledComponent = (...args: Interpolations) => *
 

packages/react-emotion/test/__snapshots__/index.test.js.snap

@@ -255,6 +255,31 @@ exports[`styled composition with objects 1`] = `
 </h1>
 `;
 
+exports[`styled custom shouldForwardProp works 1`] = `
+.emotion-0,
+.emotion-0 * {
+  fill: #0000ff;
+}
+
+<svg
+  className="emotion-0 emotion-1"
+  height="100px"
+  width="100px"
+>
+  <rect
+    height="100"
+    style={
+      Object {
+        "stroke": "#ff0000",
+      }
+    }
+    width="100"
+    x="10"
+    y="10"
+  />
+</svg>
+`;
+
 exports[`styled function in expression 1`] = `
 .emotion-0 {
   font-size: 20px;

packages/react-emotion/test/index.test.js

@@ -1120,4 +1120,32 @@ describe('styled', () => {
     const tree = renderer.create(<OneMoreComponent />).toJSON()
     expect(tree).toMatchSnapshot()
   })
+  test('custom shouldForwardProp works', () => {
+    const Svg = props => (
+      <svg {...props}>
+        <rect
+          x="10"
+          y="10"
+          height="100"
+          width="100"
+          style={{ stroke: '#ff0000' }}
+        />
+      </svg>
+    )
+
+    const StyledSvg = styled(Svg, {
+      shouldForwardProp: prop =>
+        ['className', 'width', 'height'].indexOf(prop) !== -1
+    })`
+      &,
+      & * {
+        fill: ${({ color }) => color};
+      }
+    `
+
+    const tree = renderer
+      .create(<StyledSvg color="#0000ff" width="100px" height="100px" />)
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
 })