Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`minify-css-in-helpers.ts 1`] = `

File: minify-css-in-helpers.ts
Source code:

declare const keyframes: any;
declare const css: any;
declare const createGlobalStyle: any;

declare const theColor: any;

const key = keyframes\`
to {
transform: rotate(360deg);
}
\`;

const color = css\`
color: \${theColor};
\`;

const MyRedBody = createGlobalStyle\`
body {
background-color: red; // comments
\${color} // comments
// it will be ignored, but still emitted \${color}
}
\`;

export {};


TypeScript before transform:

declare const keyframes: any;
declare const css: any;
declare const createGlobalStyle: any;
declare const theColor: any;
const key = keyframes \`\\n to {\\n transform: rotate(360deg);\\n }\\n\`;
const color = css \`\\n color: \${theColor};\\n\`;
const MyRedBody = createGlobalStyle \`\\n body {\\n background-color: red; // comments\\n \${color} // comments\\n // it will be ignored, but still emitted \${color}\\n }\\n\`;
export {};


TypeScript after transform:

declare const keyframes: any;
declare const css: any;
declare const createGlobalStyle: any;
declare const theColor: any;
const key = keyframes \`to{transform:rotate(360deg);}\`;
const color = css \`color:\${theColor};\`;
const MyRedBody = createGlobalStyle \`body{background-color:red;\${color}//\${color}\\n}\`;
export {};



`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`minify-css-to-use-with-transpilation.ts 1`] = `

File: minify-css-to-use-with-transpilation.ts
Source code:

declare const styled: any;

const Simple = styled.div\`
width: 100%;
\`;

const Interpolation = styled.div\`
content: " \${props => props.text} ";
\`;

const SpecialCharacters = styled.div\`
content: " \${props => props.text} ";\\n color: red;
\`;

const Comment = styled.div\`
// comment
color: red;
\`

const Parens = styled.div\`
&:hover {
color: blue;
}
\`;

export {};


TypeScript before transform:

declare const styled: any;
const Simple = styled.div \`\\n width: 100%;\\n\`;
const Interpolation = styled.div \`\\n content: " \${props => props.text} ";\\n\`;
const SpecialCharacters = styled.div \`\\n content: " \${props => props.text} ";\\n color: red;\\n\`;
const Comment = styled.div \`\\n // comment\\n color: red;\\n\`;
const Parens = styled.div \`\\n &:hover {\\n color: blue;\\n }\\n\`;
export {};


TypeScript after transform:

declare const styled: any;
const Simple = styled.div \`width:100%;\`;
const Interpolation = styled.div \`content:" \${props => props.text} ";\`;
const SpecialCharacters = styled.div \`content:" \${props => props.text} ";color:red;\`;
const Comment = styled.div \`color:red;\`;
const Parens = styled.div \`&:hover{color:blue;}\`;
export {};



`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`minify-css-to-use-without-transpilation.ts 1`] = `

File: minify-css-to-use-without-transpilation.ts
Source code:

declare const styled: any;

const Simple = styled.div\`
width: 100%;
\`;

const Interpolation = styled.div\`
content: "https://test.com/\${props => props.endpoint}";
\`;

const SpecialCharacters = styled.div\`
content: " \${props => props.text} ";\\n color: red;
\`;

const Comment = styled.div\`
width: 100%;
// comment
color: red;
\`;

const Parens = styled.div\`
&:hover {
color: blue;
}
color: red;
\`;

const UrlComments = styled.div\`
color: red;
/* // */
background: red;
/* comment 1 */
/* comment 2 */
// comment 3
border: 1px solid green;
\`;

export {};


TypeScript before transform:

declare const styled: any;
const Simple = styled.div \`\\n width: 100%;\\n\`;
const Interpolation = styled.div \`\\n content: "https://test.com/\${props => props.endpoint}";\\n\`;
const SpecialCharacters = styled.div \`\\n content: " \${props => props.text} ";\\n color: red;\\n\`;
const Comment = styled.div \`\\n width: 100%;\\n // comment\\n color: red;\\n\`;
const Parens = styled.div \`\\n &:hover {\\n color: blue;\\n }\\n color: red;\\n\`;
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\`;
export {};


TypeScript after transform:

declare const styled: any;
const Simple = styled.div \`width:100%;\`;
const Interpolation = styled.div \`content:"https://test.com/\${props => props.endpoint}";\`;
const SpecialCharacters = styled.div \`content:" \${props => props.text} ";color:red;\`;
const Comment = styled.div \`width:100%;color:red;\`;
const Parens = styled.div \`&:hover{color:blue;}color:red;\`;
const UrlComments = styled.div \`color:red; background:red;border:1px solid green;\`;
export {};



`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`minify-single-line-comments-with-interpolations.ts 1`] = `

File: minify-single-line-comments-with-interpolations.ts
Source code:

declare const styled: any;

const Test1 = styled.div\`
width: 100%;
// color: \${'red'};
\`

const Test2 = styled.div\`
width: 100%;
// color: pale\${'red'};
\`

const Test3 = styled.div\`
width: 100%;
// color
\${'red'};
\`

const Test4 = styled.div\`
width: 100%;
// color: \${'red'}-blue;
\`

const Test5 = styled.div\`
width: 100%;
// color: \${'red'}\${'blue'};
\`

const Test6 = styled.div\`
background: url("https://google.com");
width: 100%;
\${'green'} // color: \${'red'}\${'blue'};
\`

const Test7 = styled.div\`
background: url("https://google.com");
width: \${p => p.props.width};
\${'green'} // color: \${'red'}\${'blue'};
height: \${p => p.props.height};
\`

const Test8 = styled.dev\`
color: /* \${'red'} ... disabled */ blue;
\`;

const Test9 = styled.dev\`
color: // \${'red'} ... disabled
blue
\`;

export {}

TypeScript before transform:

declare const styled: any;
const Test1 = styled.div \`\\n width: 100%;\\n // color: \${"red"};\\n\`;
const Test2 = styled.div \`\\n width: 100%;\\n // color: pale\${"red"};\\n\`;
const Test3 = styled.div \`\\n width: 100%;\\n // color\\n \${"red"};\\n\`;
const Test4 = styled.div \`\\n width: 100%;\\n // color: \${"red"}-blue;\\n\`;
const Test5 = styled.div \`\\n width: 100%;\\n // color: \${"red"}\${"blue"};\\n\`;
const Test6 = styled.div \`\\n background: url("https://google.com");\\n width: 100%;\\n \${"green"} // color: \${"red"}\${"blue"};\\n\`;
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\`;
const Test8 = styled.dev \`\\n color: /* \${"red"} ... disabled */ blue;\\n\`;
const Test9 = styled.dev \`\\n color: // \${"red"} ... disabled\\n blue\\n\`;
export {};


TypeScript after transform:

declare const styled: any;
const Test1 = styled.div \`width:100%;//\${'red'}\`;
const Test2 = styled.div \`width:100%;//\${'red'}\`;
const Test3 = styled.div \`width:100%;\${'red'};\`;
const Test4 = styled.div \`width:100%;//\${'red'}\`;
const Test5 = styled.div \`width:100%;//\${'red'}\${'blue'}\`;
const Test6 = styled.div \`background:url("https://google.com");width:100%;\${'green'}//\${'red'}\${'blue'}\`;
const Test7 = styled.div \`background:url("https://google.com");width:\${p => p.props.width};\${'green'}//\${'red'}\${'blue'}\\nheight:\${p => p.props.height};\`;
const Test8 = styled.dev \`color:/*\${'red'}*/blue;\`;
const Test9 = styled.dev \`color://\${'red'}\\nblue\`;
export {};



`;
Loading