fix(react): wrapped component should have className prop (#1136)

callstack · Nov 27, 2022 · 922f20d · 922f20d
1 parent e642089
commit 922f20d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/.changeset/nice-cameras-move.md 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
@@ -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
@@ -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<