Cannot use multiple values in a shorthand property with strictTokens enabled

[etlovett]

Description

I'd like to turn on strictTokens for my codebase to enforce usage of our predefined tokens, but I've discovered one issue that is giving me second thoughts. With strictTokens enabled and tokens defined for a shorthand property like padding that can take multiple values of the same token, the resulting TypeScript types enforce that only a single value is passed.

Obviously something like padding: 'spacing-01 spacing-02'; can be split into the constituent longhand properties, but it'd be nice to continue to be able to use shorthand properties with token usage enforcement. Would this be straightforward to support?

Using TypeScript's template literal types might allow this, by producing a type like this:

type PaddingValues = "0" | Tokens["spacing"];
interface PropertyValueTypes {
  ...
  padding:  PaddingValues | `${PaddingValues} ${PaddingValues}` | `${PaddingValues} ${PaddingValues} ${PaddingValues}` | `${PaddingValues} ${PaddingValues} ${PaddingValues} ${PaddingValues}`
  ...
}

Thanks in advance for your thoughts!

Link to Reproduction

https://play.panda-css.com/XVgcP2KLdx

Steps to reproduce

1. Open https://play.panda-css.com/XVgcP2KLdx
2. Observe the TypeScript error on the padding property

JS Framework

React, TS

Panda CSS Version

0.40.1

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[astahmer]

hey !

can be split into the constituent longhand properties,

indeed, that's the recommended way of working with strictTokens, there's an ESLint rule for that

Would this be straightforward to support?

most likely not, as the CSS syntax is quite complex/flexible

another issue with this is the tsc perf hit this might incur due to the number of permutation it needs to compute for each property (when typed with template literals as you suggested, CSS-like)