Skip to content
This repository has been archived by the owner on Dec 13, 2018. It is now read-only.

Commit

Permalink
fix(css-properties): remove incorrect React.ReactChild from Lossy Uni…
Browse files Browse the repository at this point in the history 
…on (#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
  • Loading branch information
@luke-john
luke-john authored and Kent C. Dodds committed Feb 16, 2018
1 parent b843c27 commit a2dcedf
Show file tree
Hide file tree
Showing 6 changed files with 1,100 additions and 301 deletions.
54 changes: 27 additions & 27 deletions src/__tests__/__snapshots__/typescript.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; }'.
Expand All @@ -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\\")[]; }'.
Expand All @@ -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...'.
"
`;
74 changes: 68 additions & 6 deletions test/glamorous.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -473,7 +473,7 @@ const pureDivFactory2 = glamorous<ShouldClassNameUpdateProps, ShouldClassNameUpd
},
})

const Div = pureDivFactory({marginLeft: 1})
const PureDiv = pureDivFactory({marginLeft: 1})

// withProps

Expand Down Expand Up @@ -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>
);
Expand All @@ -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>
);
Loading

0 comments on commit a2dcedf

Please sign in to comment.