TS for sva is not working

[elite174]

Description

import { sva } from "../../../styled-system/css";

export const chipRecipe = sva({
  slots: ["root", "icon"],
  base: {
    root: {
      display: "flex",
      alignItems: "center",
      gap: "10px",
      width: "fit-content",
      height: "24px",
      paddingInline: "8px",
      borderRadius: "8px",
      cursor: "default",
    },
    icon: {
      width: "24px",
      height: "24px",
    },
  },
  variants: {
    view: {
      red: {
        root: {
          backgroundColor: "red",
        },
      },
    },
  },
});

panda config:

import { defineConfig } from "@pandacss/dev";

import { chipRecipe } from "./src/design-system/components/chip";

export default defineConfig({
  // Whether to use css reset
  preflight: true,

  // Where to look for your css declarations
  include: ["./src/**/*.{ts,tsx}"],

  // Files to exclude
  exclude: [],

  // Useful for theme customization
  theme: {
    extend: {
      slotRecipes: {
        chip: chipRecipe,
      },
    },
  },

  // The output directory for your css system
  outdir: "styled-system",
  outExtension: "js",
});

I get:

Link to Reproduction

-

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

JS Framework

No response

Panda CSS Version

0.11

Browser

No response

Operating System

• [ ] macOS
• [X] Windows
• [ ] Linux

Additional Information

No response

[elite174]

There are also infinite reloads for solid-js project (SPA)

[elite174]

[segunadebayo]

Thanks for raising this issue.

This shows we need to improve the docs somewhere.

• sva is a function you use directly in your app. It generates atomic slot recipes.
• defineSlotRecipe is the function to author slot recipes that go in the config.

In this case, replace sva with defineSlotRecipe and provide a className property.

t should work as expected.