From 922f20d664bb07f07285734635e966ade77925ef Mon Sep 17 00:00:00 2001
From: Anton Evzhakov <anton@evz.name>
Date: Sun, 27 Nov 2022 16:47:07 +0200
Subject: [PATCH] fix(react): wrapped component should have className prop
 (#1136)

---
 .changeset/nice-cameras-move.md      |  5 +++++
 packages/react/__dtslint__/styled.ts | 11 +++++++++++
 packages/react/src/styled.ts         |  6 +++++-
 3 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/nice-cameras-move.md

diff --git a/.changeset/nice-cameras-move.md b/.changeset/nice-cameras-move.md
new file mode 100644
index 000000000..30dccd5d9
--- /dev/null
+++ b/.changeset/nice-cameras-move.md
@@ -0,0 +1,5 @@
+---
+'@linaria/react': patch
+---
+
+Do not allow to wrap components without props.
diff --git a/packages/react/__dtslint__/styled.ts b/packages/react/__dtslint__/styled.ts
index 9ab30398b..94b014d2f 100644
--- a/packages/react/__dtslint__/styled.ts
+++ b/packages/react/__dtslint__/styled.ts
@@ -27,6 +27,17 @@ const StyledDiv = styled.div``;
 // $ExpectType "extends"
 isExtends<typeof StyledDiv, React.FC<React.DetailedHTMLProps<any, any>>>();
 
+const A = (): React.ReactElement => React.createElement('div', null);
+// $ExpectError
+styled(A)``;
+
+// foo is not a valid property of div
+// $ExpectError
+React.createElement(StyledDiv, { foo: 'foo' });
+
+const ReStyledDiv = styled(StyledDiv)<{ foo: string }>``;
+React.createElement(ReStyledDiv, { foo: 'foo' });
+
 // component should have className property
 // $ExpectError
 styled(Fabric<{ a: string }>())``;
diff --git a/packages/react/src/styled.ts b/packages/react/src/styled.ts
index 0d45f5e80..4fcfc56ce 100644
--- a/packages/react/src/styled.ts
+++ b/packages/react/src/styled.ts
@@ -105,6 +105,10 @@ interface IProps {
   [props: string]: unknown;
 }
 
+// Components with props are not allowed
+function styled(
+  componentWithStyle: () => any
+): (error: 'The target component should have a className prop') => void;
 // Property-based interpolation is allowed only if `style` property exists
 function styled<
   TProps extends Has<TMustHave, { style?: React.CSSProperties }>,
@@ -225,7 +229,7 @@ type StyledComponent<T> = StyledMeta &
 type StaticPlaceholder = string | number | CSSProperties | StyledMeta;
 
 type HtmlStyledTag<TName extends keyof JSX.IntrinsicElements> = <
-  TAdditionalProps = Record<string, unknown>
+  TAdditionalProps = Record<never, unknown>
 >(
   strings: TemplateStringsArray,
   ...exprs: Array<