Syntax highlighting broken with typescript type literals and with simple elements like styled.div

[maartenth]

#26 only added partial typescript support:

const StyledSection = styled.div<{ backgroundColor?: string }>` // no highlighting
const StyledSection = styled.div<Props>` // no highlighting
const StyledSection = styled<{ backgroundColor?: string }>('div')` // no highlighting
const StyledSection = styled<Props>('div')` // works

[chrisui]

I'm seeing the same. To clarify this happens when using the generic version of the an element function. Ie. div<Props>().

[libekonst]

Confirming that highlighting is broken when passing a type argument to the styled function. This behavior is not specific to type literals; passing any kind of type notation will break highlighting:

However, one way I got it to work, is to directly notate the Props type when consumed, at least once:

(works with destructuring as well)

This allows the compiler to infer the type without needing to explicitly pass a type argument as we did the first time, but it probably reduces readability.

Things get messy when we want to use intersection types.

Using two different Props types in the same styled component is obviously not possible:

so we still need to fall back to passing a type argument that is itself an intersection of the desired interfaces: or use a type alias to combine them, and then notate Props at least once using that alias to get back syntax highlighting:

[kevinwolfcr]

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

Before

After

[tomellwood]

I'm experiencing the same issue as stated above - syntax highlighting and css code completion is gone when using types.

Also as mentioned above, assigning a type directly to any of the props objects used within the styled component will fix type errors and keep syntax highlighting. However in this example, only textMargin would autocomplete after typing p., and it doesn't seem ideal to have to repeat the ${(p: Types) => p.prop} boilerplate for each rule that uses props.

[mrGibi]

to all: its finally fixed with 0.0.26 released today 🎉

[vviotto-masti]

I still have a problem with this when using the styled function even after 0.0.26 because 102f0d87d734f16bb8ec090bcbdfcd281150f817 doesnt take spaces into account

VSCode formatter automatically puts a space after the function, this breaks the highlight

[GU5TAF]

Not sure if this is an error on my end but I still don't get syntax highlighting.

[kimroen]

@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.

[GU5TAF]

@GU5TAF It doesn't work with inline types like that, so create a type alias. It's just using a regex to detect things, so it can't really detect everything properly.

Okay, thanks for the reply! 🙏

[vitorrd]

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

[willem-aart]

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

Same for css<..>

[jodapomo]

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`,
  },
...

[basslagter]

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

[pixelkritzel]

Please reopen the issue. I have the same problem with css

[jasonwilliams]

We are looking for contributors, please see https://github.com/styled-components/vscode-styled-components/issues/275

[pixelkritzel]

@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.

[jasonwilliams]

Thanks @pixelkritzel that was useful

[johh]

Hey everyone, so I got the regex to pick up on multi-line inline types (https://regex101.com/r/XxGtKO/1/) but I'm a bit lost on how to proceed. Escaping and switching out the regex in syntaxes/styled-components.json, then building with yarn vscode:prepublishdoesn't really do anything, at least when I install the extension locally. Am I missing something?

[johh]

Hey everyone, so I got the regex to pick up on multi-line inline types (https://regex101.com/r/XxGtKO/1/) but I'm a bit lost on how to proceed. Escaping and switching out the regex in syntaxes/styled-components.json, then building with yarn vscode:prepublishdoesn't really do anything, at least when I install the extension locally. Am I missing something?

@jasonwilliams, @finnp, do you know how to proceed? 🙂

[jasonwilliams]

Hey everyone, so I got the regex to pick up on multi-line inline types (https://regex101.com/r/XxGtKO/1/) but I'm a bit lost on how to proceed. Escaping and switching out the regex in syntaxes/styled-components.json, then building with yarn vscode:prepublishdoesn't really do anything, at least when I install the extension locally. Am I missing something?

@jasonwilliams, @finnp, do you know how to proceed? 🙂

Hmm how are you testing it? It should work. If you have this project checked out locally you should be able to hit “launch extension” in debug view on VSCode and test it on a file. Better yet you can create a test like the others and use that as a test.

Run yarn watch then load the extension, the debug launch option should call “watch” automatically

[johh]

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?

[jasonwilliams]

@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

[Justkant]

Hi, there is still an issue when using styled options

I'm using the version 1.5.2

[jasonwilliams]

@Justkant any help on that one would be appreciated

[Justkant]

@jasonwilliams sure, how can I help ?

I'm using emotion and I just saw that styled-components and emotion differ on the way you specify the shouldForwardProp option. (styled vs emotion)

I also had a look at the multiline fix (https://github.com/styled-components/vscode-styled-components/pull/281) and I haven't had the time to test some changes to the regex

In the meantime, here is a fixture for my issue:

interface StyledBrokenProps {
    multipleLines: boolean;
}

const StyledBroken = styled('h1', {
  shouldForwardProp: prop => prop !== 'multipleLines'
})<StyledBrokenProps>`
    background: red;
`;

[jasonwilliams]

@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

[jasonwilliams]

@Justkant if you're stuck at any point, let me know.

[Justkant]

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

[jasonwilliams]

Feel free to share the tweak you did on Regex 101 I can probably take a look

[pixelkritzel]

@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!