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.
styled-components · Mar 19, 2021 · 67045e4 · 67045e4
1 parent 9bef00c
commit 67045e4
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/packages/styled-components/src/models/StyledComponent.js b/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;

diff --git a/packages/styled-components/src/models/StyledNativeComponent.js b/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;

diff --git a/packages/styled-components/src/test/props.test.js b/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);
     });

diff --git a/packages/styled-components/src/types.js b/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;