From eed92b19e3b779b656fb780307bbab8a08d14ba2 Mon Sep 17 00:00:00 2001
From: Dmitry Kharitonov <geakstr@me.com>
Date: Wed, 1 Sep 2021 00:56:22 +0400
Subject: [PATCH] fix(react): fixes for `--exactOptionalPropertyTypes` TS flag
 (#827)

TypeScript 4.4 introduced new `--exactOptionalPropertyTypes` flag. With this flag enabled typescript compiler strictly distinguish between `?` and `undefined` type. Currently `@types/react:17.0` package has `className?: string | undefined` and `style?: CSSProperties | undefined` specified for html attributes, but linaria types are only marked as `?` but `undefined`. This patch fixes this incompatibility.
---
 packages/react/src/styled.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/styled.ts b/packages/react/src/styled.ts
index 1bcbe02c9..81fed84d2 100644
--- a/packages/react/src/styled.ts
+++ b/packages/react/src/styled.ts
@@ -63,13 +63,15 @@ interface IProps {
 // If styled wraps custom component, that component should have className property
 function styled<TConstructor extends React.FunctionComponent<any>>(
   tag: TConstructor extends React.FunctionComponent<infer T>
-    ? T extends { className?: string }
+    ? T extends { className?: string | undefined }
       ? TConstructor
       : never
     : never
 ): ComponentStyledTag<TConstructor>;
 function styled<T>(
-  tag: T extends { className?: string } ? React.ComponentType<T> : never
+  tag: T extends { className?: string | undefined }
+    ? React.ComponentType<T>
+    : never
 ): ComponentStyledTag<T>;
 function styled<TName extends keyof JSX.IntrinsicElements>(
   tag: TName
@@ -197,7 +199,7 @@ type ComponentStyledTag<T> = <
 >(
   strings: TemplateStringsArray,
   // Expressions can contain functions only if wrapped component has style property
-  ...exprs: TrgProps extends { style?: React.CSSProperties }
+  ...exprs: TrgProps extends { style?: React.CSSProperties | undefined }
     ? Array<
         | StaticPlaceholder
         | ((props: NoInfer<OwnProps & TrgProps>) => string | number)