panda css className concatenation does not result into generating specified style in layer.css

[pycraft114]

Description

export default defineConfig({
  preflight: true,
  emitPackage: true,
  presets: ["@shadow-panda/preset"],
  include: [
    "./src/components/**/*.{ts,tsx,js,jsx}",
    "./src/app/**/*.{ts,tsx,js,jsx}",
  ],
  exclude: [],
  jsxFramework: "react",
  outdir: "@shadow-panda/styled-system",
  theme: {
    extend: {
      textStyles,
      breakpoints: {
        sm: "1339px",
        md: "1440px",
        lg: "1920px",
        xl: "2560px",
      },
      tokens: {
        colors: {
          magenta: {
            "100": { value: "#FFF0F2" },
            "200": { value: "#FFE2E7" },
            "300": { value: "#FF9FB2" },
            "400": { value: "#FF4370" },
            "500": { value: "#ED1150" },
            "600": { value: "#A80940" },
            "700": { value: "#50011C" },
          },
          green: {
            "100": { value: "#EBFEF4" },
            "200": { value: "#CDFEE4" },
            "300": { value: "#26E197" },
            "400": { value: "#01B574" },
            "500": { value: "#00A369" },
            "600": { value: "#00543C" },
            "700": { value: "#003023" },
          },
          blue: {
            "100": { value: "#EFF4FB" },
            "200": { value: "#DAE9FF" },
            "300": { value: "#9AC1FA" },
            "400": { value: "#2B75FC" },
            "500": { value: "#3A61F2" },
            "600": { value: "#213489" },
            "700": { value: "#182253" },
          },
          gray: {
            "100": { value: "#FFFFFF" },
            "200": { value: "#F7F7F7" },
            "300": { value: "#F1F1F1" },
            "400": { value: "#E6E6E6" },
            "500": { value: "#BFBFBF" },
            "600": { value: "#76767A" },
            "700": { value: "#3A3A3F" },
            "800": { value: "#131317" },
          },
        },
      },
    },
  },
});

Im using @shadow-panda for UI styling. Using the presets I created my own tokens and atomic recipe using cva

export const pandaBadge = cva({
  base: {
    borderRadius: "4px",
  },
  variants: {
    visual: {
      outline: {
        borderRadius: "16px",
      },
      increase: {
        bg: "magenta.100",
        color: "magenta.400",
      },
      decrease: {
        bg: "blue.100",
        color: "blue.500",
      },
      same: {
        bg: "mint.100",
        color: "mint.300",
      },
      na: {
        bg: "gray.200",
        color: "gray.500",
      },
    },
  },
});

<Badge className={pandaBadge({ visual: 'increase' })} ml={"8px"}>
            text
 </Badge>

I was able to find the tokens that i defined in a system-styled/tokens/index.mjs which means i successfully codegen my configuration.

but the style does not seem to apply.

*update
: I was able to use atomic recipe until I removed node_modules and panda codegen. After clearing node_modules and re-generating codegen suddenly atomic recipe does not work

Link to Reproduction

link
this is a working directory and it shows that the same recipe is working as expected

Steps to reproduce

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

JS Framework

nextjs

Panda CSS Version

^0.19.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[pycraft114]

*update
The layout.css that has been built seems to be not containing any class that is related to the pandaBadge recipe.

<Badge className={css({bgColor: 'magenta.100'})} ml={"8px"}>
text
</Badge>

on the other side, if i manually input bg color magenta.100
layout.css successfully has

 .bg_magenta\.100 {
    background-color: var(--colors-magenta-100)
    }

Comparing to this, the project above which is linked to the successful project. The layout.css that has been built has all the classes that is defined with cva recipe.

[pycraft114]

i found the solution -_ -..
the recipe file must be included in the path of panda.config.ts include property path

[pycraft114]

@astahmer

• Update as mentioned above, i was able to generate recipe stylings in layer.css
  But there is a remaining issue, which className concatenation styling is not working as expected.
  example below

//dropdownButton recipe

export const dropdownButton = cva({
  base: {
    px: "4px",
    py: "2px",
    borderWidth: "1px",
    boxShadow: { base: "none", _focus: "none" },
    outline: { base: "none", _focus: "none" },
    textStyle: "bodyM",
    "&[data-state=open]": {
      color: "blue.400",
      outline: "2px solid",
      outlineColor: "blue.400",
    },
  },
});

<SelectTrigger
        className={cx(dropdownButton(), css(//props from parent//))}
      >

adding style object (per say, {w: 'max-content'} )directly into css function result to successfully create a '.w_max-content' class and style in layer.css. But when its style is set passed via props leads to add the class in the DOM element but style does not apply because '.w_max-content' styling does not exist in layer.css file

[astahmer]

hey, seems like there's a lot going on and I'm failing to understand what the remaining issue is

can you make a minimal reproduction here and/or write a summary of what's left to fix ?