Token autocompletion not working on utils [CodeSandbox]

[hmbrg]

Describe the bug
Autocomplete does not seem to work for utils right now. Inside of css() the utils are not even defined as a prop, they are only there if you create a media query with css({"bp1": {"pt": ...}}).

Steps to reproduce

1. Use the css() or styled() function
2. Don't get any autocompletion for utils

I've created a CodeSandbox here: https://codesandbox.io/s/distracted-rain-s63rmp?file=/src/App.tsx

Expected behaviour
I would expect to get suggestions of the available tokens.

[jrgarciadev]

Thank you for reporting it @hmbrg 🙌🏻

[hmbrg]

Are there any updates on this? I would love to contribute a fix for this, but I've been looking into this issue and I have no idea what causes it. Do you have any clues on what might be the problem here?

The error even states that there is no utility registered. Installing vanilla stitches in the repo works just fine though.

[jrgarciadev]

Hey guys @hmbrg it seems that Stitches has a problem with the latest Typescript version stitchesjs/stitches#947

A user shared a temporal solution:
stitchesjs/stitches#947 (comment)

It was the way we solve it, hope it helps you

[hmbrg]

Thanks for your response! Unfortunately, that doesn't fix it, and the codesandbox I provided in the issue doesn't use an affected typescript version.

I've created a new codesandbox showing the issue next to the working "vanilla" stitches config: https://codesandbox.io/s/nextui-type-issue-5x128y?file=/pages/index.js

Looking at the type of px shows that all type information is missing. Also all the breakpoints etc. are missing from the styled() options, but it all works with the "vanilla" stitches config.

[jrgarciadev]

Hey @hmbrg the commented solution aims to "VSCode", however, I was checking the CodeSandbox and is not a "Typescript" template, I've created a new Codesanbox base on the Typescript template and it works well,

https://codesandbox.io/s/stitches-token-nextui-tzufq0?file=/src/App.tsx

It's also important to point out that is not a NextUI bug, we're waiting for the Stitches team to fix it as well

[hmbrg]

I'm sorry to be such a bother, but even the example you shared doesn't seem to be working correctly. The type of px is still not set correctly, and I'm not getting any autocompletion on the token values that px accepts.

[hmbrg]

In fact, I'm not getting any token completion on any CSS property, not only utils. This works when using Stitches on its own as shown in my second codesandbox.

[WonderPanda]

I'm very interested to try out Next UI as well but I've been getting really used to the level of typescript/intellisense integration provided natively by stitches. Not having access to type safety for the utils that NextUI adds to the stitches theme feels like a big loss here.

@jrgarciadev Looking at the sandbox link you've provided, there is no intellisense for any of the utils let alone enforcing the correct values are used with the util (eg px)

[jrgarciadev]

Hey @WonderPanda I'm glad you want to use NextUI, the IntelliSense problems on CodeSandbox are caused due to is not possible to set a custom Typescript version at least up to now codesandbox/codesandbox-client#942, and Stitches has a problem with the latest Typescript version (which is used by CodeSandbox) stitchesjs/stitches#947 (comment), we hope they fix that issue soon in order to have IntelliSense also on CodeSanbox, btw if you use VsCode you will not have this issue at all so you can try out NextUI without problem 👍🏻

[WonderPanda]

Hey @WonderPanda I'm glad you want to use NextUI, the IntelliSense problems on CodeSandbox are caused due to is not possible to set a custom Typescript version at least up to now codesandbox/codesandbox-client#942, and Stitches has a problem with the latest Typescript version (which is used by CodeSandbox) modulz/stitches#947 (comment), we hope they fix that issue soon in order to have IntelliSense also on CodeSanbox, btw if you use VsCode you will not have this issue at all so you can try out NextUI without problem 👍🏻

Thanks for super quick response! I'll try things out in VsCode

[hmbrg]

Hey @jrgarciadev, I'm sorry to chime in here again, but this is not working for me in VSCode either, even though we are not using the affected TypeScript version.

[jrgarciadev]

Hey @hmbrg which Typescript version are you using? did you see this comment stitchesjs/stitches#947 (comment) ?

[hmbrg]

Yes, I did. We are using the recommended version of "4.5.5".

[jrgarciadev]

@hmbrg Could you try using the v.4.3.4? which is the version NextUI is using https://github.com/nextui-org/nextui/blob/main/packages/react/package.json#L123

[hmbrg]

Here is a basic repo just like the CodeSandbox: https://github.com/hmbrg/nextui-autocomplete-issue/blob/main/pages/index.tsx#L7

The type of "p:" is of type p?: {} | undefined when I'm hovering over the property.

Changing the typescript version to 4.3.4 doesn't fix it, sadly.

[jrgarciadev]

@hmbrg did you change also the vscode typescript version? or just the project version?

[hmbrg]

Yes, I made VSCode use the workspace version, not changing that makes the length error appear. After changing this the error goes away, but this issue persists.

The settings are set to: "typescript.tsdk": "node_modules/typescript/lib"

[jrgarciadev]

Hey @hmbrg could you please check the version you are using is set as follows:
typescript": "4.3.2"

Notice that it has no the ^ symbol, otherwise could be being installed other minor typescript version

[hmbrg]

Just tried that, sadly it doesn't fix it for me. I updated my example repo here: https://github.com/hmbrg/nextui-autocomplete-issue/blob/main/pages/index.tsx#L7

Have you tried my repo? Does this work for you? If yes, maybe it's something else with my local setup.

[jrgarciadev]

Hey @hmbrg I'm still trying to figure out why the Typescript/IntelliSense is not working on CodeSandbox, if you look at this example https://codesandbox.io/s/nextui-xxl-button-kbhbid?file=/App.js (Only JS) the autocomplete works 🤔

Regarding VsCode autocomplete it works for me here's a video (it's laggy because I tested it on Github Codespaces):
https://user-images.githubusercontent.com/30373425/160298712-05e37f88-99c6-41c3-bf7e-aa923436ff7d.mov

[hmbrg]

Thanks for looking into this! I've noticed, that even in the video you provided, the $black in bgColor: "$black" didn't autocomplete. The type overlay in VSCode even showed the type of bgColor as {} | undefined. I really wonder what's going on, because this defintly works with just using Stitches on its own, as you can see in this example: https://codesandbox.io/s/nextui-type-issue-5x128y?file=/pages/index.js

[hmbrg]

Bump. Are there any news on this? I'm still trying to figure this out.