From b513bc004dd32de129b59c2b078d48576edb1346 Mon Sep 17 00:00:00 2001
From: Igor Oleinikov <igor@oleinikov.ru>
Date: Tue, 14 May 2019 22:52:40 -0700
Subject: [PATCH] Fix minification (fix #44) - avoid adding extra space after
 interpolation

---
 .../minification-only/issue44.tsx.baseline    | 28 +++++++++++++++++++
 .../minification/issue44.tsx.baseline         | 28 +++++++++++++++++++
 .../fixtures/minification/issue44.tsx         |  3 ++
 src/minify.ts                                 |  6 ++--
 4 files changed, 62 insertions(+), 3 deletions(-)
 create mode 100644 src/__tests__/baselines/minification-only/issue44.tsx.baseline
 create mode 100644 src/__tests__/baselines/minification/issue44.tsx.baseline
 create mode 100644 src/__tests__/fixtures/minification/issue44.tsx

diff --git a/src/__tests__/baselines/minification-only/issue44.tsx.baseline b/src/__tests__/baselines/minification-only/issue44.tsx.baseline
new file mode 100644
index 0000000..70c6c02
--- /dev/null
+++ b/src/__tests__/baselines/minification-only/issue44.tsx.baseline
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`issue44.tsx 1`] = `
+
+File: issue44.tsx
+Source code:
+
+  declare const styled: any;
+  styled.div\` transition:  width \${100}ms  ease-in;\`;
+  styled.div\` transition:  width \${'100ms'}  ease-in;\`;
+  
+
+TypeScript before transform:
+
+  declare const styled: any;
+  styled.div \` transition:  width \${100}ms  ease-in;\`;
+  styled.div \` transition:  width \${"100ms"}  ease-in;\`;
+  
+
+TypeScript after transform:
+
+  declare const styled: any;
+  styled.div \`transition:width \${100}ms ease-in;\`;
+  styled.div \`transition:width \${'100ms'} ease-in;\`;
+  
+
+
+`;
diff --git a/src/__tests__/baselines/minification/issue44.tsx.baseline b/src/__tests__/baselines/minification/issue44.tsx.baseline
new file mode 100644
index 0000000..70c6c02
--- /dev/null
+++ b/src/__tests__/baselines/minification/issue44.tsx.baseline
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`issue44.tsx 1`] = `
+
+File: issue44.tsx
+Source code:
+
+  declare const styled: any;
+  styled.div\` transition:  width \${100}ms  ease-in;\`;
+  styled.div\` transition:  width \${'100ms'}  ease-in;\`;
+  
+
+TypeScript before transform:
+
+  declare const styled: any;
+  styled.div \` transition:  width \${100}ms  ease-in;\`;
+  styled.div \` transition:  width \${"100ms"}  ease-in;\`;
+  
+
+TypeScript after transform:
+
+  declare const styled: any;
+  styled.div \`transition:width \${100}ms ease-in;\`;
+  styled.div \`transition:width \${'100ms'} ease-in;\`;
+  
+
+
+`;
diff --git a/src/__tests__/fixtures/minification/issue44.tsx b/src/__tests__/fixtures/minification/issue44.tsx
new file mode 100644
index 0000000..9968d48
--- /dev/null
+++ b/src/__tests__/fixtures/minification/issue44.tsx
@@ -0,0 +1,3 @@
+declare const styled: any;
+styled.div` transition:  width ${100}ms  ease-in;`;
+styled.div` transition:  width ${'100ms'}  ease-in;`;
diff --git a/src/minify.ts b/src/minify.ts
index e862d27..64927ea 100644
--- a/src/minify.ts
+++ b/src/minify.ts
@@ -53,7 +53,7 @@ const stateMachine: StateMachine = {
             return { state: 'x', emit: ' ' + ch };
         },
         flush(last) {
-            if (!last) return { emit: ' ' };
+            if (!last) return { emit: ' ', state: ';$' };
         }
     },
     '\n': { // may need new line
@@ -201,14 +201,14 @@ export function createMinifier(): (next: string, last?: boolean) => string {
             const prevState = state;
             const reducerResult = reducer.next && reducer.next(ch);
             apply(reducerResult, ch)
-            //console.log('next(', { ch, state: prevState }, '): ', reducerResult, ' -> ', { state, minified });
+            // console.log('next(', { ch, state: prevState }, '): ', reducerResult, ' -> ', { state, minified });
         }
 
         const reducer = stateMachine[state];
         const prevState = state;
         const reducerResult = reducer.flush && reducer.flush(last);
         apply(reducerResult);
-        //console.log('flush', { state: prevState }, '): ', reducerResult, ' -> ', { state, minified });
+        // console.log('flush', { state: prevState }, '): ', reducerResult, ' -> ', { state, minified });
 
         return minified;
     }