Syntax highlighting breaks after using styled-components css helper in TypeScript

[loqusion]

Screenshot of Current Behavior

It works when we remove the generic tag:

Interestingly, it also works with styled.(tag)<type>:

Sample Code to Reproduce

const StyledButtonPlay = css<ButtonProps>`
  width: 50px;
  height: 50px;
  border-width: 50px;

  &:hover {
    border-left-color: white;
    cursor: pointer;
  }
`;

const StyledButtonPause = css<ButtonProps>`
  &:hover {
    border-color: white;
  }
`;

export const StyledButton = styled.button<ButtonProps>`
  box-sizing: border-box;
  background-color: transparent;
  border-style: solid;
  border-color: transparent transparent transparent #282a2d;

  ${(props) => (
    props.paused
      ? StyledButtonPlay
      : StyledButtonPause
  )}
`;

(Property interpolations were used in the original code for StyledButtonPlay, but they were removed here for brevity. The generic tag is required for the original code to work in TypeScript.)

[michaelgmcd]

Unfortunately @Flandre-X, the syntax highlighting provided by this plugin is only available for JavaScript (.js, .jsx) files. There are several reasons for not supporting .ts/.tsx. The first that come to mind are:

• It would be unexpected from a package with JavaScript in the name
• TypeScript is a very active language. The VSCode team does a great job of keeping the syntax highlighting up to date. Keeping parity in this package would be very difficult.

I would give vscode-styled-components a whirl if you haven't already.