Shared getVariants() functions

[RubenGlez]

Is there any possibility to have this kind of functions for variants generation like this example in a different file from where it's used?

This could be great in order to share them between different recipes.

Example:

// utils/variants.ts

const getVariants = () => {
  const spacingTokens = Object.entries({
    red: 'token(colors.red.500)',
    green: 'token(colors.green.500)',
    blue: 'token(colors.blue.500)',
  })

  const variants = spacingTokens.map(([variant, token]) => [
    variant,
    { bgColor: token }
  ])
  return Object.fromEntries(variants)
}

// components/Button.tsx

const buttonStyle = cva({
  variants: {
    color: getVariants()
  }
})

Do you recommend another way to do that?

Thanks in advance :)

[astahmer]

as you have noticed, the static extractor doesn't traverse files and this is not a feature planned for performance reasons

most of the time, an alternative to the example you quoted could be to use the .raw functions in a file-a.ts export it and import it in a file-b.ts

---

for variants, however there is currently no recommended way of doing this
I was curious of this use-case so I just tried something and it turns out to be working

please keep in mind it is currently NOT documented and NOT officially supported, it works using private APIs that could change ANYTIME

// utils/variants.ts

const getVariants = () => {
  const spacingTokens = Object.entries({
    red: 'token(colors.red.500)',
    green: 'token(colors.green.500)',
    blue: 'token(colors.blue.500)',
  })

  const variants = spacingTokens.map(([variant, token]) => [
    variant,
    { bgColor: token }
  ])
  return Object.fromEntries(variants)
}

export const buttonVariants = cva({ variants: getVariants() }).config

// components/Button.tsx

import { buttonVariants } from "../utils/variants"
const buttonStyle = cva({
  variants: {
    color: buttonVariants.variants.variant
  }
})

[RubenGlez]

Thanks for the reply!
I will try the raw() function or maybe explore a different way for this use case

[segunadebayo]

For this kind of auto computed variants scenario, an alternative would be switching to a config recipe instead.

Please refer to docs here
https://panda-css.com/docs/concepts/recipes#config-recipe

[RubenGlez]

Thanks! I will try the suggested alternatives

[RubenGlez]

I finally came up with this approach. I'm not sure if it is the most canonical or standard one, but it works for my case. I share it in case it can help others with the same need.

I have defined a recipe: (Note the staticCss parameter)

import { defineRecipe } from '@pandacss/dev'

export const byEntityTypeRecipe = defineRecipe({
  staticCss: ['*'],
  className: 'byEntityType',
  description:
    'Applies styles (color or bgColor) depending on entity type',
  variants: {
    colorByType: {
      course: {
        color: 'pomegranate.500'
      },
      step_by_step: {
        color: 'violet.500'
      },
      express: {
        color: 'pear.500'
      },
      instagram: {
        color: 'scooter.500'
      },
      journey: {
        color: 'scooter.500'
      },
      wizard: {
        color: 'ceruleanBlue.500'
      },
      mono: {
        color: 'amber.500'
      },
    },
    bgByType: {
      course: {
        bgColor: 'pomegranate.500'
      },
      step_by_step: {
        bgColor: 'violet.500'
      },
      express: {
        bgColor: 'pear.500'
      },
      instagram: {
        bgColor: 'scooter.500'
      },
      journey: {
        bgColor: 'scooter.500'
      },
      wizard: {
        bgColor: 'ceruleanBlue.500'
      },
      mono: {
        bgColor: 'amber.500'
      },
    }
  }
})

Then I use it like that:

export default function SomeComponent({
  type,
  size,
  className
}: PathBadgeProps) {
  return (
    <div
      className={cx(
        byEntityTypeRecipe({ bgByType: type }),
        otherCva({ size }),
        className
      )}>
      <p className={byEntityTypeRecipe({ colorByType: type })}>hello!</p>
    </div>
  )
}

It gives me the possibility to use it on any component instead of creating the same variants for each component that uses this color scheme.

What do you guys think, any suggestions?