-
Notifications
You must be signed in to change notification settings - Fork 413
/
styled.ts
121 lines (96 loc) · 3.12 KB
/
styled.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
// eslint-disable-next-line import/no-extraneous-dependencies
import * as React from 'react';
import { css } from '../src';
import { styled } from '../src/react';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function isExtends<C, T>(arg1?: C, arg2?: T): C extends T ? 'extends' : never {
// It will never be executed, so the result doesn't matter.
return null as any;
}
// tslint:disable-next-line no-unnecessary-generics
const Fabric = <T>(): React.FC<T> => props => React.createElement('div', props);
const Header = (p: { children: string }) => React.createElement('h1', p);
// tslint:disable-next-line no-unnecessary-generics
const Generic = <T>(p: T & { className?: string }) =>
React.createElement('h1', p);
const StyledDiv = styled.div``;
// $ExpectType "extends"
isExtends<typeof StyledDiv, React.FC<React.DetailedHTMLProps<any, any>>>();
// component should have className property
// $ExpectError
styled(Fabric<{ a: string }>())``;
// className property should be string
// $ExpectError
styled(Fabric<{ className: number }>())``;
const SimplestComponent = styled(Fabric<{ className: string }>())``;
// $ExpectType "extends"
isExtends<typeof SimplestComponent, React.FC<{ className: string }>>();
styled(Fabric<{ className: string }>())`
// component should have style property
// $ExpectError
color: ${() => 'red'};
`;
styled(Fabric<{ className: string }>())`
// it looks like function, but it's a reference to another styled component
& > ${SimplestComponent} {
color: red;
}
`;
styled(Fabric<{ className: string }>())`
// it looks like the previous test, but it references a non-linaria component
// $ExpectError
& > ${Header} {
color: red;
}
`;
styled(Fabric<{ className: string; style: {} }>())`
color: ${() => 'red'};
`;
styled(Fabric<{ className: string; style: {} }>())`
// color should be defined in props
// $ExpectError
color: ${props => props.color};
`;
styled(Fabric<{ className: string; style: {}; color: 'red' | 'blue' }>())`
& > ${SimplestComponent} {
color: ${props => props.color};
}
`;
// $ExpectType number
Generic({ children: 123 }).props.children;
const StyledGeneric = styled(Generic)``;
// $ExpectType number
StyledGeneric({ children: 123 }).props.children;
styled.a`
& > ${SimplestComponent} {
color: red;
}
`({ href: 'about:blank' });
((/* Issue #536 */) => {
const Title = styled.div<{ background: string }>`
background: ${props => props.background};
`;
// $ExpectType "extends"
isExtends<typeof Title, React.FC<{ background: string }>>();
css`
${Title} {
color: green;
}
`;
})();
((/* Issue #622 */) => {
const Wrapper = styled.div<{ prop1: boolean }>`
width: 1em;
background-color: ${props => (props.prop1 ? 'transparent' : 'green')};
`;
const styledTag = styled(Wrapper);
const NewWrapper = styledTag<{ prop2: string }>`
width: 2em;
background-color: ${props => (props.prop1 ? 'transparent' : 'red')};
color: ${props => props.prop2};
`;
// $ExpectType Validator<boolean> | undefined
NewWrapper.propTypes!.prop1;
// $ExpectType Validator<string> | undefined
NewWrapper.propTypes!.prop2;
})();