CSS variables are not valid values for StrictableProps when strictPropertyValues is enabled

[etlovett]

Description

When strictPropertyValues: true is set in the Panda config, using a CSS variable for a StrictableProps is marked as a TS error. This is a relatively reasonable position for Panda to take, but it does mean that the following pattern triggers a TS error, despite it being a valid pattern according to the example at https://panda-css.com/docs/guides/dynamic-styling#using-token:

      <div
        className={css({
          display: 'var(--display)',
          boxSizing: 'var(--box-sizing)',
        })}
        style={{
          '--display': 'flex',
          '--box-sizing': 'content-box',
        }}
      >

Should strictPropertyValues allow the TS template literal type var(${string}) as a valid value for all StrictableProps properties?

Thanks!

Link to Reproduction

https://play.panda-css.com/gP-PgP1fJE

Steps to reproduce

1. Open the playground.
2. Observe the typechecking error.

JS Framework

No response

Panda CSS Version

0.34.3

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[astahmer]

I think not, strictPropertyValues job is (at least currently) only about removing the string & {} (TS type that allows any string while not removing the literals in a union) that comes from csstype on properties that have a syntax composed of keywords

as alternatives you can:

• use the escape-hatch syntax like so

      <div
        className={css({
          display: '[var(--display)]',
          boxSizing: '[var(--box-sizing)]',
        })}
        style={{
          '--display': 'flex',
          '--box-sizing': 'content-box',
        }}
      >

• this PR will make common CSS variable type-safe feat: cssVars for generic vars and @property syntax #2238

[etlovett]

Ok. I think there's a reasonable argument to be made for both approaches here, so fair enough.

One thing that I think would help clarify this for others would be to add an example of the escape-hatch syntax to the code block at https://panda-css.com/docs/concepts/writing-styles#strictpropertyvalues. The strictTokens section mentions this syntax, but the strictPropertyValues section does not.

[etlovett]

Looks like you've decided to support this after all. 😀 #2393 Sounds good!