Fix missing space after placeholder

Author: Igorbek

src/__tests__/baselines/minification-only/issue36-extended.ts.baseline

@@ -21,7 +21,7 @@ TypeScript before transform:
 TypeScript after transform:
 
   declare const styled: any;
-  export const A = styled.div \`border:\${'solid'}10px;\`;
+  export const A = styled.div \`border:\${'solid'} 10px;\`;
 
 
 

src/__tests__/baselines/minification-only/issue36.tsx.baseline

@@ -38,7 +38,7 @@ TypeScript after transform:
   declare const keyframes: any;
   declare const styled: any;
   const rotate360 = keyframes \`from{transform:rotate(0deg);}to{transform:rotate(360deg);}\`;
-  export const StyledDiv = styled.div \`width:100px;height:100px;background-color:greenyellow;animation:\${rotate360}2s linear infinite;\`;
+  export const StyledDiv = styled.div \`width:100px;height:100px;background-color:greenyellow;animation:\${rotate360} 2s linear infinite;\`;
 
 
 

src/__tests__/baselines/minification/issue36-extended.ts.baseline

@@ -21,7 +21,7 @@ TypeScript before transform:
 TypeScript after transform:
 
   declare const styled: any;
-  export const A = styled.div.withConfig({ displayName: "A" }) \`border:\${'solid'}10px;\`;
+  export const A = styled.div.withConfig({ displayName: "A" }) \`border:\${'solid'} 10px;\`;
 
 
 

src/__tests__/baselines/minification/issue36.tsx.baseline

@@ -38,7 +38,7 @@ TypeScript after transform:
   declare const keyframes: any;
   declare const styled: any;
   const rotate360 = keyframes \`from{transform:rotate(0deg);}to{transform:rotate(360deg);}\`;
-  export const StyledDiv = styled.div.withConfig({ displayName: "StyledDiv" }) \`width:100px;height:100px;background-color:greenyellow;animation:\${rotate360}2s linear infinite;\`;
+  export const StyledDiv = styled.div.withConfig({ displayName: "StyledDiv" }) \`width:100px;height:100px;background-color:greenyellow;animation:\${rotate360} 2s linear infinite;\`;
 
 
 

src/minify.ts

@@ -1,12 +1,13 @@
 import * as ts from 'typescript';
 import { isNoSubstitutionTemplateLiteral, isTemplateExpression } from './ts-is-kind';
 
-type State = ';' | 'x' | ' ' | '\n' | '"' | '(' | '\'' | '/' | '//' | '/$' | '//$' | '/*' | '/**' | '/*$' | '/*$*';
+type State = ';' | ';$' | 'x' | ' ' | '\n' | '"' | '(' | '\'' | '/' | '//' | '/$' | '//$' | '/*' | '/**' | '/*$' | '/*$*';
 type ReducerResult = { emit?: string; skipEmit?: boolean; state?: State } | void;
 type StateMachine = {
     [K in State]: {
         next?(ch: string): ReducerResult;
         flush?(last: boolean): ReducerResult;
+        placeholder?(): ReducerResult;
     }
 };
 
@@ -22,6 +23,18 @@ const stateMachine: StateMachine = {
             if (ch == '/') return { state: '/', skipEmit: true }
             if (isSymbol(ch)) return;
             return { state: 'x' }
+        },
+        flush() {
+            return { state: ';$' }
+        }
+    },
+    ';$': { // after placeholder
+        next(ch) {
+            if (ch == '\'' || ch == '"' || ch == '(') return { state: ch }
+            if (ch == ' ' || ch == '\n' || ch == '\r') return { skipEmit: true, state: ' ' } // we may need a space
+            if (ch == '/') return { state: '/', skipEmit: true }
+            if (isSymbol(ch)) return;
+            return { state: 'x' }
         }
     },
     'x': {
@@ -141,16 +154,19 @@ function createMinifier(): (next: string, last?: boolean) => string {
                     minified += ch;
             }
         }
+
+        let reducer = stateMachine[state];
+        apply(reducer.placeholder && reducer.placeholder());
 
         let pos = 0;
         let len = next.length;
         while (pos < len) {
             const ch = next[pos++];
-            const reducer = stateMachine[state];
+            reducer = stateMachine[state];
             apply(reducer.next && reducer.next(ch), ch)
         }
 
-        const reducer = stateMachine[state];
+        reducer = stateMachine[state];
         apply(reducer.flush && reducer.flush(last));
 
         return minified;