Skip to content

Commit 6f86e15

Browse files
IgorbekIgorbek
committed
Minification
- add `minify` option (default `false) - start minifying - still there're issues
1 parent d24cdad commit 6f86e15

15 files changed

+334
-152
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ Source code:
2020
color: \${theColor};
2121
\`;
2222

23+
export {};
24+
2325

2426
TypeScript before transform:
2527

@@ -28,6 +30,7 @@ TypeScript before transform:
2830
declare const theColor: any;
2931
const key = keyframes \`\\n to {\\n transform: rotate(360deg);\\n }\\n\`;
3032
const color = css \`\\n color: \${theColor};\\n\`;
33+
export {};
3134

3235

3336
TypeScript after transform:
@@ -43,6 +46,7 @@ TypeScript after transform:
4346
const color = css \`
4447
color: \${theColor};
4548
\`;
49+
export {};
4650

4751

4852

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

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ Source code:
3030
}
3131
\`;
3232

33+
export {};
34+
3335

3436
TypeScript before transform:
3537

@@ -39,29 +41,18 @@ TypeScript before transform:
3941
const SpecialCharacters = styled.div \`\\n content: " \${props => props.text} ";\\n color: red;\\n\`;
4042
const Comment = styled.div \`\\n // comment\\n color: red;\\n\`;
4143
const Parens = styled.div \`\\n &:hover {\\n color: blue;\\n }\\n\`;
44+
export {};
4245

4346

4447
TypeScript after transform:
4548

4649
declare const styled: any;
47-
const Simple = styled.div.withConfig({ displayName: "Simple" }) \`
48-
width: 100%;
49-
\`;
50-
const Interpolation = styled.div.withConfig({ displayName: "Interpolation" }) \`
51-
content: " \${props => props.text} ";
52-
\`;
53-
const SpecialCharacters = styled.div.withConfig({ displayName: "SpecialCharacters" }) \`
54-
content: " \${props => props.text} ";\\n color: red;
55-
\`;
56-
const Comment = styled.div.withConfig({ displayName: "Comment" }) \`
57-
// comment
58-
color: red;
59-
\`;
60-
const Parens = styled.div.withConfig({ displayName: "Parens" }) \`
61-
&:hover {
62-
color: blue;
63-
}
64-
\`;
50+
const Simple = styled.div.withConfig({ displayName: "Simple" }) \`width:100%;\`;
51+
const Interpolation = styled.div.withConfig({ displayName: "Interpolation" }) \`content:" \${props => props.text} ";\`;
52+
const SpecialCharacters = styled.div.withConfig({ displayName: "SpecialCharacters" }) \`content:" \${props => props.text} ";color:red;\`;
53+
const Comment = styled.div.withConfig({ displayName: "Comment" }) \`color:red;\`;
54+
const Parens = styled.div.withConfig({ displayName: "Parens" }) \`&:hover{color:blue;}\`;
55+
export {};
6556

6657

6758

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

Lines changed: 10 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ Source code:
4242
border: 1px solid green;
4343
\`;
4444

45+
export {};
46+
4547

4648
TypeScript before transform:
4749

@@ -52,40 +54,19 @@ TypeScript before transform:
5254
const Comment = styled.div \`\\n width: 100%;\\n // comment\\n color: red;\\n\`;
5355
const Parens = styled.div \`\\n &:hover {\\n color: blue;\\n }\\n color: red;\\n\`;
5456
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\`;
57+
export {};
5558

5659

5760
TypeScript after transform:
5861

5962
declare const styled: any;
60-
const Simple = styled.div.withConfig({ displayName: "Simple" }) \`
61-
width: 100%;
62-
\`;
63-
const Interpolation = styled.div.withConfig({ displayName: "Interpolation" }) \`
64-
content: "https://test.com/\${props => props.endpoint}";
65-
\`;
66-
const SpecialCharacters = styled.div.withConfig({ displayName: "SpecialCharacters" }) \`
67-
content: " \${props => props.text} ";\\n color: red;
68-
\`;
69-
const Comment = styled.div.withConfig({ displayName: "Comment" }) \`
70-
width: 100%;
71-
// comment
72-
color: red;
73-
\`;
74-
const Parens = styled.div.withConfig({ displayName: "Parens" }) \`
75-
&:hover {
76-
color: blue;
77-
}
78-
color: red;
79-
\`;
80-
const UrlComments = styled.div.withConfig({ displayName: "UrlComments" }) \`
81-
color: red;
82-
/* // */
83-
background: red;
84-
/* comment 1 */
85-
/* comment 2 */
86-
// comment 3
87-
border: 1px solid green;
88-
\`;
63+
const Simple = styled.div.withConfig({ displayName: "Simple" }) \`width:100%;\`;
64+
const Interpolation = styled.div.withConfig({ displayName: "Interpolation" }) \`content:"https://test.com/\${props => props.endpoint}";\`;
65+
const SpecialCharacters = styled.div.withConfig({ displayName: "SpecialCharacters" }) \`content:" \${props => props.text} ";color:red;\`;
66+
const Comment = styled.div.withConfig({ displayName: "Comment" }) \`width:100%;color:red;\`;
67+
const Parens = styled.div.withConfig({ displayName: "Parens" }) \`&:hover{color:blue;}color:red;\`;
68+
const UrlComments = styled.div.withConfig({ displayName: "UrlComments" }) \`color:red;background:red;border:1px solid green;\`;
69+
export {};
8970

9071

9172

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

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,16 @@ Source code:
4646
height: \${p => p.props.height};
4747
\`
4848

49+
const Test8 = styled.dev\`
50+
color: /* \${'red'} ... disabled */ blue;
51+
\`;
52+
53+
const Test9 = styled.dev\`
54+
color: // \${'red'} ... disabled
55+
blue
56+
\`;
57+
58+
export {}
4959

5060
TypeScript before transform:
5161

@@ -57,43 +67,24 @@ TypeScript before transform:
5767
const Test5 = styled.div \`\\n width: 100%;\\n // color: \${"red"}\${"blue"};\\n\`;
5868
const Test6 = styled.div \`\\n background: url("https://google.com");\\n width: 100%;\\n \${"green"} // color: \${"red"}\${"blue"};\\n\`;
5969
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\`;
72+
export {};
6073

6174

6275
TypeScript after transform:
6376

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

9889

9990

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

Lines changed: 48 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -11,52 +11,52 @@ Source code:
1111
declare const placeholder2: any;
1212

1313
// splits a line by potential comment starts and joins until one is an actual comment
14-
styled\`abc def//ghi//jkl\`
14+
styled.div\`abc def//ghi//jkl\`
1515

1616
// ignores comment markers that are inside strings
17-
styled\`abc def"//"ghi\\'//\\'jkl//the end\`
18-
styled\`abc def"//"\`
17+
styled.div\`abc def"//"ghi\\'//\\'jkl//the end\`
18+
styled.div\`abc def"//"\`
1919

2020
// ignores comment markers that are inside parantheses
21-
styled\`bla (//) bla//the end\`
21+
styled.div\`bla (//) bla//the end\`
2222

2323
// ignores even unescaped URLs
24-
styled\`https://test.com// comment//\`
24+
styled.div\`https://test.com// comment//\`
2525

2626
// removes multi-line comments
27-
styled\`this is a/* ignore me please */test\`
27+
styled.div\`this is a/* ignore me please */test\`
2828

2929
// joins all lines of code
30-
styled\`this\\nis\\na/* ignore me \\n please */\\ntest\`
30+
styled.div\`this\\nis\\na/* ignore me \\n please */\\ntest\`
3131

3232
// removes line comments filling an entire line
33-
styled\`line one
33+
styled.div\`line one
3434
// remove this comment
3535
line two\`
3636

3737
// removes line comments at the end of lines of code
38-
styled\`valid line with // a comment
38+
styled.div\`valid line with // a comment
3939
out comments\`
4040

4141
// preserves multi-line comments starting with /*!
42-
styled\`this is a /*! dont ignore me please */ test/* but you can ignore me */\`
42+
styled.div\`this is a /*! dont ignore me please */ test/* but you can ignore me */\`
4343

4444
// returns the indices of removed placeholders (expressions)
45-
styled\`this is some\\ninput with \${placeholder1} and // ignored \${placeholder2}\`
45+
styled.div\`this is some\\ninput with \${placeholder1} and // ignored \${placeholder2}\`
4646

4747
// works with raw escape codes
48-
styled\`this\\\\nis\\\\na/* ignore me \\\\n please */\\\\ntest\`
49-
styled\`this\\nis\\na/* ignore me \\n please */\\ntest\`
50-
styled\`this
48+
styled.div\`this\\\\nis\\\\na/* ignore me \\\\n please */\\\\ntest\`
49+
styled.div\`this\\nis\\na/* ignore me \\n please */\\ntest\`
50+
styled.div\`this
5151
is
5252
a/* ignore me \\n please *
5353
ntest\`
5454

5555
// removes spaces around symbols
56-
styled\`; : { } , ; \`
56+
styled.div\`; : { } , ; \`
5757

5858
// ignores symbols inside strings
59-
styled\`; " : " \\' : \\' ;\`
59+
styled.div\`; " : " \\' : \\' ;\`
6060

6161

6262
TypeScript before transform:
@@ -65,34 +65,34 @@ TypeScript before transform:
6565
declare const placeholder1: any;
6666
declare const placeholder2: any;
6767
// splits a line by potential comment starts and joins until one is an actual comment
68-
styled \`abc def//ghi//jkl\`;
68+
styled.div \`abc def//ghi//jkl\`;
6969
// ignores comment markers that are inside strings
70-
styled \`abc def"//"ghi'//'jkl//the end\`;
71-
styled \`abc def"//"\`;
70+
styled.div \`abc def"//"ghi'//'jkl//the end\`;
71+
styled.div \`abc def"//"\`;
7272
// ignores comment markers that are inside parantheses
73-
styled \`bla (//) bla//the end\`;
73+
styled.div \`bla (//) bla//the end\`;
7474
// ignores even unescaped URLs
75-
styled \`https://test.com// comment//\`;
75+
styled.div \`https://test.com// comment//\`;
7676
// removes multi-line comments
77-
styled \`this is a/* ignore me please */test\`;
77+
styled.div \`this is a/* ignore me please */test\`;
7878
// joins all lines of code
79-
styled \`this\\nis\\na/* ignore me \\n please */\\ntest\`;
79+
styled.div \`this\\nis\\na/* ignore me \\n please */\\ntest\`;
8080
// removes line comments filling an entire line
81-
styled \`line one\\n// remove this comment\\nline two\`;
81+
styled.div \`line one\\n// remove this comment\\nline two\`;
8282
// removes line comments at the end of lines of code
83-
styled \`valid line with // a comment\\nout comments\`;
83+
styled.div \`valid line with // a comment\\nout comments\`;
8484
// preserves multi-line comments starting with /*!
85-
styled \`this is a /*! dont ignore me please */ test/* but you can ignore me */\`;
85+
styled.div \`this is a /*! dont ignore me please */ test/* but you can ignore me */\`;
8686
// returns the indices of removed placeholders (expressions)
87-
styled \`this is some\\ninput with \${placeholder1} and // ignored \${placeholder2}\`;
87+
styled.div \`this is some\\ninput with \${placeholder1} and // ignored \${placeholder2}\`;
8888
// works with raw escape codes
89-
styled \`this\\\\nis\\\\na/* ignore me \\\\n please */\\\\ntest\`;
90-
styled \`this\\nis\\na/* ignore me \\n please */\\ntest\`;
91-
styled \`this\\nis\\na/* ignore me \\n please *\\nntest\`;
89+
styled.div \`this\\\\nis\\\\na/* ignore me \\\\n please */\\\\ntest\`;
90+
styled.div \`this\\nis\\na/* ignore me \\n please */\\ntest\`;
91+
styled.div \`this\\nis\\na/* ignore me \\n please *\\nntest\`;
9292
// removes spaces around symbols
93-
styled \`; : { } , ; \`;
93+
styled.div \`; : { } , ; \`;
9494
// ignores symbols inside strings
95-
styled \`; " : " ' : ' ;\`;
95+
styled.div \`; " : " ' : ' ;\`;
9696

9797

9898
TypeScript after transform:
@@ -101,40 +101,34 @@ TypeScript after transform:
101101
declare const placeholder1: any;
102102
declare const placeholder2: any;
103103
// splits a line by potential comment starts and joins until one is an actual comment
104-
styled \`abc def//ghi//jkl\`;
104+
styled.div \`abc def//\`;
105105
// ignores comment markers that are inside strings
106-
styled \`abc def"//"ghi\\'//\\'jkl//the end\`;
107-
styled \`abc def"//"\`;
106+
styled.div \`abc def"//"ghi'//'jkl//\`;
107+
styled.div \`abc def"//"\`;
108108
// ignores comment markers that are inside parantheses
109-
styled \`bla (//) bla//the end\`;
109+
styled.div \`bla (//\`;
110110
// ignores even unescaped URLs
111-
styled \`https://test.com// comment//\`;
111+
styled.div \`https://\`;
112112
// removes multi-line comments
113-
styled \`this is a/* ignore me please */test\`;
113+
styled.div \`this is atest\`;
114114
// joins all lines of code
115-
styled \`this\\nis\\na/* ignore me \\n please */\\ntest\`;
115+
styled.div \`this is atest\`;
116116
// removes line comments filling an entire line
117-
styled \`line one
118-
// remove this comment
119-
line two\`;
117+
styled.div \`line oneline two\`;
120118
// removes line comments at the end of lines of code
121-
styled \`valid line with // a comment
122-
out comments\`;
119+
styled.div \`valid line without comments\`;
123120
// preserves multi-line comments starting with /*!
124-
styled \`this is a /*! dont ignore me please */ test/* but you can ignore me */\`;
121+
styled.div \`this is atest\`;
125122
// returns the indices of removed placeholders (expressions)
126-
styled \`this is some\\ninput with \${placeholder1} and // ignored \${placeholder2}\`;
123+
styled.div \`this is some input with\${placeholder1} and//\${placeholder2}\`;
127124
// works with raw escape codes
128-
styled \`this\\\\nis\\\\na/* ignore me \\\\n please */\\\\ntest\`;
129-
styled \`this\\nis\\na/* ignore me \\n please */\\ntest\`;
130-
styled \`this
131-
is
132-
a/* ignore me \\n please *
133-
ntest\`;
125+
styled.div \`this\\\\nis\\\\na\\\\ntest\`;
126+
styled.div \`this is atest\`;
127+
styled.div \`this is a/*\`;
134128
// removes spaces around symbols
135-
styled \`; : { } , ; \`;
129+
styled.div \`;:{},;\`;
136130
// ignores symbols inside strings
137-
styled \`; " : " \\' : \\' ;\`;
131+
styled.div \`;" : "' : ';\`;
138132

139133

140134

‎src/__tests__/fixtures/minification/minify-css-in-helpers.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,5 @@ const key = keyframes`
1212
const color = css`
1313
color: ${theColor};
1414
`;
15+
16+
export {};

‎src/__tests__/fixtures/minification/minify-css-to-use-with-transpilation.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,5 @@ const Parens = styled.div`
2222
color: blue;
2323
}
2424
`;
25+
26+
export {};

‎src/__tests__/fixtures/minification/minify-css-to-use-without-transpilation.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,5 @@ const UrlComments = styled.div`
3434
// comment 3
3535
border: 1px solid green;
3636
`;
37+
38+
export {};

0 commit comments

Comments
 (0)