Skip to content

Commit 9b96ad5

Browse files
IgorbekIgorbek
authored
Merge pull request #32 from Igorbek/style-objects
Style objects
2 parents 103a84b + 9ee4d72 commit 9b96ad5

File tree

6 files changed

+257
-172
lines changed

6 files changed

+257
-172
lines changed

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"scripts": {
1414
"build": "tsc",
1515
"build:prod": "tsc --sourceMap false",
16+
"typecheck": "tsc --noEmit",
1617
"test:baselines": "jest --config ./jest.config.json",
1718
"test:watch": "yarn test:baselines -- --watch",
1819
"test": "yarn test:baselines",
@@ -25,11 +26,10 @@
2526
"devDependencies": {
2627
"@types/jest": "^23.3.13",
2728
"@types/jest-specific-snapshot": "^0.5.1",
28-
"@types/node": "^7.0.31",
29-
"@types/react": "^16.3.13",
29+
"@types/react": "^16.7.22",
30+
"@types/styled-components": "^4.1.6",
3031
"jest": "20",
3132
"jest-specific-snapshot": "^1.0.0",
32-
"styled-components": "^2.1.2",
3333
"ts-jest": "20",
3434
"ts-node": "^3.3.0",
3535
"typescript": "^3.3.1"

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`style-objects.ts 1`] = `
4+
5+
File: style-objects.ts
6+
Source code:
7+
8+
declare const styled: any;
9+
10+
const Button = styled.button({
11+
color: 'red'
12+
});
13+
14+
declare const nonStyled: any;
15+
16+
const NonButton = nonStyled.button({
17+
color: 'red'
18+
});
19+
20+
const OtherButton = styled(Button)({
21+
color: 'blue'
22+
});
23+
24+
const SuperButton = Button.extend({
25+
color: 'super'
26+
});
27+
28+
export default styled.link({
29+
color: 'black'
30+
});
31+
32+
export const SmallButton = Button.extend({
33+
fontSize: '.7em'
34+
});
35+
36+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' })({
37+
fontSize: '.1em'
38+
});
39+
40+
41+
TypeScript before transform:
42+
43+
declare const styled: any;
44+
const Button = styled.button({
45+
color: "red"
46+
});
47+
declare const nonStyled: any;
48+
const NonButton = nonStyled.button({
49+
color: "red"
50+
});
51+
const OtherButton = styled(Button)({
52+
color: "blue"
53+
});
54+
const SuperButton = Button.extend({
55+
color: "super"
56+
});
57+
export default styled.link({
58+
color: "black"
59+
});
60+
export const SmallButton = Button.extend({
61+
fontSize: ".7em"
62+
});
63+
const MiniButton = styled(SmallButton).attrs({ size: "mini" })({
64+
fontSize: ".1em"
65+
});
66+
67+
68+
TypeScript after transform:
69+
70+
declare const styled: any;
71+
const Button = styled.button.withConfig({ displayName: "Button" })({
72+
color: 'red'
73+
});
74+
declare const nonStyled: any;
75+
const NonButton = nonStyled.button({
76+
color: 'red'
77+
});
78+
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton" })({
79+
color: 'blue'
80+
});
81+
const SuperButton = Button.extend.withConfig({ displayName: "SuperButton" })({
82+
color: 'super'
83+
});
84+
export default styled.link({
85+
color: 'black'
86+
});
87+
export const SmallButton = Button.extend.withConfig({ displayName: "SmallButton" })({
88+
fontSize: '.7em'
89+
});
90+
const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton" })({
91+
fontSize: '.1em'
92+
});
93+
94+
95+
96+
`;

‎src/__tests__/baselines/ssr/style-objects.ts.baseline‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`style-objects.ts 1`] = `
4+
5+
File: style-objects.ts
6+
Source code:
7+
8+
declare const styled: any;
9+
10+
const Button = styled.button({
11+
color: 'red'
12+
});
13+
14+
declare const nonStyled: any;
15+
16+
const NonButton = nonStyled.button({
17+
color: 'red'
18+
});
19+
20+
const OtherButton = styled(Button)({
21+
color: 'blue'
22+
});
23+
24+
const SuperButton = Button.extend({
25+
color: 'super'
26+
});
27+
28+
export default styled.link({
29+
color: 'black'
30+
});
31+
32+
export const SmallButton = Button.extend({
33+
fontSize: '.7em'
34+
});
35+
36+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' })({
37+
fontSize: '.1em'
38+
});
39+
40+
41+
TypeScript before transform:
42+
43+
declare const styled: any;
44+
const Button = styled.button({
45+
color: "red"
46+
});
47+
declare const nonStyled: any;
48+
const NonButton = nonStyled.button({
49+
color: "red"
50+
});
51+
const OtherButton = styled(Button)({
52+
color: "blue"
53+
});
54+
const SuperButton = Button.extend({
55+
color: "super"
56+
});
57+
export default styled.link({
58+
color: "black"
59+
});
60+
export const SmallButton = Button.extend({
61+
fontSize: ".7em"
62+
});
63+
const MiniButton = styled(SmallButton).attrs({ size: "mini" })({
64+
fontSize: ".1em"
65+
});
66+
67+
68+
TypeScript after transform:
69+
70+
declare const styled: any;
71+
const Button = styled.button.withConfig({ displayName: "Button", componentId: "sc-7b7p9e" })({
72+
color: 'red'
73+
});
74+
declare const nonStyled: any;
75+
const NonButton = nonStyled.button({
76+
color: 'red'
77+
});
78+
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "sc-14ah7t" })({
79+
color: 'blue'
80+
});
81+
const SuperButton = Button.extend.withConfig({ displayName: "SuperButton", componentId: "sc-1t5v351" })({
82+
color: 'super'
83+
});
84+
export default styled.link({
85+
color: 'black'
86+
});
87+
export const SmallButton = Button.extend.withConfig({ displayName: "SmallButton", componentId: "sc-ftk9hu" })({
88+
fontSize: '.7em'
89+
});
90+
const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton", componentId: "sc-15rszef" })({
91+
fontSize: '.1em'
92+
});
93+
94+
95+
96+
`;

‎src/__tests__/fixtures/base/style-objects.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
declare const styled: any;
2+
3+
const Button = styled.button({
4+
color: 'red'
5+
});
6+
7+
declare const nonStyled: any;
8+
9+
const NonButton = nonStyled.button({
10+
color: 'red'
11+
});
12+
13+
const OtherButton = styled(Button)({
14+
color: 'blue'
15+
});
16+
17+
const SuperButton = Button.extend({
18+
color: 'super'
19+
});
20+
21+
export default styled.link({
22+
color: 'black'
23+
});
24+
25+
export const SmallButton = Button.extend({
26+
fontSize: '.7em'
27+
});
28+
29+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' })({
30+
fontSize: '.1em'
31+
});

‎src/createTransformer.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,8 +128,10 @@ export function createTransformer({
128128
const visitor: ts.Visitor = (node) => {
129129
if (
130130
node.parent
131-
&& isTaggedTemplateExpression(node.parent)
132-
&& node.parent.tag === node
131+
&& (
132+
isTaggedTemplateExpression(node.parent) && node.parent.tag === node
133+
|| isCallExpression(node.parent)
134+
)
133135
&& node.parent.parent
134136
&& isVariableDeclaration(node.parent.parent)
135137
&& isStyledFunction(node, identifiers)

0 commit comments

Comments
 (0)