vscode-styled-components: Syntax highlighting broken with typescript type literals and with simple elements like styled.div

to all: its finally fixed with 0.0.26 released today 🎉

It seems this does work with styled, but not with createGlobalStyle<>.

Same for css<..>

Same for me, syntax highlight stopped properly working then typing my styled components.

Before

After

I guess this one should be re-opened. Still issues with css<> and createGlobalStyle<>

It seems this does work with styled, but not with createGlobalStyle<>.

@GU5TAF It doesn’t work with inline types like that, so create a type alias:

// Doesn't work
const MyComponent = styled.div<{ color: string }>``

// Works
type Props = { color: string };
const MyComponent = styled.div<Props>``;

It’s just using a regex to detect things, so it can’t really detect everything properly.

@jasonwilliams Now in the case of types in new lines - the styles highlighting is working but it messes up everything afterwards Before adding new lines:

After adding new lines

@jasonwilliams I tried it but I didn’t make it. The RegEx was stronger than me. But my issues seems to be connected to a line break. If there isn’t any line break it works as shown in the attached screenshots. Maybe this will help somebody else.

This has been fixed in v1.5.1 please let me know if it isn’t

Just saw your comment. Yes, it works for this usecase with styled-components. Thank you!

Hi, sorry I hadn’t much time to try and fix this issue lately.

I did try today and found a tweak on Regex 101 that helped but couldn’t make it work when debugging the extension in vscode. I also found some inconsistencies when debugging with the Scope Inspector

I’ll add more infos later when I have some time

@Justkant you should be able to clone this repo, hit “lunch extension” in the debug tab. That will load a second VSCode instance with the fixtures folder loaded.

Go into a typescript fixture (doesn’t matter which one) and replace it with your fixture.

now take one of the regexes (it’s this one https://github.com/styled-components/vscode-styled-components/blob/master/syntaxes/styled-components.json#L159) and tweak it. You can do that by throwing it into regex101 (Unescape it first) and put your fixture in Regex 101 aswell. Then you can tweak there.

once you’re happy load it back into the json file (escaped) and hit refresh on the debug bar.

https://github.com/styled-components/vscode-styled-components/blob/master/CONTRIBUTING.md Goes into more detail

Hi, there is still an issue when using styled options

I’m using the version 1.5.2

@jasonwilliams I tried it but I didn’t make it. The RegEx was stronger than me.

But my issues seems to be connected to a line break. If there isn’t any line break it works as shown in the attached screenshots.

Maybe this will help somebody else.

This has been fixed in v1.5.1 please let me know if it isn’t

Thanks for your reply and for clearing things up! Launching it as you said, I still get no highlighting or autocomplete. I’m not too familiar with vscode extension development, how would I go about debugging this?

Thanks @pixelkritzel that was useful

When the generic type is added also to the attrs the highlighting is still broken:

And if you declare the type directly in the props of the attrs call, you would lose access to the other properties, in this case style.

styled.div.attrs(({ size }: ContainerProps) => ({
  size: `${size}px`,
  style: { // <-- 'style' does not exist in type 'ContainerProps'
    height: `${size}px`,
  },
...