Compose shouldForwardProp in composed styled components

Author: Brent Ertz

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

@@ -29,7 +29,13 @@ function createEmotionStyled(emotion: Emotion, view: ReactType) {
       staticClassName = options.e
       identifierName = options.label
       stableClassName = options.target
-      shouldForwardProp = options.shouldForwardProp
+      shouldForwardProp =
+        tag.__emotion_forwardProp && options.shouldForwardProp
+          ? propName =>
+              tag.__emotion_forwardProp(propName) &&
+              // $FlowFixMe
+              options.shouldForwardProp(propName)
+          : options.shouldForwardProp
     }
     const isReal = tag.__emotion_real === tag
     const baseTag =
@@ -75,6 +81,7 @@ function createEmotionStyled(emotion: Emotion, view: ReactType) {
         static __emotion_styles: Interpolations
         static __emotion_base: Styled
         static __emotion_target: string
+        static __emotion_forwardProp: void | (string => boolean)
         static withComponent: (ElementType, options?: StyledOptions) => any
 
         componentWillMount() {
@@ -148,6 +155,7 @@ function createEmotionStyled(emotion: Emotion, view: ReactType) {
       Styled.__emotion_styles = styles
       Styled.__emotion_base = baseTag
       Styled.__emotion_real = Styled
+      Styled.__emotion_forwardProp = shouldForwardProp
       Object.defineProperty(Styled, 'toString', {
         enumerable: false,
         value() {

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

@@ -1176,3 +1176,18 @@ describe('styled', () => {
     expect(tree).toMatchSnapshot()
   })
 })
+
+test('composes shouldForwardProp on composed styled components', () => {
+  const StyledDiv = styled('div', {
+    shouldForwardProp: prop => prop === 'forwardMe'
+  })()
+
+  const ComposedDiv = styled(StyledDiv, {
+    shouldForwardProp: () => true
+  })()
+
+  const tree = renderer.create(<ComposedDiv filterMe forwardMe />).toJSON()
+
+  expect(tree.props.filterMe).toBeUndefined()
+  expect(tree.props.forwardMe).toBeDefined()
+})