<p dir="auto">The following <code class="notranslate">export</code> statement is not properly transformed:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export {A, B} from './foo'"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-kos">{</span><span class="pl-v">A</span><span class="pl-kos">,</span> <span class="pl-v">B</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./foo'</span></pre></div>
<p dir="auto">It produces:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="exports.A = _interopRequire(require(&quot;./foo&quot;));
exports.B = _interopRequire(require(&quot;./foo&quot;));"><pre class="notranslate"><span class="pl-s1">exports</span><span class="pl-kos">.</span><span class="pl-c1">A</span> <span class="pl-c1">=</span> <span class="pl-en">_interopRequire</span><span class="pl-kos">(</span><span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"./foo"</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">exports</span><span class="pl-kos">.</span><span class="pl-c1">B</span> <span class="pl-c1">=</span> <span class="pl-en">_interopRequire</span><span class="pl-kos">(</span><span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"./foo"</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Instead of:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var _ref = require(&quot;./foo&quot;);
exports.A = _ref.A;
exports.B = _ref.B;"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">_ref</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"./foo"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">exports</span><span class="pl-kos">.</span><span class="pl-c1">A</span> <span class="pl-c1">=</span> <span class="pl-s1">_ref</span><span class="pl-kos">.</span><span class="pl-c1">A</span><span class="pl-kos">;</span>
<span class="pl-s1">exports</span><span class="pl-kos">.</span><span class="pl-c1">B</span> <span class="pl-c1">=</span> <span class="pl-s1">_ref</span><span class="pl-kos">.</span><span class="pl-c1">B</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Tested using <code class="notranslate">6to5@2.6.2</code></p>
<h2 dir="auto">Bug report / Feature Request</h2>
<p dir="auto">With TypeScript 2.9.2 and <code class="notranslate">styled-components</code> 3.3.3, it is possible to declare a typed template literal the following way:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const Item = styled.div&lt;{
  selected?: boolean;
}&gt;`
  color: ${p =&gt; p.selected ? 'red' : 'black' };
`;"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-smi">Item</span> <span class="pl-c1">=</span> <span class="pl-s1">styled</span><span class="pl-kos">.</span><span class="pl-en">div</span><span class="pl-kos">&lt;</span><span class="pl-kos">{</span>
  <span class="pl-c1">selected</span>?: <span class="pl-smi">boolean</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">&gt;</span><span class="pl-s">`</span>
<span class="pl-s">  color: <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">p</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">p</span><span class="pl-kos">.</span><span class="pl-c1">selected</span> ? <span class="pl-s">'red'</span> : <span class="pl-s">'black'</span> <span class="pl-kos">}</span></span>;</span>
<span class="pl-s">`</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This is parsed and linted by TypeScript well (e.g. writing something like <code class="notranslate">p =&gt; p.xyz</code> causes a TS error).</p>
<p dir="auto">When the same code is parsed with babel 7 &amp; <code class="notranslate">babel-preset-typescript@7.0.0-beta.51</code>, the following syntax error shows up:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="SyntaxError: /path/to/file.tsx: Unexpected token, expected &quot;,&quot; (42:10)
const Item = styled.div&lt;{
  selected?: boolean;
          ^
}&gt;`"><pre class="notranslate"><code class="notranslate">SyntaxError: /path/to/file.tsx: Unexpected token, expected "," (42:10)
const Item = styled.div&lt;{
  selected?: boolean;
          ^
}&gt;`
</code></pre></div>
<p dir="auto">This situation has created a pretty hard-to-investigate situation for me in a Next.js project. VSCode and <code class="notranslate">yarn lint</code> did not report any any problems, but the app was not building.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
```ts
interface ItemProps {
  selected?: boolean;
};
const Item = styled.div&lt;ItemProps&gt;`
  color: ${p =&gt; p.selected ? 'red' : 'black' };
`;
```


↑ this transpiles, but resulting code is wrong. Something like:

```js
var Item = __WEBPACK_IMPORTED_MODULE_3_styled_components___default.div.div &lt; ItemProps &gt; &quot;...&quot;.concat(function (p) {...
```

Because `ItemProps` was not supposed to be there at all, we get ` ReferenceError: ItemProps is not defined` 😱 

---
It'd be great if syntax parsing by babel could be improved when it comes to typed template literals."><pre lang="Meanwhile," class="notranslate"><code class="notranslate">
```ts
interface ItemProps {
  selected?: boolean;
};
const Item = styled.div&lt;ItemProps&gt;`
  color: ${p =&gt; p.selected ? 'red' : 'black' };
`;
```


↑ this transpiles, but resulting code is wrong. Something like:

```js
var Item = __WEBPACK_IMPORTED_MODULE_3_styled_components___default.div.div &lt; ItemProps &gt; "...".concat(function (p) {...
```

Because `ItemProps` was not supposed to be there at all, we get ` ReferenceError: ItemProps is not defined` 😱 

---
It'd be great if syntax parsing by babel could be improved when it comes to typed template literals.
</code></pre></div>