feat: pass elementToBeCreated to shouldForwardProp

The internal decision whether to forward a prop is based on the
combination of the key and elementToBeCreated, but only the former was
passed to shouldForwardProp.

This is a port of styled-components#3436 to legacy-v5

packages/styled-components/src/models/StyledComponent.js

@@ -143,7 +143,11 @@ function useStyledComponentImpl(
     else if (key === 'forwardedAs') {
       propsForElement.as = computedProps[key];
     } else if (
-      shouldForwardProp ? shouldForwardProp(key, validAttr) : isTargetTag ? validAttr(key) : true
+      shouldForwardProp
+        ? shouldForwardProp(key, validAttr, elementToBeCreated)
+        : isTargetTag
+        ? validAttr(key)
+        : true
     ) {
       // Don't pass through non HTML tags through to HTML elements
       propsForElement[key] = computedProps[key];
@@ -207,11 +211,13 @@ export default function createStyledComponent(
   if (isTargetStyledComp && target.shouldForwardProp) {
     if (options.shouldForwardProp) {
       // compose nested shouldForwardProp calls
-      shouldForwardProp = (prop, filterFn) =>
+      shouldForwardProp = (prop, filterFn, elementToBeCreated) =>
         ((((target: any): IStyledComponent).shouldForwardProp: any): ShouldForwardProp)(
           prop,
-          filterFn
-        ) && ((options.shouldForwardProp: any): ShouldForwardProp)(prop, filterFn);
+          filterFn,
+          elementToBeCreated
+        ) &&
+        ((options.shouldForwardProp: any): ShouldForwardProp)(prop, filterFn, elementToBeCreated);
     } else {
       // eslint-disable-next-line prefer-destructuring
       shouldForwardProp = ((target: any): IStyledComponent).shouldForwardProp;

packages/styled-components/src/models/StyledNativeComponent.js

@@ -162,9 +162,10 @@ export default (InlineStyle: Function) => {
     if (isTargetStyledComp && target.shouldForwardProp) {
       if (shouldForwardProp) {
         // compose nested shouldForwardProp calls
-        shouldForwardProp = (prop, filterFn) =>
+        shouldForwardProp = (prop, filterFn, elementToBeCreated) =>
           // $FlowFixMe
-          target.shouldForwardProp(prop, filterFn) && options.shouldForwardProp(prop, filterFn);
+          target.shouldForwardProp(prop, filterFn, elementToBeCreated) &&
+          options.shouldForwardProp(prop, filterFn, elementToBeCreated);
       } else {
         // eslint-disable-next-line prefer-destructuring
         shouldForwardProp = target.shouldForwardProp;

packages/styled-components/src/test/props.test.js

@@ -245,7 +245,7 @@ describe('props', () => {
       expect(props.filterThis).toBeUndefined();
     });
 
-    it('passes the default prop filtering function for use if desired', () => {
+    it('passes the default prop filtering function and target element for use if desired', () => {
       const stub = jest.fn();
 
       const Comp = styled('div').withConfig({
@@ -256,7 +256,7 @@ describe('props', () => {
 
       TestRenderer.create(<Comp as="a" filterThis="abc" passThru="def" />);
 
-      expect(stub.mock.calls[0]).toEqual(['filterThis', expect.any(Function)]);
+      expect(stub.mock.calls[0]).toEqual(['filterThis', expect.any(Function), 'a']);
       expect(stub.mock.calls[0][1]('filterThis')).toBe(false);
       expect(stub.mock.calls[0][1]('id')).toBe(true);
     });

packages/styled-components/src/types.js

@@ -35,7 +35,11 @@ export type Stringifier = {
   hash: string,
 };
 
-export type ShouldForwardProp = (prop: string, isValidAttr: (prop: string) => boolean) => boolean;
+export type ShouldForwardProp = (
+  prop: string,
+  isValidAttr: (prop: string) => boolean,
+  elementToBeCreated: Target
+) => boolean;
 
 export interface IStyledStatics {
   attrs: Attrs;