Feature Request: Add support for styled-components-ts

[DogPawHat]

There is an issue with styled-components and typescript where typing props inside intropolations is hard because of an issue where you can't pass generic information to tagged template functions:

https://github.com/Microsoft/TypeScript/issues/11947

https://github.com/styled-components/styled-components/issues/1428

Which is a huge annoyance compared to styled-components otherwise excellent ts support The current worked around is to use another library called styled-components-ts which does this:

// Import react, styledComponents and styledComponentsTS
import * as React from 'react';
import styledComponents from 'styled-components';
import styledComponentsTS from 'styled-components-ts';

// Create an interface for the component
export interface MyImageProps {
  size: number;
  borderColor?: string;
  borderSize?: number;
}

// Create a styled component with our props interface
const MyImage = styledComponentsTS<MyImageProps>(styledComponents.img) `
  width: ${props => props.size}px;
  height: ${props => props.size}px;
  border: ${props => props.borderSize || '4px'} solid ${props => props.borderColor || 'black'}
`;

export default MyImage;

Properly typing the props options in the interpolations without any other config. As TS issue 11947 doen't seem to be getting fixed anytime soon (At least until the problem affects other library other then styled-components) we are stuck with it for some time.

Of course right now, using 'styledComponentsTs()` breaks syntax highlighting and intellisence inside the template literal, believing it to be a normal template literal. I was wondering if this could be fixed, as I think styled-components-ts is almost essencal to using styled-components and typescript together and vscode is obviously very popular among typescript devs.

Otherwise thanks for the good work.

[bsutt123]

so I feel your pain, but I don't think that this extension is planning on supporting any syntax highlighting outside of the use cases detailed in styled-components. I have requests for outside module support and the answer has always been "if we start supporting this outside module, where does it stop"

Someone higher up the food chain than me might have a reason to work on it this time, but I don't think that will be the case. I am sure that you are welcome to fork the repository and add support for TS under a different module though, and if you are just adding in the recognition for the first part of the string it won't be too hard to implement.

If you want some tips on getting started with it throw me a message and I'll see if I can point you in the right direction.

[michael-land]

@bsutt123 is there any tutorial for intellsense? I try to write a new rule for styled-components-ts, but the intellsense not working..

[Cu3PO42]

While I would agree that support for any third party modules is not within the scope of this plugin, I feel that an exception could be made for styled-components-ts since it is very much a thin wrapper over styled-components itself that only exists to make TypeScript usage somewhat less painful (which, personally, I am very sympathetic towards).

I will definitely keep this in mind.

[beshanoe]

No need for supporting styled-component-ts anymore, passing generics to tagged templates has landed in typescipt@next and headed to 2.9: https://github.com/Microsoft/TypeScript/issues/11947#issuecomment-383252975 now this extension should definitely support such code:

export const RedBox = styled.div<{foo: string}>`
  background: red;
  ${props => props.foo}
`;

[Cu3PO42]

Thanks for the heads up @beshanoe. I have opened #81 to track support for that syntax. In light of this, I believe support for styled-components-ts will not be worked in since in will be made obsolete anyway.