Merge pull request #37 from Igorbek/fix/empty-with-config

Skip emitting empty `withConfig`
Igorbek · Mar 21, 2019 · f8953db · f8953db
2 parents 4a89133 + 0ca9dd8
commit f8953db
Show file tree

Hide file tree

Showing 8 changed files with 526 additions and 4 deletions.
diff --git a/src/__tests__/baselines/minification-only/minify-css-in-helpers.ts.baseline b/src/__tests__/baselines/minification-only/minify-css-in-helpers.ts.baseline
@@ -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 {};
+
+
+
+`;
diff --git a/src/__tests__/baselines/minification-only/minify-css-to-use-with-transpilation.ts.baseline b/src/__tests__/baselines/minification-only/minify-css-to-use-with-transpilation.ts.baseline
@@ -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 {};
+
+
+
+`;
diff --git a/...__tests__/baselines/minification-only/minify-css-to-use-without-transpilation.ts.baseline b/...__tests__/baselines/minification-only/minify-css-to-use-without-transpilation.ts.baseline
@@ -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 {};
+
+
+
+`;
diff --git a/..._/baselines/minification-only/minify-single-line-comments-with-interpolations.ts.baseline b/..._/baselines/minification-only/minify-single-line-comments-with-interpolations.ts.baseline
@@ -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 {};
+
+
+
+`;