Can't hover open with styled components

[watnFoehn]

Hi! The extension is great, I immediately installed it. My problem is that we use styled components in our application - the detection for flexbox doesn't work there. Do you think there is any possibility to make that happen? Would be awesome! Cheers!

[dzhavat]

Thanks for trying the extension!

I'm aware of this problem and would really like to solve it. This will make it work for other files as well like HTML, Vue, etc.

I've been trying to solve it but I'm also new to making extensions and don't know yet how to do it. My goal is to find out how VS Code detects CSS properties and implement something similar. I've asked a question on StackOverflow but noone is answering :(

I know this can be done, I just need to find a proper solution. Hopefully one of the future updates will have support for it.

If you have any suggestions for how this can be solved, you're welcome to share them. :)

[watnFoehn]

We used the extension the whole day yesterday, really nice!

Of course it must be possible. I have no clue how extensions are working though.

I just found this: https://code.visualstudio.com/api/language-extensions/programmatic-language-features

and that: https://code.visualstudio.com/api/language-extensions/language-server-extension-guide

I don't know if that is of any help or if you knew that already 🤷‍♂

If I get it right you can kind of register different languages to the extension:

  provideHover(document, position, token) {
    return {
      contents: ['Hover Content']
    };
  }
});```

[dzhavat]

Thanks for taking the time to search this.

I already read those pages. I feel like the solution will be a mixture of what is explained there but I also find some of the explanations quite complex and unclear. So I'm trying to come up with a basic implementation but still don't have anything concrete.

The example you've pointed is exactly what I'm using right now.

const disposableHoverProvider = vscode.languages.registerHoverProvider(
    ['css', 'less', 'sass', 'scss'],
    hoverProvider
);

As you can see, the hover is "activated" on ['css', 'less', 'sass', 'scss'] files. Activating it in other files, say html, becomes problematic because they contain other stuff besides CSS. So the challenge is how to detect the CSS and discard the rest. :)

Of course, for now you can open the cheatsheet using the command but I agree that it's convenient to have it available on hover as well.

[watnFoehn]

Ah alright, I see...too bad. Got the problem now. I mean in the perfect world you wouldn't specify any file/language and could just detect flex or something like that. But I guess, again I'm thinking too simple...

[dzhavat]

Detecting display: flex; in any file is possible right now but this is too broad. VS Code will then display the popup everywhere - in normal content, comments, etc. And that's not exactly how I would want it to work :)