Support passing type parameters to styled function

TypeScript 2.9 will support passing type parameters to tagged template literals, i.e.

styled<Props>`
  color: black;
`;

will become valid. The plugin should support this syntax and trigger the syntax highlighting.

[kachkaev]

I think a more likely use case is styled.tag<Props>`...`  rather than  styled<Props>`...`

Example:

const MyComponent = styled.div`
  background: yellow;
  color: red;
`;

const MyComponentWithParams = styled.div<{ something?: boolean }>`
  background: yellow;
  color: ${(p) => (p.something ? "green" : "red")};
`;

Current look in VSCode:

(the first block is highlighted and the second one is not)

Types in template literals work for me in next@7.0.0-canary.0 + @zeit/next-typescript@1.1.1-canary.2 🎉 This means that they may be widely used soon after the release of 7.0.0 😉

[CosmaTrix]

Hi all,

Any update on this issue? As you can see in the image the Container is higlighted correctly, while Item<Props> is not. 😞

This is the stack I’ve been using

• Visual Studio Code 1.31.1
• Create React App 2.1.5
• React & ReactDOM 16.8.3
• styled-components 4.1.3
• TypeScript 3.3.3333
• typescript-styled-plugin 0.14.0