fix(minify): remove useless span expression

Author: acrazing

package.json

@@ -1,6 +1,6 @@
 {
   "name": "typescript-styled-components-plugin",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A styled-components plugin to minify & set componentId & displayName for typescript",
   "author": "acrazing <[email protected]>",
   "main": "lib/index.js",

src/createStyledComponentsTransformer.spec.ts

@@ -156,6 +156,43 @@ const testCases: TestCase[] = [
     bar: foo; \`;other\` foo: bar; \``,
     output: `css \`foo:bar;bar:foo;\`;\nkeyframes \`foo:bar;bar:foo;\`;\ncreateGlobalStyle \`foo:bar;bar:foo;\`;\ninjectGlobal \`foo:bar;bar:foo;\`;\nother \` foo: bar; \`;`,
   },
+  {
+    name: 'minify comments',
+    input: `css\`
+    // comment
+    // \${"span in comment"}
+    // this should be removed
+    title: "";
+    value: \${"value"};
+    second: "";
+    // second comment
+    // no span
+    third: \${"third"};
+    /* comment block
+    value: \${"block comment"};
+    */
+    forth: \${"forth"};
+    end: "end with space";
+    \``,
+    output: `css \`title:"";value:\${"value"};second:"";third:\${"third"};forth:\${"forth"};end:"end with space";\`;`,
+  },
+  {
+    name: 'minify as single span',
+    input: `css\`
+    // comment 1
+    // comment \${comment}
+    title: value;
+    // comment \${3}
+    title: value;
+    \`;css\`
+    // comment \${1}
+    title: value;
+    \`;css\`
+    title: value;
+    // comment: \${2}
+    \``,
+    output: `css \`title:value;title:value;\`;\ncss \`title:value;\`;\ncss \`title:value;\`;`,
+  },
 ];
 
 describe('createStyledComponentsTransformer', () => {

src/minifyTemplate.ts

@@ -153,22 +153,30 @@ export function minifyTemplate(node: ts.TaggedTemplateExpression) {
       cookedValues.push(span.literal.text);
     });
   }
-  const [spans] = minifyCookedValues(cookedValues);
-  return ts.createTaggedTemplate(
-    node.tag,
-    node.typeArguments,
-    ts.isNoSubstitutionTemplateLiteral(node.template)
-      ? ts.createNoSubstitutionTemplateLiteral(spans[0])
-      : ts.createTemplateExpression(
-          ts.createTemplateHead(spans[0]),
-          node.template.templateSpans.map((span, index) => {
-            return ts.createTemplateSpan(
-              span.expression,
-              index === spans.length - 2
-                ? ts.createTemplateTail(spans[index + 1])
-                : ts.createTemplateMiddle(spans[index + 1]),
-            );
-          }),
-        ),
-  );
+  const [spans, indicates] = minifyCookedValues(cookedValues);
+  let newTemplate: ts.TemplateLiteral;
+  if (ts.isNoSubstitutionTemplateLiteral(template)) {
+    newTemplate = ts.createNoSubstitutionTemplateLiteral(spans[0] || '');
+  } else {
+    const templateSpans = template.templateSpans.slice();
+    indicates.forEach((expressionIndex, iteration) => {
+      templateSpans.splice(expressionIndex - iteration, 1);
+    });
+    if (templateSpans.length === 0) {
+      newTemplate = ts.createNoSubstitutionTemplateLiteral(spans[0] || '');
+    } else {
+      newTemplate = ts.createTemplateExpression(
+        ts.createTemplateHead(spans[0]),
+        templateSpans.map((span, index) => {
+          return ts.createTemplateSpan(
+            span.expression,
+            index === spans.length - 2
+              ? ts.createTemplateTail(spans[index + 1])
+              : ts.createTemplateMiddle(spans[index + 1]),
+          );
+        }),
+      );
+    }
+  }
+  return ts.createTaggedTemplate(node.tag, node.typeArguments, newTemplate);
 }