Skip to content

Commit 4e4dac8

Browse files
IgorbekIgorbek
authored
Merge pull request #35 from Igorbek/minification
Add experimental support of css minification (closes #14).
2 parents 91d391a + ea16780 commit 4e4dac8

20 files changed

+1029
-4
lines changed

‎README.md

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,7 @@ interface Options {
150150
identifiers: CustomStyledIdentifiers;
151151
ssr: boolean;
152152
displayName: boolean;
153+
minify: boolean;
153154
}
154155
```
155156

@@ -190,6 +191,16 @@ To disable `displayName` generation set this option to `false`
190191

191192
Default value is `true` which means that display name is being injected.
192193

194+
### `minify`
195+
196+
The option allows to turn on minification of inline styles used in styled components.
197+
It is similar to [`babel-plugin-styled-components`](https://github.com/styled-components/babel-plugin-styled-components)'s same option.
198+
The minification is not exactly the same and may produce slightly different results.
199+
200+
:warning: **Warning**: The minification is an experimental feature, please use with care.
201+
202+
Default value is `false` which means the minification is not being performed.
203+
193204
### `identifiers`
194205

195206
This option allows to customize identifiers used by `styled-components` API functions.
@@ -201,11 +212,17 @@ This option allows to customize identifiers used by `styled-components` API func
201212
interface CustomStyledIdentifiers {
202213
styled: string[];
203214
attrs: string[];
215+
keyframes: string[];
216+
css: string[];
217+
createGlobalStyle: string[];
204218
}
205219
```
206220

207-
- `styled` - list of identifiers of `styled` API (default `['styled'])
208-
- `attrs` - list of identifiers of `attrs` API (default `['attrs'])
221+
- `styled` - list of identifiers of `styled` API (default `['styled']`)
222+
- `attrs` - list of identifiers of `attrs` API (default `['attrs']`)
223+
- `keyframes` - list of identifiers of `keyframes` API (default `['keyframes']`)
224+
- `css` - list of identifiers of `css` API (default `['css']`)
225+
- `createGlobalStyle` - list of identifiers of `createGlobalStyle` API (default `['createGlobalStyle']`)
209226

210227
Example
211228

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"devDependencies": {
2727
"@types/jest": "^24.0.9",
2828
"@types/jest-specific-snapshot": "^0.5.3",
29+
"@types/node": "^7.0.31",
2930
"@types/react": "^16.7.22",
3031
"@types/styled-components": "^4.1.6",
3132
"jest": "^24.1.0",

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`minify-css-in-helpers.ts 1`] = `
4+
5+
File: minify-css-in-helpers.ts
6+
Source code:
7+
8+
declare const keyframes: any;
9+
declare const css: any;
10+
declare const createGlobalStyle: any;
11+
12+
declare const theColor: any;
13+
14+
const key = keyframes\`
15+
to {
16+
transform: rotate(360deg);
17+
}
18+
\`;
19+
20+
const color = css\`
21+
color: \${theColor};
22+
\`;
23+
24+
const MyRedBody = createGlobalStyle\`
25+
body {
26+
background-color: red; // comments
27+
\${color} // comments
28+
// it will be ignored, but still emitted \${color}
29+
}
30+
\`;
31+
32+
export {};
33+
34+
35+
TypeScript before transform:
36+
37+
declare const keyframes: any;
38+
declare const css: any;
39+
declare const createGlobalStyle: any;
40+
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\`;
44+
export {};
45+
46+
47+
TypeScript after transform:
48+
49+
declare const keyframes: any;
50+
declare const css: any;
51+
declare const createGlobalStyle: any;
52+
declare const theColor: any;
53+
const key = keyframes \`to{transform:rotate(360deg);}\`;
54+
const color = css \`color:\${theColor};\`;
55+
const MyRedBody = createGlobalStyle \`body{background-color:red;\${color}//\${color}\\n}\`;
56+
export {};
57+
58+
59+
60+
`;

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`minify-css-to-use-with-transpilation.ts 1`] = `
4+
5+
File: minify-css-to-use-with-transpilation.ts
6+
Source code:
7+
8+
declare const styled: any;
9+
10+
const Simple = styled.div\`
11+
width: 100%;
12+
\`;
13+
14+
const Interpolation = styled.div\`
15+
content: " \${props => props.text} ";
16+
\`;
17+
18+
const SpecialCharacters = styled.div\`
19+
content: " \${props => props.text} ";\\n color: red;
20+
\`;
21+
22+
const Comment = styled.div\`
23+
// comment
24+
color: red;
25+
\`
26+
27+
const Parens = styled.div\`
28+
&:hover {
29+
color: blue;
30+
}
31+
\`;
32+
33+
export {};
34+
35+
36+
TypeScript before transform:
37+
38+
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\`;
44+
export {};
45+
46+
47+
TypeScript after transform:
48+
49+
declare const styled: any;
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 {};
56+
57+
58+
59+
`;

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`minify-css-to-use-without-transpilation.ts 1`] = `
4+
5+
File: minify-css-to-use-without-transpilation.ts
6+
Source code:
7+
8+
declare const styled: any;
9+
10+
const Simple = styled.div\`
11+
width: 100%;
12+
\`;
13+
14+
const Interpolation = styled.div\`
15+
content: "https://test.com/\${props => props.endpoint}";
16+
\`;
17+
18+
const SpecialCharacters = styled.div\`
19+
content: " \${props => props.text} ";\\n color: red;
20+
\`;
21+
22+
const Comment = styled.div\`
23+
width: 100%;
24+
// comment
25+
color: red;
26+
\`;
27+
28+
const Parens = styled.div\`
29+
&:hover {
30+
color: blue;
31+
}
32+
color: red;
33+
\`;
34+
35+
const UrlComments = styled.div\`
36+
color: red;
37+
/* // */
38+
background: red;
39+
/* comment 1 */
40+
/* comment 2 */
41+
// comment 3
42+
border: 1px solid green;
43+
\`;
44+
45+
export {};
46+
47+
48+
TypeScript before transform:
49+
50+
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\`;
57+
export {};
58+
59+
60+
TypeScript after transform:
61+
62+
declare const styled: any;
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 {};
70+
71+
72+
73+
`;

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

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`minify-single-line-comments-with-interpolations.ts 1`] = `
4+
5+
File: minify-single-line-comments-with-interpolations.ts
6+
Source code:
7+
8+
declare const styled: any;
9+
10+
const Test1 = styled.div\`
11+
width: 100%;
12+
// color: \${'red'};
13+
\`
14+
15+
const Test2 = styled.div\`
16+
width: 100%;
17+
// color: pale\${'red'};
18+
\`
19+
20+
const Test3 = styled.div\`
21+
width: 100%;
22+
// color
23+
\${'red'};
24+
\`
25+
26+
const Test4 = styled.div\`
27+
width: 100%;
28+
// color: \${'red'}-blue;
29+
\`
30+
31+
const Test5 = styled.div\`
32+
width: 100%;
33+
// color: \${'red'}\${'blue'};
34+
\`
35+
36+
const Test6 = styled.div\`
37+
background: url("https://google.com");
38+
width: 100%;
39+
\${'green'} // color: \${'red'}\${'blue'};
40+
\`
41+
42+
const Test7 = styled.div\`
43+
background: url("https://google.com");
44+
width: \${p => p.props.width};
45+
\${'green'} // color: \${'red'}\${'blue'};
46+
height: \${p => p.props.height};
47+
\`
48+
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 {}
59+
60+
TypeScript before transform:
61+
62+
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\`;
72+
export {};
73+
74+
75+
TypeScript after transform:
76+
77+
declare const styled: any;
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'}\\nheight:\${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'}\\nblue\`;
87+
export {};
88+
89+
90+
91+
`;

0 commit comments

Comments
 (0)