Unknown props: do not warn on React components. (#4084)

* Do not warn on React components. * Use isTag to detect HTML tag. * Implement isDOMElement function. * Bump version. * Remove isDOMElement and simplify condition. * Update yarn.lock. --------- Co-authored-by: Kévin Nové <knove@distech-controls.com>
styled-components · Jul 11, 2023 · 74cddae · 74cddae
1 parent 0c63d7c
commit 74cddae
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/packages/styled-components/package.json b/packages/styled-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "styled-components",
-  "version": "6.0.3",
+  "version": "6.0.4",
   "description": "CSS for the <Component> Age. Style components your way with speed, strong typing, and flexibility.",
   "types": "dist/index.d.ts",
   "main": "dist/styled-components.cjs.js",

diff --git a/packages/styled-components/src/models/StyledComponent.ts b/packages/styled-components/src/models/StyledComponent.ts
@@ -151,7 +151,9 @@ function useStyledComponentImpl<Props extends object>(
         !shouldForwardProp &&
         process.env.NODE_ENV === 'development' &&
         !isPropValid(key) &&
-        !seenUnknownProps.has(key)
+        !seenUnknownProps.has(key) &&
+        // Only warn on DOM Element.
+        domElements.has(elementToBeCreated as any)
       ) {
         seenUnknownProps.add(key);
         console.warn(

diff --git a/packages/styled-components/src/test/props.test.tsx b/packages/styled-components/src/test/props.test.tsx
@@ -266,5 +266,24 @@ describe('props', () => {
       expect(console.warn).toHaveBeenCalledWith(expect.stringContaining('filterThis'));
       process.env.NODE_ENV = originalEnv;
     });
+
+    it('do not warn in development mode when shouldForwardProp is not provided for an unknown prop on React component', () => {
+      let originalEnv = process.env.NODE_ENV;
+      process.env.NODE_ENV = 'development';
+
+      jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      const Comp = styled(({ className, myLabel }: { className?: string; myLabel: string }) => (
+        <span className={className}>{myLabel}</span>
+      ))`
+        color: red;
+      `;
+
+      TestRenderer.create(<Comp myLabel="My label" />);
+
+      expect(console.warn).not.toHaveBeenCalledWith(expect.stringContaining('myLabel'));
+      expect(console.warn).toHaveBeenCalledTimes(0);
+      process.env.NODE_ENV = originalEnv;
+    });
   });
 });
diff --git a/yarn.lock b/yarn.lock
@@ -9084,7 +9084,7 @@ style-loader@^3.3.1:
     supports-color "^5.5.0"
 
 "styled-components@link:packages/styled-components":
-  version "6.0.2"
+  version "6.0.4"
   dependencies:
     "@babel/cli" "^7.21.0"
     "@babel/core" "^7.21.0"