Skip to content

Commit 0ad2b41

Browse files
committed
Upgrade to TypeScript 4.2 and update transformer
- typescript 4.2 - transformer does not require parent node - add transpileModule API tests to baselines
1 parent bb5cdd9 commit 0ad2b41

38 files changed

+722
-227
lines changed

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
},
2222
"typings": "dist/index.d.ts",
2323
"peerDependencies": {
24-
"typescript": "^2.5.2 || ^3.0 || ^4.0"
24+
"typescript": "^4.0"
2525
},
2626
"devDependencies": {
2727
"@types/jest": "^25.2.1",
@@ -33,7 +33,7 @@
3333
"jest-specific-snapshot": "^2.0.0",
3434
"ts-jest": "24.2.0",
3535
"ts-node": "^8.0.2",
36-
"typescript": "^3.3.1"
36+
"typescript": "~4.2"
3737
},
3838
"files": [
3939
"dist"

src/__tests__/baselines/base/issue33.ts.baseline

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,5 +45,13 @@ TypeScript after transform:
4545
const Button4 = _.extend \` color: red \`;
4646

4747

48+
TypeScript after transpile module:
49+
50+
const Button1 = Button.extend \` color: red \`;
51+
const Button2 = $.extend \` color: red \`;
52+
const Button3 = jQuery.extend \` color: red \`;
53+
const Button4 = _.extend \` color: red \`;
54+
55+
4856

4957
`;

src/__tests__/baselines/base/sample1.ts.baseline

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ Source code:
4040

4141
TypeScript before transform:
4242

43-
import styled from "styled-components";
43+
import styled from 'styled-components';
4444
const Button = styled.button \`
4545
color: red;
4646
\`;
@@ -60,7 +60,7 @@ TypeScript before transform:
6060
export const SmallButton = Button.extend \`
6161
font-size: .7em;
6262
\`;
63-
const MiniButton = styled(SmallButton).attrs({ size: "mini" }) \`
63+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }) \`
6464
font-size: .1em;
6565
\`;
6666

@@ -87,7 +87,33 @@ TypeScript after transform:
8787
export const SmallButton = Button.extend \`
8888
font-size: .7em;
8989
\`;
90-
const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton" }) \`
90+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton" }) \`
91+
font-size: .1em;
92+
\`;
93+
94+
95+
TypeScript after transpile module:
96+
97+
import styled from 'styled-components';
98+
const Button = styled.button.withConfig({ displayName: "Button" }) \`
99+
color: red;
100+
\`;
101+
const NonButton = nonStyled.button \`
102+
yo
103+
\`;
104+
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton" }) \`
105+
color: blue;
106+
\`;
107+
const SuperButton = Button.extend \`
108+
color: super;
109+
\`;
110+
export default styled.link \`
111+
color: black;
112+
\`;
113+
export const SmallButton = Button.extend \`
114+
font-size: .7em;
115+
\`;
116+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton" }) \`
91117
font-size: .1em;
92118
\`;
93119

src/__tests__/baselines/base/sample2.ts.baseline

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Source code:
1515

1616
TypeScript before transform:
1717

18-
import styled from "styled-components";
18+
import styled from 'styled-components';
1919
const styled2 = styled;
2020
const NonButton = styled.button;
2121
const NonStyled = styled \` color: red; \`;
@@ -31,5 +31,14 @@ TypeScript after transform:
3131
const Link = styled(NonStyled).withConfig({ displayName: "Link" }) \` color: red; \`;
3232

3333

34+
TypeScript after transpile module:
35+
36+
import styled from 'styled-components';
37+
const styled2 = styled;
38+
const NonButton = styled.button;
39+
const NonStyled = styled \` color: red; \`;
40+
const Link = styled(NonStyled).withConfig({ displayName: "Link" }) \` color: red; \`;
41+
42+
3443

3544
`;

src/__tests__/baselines/base/sample3.tsx.baseline

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,14 @@ Source code:
2424

2525
TypeScript before transform:
2626

27-
import * as React from "react";
28-
import styled from "../themed-styled";
29-
import { SmallButton } from "./sample1";
27+
import * as React from 'react';
28+
import styled from '../themed-styled';
29+
import { SmallButton } from './sample1';
3030
interface LabelProps {
3131
size: number;
3232
}
3333
const CustomLabel = styled.label \`
34-
font-size: \${(props: LabelProps) => props.size + "px"}
34+
font-size: \${(props: LabelProps) => props.size + 'px'}
3535
\`;
3636
const LabeledLink = () => <SmallButton />;
3737
export default CustomLabel;
@@ -52,5 +52,15 @@ TypeScript after transform:
5252
export default CustomLabel;
5353

5454

55+
TypeScript after transpile module:
56+
57+
import styled from '../themed-styled';
58+
const CustomLabel = styled.label.withConfig({ displayName: "CustomLabel" }) \`
59+
font-size: \${(props) => props.size + 'px'}
60+
\`;
61+
const LabeledLink = () => />;;
62+
export default CustomLabel;
63+
64+
5565

5666
`;

src/__tests__/baselines/base/style-objects.ts.baseline

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -42,26 +42,26 @@ TypeScript before transform:
4242

4343
declare const styled: any;
4444
const Button = styled.button({
45-
color: "red"
45+
color: 'red'
4646
});
4747
declare const nonStyled: any;
4848
const NonButton = nonStyled.button({
49-
color: "red"
49+
color: 'red'
5050
});
5151
const OtherButton = styled(Button)({
52-
color: "blue"
52+
color: 'blue'
5353
});
5454
const SuperButton = Button.extend({
55-
color: "super"
55+
color: 'super'
5656
});
5757
export default styled.link({
58-
color: "black"
58+
color: 'black'
5959
});
6060
export const SmallButton = Button.extend({
61-
fontSize: ".7em"
61+
fontSize: '.7em'
6262
});
63-
const MiniButton = styled(SmallButton).attrs({ size: "mini" })({
64-
fontSize: ".1em"
63+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' })({
64+
fontSize: '.1em'
6565
});
6666

6767

@@ -87,7 +87,32 @@ TypeScript after transform:
8787
export const SmallButton = Button.extend({
8888
fontSize: '.7em'
8989
});
90-
const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton" })({
90+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton" })({
91+
fontSize: '.1em'
92+
});
93+
94+
95+
TypeScript after transpile module:
96+
97+
const Button = styled.button.withConfig({ displayName: "Button" })({
98+
color: 'red'
99+
});
100+
const NonButton = nonStyled.button({
101+
color: 'red'
102+
});
103+
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton" })({
104+
color: 'blue'
105+
});
106+
const SuperButton = Button.extend({
107+
color: 'super'
108+
});
109+
export default styled.link({
110+
color: 'black'
111+
});
112+
export const SmallButton = Button.extend({
113+
fontSize: '.7em'
114+
});
115+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton" })({
91116
fontSize: '.1em'
92117
});
93118

src/__tests__/baselines/minification-only/issue142.tsx.baseline

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,5 +36,10 @@ TypeScript after transform:
3636
const Header = styled.div \`display:flex;align-items:center;justify-content:space-between;font-weight:600;padding:0.8em 1.6em;background:peachpuff;\`;
3737

3838

39+
TypeScript after transpile module:
40+
41+
const Header = styled.div \`display:flex;align-items:center;justify-content:space-between;font-weight:600;padding:0.8em 1.6em;background:peachpuff;\`;
42+
43+
3944

4045
`;

src/__tests__/baselines/minification-only/issue36-extended.ts.baseline

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,18 +30,18 @@ TypeScript before transform:
3030

3131
declare const styled: any;
3232
export const A = styled.div \`
33-
border: \${"solid"} 10px;
33+
border: \${'solid'} 10px;
3434
\`;
3535
styled.div \`
36-
border: \${"solid"}// comment here
36+
border: \${'solid'}// comment here
3737
10px;
3838
border: solid// comment here
3939
10px;
4040
\`;
4141
styled.div \`
42-
border: \${"solid"}/* comment here
42+
border: \${'solid'}/* comment here
4343
*/10px;
44-
border: \${"solid"}/* comment here
44+
border: \${'solid'}/* comment here
4545
*/ 10px;
4646
\`;
4747

@@ -54,5 +54,12 @@ TypeScript after transform:
5454
styled.div \`border:\${'solid'} 10px;border:\${'solid'} 10px;\`;
5555

5656

57+
TypeScript after transpile module:
58+
59+
export const A = styled.div \`border:\${'solid'} 10px;\`;
60+
styled.div \`border:\${'solid'} 10px;border:solid 10px;\`;
61+
styled.div \`border:\${'solid'} 10px;border:\${'solid'} 10px;\`;
62+
63+
5764

5865
`;

src/__tests__/baselines/minification-only/issue36.tsx.baseline

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,5 +53,11 @@ TypeScript after transform:
5353
export const StyledDiv = styled.div \`width:100px;height:100px;background-color:greenyellow;animation:\${rotate360} 2s linear infinite;\`;
5454

5555

56+
TypeScript after transpile module:
57+
58+
const rotate360 = keyframes \`from{transform:rotate(0deg);}to{transform:rotate(360deg);}\`;
59+
export const StyledDiv = styled.div \`width:100px;height:100px;background-color:greenyellow;animation:\${rotate360} 2s linear infinite;\`;
60+
61+
5662

5763
`;

src/__tests__/baselines/minification-only/issue40.ts.baseline

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ Source code:
1313
TypeScript before transform:
1414

1515
declare const styled: any;
16-
styled.div \`padding: 0 0 13px \${"50px"};\`;
16+
styled.div \`padding: 0 0 13px \${'50px'};\`;
1717

1818

1919
TypeScript after transform:
@@ -22,5 +22,10 @@ TypeScript after transform:
2222
styled.div \`padding:0 0 13px \${'50px'};\`;
2323

2424

25+
TypeScript after transpile module:
26+
27+
styled.div \`padding:0 0 13px \${'50px'};\`;
28+
29+
2530

2631
`;

0 commit comments

Comments
 (0)