feat: pass elementToBeCreated to shouldForwardProp

CHANGELOG.md

@@ -10,7 +10,7 @@ _The format is based on [Keep a Changelog](http://keepachangelog.com/) and this
 
 - Upgrade to stylis v4
 
-- Enable users of the babel macro to customize the styled-components import with `importModuleName` (see [#3422](https://github.com/styled-components/styled-components/pull/3422))
+- Pass `elementToBeCreated` as a third parameter to `shouldForwardProp` so that the user-specified function can decide whether to pass through props based on whether the created element will be a tag or another component. (see [#3436](https://github.com/styled-components/styled-components/pull/3436))
 
 ## [v5.2.2] - 2021-03-30
 

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

@@ -144,7 +144,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];
@@ -210,11 +214,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

@@ -94,7 +94,7 @@ function useStyledComponentImpl(
     if (key[0] === '$' || key === 'as') continue;
     else if (key === 'forwardedAs') {
       propsForElement.as = computedProps[key];
-    } else if (!shouldForwardProp || shouldForwardProp(key, validAttr)) {
+    } else if (!shouldForwardProp || shouldForwardProp(key, validAttr, elementToBeCreated)) {
       propsForElement[key] = computedProps[key];
     }
   }
@@ -143,11 +143,13 @@ export default (InlineStyle: Class<IInlineStyle>) => {
     if (isTargetStyledComp && target.shouldForwardProp) {
       if (options.shouldForwardProp) {
         // compose nested shouldForwardProp calls
-        shouldForwardProp = (prop, filterFn) =>
+        shouldForwardProp = (prop, filterFn, elementToBeCreated) =>
           ((((target: any): IStyledNativeComponent).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): IStyledNativeComponent).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;