Skip to content

Commit de3b10d

Browse files
acrazingacrazing
committed
chore: add compare & keywords
1 parent e773e0c commit de3b10d

10 files changed

+445
-100
lines changed

‎.gitignore

-1
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,3 @@ local-*
1919
*.tgz
2020
.idea/
2121
.vscode/
22-
/compare/

‎README.md

+40
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,46 @@
22

33
A styled-components plugin to minify & set componentId & displayName for typescript.
44

5+
This transformer helps you to transform the following code:
6+
7+
```typescript jsx
8+
export const CastProps = [
9+
styled.div<Props>`
10+
display: block;
11+
background: ${() => 'black'};
12+
color: white;
13+
`,
14+
styled(Base)<Props>`
15+
display: block;
16+
background: ${() => 'black'};
17+
color: white;
18+
`,
19+
];
20+
```
21+
22+
to the following format:
23+
24+
```typescript jsx
25+
export const CastProps = [
26+
styled.div.withConfig({
27+
componentId: 'sc-2mrASk-6',
28+
displayName: 'CastProps',
29+
})`
30+
display: block;
31+
background: ${() => 'black'};
32+
color: white;
33+
`,
34+
styled(Base).withConfig({
35+
componentId: 'sc-2mrASk-7',
36+
displayName: 'CastProps',
37+
})`
38+
display: block;
39+
background: ${() => 'black'};
40+
color: white;
41+
`,
42+
];
43+
```
44+
545
## Install
646

747
```bash

‎compare/output_babel.js

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
/*!
2+
* Copyright 2019 acrazing <[email protected]>. All rights reserved.
3+
* @since 2019-10-29 13:50:09
4+
*/
5+
import React from 'react';
6+
import styled, { createGlobalStyle, css, keyframes } from 'styled-components';
7+
8+
const Base = (props) => React.createElement('div', null, props.name);
9+
10+
export const Styled = [
11+
styled.div.withConfig({
12+
displayName: 'source__Styled',
13+
componentId: 'sc-1tkkdbu-0',
14+
})(['display:block;background:', ';color:white;'], () => 'black'),
15+
styled(Base).withConfig({
16+
displayName: 'source__Styled',
17+
componentId: 'sc-1tkkdbu-1',
18+
})(['display:block;background:', ';color:white;'], () => 'black'),
19+
];
20+
export const cssFragment = css(
21+
['display:block;background:', ';color:white;'],
22+
() => 'black',
23+
);
24+
export const GlobalStyle = createGlobalStyle`
25+
div{
26+
display: block;
27+
background: ${() => 'black'};
28+
color: white;
29+
}
30+
`;
31+
export const Keyframe = keyframes(
32+
['0%{display:block;background:', ';color:white;}'],
33+
'black',
34+
);
35+
export const WithAttrs = [
36+
styled.div
37+
.attrs({
38+
id: 'id',
39+
})
40+
.withConfig({
41+
displayName: 'source__WithAttrs',
42+
componentId: 'sc-1tkkdbu-2',
43+
})(['display:block;background:', ';color:white;'], () => 'black'),
44+
styled(Base)
45+
.attrs({
46+
id: 'id',
47+
})
48+
.withConfig({
49+
displayName: 'source__WithAttrs',
50+
componentId: 'sc-1tkkdbu-3',
51+
})(['display:block;background:', ';color:white;'], () => 'black'),
52+
];
53+
export const StyleObject = [
54+
styled.div.withConfig({
55+
displayName: 'source__StyleObject',
56+
componentId: 'sc-1tkkdbu-4',
57+
})({
58+
background: '#FFFFFF',
59+
}),
60+
styled(Base).withConfig({
61+
displayName: 'source__StyleObject',
62+
componentId: 'sc-1tkkdbu-5',
63+
})({
64+
background: '#FFFFFF',
65+
}),
66+
];
67+
export const CastProps = [
68+
styled.div.withConfig({
69+
displayName: 'source__CastProps',
70+
componentId: 'sc-1tkkdbu-6',
71+
})(['display:block;background:', ';color:white;'], () => 'black'),
72+
styled(Base).withConfig({
73+
displayName: 'source__CastProps',
74+
componentId: 'sc-1tkkdbu-7',
75+
})(['display:block;background:', ';color:white;'], () => 'black'),
76+
];
77+
export const CastFactory = [
78+
styled.div`
79+
display: block;
80+
background: ${() => 'black'};
81+
color: white;
82+
`,
83+
styled(Base)`
84+
display: block;
85+
background: ${() => 'black'};
86+
color: white;
87+
`,
88+
];
89+
export const CastAll = [
90+
styled.div.withConfig({
91+
displayName: 'source__CastAll',
92+
componentId: 'sc-1tkkdbu-8',
93+
})(['display:block;background:', ';color:white;'], () => 'black'),
94+
styled(Base).withConfig({
95+
displayName: 'source__CastAll',
96+
componentId: 'sc-1tkkdbu-9',
97+
})(['display:block;background:', ';color:white;'], () => 'black'),
98+
];
99+
export const TestBabelMinify = styled.div.withConfig({
100+
displayName: 'source__TestBabelMinify',
101+
componentId: 'sc-1tkkdbu-10',
102+
})(
103+
[
104+
".p0{content:'first raw';}.p1{content:",
105+
";}.p2{content:'second raw';}.p3{content:",
106+
";}content:'\\tlast raw ';",
107+
],
108+
() => 'first span',
109+
() => 'second span',
110+
);
111+
export const TestBabelMinifyOnce = styled.div.withConfig({
112+
displayName: 'source__TestBabelMinifyOnce',
113+
componentId: 'sc-1tkkdbu-11',
114+
})(["content:'raw ';"]);

‎compare/output_legacy_typescript.js

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
/*!
2+
* Copyright 2019 acrazing <[email protected]>. All rights reserved.
3+
* @since 2019-10-29 13:50:09
4+
*/
5+
import React from 'react';
6+
import styled, { createGlobalStyle, css, keyframes } from 'styled-components';
7+
8+
const Base = (props) => React.createElement('div', null, props.name);
9+
export const Styled = [
10+
styled.div`
11+
display: block;
12+
background: ${() => 'black'};
13+
color: white;
14+
`,
15+
styled(Base)`
16+
display: block;
17+
background: ${() => 'black'};
18+
color: white;
19+
`,
20+
];
21+
export const cssFragment = css`
22+
display: block;
23+
background: ${() => 'black'};
24+
color: white;
25+
`;
26+
export const GlobalStyle = createGlobalStyle`div{display:block;background:${() =>
27+
'black'};color:white;}`;
28+
export const Keyframe = keyframes`0%{display:block;background:${'black'};color:white;}`;
29+
export const WithAttrs = [
30+
styled.div.attrs({ id: 'id' })`
31+
display: block;
32+
background: ${() => 'black'};
33+
color: white;
34+
`,
35+
styled(Base).attrs({ id: 'id' })`
36+
display: block;
37+
background: ${() => 'black'};
38+
color: white;
39+
`,
40+
];
41+
export const StyleObject = [
42+
styled.div({ background: '#FFFFFF' }),
43+
styled(Base)({ background: '#FFFFFF' }),
44+
];
45+
export const CastProps = [
46+
styled.div`
47+
display: block;
48+
background: ${() => 'black'};
49+
color: white;
50+
`,
51+
styled(Base)`
52+
display: block;
53+
background: ${() => 'black'};
54+
color: white;
55+
`,
56+
];
57+
export const CastFactory = [
58+
styled.div`
59+
display: block;
60+
background: ${() => 'black'};
61+
color: white;
62+
`,
63+
styled(Base)`
64+
display: block;
65+
background: ${() => 'black'};
66+
color: white;
67+
`,
68+
];
69+
export const CastAll = [
70+
styled.div`
71+
display: block;
72+
background: ${() => 'black'};
73+
color: white;
74+
`,
75+
styled(Base)`
76+
display: block;
77+
background: ${() => 'black'};
78+
color: white;
79+
`,
80+
];
81+
export const TestBabelMinify = styled.div.withConfig({
82+
displayName: 'TestBabelMinify',
83+
componentId: 'sc-7lw2b9',
84+
})`
85+
.p0 {
86+
content: 'first raw';
87+
}
88+
.p1 {
89+
content: ${() => 'first span'};
90+
}
91+
.p2 {
92+
content: 'second raw';
93+
}
94+
.p3 {
95+
content: ${() => 'second span'};
96+
}
97+
content: '\\tlast raw
98+
';
99+
`;
100+
export const TestBabelMinifyOnce = styled.div.withConfig({
101+
displayName: 'TestBabelMinifyOnce',
102+
componentId: 'sc-1d3sax',
103+
})`
104+
content: 'raw
105+
';
106+
`;

0 commit comments

Comments
 (0)