After discovering that styled-components now support typed template literals, I tried the following trick in my next.js + @zeit/next-typescript project:

const Item = styled.div<{
  selected?: boolean;
}>`
  color: ${p => p.selected ? 'red' : 'black' };
`;

TypeScript linting went fine, but I could not yarn dev or yarn build because of the this error:

SyntaxError: /path/to/file.tsx: Unexpected token, expected "," (42:10)
const Item = styled.div<{
  selected?: boolean;
          ^
}>`

Even forcing the latest "@babel/preset-typescript": "7.0.0-beta.51" instead of the currently used beta.42 did not help (I did this by setting resolutions in package.json and running yarn install again).

Looks like the problem is upstream, so I've opened babel/babel#8216. I'm creating this issue just as a reminder to upgrade "@babel/preset-typescript" when the time comes. I hope that this report will also help other users of @zeit/next-typescript and styled-components figure out what's wrong with their builds.

```ts
interface ItemProps {
  selected?: boolean;
};
const Item = styled.div<ItemProps>`
  color: ${p => 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 < ItemProps > "...".concat(function (p) {...
```

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