WithEscapeHatch allows invalid token values when "/" is used

[cgatian]

Description

I made a custom utility for width and set the values equal to 1 and 2. The types for this utility accept 1/2 due to the WithColorOpacityModifier allowing strings that start with a value and contain a forward slash, e.g. ${T}/.

Link to Reproduction

https://play.panda-css.com/NgeBz8-8QC

Steps to reproduce

1. Create a basic utility for sizes

utilities: {
    extend: {
      width: {
        shorthand: 'w',
        className: 'w',
        group: 'Width',
        values: ['1', '2'],
      },
    }

2. Notice values 1 and 2 are the only allowed values
3. Use the utility type

<div
        className={css({
          width: '2/222' //  ❌ INVALID TOKEN!
        })}
      >
        <span>🐼</span>
        <span>Hello from Panda</span>
      </div>

JS Framework

No response

Panda CSS Version

0.53.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

WithEscapeHatch unions WithColorOpacityModifier which allows strings that contain {token}/{string}.

type WithColorOpacityModifier<T> = [T] extends [string] ? `${T}/${string}` & { __colorOpacityModifier?: true } : never

export type WithEscapeHatch<T> = T | `[${string}]` | WithColorOpacityModifier<T> | WithImportant<T>

Perhaps there would be two WithEscapeHatch types, one specifically for group:color and one for all other properties? Something like:

export type WithEscapeHatchColor<T> = WithEscapeHatch<T> | WithColorOpacityModifier<T>

export type WithEscapeHatch<T> = T | `[${string}]` | WithImportant<T>

[segunadebayo]

Moving this to a discussion for now. This is a very tricky to solve since it's on the hot path of the generated TS code

Tagging @astahmer on this one so we can discuss this further.