Jetbrains IDE autocompletion

[RemyMachado]

Hello, I'm currently using Webstorm with Pandacss and I have no autocompletion for the css strings on the recipe side.
I saw a plugin on vscode, but nothing for jetbrains, any suggestion?

Here's an example:

{
        ...
        borderColor: 'fg.onSurface', // no autocomplete
        ...
 }

[anubra266]

@RemyMachado The extension is not required for autocomplete. It's typescript.

[anubra266]

This is example in online playground. No extension. The styled system generated by panda css, generates the colors in the types.

[RemyMachado]

I'm confused. I just checked with coworkers using VSCode and they get the autocompletion from the plugin. When they disable it, they don't get the autocompletion no more...

[anubra266]

@RemyMachado The extension can provide superpowered suggestions. e.g. a preview of color tokens, or the rem and px values of sizes and font sizes.
But without the extension, you get raw suggestions from typescript like the one in my screenshot.
Maybe I'll install webstorm and try.

[anubra266]

@RemyMachado I can get the suggestions in Webstorm

[RemyMachado]

Yes, I'm interested in custom tokens my designer team defined. I'm not quite recognizing what's custom and what's not yet.

Thanks for trying it on Webstorm.

[Mydayyy]

@RemyMachado I can get the suggestions in Webstorm

Do you have any special configuration or plugins to get autocomplete here? My TS completion in general is working in webstorm but I get nothing for pandacss generated content.

E.g <Grid flex=""> here, neither attributes for Grid (like flex) nor any values for the attributes have suggestions

Edit: I do have some completion now after invalidating all caches (which I already did in the past but it didnt help). But it still feels really bumpy and slow compared to vscode. Might just have to drop webstorm for this

[anubra266]

No...I just installed webstorm and opened a panda css project

[Mydayyy]

It seems I am not the only one with the issue using webstorm. Webstorm appears to ignore the styled-system directory for types completely and always links back to the generic types in node_modules (although tsconfig is configured as documented). I believe this is most likely a webstorm issue - and unfortunately they are extremely slow with fixing bugs.

It's still not working correctly with the latest version that just got released

[Yuripetusko]

For me it works out of the box, but it takes a while when panda is compiling on change. It looks like typescript autocompletion/indexing is blocked while Panda is compiling. And I am on mac mini m2 with 32gb ram. I posted about this here too
#1937

[Yuripetusko]

also @Mydayyy make sure you add "styled-system", to include array in your tsconfig.json

[aloysb]

Same issue here, I'm using the postcss plugin.

No issue in VSCode, but Webstorm is playing up