Type error when using !important when strictTokens: true

[bengry]

Description

When strictTokens is true, TypeScript errors on this (both lines) playground link:

 <div
      className={css({
        width: '20!',
        bg: 'red.100 !important',
      })}
    />

The generated CSS is correct though:

@layer utilities {
  .w_20\! {
    width: var(--sizes-20) !important
    }

  .bg_red\.100\! {
    background: var(--colors-red-100) !important
    }
}

So this is probably just a type issue.

Link to Reproduction

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

Steps to reproduce

1. Go to https://play.panda-css.com/lFXzleFNXf
2. See errors

JS Framework

No response

Panda CSS Version

0.6.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[bengry]

I think that the change that needs to be done is here. Specifically, add these to type Conditional<V>:

    export type Conditional<V> =
      | V
+     | \`\${V\}!\`
+     | \`\${V\} !important\`
      | Array<V | null>
      | {
          [K in keyof Conditions]?: Conditional<V>
        }

But I'm not sure that's the best place to do this. Please advise. If that's the correct location - I don't mind making a PR.

[ksjogo]

We are also running into this.
Would you accept a PR for this?

[astahmer]

since then the [xxx] arbitrary values escape-hatch has been introduced, you can do it like this
https://play.panda-css.com/lFXzleFNXf/EsCOwQYmlM