Skip to content

Commit d24c62a

Browse files
author
Igor Oleinikov
committed
Merge master
2 parents e739b94 + 347ece6 commit d24c62a

20 files changed

+1097
-630
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"devDependencies": {
2727
"@types/jest": "^24.0.9",
2828
"@types/jest-specific-snapshot": "^0.5.3",
29-
"@types/node": "^7.0.31",
29+
"@types/node": "^12.7.4",
3030
"@types/react": "^16.7.22",
3131
"@types/styled-components": "^4.1.6",
3232
"danger": "^9.1.8",

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

+21-7
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,28 @@ Source code:
4141
TypeScript before transform:
4242

4343
import styled from "styled-components";
44-
const Button = styled.button \`\\n color: red;\\n\`;
44+
const Button = styled.button \`
45+
color: red;
46+
\`;
4547
declare const nonStyled: any;
46-
const NonButton = nonStyled.button \`\\n yo\\n\`;
47-
const OtherButton = styled(Button) \`\\n color: blue;\\n\`;
48-
const SuperButton = Button.extend \`\\n color: super;\\n\`;
49-
export default styled.link \`\\n color: black;\\n\`;
50-
export const SmallButton = Button.extend \`\\n font-size: .7em;\\n\`;
51-
const MiniButton = styled(SmallButton).attrs({ size: "mini" }) \`\\n font-size: .1em;\\n\`;
48+
const NonButton = nonStyled.button \`
49+
yo
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+
font-size: .7em;
62+
\`;
63+
const MiniButton = styled(SmallButton).attrs({ size: "mini" }) \`
64+
font-size: .1em;
65+
\`;
5266

5367

5468
TypeScript after transform:

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ TypeScript before transform:
3030
interface LabelProps {
3131
size: number;
3232
}
33-
const CustomLabel = styled.label \`\\n font-size: \${(props: LabelProps) => props.size + "px"}\\n\`;
33+
const CustomLabel = styled.label \`
34+
font-size: \${(props: LabelProps) => props.size + "px"}
35+
\`;
3436
const LabeledLink = () => <SmallButton />;
3537
export default CustomLabel;
3638

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

+15-3
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,21 @@ Source code:
2929
TypeScript before transform:
3030

3131
declare const styled: any;
32-
export const A = styled.div \`\\n border: \${"solid"} 10px;\\n\`;
33-
styled.div \`\\n border: \${"solid"}// comment here\\n10px;\\n border: solid// comment here\\n10px;\\n\`;
34-
styled.div \`\\n border: \${"solid"}/* comment here\\n*/10px;\\n border: \${"solid"}/* comment here\\n*/ 10px;\\n\`;
32+
export const A = styled.div \`
33+
border: \${"solid"} 10px;
34+
\`;
35+
styled.div \`
36+
border: \${"solid"}// comment here
37+
10px;
38+
border: solid// comment here
39+
10px;
40+
\`;
41+
styled.div \`
42+
border: \${"solid"}/* comment here
43+
*/10px;
44+
border: \${"solid"}/* comment here
45+
*/ 10px;
46+
\`;
3547

3648

3749
TypeScript after transform:

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

+14-2
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,20 @@ TypeScript before transform:
2929

3030
declare const keyframes: any;
3131
declare const styled: any;
32-
const rotate360 = keyframes \`\\n from {\\n transform: rotate(0deg);\\n }\\n to {\\n transform: rotate(360deg);\\n }\\n\`;
33-
export const StyledDiv = styled.div \`\\n width: 100px;\\n height: 100px;\\n background-color: greenyellow;\\n animation: \${rotate360} 2s linear infinite;\\n\`;
32+
const rotate360 = keyframes \`
33+
from {
34+
transform: rotate(0deg);
35+
}
36+
to {
37+
transform: rotate(360deg);
38+
}
39+
\`;
40+
export const StyledDiv = styled.div \`
41+
width: 100px;
42+
height: 100px;
43+
background-color: greenyellow;
44+
animation: \${rotate360} 2s linear infinite;
45+
\`;
3446

3547

3648
TypeScript after transform:

‎src/__tests__/baselines/minification-only/minify-css-in-helpers.ts.baseline

+17-4
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,21 @@ TypeScript before transform:
3838
declare const css: any;
3939
declare const createGlobalStyle: any;
4040
declare const theColor: any;
41-
const key = keyframes \`\\n to {\\n transform: rotate(360deg);\\n }\\n\`;
42-
const color = css \`\\n color: \${theColor};\\n\`;
43-
const MyRedBody = createGlobalStyle \`\\n body {\\n background-color: red; // comments\\n \${color} // comments\\n // it will be ignored, but still emitted \${color}\\n }\\n\`;
41+
const key = keyframes \`
42+
to {
43+
transform: rotate(360deg);
44+
}
45+
\`;
46+
const color = css \`
47+
color: \${theColor};
48+
\`;
49+
const MyRedBody = createGlobalStyle \`
50+
body {
51+
background-color: red; // comments
52+
\${color} // comments
53+
// it will be ignored, but still emitted \${color}
54+
}
55+
\`;
4456
export {};
4557

4658

@@ -52,7 +64,8 @@ TypeScript after transform:
5264
declare const theColor: any;
5365
const key = keyframes \`to{transform:rotate(360deg);}\`;
5466
const color = css \`color:\${theColor};\`;
55-
const MyRedBody = createGlobalStyle \`body{background-color:red;\${color}//\${color}\\n}\`;
67+
const MyRedBody = createGlobalStyle \`body{background-color:red;\${color}//\${color}
68+
}\`;
5669
export {};
5770

5871

‎src/__tests__/baselines/minification-only/minify-css-to-use-with-transpilation.ts.baseline

+18-5
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,24 @@ Source code:
3636
TypeScript before transform:
3737

3838
declare const styled: any;
39-
const Simple = styled.div \`\\n width: 100%;\\n\`;
40-
const Interpolation = styled.div \`\\n content: " \${props => props.text} ";\\n\`;
41-
const SpecialCharacters = styled.div \`\\n content: " \${props => props.text} ";\\n color: red;\\n\`;
42-
const Comment = styled.div \`\\n // comment\\n color: red;\\n\`;
43-
const Parens = styled.div \`\\n &:hover {\\n color: blue;\\n }\\n\`;
39+
const Simple = styled.div \`
40+
width: 100%;
41+
\`;
42+
const Interpolation = styled.div \`
43+
content: " \${props => props.text} ";
44+
\`;
45+
const SpecialCharacters = styled.div \`
46+
content: " \${props => props.text} ";\\n color: red;
47+
\`;
48+
const Comment = styled.div \`
49+
// comment
50+
color: red;
51+
\`;
52+
const Parens = styled.div \`
53+
&:hover {
54+
color: blue;
55+
}
56+
\`;
4457
export {};
4558

4659

‎src/__tests__/baselines/minification-only/minify-css-to-use-without-transpilation.ts.baseline

+29-6
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,35 @@ Source code:
4848
TypeScript before transform:
4949

5050
declare const styled: any;
51-
const Simple = styled.div \`\\n width: 100%;\\n\`;
52-
const Interpolation = styled.div \`\\n content: "https://test.com/\${props => props.endpoint}";\\n\`;
53-
const SpecialCharacters = styled.div \`\\n content: " \${props => props.text} ";\\n color: red;\\n\`;
54-
const Comment = styled.div \`\\n width: 100%;\\n // comment\\n color: red;\\n\`;
55-
const Parens = styled.div \`\\n &:hover {\\n color: blue;\\n }\\n color: red;\\n\`;
56-
const UrlComments = styled.div \`\\n color: red;\\n /* // */\\n background: red;\\n /* comment 1 */\\n /* comment 2 */\\n // comment 3\\n border: 1px solid green;\\n\`;
51+
const Simple = styled.div \`
52+
width: 100%;
53+
\`;
54+
const Interpolation = styled.div \`
55+
content: "https://test.com/\${props => props.endpoint}";
56+
\`;
57+
const SpecialCharacters = styled.div \`
58+
content: " \${props => props.text} ";\\n color: red;
59+
\`;
60+
const Comment = styled.div \`
61+
width: 100%;
62+
// comment
63+
color: red;
64+
\`;
65+
const Parens = styled.div \`
66+
&:hover {
67+
color: blue;
68+
}
69+
color: red;
70+
\`;
71+
const UrlComments = styled.div \`
72+
color: red;
73+
/* // */
74+
background: red;
75+
/* comment 1 */
76+
/* comment 2 */
77+
// comment 3
78+
border: 1px solid green;
79+
\`;
5780
export {};
5881

5982

‎src/__tests__/baselines/minification-only/minify-single-line-comments-with-interpolations.ts.baseline

+43-11
Original file line numberDiff line numberDiff line change
@@ -60,15 +60,45 @@ Source code:
6060
TypeScript before transform:
6161

6262
declare const styled: any;
63-
const Test1 = styled.div \`\\n width: 100%;\\n // color: \${"red"};\\n\`;
64-
const Test2 = styled.div \`\\n width: 100%;\\n // color: pale\${"red"};\\n\`;
65-
const Test3 = styled.div \`\\n width: 100%;\\n // color\\n \${"red"};\\n\`;
66-
const Test4 = styled.div \`\\n width: 100%;\\n // color: \${"red"}-blue;\\n\`;
67-
const Test5 = styled.div \`\\n width: 100%;\\n // color: \${"red"}\${"blue"};\\n\`;
68-
const Test6 = styled.div \`\\n background: url("https://google.com");\\n width: 100%;\\n \${"green"} // color: \${"red"}\${"blue"};\\n\`;
69-
const Test7 = styled.div \`\\n background: url("https://google.com");\\n width: \${p => p.props.width};\\n \${"green"} // color: \${"red"}\${"blue"};\\n height: \${p => p.props.height};\\n\`;
70-
const Test8 = styled.dev \`\\n color: /* \${"red"} ... disabled */ blue;\\n\`;
71-
const Test9 = styled.dev \`\\n color: // \${"red"} ... disabled\\n blue\\n\`;
63+
const Test1 = styled.div \`
64+
width: 100%;
65+
// color: \${"red"};
66+
\`;
67+
const Test2 = styled.div \`
68+
width: 100%;
69+
// color: pale\${"red"};
70+
\`;
71+
const Test3 = styled.div \`
72+
width: 100%;
73+
// color
74+
\${"red"};
75+
\`;
76+
const Test4 = styled.div \`
77+
width: 100%;
78+
// color: \${"red"}-blue;
79+
\`;
80+
const Test5 = styled.div \`
81+
width: 100%;
82+
// color: \${"red"}\${"blue"};
83+
\`;
84+
const Test6 = styled.div \`
85+
background: url("https://google.com");
86+
width: 100%;
87+
\${"green"} // color: \${"red"}\${"blue"};
88+
\`;
89+
const Test7 = styled.div \`
90+
background: url("https://google.com");
91+
width: \${p => p.props.width};
92+
\${"green"} // color: \${"red"}\${"blue"};
93+
height: \${p => p.props.height};
94+
\`;
95+
const Test8 = styled.dev \`
96+
color: /* \${"red"} ... disabled */ blue;
97+
\`;
98+
const Test9 = styled.dev \`
99+
color: // \${"red"} ... disabled
100+
blue
101+
\`;
72102
export {};
73103

74104

@@ -81,9 +111,11 @@ TypeScript after transform:
81111
const Test4 = styled.div \`width:100%;//\${'red'}\`;
82112
const Test5 = styled.div \`width:100%;//\${'red'}\${'blue'}\`;
83113
const Test6 = styled.div \`background:url("https://google.com");width:100%;\${'green'}//\${'red'}\${'blue'}\`;
84-
const Test7 = styled.div \`background:url("https://google.com");width:\${p => p.props.width};\${'green'}//\${'red'}\${'blue'}\\nheight:\${p => p.props.height};\`;
114+
const Test7 = styled.div \`background:url("https://google.com");width:\${p => p.props.width};\${'green'}//\${'red'}\${'blue'}
115+
height:\${p => p.props.height};\`;
85116
const Test8 = styled.dev \`color:/*\${'red'}*/blue;\`;
86-
const Test9 = styled.dev \`color://\${'red'}\\nblue\`;
117+
const Test9 = styled.dev \`color://\${'red'}
118+
blue\`;
87119
export {};
88120

89121

‎src/__tests__/baselines/minification-only/simple.ts.baseline

+12-5
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ TypeScript before transform:
8686
styled.div \`abc def//ghi//jkl\`;
8787
// ignores comment markers that are inside strings
8888
// \`abc def"//"ghi\\'//\\'jkl\`
89-
styled.div \`abc def"//"ghi'//'jkl//the end\`;
89+
styled.div \`abc def"//"ghi\\'//\\'jkl//the end\`;
9090
// \`abc def"//"\`
9191
styled.div \`abc def"//"\`;
9292
// ignores comment markers that are inside parantheses
@@ -103,10 +103,14 @@ TypeScript before transform:
103103
styled.div \`this\\nis\\na/* ignore me \\n please */\\ntest\`;
104104
// removes line comments filling an entire line
105105
// \`line one{line:two;}\`
106-
styled.div \`line one {\\n // remove this comment\\n line: two;\\n}\`;
106+
styled.div \`line one {
107+
// remove this comment
108+
line: two;
109+
}\`;
107110
// removes line comments at the end of lines of code
108111
// \`valid line with out comments\`
109-
styled.div \`valid line with // a comment\\nout comments\`;
112+
styled.div \`valid line with // a comment
113+
out comments\`;
110114
// preserves multi-line comments starting with /*!
111115
// \`this is a /*! dont ignore me please */ test\`
112116
styled.div \`this is a /*! dont ignore me please */ test/* but you can ignore me */\`;
@@ -119,13 +123,16 @@ TypeScript before transform:
119123
// \`this\\nis\\na \\ntest\`
120124
styled.div \`this\\nis\\na/* ignore me \\n please */\\ntest\`;
121125
// \`this is a test\`
122-
styled.div \`this\\nis\\na/* ignore me \\n please */\\ntest\`;
126+
styled.div \`this
127+
is
128+
a/* ignore me \\n please */
129+
test\`;
123130
// removes spaces around symbols
124131
// \`;:{},;\`
125132
styled.div \`; : { } , ; \`;
126133
// ignores symbols inside strings
127134
// \`;" : "\\' : \\';\`
128-
styled.div \`; " : " ' : ' ;\`;
135+
styled.div \`; " : " \\' : \\' ;\`;
129136

130137

131138
TypeScript after transform:

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

+15-3
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,21 @@ Source code:
2929
TypeScript before transform:
3030

3131
declare const styled: any;
32-
export const A = styled.div \`\\n border: \${"solid"} 10px;\\n\`;
33-
styled.div \`\\n border: \${"solid"}// comment here\\n10px;\\n border: solid// comment here\\n10px;\\n\`;
34-
styled.div \`\\n border: \${"solid"}/* comment here\\n*/10px;\\n border: \${"solid"}/* comment here\\n*/ 10px;\\n\`;
32+
export const A = styled.div \`
33+
border: \${"solid"} 10px;
34+
\`;
35+
styled.div \`
36+
border: \${"solid"}// comment here
37+
10px;
38+
border: solid// comment here
39+
10px;
40+
\`;
41+
styled.div \`
42+
border: \${"solid"}/* comment here
43+
*/10px;
44+
border: \${"solid"}/* comment here
45+
*/ 10px;
46+
\`;
3547

3648

3749
TypeScript after transform:

‎src/__tests__/baselines/minification/issue36.tsx.baseline

+14-2
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,20 @@ TypeScript before transform:
2929

3030
declare const keyframes: any;
3131
declare const styled: any;
32-
const rotate360 = keyframes \`\\n from {\\n transform: rotate(0deg);\\n }\\n to {\\n transform: rotate(360deg);\\n }\\n\`;
33-
export const StyledDiv = styled.div \`\\n width: 100px;\\n height: 100px;\\n background-color: greenyellow;\\n animation: \${rotate360} 2s linear infinite;\\n\`;
32+
const rotate360 = keyframes \`
33+
from {
34+
transform: rotate(0deg);
35+
}
36+
to {
37+
transform: rotate(360deg);
38+
}
39+
\`;
40+
export const StyledDiv = styled.div \`
41+
width: 100px;
42+
height: 100px;
43+
background-color: greenyellow;
44+
animation: \${rotate360} 2s linear infinite;
45+
\`;
3446

3547

3648
TypeScript after transform:

0 commit comments

Comments
 (0)