`WithImportant<T>` makes TypeScript extremely slow about panda

[devunt]

Found a more better alternative.

// type WithImportant<T> = T extends string ? `${T}${Important}${string}` : T;
// type WithImportant<T> = T extends string ? `${T}${Important}` & { __important?: true } : T;

type WithImportant<T extends U, U = any> = U extends string ? `${U}${Important}` & { __important?: true } : T;

Above code is neither (1) drops the performance, nor (2) pollutes the autocomplete.
With above code svelte-check takes 12s to complete.

I think we can settle on this solution.

Also: this solution also makes gray.900!aaa an invalid token. The original code did not raise type error on a such case, so this way we can have a more type safety.

If this code looks ok to maintainers, I'll file a pull request for this. Please have a look. Thanks.

[devunt]

I've narrowed down the issue and identified the root cause.

type WithImportant<T> = T extends string ? `${T}${Important}${string}` : T;
//                                                          ^^^^^^^^^

If I remove the trailing ${string} in the WithImportant<T> definition, the perf problem instantly goes away.

I don't see why the trailing ${string} is needed as there will be no token following the ! or !important since they should be at the last position of the css value declaration. Is there something am I missing?
I found why: it is needed to hide it from typescript autocomplete. I think there's a way to hide it from autocomplete without sacrificing the performance. I'll update the issue if I find the way to do it.

[astahmer]

ohh, I had the feeling that branded types could solve this somehow but when I tried I couldnt find a working solution, glad you did !

this looks great, would you like to send a PR or would you prefer I do it ? I'd love to help/guide you if needed in the codebase if you want to contribute, no pressure if that's not the case you already helped a lot 🙏

if you want to contribute:

• make sure tests are still fine, feel free to update snapshots when needed
  there are 3 files with typings test based on the generated files which are especially relevant to this issue:
  https://github.com/chakra-ui/panda/blob/main/sandbox/codegen/__tests__/scenarios/strict.test.ts#L117-L144

same in this file and also this one

see the README in sandbox/codegen for more infos

[devunt]

Found a better alternative.

// type WithImportant<T> = T extends string ? `${T}${Important}${string}` : T;

type WithImportant<T> = T extends string ? `${T}${Important}` & { __important?: true } : T;

Above code is neither (1) drastically drops the performance, nor (2) pollutes the autocomplete.
With above code svelte-check takes 21s to complete.

I'll keep find a better way that does not drop the performance at all.
Meanwhile, I think we can utilize the above code for now since 5m to 20s is still a huge improvement.