How can I declare local scoped variables?

[sudomf]

Hey all. How can I declare local scoped variables like:

css({
  --myCustomVar: '#000',
  px: '2px',
  color: 'var(--myCustomVar)'
})

[astahmer]

Hey, what you wrote almost works ! you just need to wrap the CSS var in quotes like "--myCustomVar" so that it remains valid JS syntax

you can see it in action here

[caotrem]

Hey there, when using typescript I get the following error:

Argument of type '{ '--myCustomVar': string; }' is not assignable to parameter of type 'false | SystemStyleObject | null | undefined'. Object literal may only specify known properties, and ''--myCustomVar'' does not exist in type 'SystemStyleObject'.ts(2345) (property) '--myCustomVar': string

And when setting hash=true in the config it still doesn't hash the variable name:

[astahmer]

can you make a reproduction of your issue ? something like this https://play.panda-css.com/QKKxbWFttN
hash: true will hash CSS variables related to tokens/semanticTokens and the generated class names, not your custom CSS vars