Cannot import token function from recipe

[peterbartels]

I am trying to use the token function in a config recipe, however I get the following error when the codegen didn't run yet.

Could not resolve "@/styled-system/tokens"

I tried to change the out extension to js but it still doesn't work when styled-system isn't generated.

I use the following code:

import { defineRecipe } from '@pandacss/dev'
import { token } from '@/styled-system/tokens'

export const unOrderedListRecipe = defineRecipe({
  className: 'ul-test',
  base: {
    backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24' width='100%25' height='100%25'%3E%3Ccircle cx='0' cy='0' r='4' fill='${encodeURIComponent(token('colors.blue.500'))}' /%3E%3C/svg%3E")`,
  },
})

[segunadebayo]

This is a circular import since the styled-system directory is auto-generated. Resolving the recipe depends on the token fn being generated, hence the issue.

I would recommend directly importing the token value from the source where it's defined.