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

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

Merged
merged 5 commits into from
Feb 16, 2018
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b715929
fix(css-properties): remove incorrect React.ReactChild from Lossy Union
luke-john Jan 9, 2018
a821469
chore(typescript): add more test cases for built in components
luke-john Jan 9, 2018
5942dad
Merge branch 'master' into fix/built-in-glamorous-components_properties
Feb 12, 2018
daab1fd
chore(typescript): update snapshot for new typescript version
luke-john Feb 16, 2018
8738c76
chore(typescript): add reported failing Div test case
luke-john Feb 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 27 additions & 27 deletions src/__tests__/__snapshots__/typescript.js.snap
View file
Open in desktop
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
Open in desktop
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