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.
callstack · Aug 31, 2021 · eed92b1 · eed92b1
1 parent 6a062e1
commit eed92b1
Showing 1 changed file with 5 additions and 3 deletions.
diff --git 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)