cva variants using js object not working. Is it bug or expected? any workaround or tips?

[cholazzzb]

Hi thanks for this awesome library! I love it so much. I have using it a lot. Recently, I have a requirement to using a massive amount of variants, so the variants is generated by codegen, and imported in the CVA, however somehow it is not working, below is the simplified examples.

This code is not working

// file1.ts
export const foo = { raw: { backgroundColor: '#111111' } };

// file2.ts
import foo from "file1"
const styles = cva({
   base: {...},
   variants: {
       foo,
   }
})

const Comp = styled("button", styles)

export function Page(){
   return <Comp foo="raw" />
}

the styles for foo raw is not working. Is this expected? any workaround to achieve this?

[cgatian]

You cant declare styles like you have in file1 they need to be wrapped in a css function so panda can statically extract the styles.

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

You most likely should be using the cva function for your component and utilize the recipe directly.