Migrating Badge Recipe

The lesson focuses on migrating a previously created Badge recipe to a config recipe.

Create Badge Recipe File

Create a new file named badge.recipe.ts and move the existing Badge recipe into this file.

Update Imports

Replace cva import with defineRecipe from @pandacss/dev

import { defineRecipe } from '@pandacss/dev'

Fix TypeScript Error

Add a className to the recipe to resolve the TypeScript error.

className: 'badge'

Update Panda Config

Import the badge recipe into your panda.config file

import { badgeRecipe } from './badge.recipe'

Add a recipes property to the config and include the badge recipe:

recipes: {
  badge: badgeRecipe
}

Run Codegen and Restart Dev Server

• Run panda codegen and restart the development server

This creates a folder at styled-system/recipes.

Update Imports in Codebase

Import the badge recipe from styled-system/recipes

import { badge } from 'styled-system/recipes'

Replace existing badge recipe references with the new import.

Inspect DOM for Changes

Go ahead to compare the old and new recipes in the DOM for more readable classnames and grouped styles. import ts from 'typescript'