Fix line comment minifying and add test for createGlobalStyle

Author: Igorbek

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

@@ -7,6 +7,7 @@ Source code:
 
   declare const keyframes: any;
   declare const css: any;
+  declare const createGlobalStyle: any;
 
   declare const theColor: any;
 
@@ -20,26 +21,38 @@ Source code:
     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 {};
 
 

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

@@ -81,9 +81,9 @@ TypeScript after transform:
   const Test4 = styled.div.withConfig({ displayName: "Test4" }) \`width:100%;//\${'red'}\`;
   const Test5 = styled.div.withConfig({ displayName: "Test5" }) \`width:100%;//\${'red'}\${'blue'}\`;
   const Test6 = styled.div.withConfig({ displayName: "Test6" }) \`background:url("https://google.com");width:100%;\${'green'}//\${'red'}\${'blue'}\`;
-  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};\`;
+  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};\`;
   const Test8 = styled.dev.withConfig({ displayName: "Test8" }) \`color:/*\${'red'}*/blue;\`;
-  const Test9 = styled.dev.withConfig({ displayName: "Test9" }) \`color://\${'red'}blue\`;
+  const Test9 = styled.dev.withConfig({ displayName: "Test9" }) \`color://\${'red'}\\nblue\`;
   export {};
 
 

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

@@ -1,5 +1,6 @@
 declare const keyframes: any;
 declare const css: any;
+declare const createGlobalStyle: any;
 
 declare const theColor: any;
 
@@ -13,4 +14,12 @@ const color = css`
   color: ${theColor};
 `;
 
+const MyRedBody = createGlobalStyle`
+  body {
+    background-color: red; // comments
+    ${color} // comments
+    // it will be ignored, but still emitted ${color}
+  }
+`;
+
 export {};

src/minify.ts

@@ -1,7 +1,7 @@
 import * as ts from 'typescript';
 import { isNoSubstitutionTemplateLiteral, isTemplateExpression } from './ts-is-kind';
 
-type State = ';' | 'x' | ' ' | '"' | '(' | '\'' | '/' | '//' | '/$' | '//$' | '/*' | '/**' | '/*$' | '/*$*';
+type State = ';' | 'x' | ' ' | '\n' | '"' | '(' | '\'' | '/' | '//' | '/$' | '//$' | '/*' | '/**' | '/*$' | '/*$*';
 type ReducerResult = { emit?: string; skipEmit?: boolean; state?: State } | void;
 type StateMachine = {
     [K in State]: {
@@ -41,6 +41,15 @@ const stateMachine: StateMachine = {
             return { state: 'x', emit: ' ' + ch };
         }
     },
+    '\n': { // may need new line
+        next(ch) {
+            if (ch == '\'' || ch == '"' || ch == '(') return { state: ch, emit: '\n' + ch }
+            if (ch == ' ' || ch == '\n' || ch == '\r') return { state: '\n', skipEmit: true }
+            if (ch == '/') return { state: '/', emit: '\n' }
+            if (isSymbol(ch)) return { state: ';', emit: '\n' + ch };
+            return { state: 'x', emit: '\n' + ch };
+        }
+    },
     "'": {
         next(ch) {
             if (ch == '\'') return { state: ';' };
@@ -79,7 +88,7 @@ const stateMachine: StateMachine = {
     '/$': { },
     '//$': {
         next(ch) {
-            if (ch == '\n') return { state: ';', skipEmit: true }
+            if (ch == '\n') return { state: '\n', skipEmit: true }
             return { skipEmit: true };
         }
     },
@@ -148,14 +157,6 @@ function createMinifier(): (next: string, last?: boolean) => string {
     }
 }
 
-function *minifierFn() {
-    let nextResult = '';
-    while (true) {
-        const next = yield nextResult;
-        nextResult = next;
-    }
-}
-
 export function minifyTemplate(templateLiteral: ts.TemplateLiteral) {
     const minifier = createMinifier();