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>>(); +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, @@ -225,7 +229,7 @@ type StyledComponent = StyledMeta & type StaticPlaceholder = string | number | CSSProperties | StyledMeta; type HtmlStyledTag = < - TAdditionalProps = Record + TAdditionalProps = Record >( strings: TemplateStringsArray, ...exprs: Array<