fix(css-properties): remove incorrect React.ReactChild from Lossy Union (#372)

* fix(css-properties): remove incorrect React.ReactChild from Lossy Union

This was originally added to fix a problem where built in glamorous components had been typed to accept the css properties union which included the lossy version.

By updating that component to instead use the css CompleteSingle interface the React.ReactChild is able to be removed.

* chore(typescript): add more test cases for built in components

* chore(typescript): update snapshot for new typescript version

* chore(typescript): add reported failing Div test case

Author: luke-john

src/__tests__/__snapshots__/typescript.js.snap

@@ -45,23 +45,23 @@ test/should-fail.test.tsx(135,20): error TS2551: Property 'visibles' does not ex
 test/should-fail.test.tsx(140,3): error TS2345: Argument of type '(props: { visible: boolean; } & object) => { display: \\"none\\" | \\"hidden\\"; }' is not assignable to parameter of type 'StyleArgument<CSSProperties, { visible: boolean; } & object>'.
   Type '(props: { visible: boolean; } & object) => { display: \\"none\\" | \\"hidden\\"; }' is not assignable to type '(string | CSSProperties | StyleFunction<CSSProperties, { visible: boolean; } & object>)[]'.
     Property 'push' is missing in type '(props: { visible: boolean; } & object) => { display: \\"none\\" | \\"hidden\\"; }'.
-test/should-fail.test.tsx(150,29): error TS2322: Type '{ visible: \\"string\\"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ExampleComponentProps & object & ExtraGl...'.
-  Type '{ visible: \\"string\\"; }' is not assignable to type 'Readonly<ExampleComponentProps & object & ExtraGlamorousProps>'.
+test/should-fail.test.tsx(150,29): error TS2322: Type '{ visible: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ExampleComponentProps & object & ExtraGl...'.
+  Type '{ visible: string; }' is not assignable to type 'Readonly<ExampleComponentProps & object & ExtraGlamorousProps>'.
     Types of property 'visible' are incompatible.
-      Type '\\"string\\"' is not assignable to type 'boolean'.
+      Type 'string' is not assignable to type 'boolean'.
 test/should-fail.test.tsx(151,5): error TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ExampleComponentProps & object & ExtraGl...'.
   Type '{}' is not assignable to type 'Readonly<ExampleComponentProps & object & ExtraGlamorousProps>'.
     Property 'visible' is missing in type '{}'.
-test/should-fail.test.tsx(152,32): error TS2322: Type '{ visible: \\"string\\"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<HTMLProps<HTMLDivElement> & { visible: b...'.
-  Type '{ visible: \\"string\\"; }' is not assignable to type 'Readonly<HTMLProps<HTMLDivElement> & { visible: boolean; } & object & ExtraGlamorousProps>'.
+test/should-fail.test.tsx(152,32): error TS2322: Type '{ visible: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<HTMLProps<HTMLDivElement> & { visible: b...'.
+  Type '{ visible: string; }' is not assignable to type 'Readonly<HTMLProps<HTMLDivElement> & { visible: boolean; } & object & ExtraGlamorousProps>'.
     Types of property 'visible' are incompatible.
-      Type '\\"string\\"' is not assignable to type 'boolean'.
+      Type 'string' is not assignable to type 'boolean'.
 test/should-fail.test.tsx(153,5): error TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<HTMLProps<HTMLDivElement> & { visible: b...'.
   Type '{}' is not assignable to type 'Readonly<HTMLProps<HTMLDivElement> & { visible: boolean; } & object & ExtraGlamorousProps>'.
     Property 'visible' is missing in type '{}'.
-test/should-fail.test.tsx(157,21): error TS2345: Argument of type '{ allowReorder: false; }' is not assignable to parameter of type 'StyleArgument<SVGProperties, object & {}>'.
-  Type '{ allowReorder: false; }' is not assignable to type '(string | SVGProperties | StyleFunction<SVGProperties, object & {}>)[]'.
-    Property 'length' is missing in type '{ allowReorder: false; }'.
+test/should-fail.test.tsx(157,21): error TS2345: Argument of type '{ allowReorder: boolean; }' is not assignable to parameter of type 'StyleArgument<SVGProperties, object & {}>'.
+  Type '{ allowReorder: boolean; }' is not assignable to type '(string | SVGProperties | StyleFunction<SVGProperties, object & {}>)[]'.
+    Property 'length' is missing in type '{ allowReorder: boolean; }'.
 test/should-fail.test.tsx(158,18): error TS2345: Argument of type '{ color: boolean; }' is not assignable to parameter of type 'StyleArgument<CSSProperties, object & {}>'.
   Type '{ color: boolean; }' is not assignable to type '(string | CSSProperties | StyleFunction<CSSProperties, object & {}>)[]'.
     Property 'length' is missing in type '{ color: boolean; }'.
@@ -81,21 +81,21 @@ test/should-fail.test.tsx(224,3): error TS2345: Argument of type '(props: { visi
 test/should-fail.test.tsx(229,1): error TS2554: Expected 1 arguments, but got 0.
 test/should-fail.test.tsx(230,30): error TS2345: Argument of type '\\"\\"' is not assignable to parameter of type 'object'.
 test/should-fail.test.tsx(231,30): error TS2345: Argument of type 'false' is not assignable to parameter of type 'object'.
-test/should-fail.test.tsx(257,19): error TS2559: Type '{ d: \\"\\"; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<HTMLProps<HTMLDivElement> & Partial<{ pr...'.
-test/should-fail.test.tsx(258,19): error TS2322: Type '{ primaryColor: 1; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<HTMLProps<HTMLDivElement> & Partial<{ pr...'.
-  Type '{ primaryColor: 1; }' is not assignable to type 'Readonly<HTMLProps<HTMLDivElement> & Partial<{ primaryColor: string; }> & Pick<{ theme?: any; }, ...'.
+test/should-fail.test.tsx(257,19): error TS2559: Type '{ d: string; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<HTMLProps<HTMLDivElement> & Partial<{ pr...'.
+test/should-fail.test.tsx(258,19): error TS2322: Type '{ primaryColor: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<HTMLProps<HTMLDivElement> & Partial<{ pr...'.
+  Type '{ primaryColor: number; }' is not assignable to type 'Readonly<HTMLProps<HTMLDivElement> & Partial<{ primaryColor: string; }> & Pick<{ theme?: any; }, ...'.
     Types of property 'primaryColor' are incompatible.
-      Type '1' is not assignable to type 'string | undefined'.
-test/should-fail.test.tsx(259,31): error TS2559: Type '{ d: \\"\\"; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Partial<{ primaryColor: string; }> & Pic...'.
-test/should-fail.test.tsx(260,31): error TS2322: Type '{ primaryColor: 1; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Partial<{ primaryColor: string; }> & Pic...'.
-  Type '{ primaryColor: 1; }' is not assignable to type 'Readonly<Partial<{ primaryColor: string; }> & Pick<{ theme: any; }, never> & ExtraGlamorousProps>'.
+      Type 'number' is not assignable to type 'string | undefined'.
+test/should-fail.test.tsx(259,31): error TS2559: Type '{ d: string; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Partial<{ primaryColor: string; }> & Pic...'.
+test/should-fail.test.tsx(260,31): error TS2322: Type '{ primaryColor: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Partial<{ primaryColor: string; }> & Pic...'.
+  Type '{ primaryColor: number; }' is not assignable to type 'Readonly<Partial<{ primaryColor: string; }> & Pick<{ theme: any; }, never> & ExtraGlamorousProps>'.
     Types of property 'primaryColor' are incompatible.
-      Type '1' is not assignable to type 'string | undefined'.
-test/should-fail.test.tsx(261,31): error TS2559: Type '{ d: \\"\\"; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<object & Partial<{ primaryColor: string;...'.
-test/should-fail.test.tsx(262,31): error TS2322: Type '{ primaryColor: 1; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<object & Partial<{ primaryColor: string;...'.
-  Type '{ primaryColor: 1; }' is not assignable to type 'Readonly<object & Partial<{ primaryColor: string; }> & ExtraGlamorousProps>'.
+      Type 'number' is not assignable to type 'string | undefined'.
+test/should-fail.test.tsx(261,31): error TS2559: Type '{ d: string; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<object & Partial<{ primaryColor: string;...'.
+test/should-fail.test.tsx(262,31): error TS2322: Type '{ primaryColor: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<object & Partial<{ primaryColor: string;...'.
+  Type '{ primaryColor: number; }' is not assignable to type 'Readonly<object & Partial<{ primaryColor: string; }> & ExtraGlamorousProps>'.
     Types of property 'primaryColor' are incompatible.
-      Type '1' is not assignable to type 'string | undefined'.
+      Type 'number' is not assignable to type 'string | undefined'.
 test/should-fail.test.tsx(267,15): error TS2345: Argument of type '{ textAlign: \\"center\\"; display: (\\"block\\" | \\"flexs\\")[]; }' is not assignable to parameter of type 'StyleArgument<CSSProperties, {}>'.
   Type '{ textAlign: \\"center\\"; display: (\\"block\\" | \\"flexs\\")[]; }' is not assignable to type '(string | CSSProperties | StyleFunction<CSSProperties, {}>)[]'.
     Property 'length' is missing in type '{ textAlign: \\"center\\"; display: (\\"block\\" | \\"flexs\\")[]; }'.
@@ -105,14 +105,14 @@ test/should-fail.test.tsx(272,18): error TS2345: Argument of type '{ textAlign:
 test/should-fail.test.tsx(289,35): error TS2322: Type '{ display: \\"blocks\\"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<object & CSSProperties & ExtraGlamorousP...'.
   Type '{ display: \\"blocks\\"; }' is not assignable to type 'Readonly<object & CSSProperties & ExtraGlamorousProps>'.
     Types of property 'display' are incompatible.
-      Type '\\"blocks\\"' is not assignable to type '\\"none\\" | \\"table\\" | \\"ruby\\" | \\"initial\\" | \\"inherit\\" | \\"unset\\" | \\"block\\" | \\"inline\\" | \\"run-in\\" | \\"fl...'.
-test/should-fail.test.tsx(290,38): error TS2559: Type '{ display: \\"block\\"; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<object & ExtraGlamorousProps, ComponentS...'.
-test/should-fail.test.tsx(291,42): error TS2559: Type '{ display: \\"block\\"; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<object & ExtraGlamorousProps, ComponentS...'.
+      Type '\\"blocks\\"' is not assignable to type '\\"none\\" | \\"ruby\\" | \\"table\\" | \\"inline\\" | \\"grid\\" | \\"initial\\" | \\"inherit\\" | \\"unset\\" | \\"block\\" | \\"run-...'.
+test/should-fail.test.tsx(290,38): error TS2559: Type '{ display: string; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<object & ExtraGlamorousProps, ComponentS...'.
+test/should-fail.test.tsx(291,42): error TS2559: Type '{ display: string; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<object & ExtraGlamorousProps, ComponentS...'.
 test/should-fail.test.tsx(293,29): error TS2322: Type '{ display: \\"blocks\\"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<HTMLProps<HTMLDivElement> & object & CSS...'.
   Type '{ display: \\"blocks\\"; }' is not assignable to type 'Readonly<HTMLProps<HTMLDivElement> & object & CSSProperties & ExtraGlamorousProps>'.
     Types of property 'display' are incompatible.
-      Type '\\"blocks\\"' is not assignable to type '\\"none\\" | \\"table\\" | \\"ruby\\" | \\"initial\\" | \\"inherit\\" | \\"unset\\" | \\"block\\" | \\"inline\\" | \\"run-in\\" | \\"fl...'.
-test/should-fail.test.tsx(294,32): error TS2559: Type '{ display: \\"block\\"; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<HTMLProps<HTMLDivElement> & object & Ext...'.
-test/should-fail.test.tsx(295,36): error TS2559: Type '{ display: \\"block\\"; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<HTMLProps<HTMLDivElement> & object & Ext...'.
+      Type '\\"blocks\\"' is not assignable to type '\\"none\\" | \\"ruby\\" | \\"table\\" | \\"inline\\" | \\"grid\\" | \\"initial\\" | \\"inherit\\" | \\"unset\\" | \\"block\\" | \\"run-...'.
+test/should-fail.test.tsx(294,32): error TS2559: Type '{ display: string; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<HTMLProps<HTMLDivElement> & object & Ext...'.
+test/should-fail.test.tsx(295,36): error TS2559: Type '{ display: string; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<HTMLProps<HTMLDivElement> & object & Ext...'.
 "
 `;

test/glamorous.test.tsx

@@ -473,7 +473,7 @@ const pureDivFactory2 = glamorous<ShouldClassNameUpdateProps, ShouldClassNameUpd
   },
 })
 
-const Div = pureDivFactory({marginLeft: 1})
+const PureDiv = pureDivFactory({marginLeft: 1})
 
 // withProps
 
@@ -534,17 +534,26 @@ const usePropsAreCssOverrides = (
   </div>
 )
 
-const BuiltinSingleElement: JSX.Element = <glamorous.Div />;
+import { Span, Div } from "../"
+
+const testDiv: React.ReactNode = (
+  <Div>
+    <Div />
+  </Div>
+)
+
+const BuiltinSingleElement: JSX.Element = <glamorous.Div display="block" onClick={() => {}} />;
+const BuiltinSingleElementNamedExport: JSX.Element = <Span display="block" onClick={() => {}} />;
 
 const BuiltinSingleChild: JSX.Element = (
   <glamorous.Div>
-    <glamorous.Span>Hello, world!</glamorous.Span>
+    <Span>Hello, world!</Span>
   </glamorous.Div>
 );
 
 const BuiltinMultipleChild: JSX.Element = (
   <glamorous.Div>
-    <glamorous.Span>Hello,</glamorous.Span>
+    <Span>Hello,</Span>
     <glamorous.Span>world!</glamorous.Span>
   </glamorous.Div>
 );
@@ -559,8 +568,61 @@ const BuiltinStyledWithSingleChild: JSX.Element = (
 );
 
 const BuiltinStyledWithMultipleChild: JSX.Element = (
-  <glamorous.Div color='red'>
+  <glamorous.Div color='red' onClick={() => {}}>
     <glamorous.Span>Hello,</glamorous.Span>
-    <glamorous.Span>world!</glamorous.Span>
+    <Span>world!</Span>
+  </glamorous.Div>
+);
+
+const CustomStatelessComponent: React.SFC<{}> = (_props) => <div />
+class CustomClassComponent extends React.Component<{}, {}> {
+  render() {
+    return null
+  }
+}
+const CustomGlamorousComponent = glamorous.div()
+const CustomGlamorousComponent2 = glamorous('div')()
+const CustomGlamorousComponent3 = glamorous(CustomGlamorousComponent)()
+const BuiltinStyledComponentChildren: JSX.Element = (
+  <glamorous.Div height={18} onClick={() => {}}>
+    {}
+    <CustomStatelessComponent />
+    <CustomClassComponent />
+    <CustomGlamorousComponent />
+    <CustomGlamorousComponent2 />
+    <CustomGlamorousComponent3 />
   </glamorous.Div>
+)
+const BuiltinStyledWithPrimitivesChildren: JSX.Element = (
+  <PureDiv color='red'>
+    {null}
+    {false}
+    {true}
+    {undefined}
+    {5}
+  </PureDiv>
+);
+
+const BuiltinStyledWithFragment: JSX.Element = (
+  <div>
+    <glamorous.Div color='red' onClick={() => {}}>
+      <React.Fragment />
+    </glamorous.Div>
+    <Span color='red' onClick={() => {}}>
+      <React.Fragment />
+    </Span>
+  </div>
+);
+
+const cssProps = {
+  ":active": {
+    color: "purple"
+  }
+};
+
+const BuiltinStyledWithCSSPseudoProps = (
+  <div>
+    <glamorous.A {...cssProps} />
+    <glamorous.A css={cssProps} />
+  </div>
 );