Mixed conditions in semanticTokens is not generated into CSS(@layer tokens)

[azu]

Description

I have following panda config.

import { defineConfig } from "@pandacss/dev"

export default defineConfig({
  preflight: true,
  include: ["./src/components/**/*.{ts,tsx,js,jsx}", "./src/app/**/*.{ts,tsx,js,jsx}"],
  exclude: [],
  outdir: "styled-system",
  conditions: {
    dark: ["@container style(--theme-color-mode: dark)", "&"],
    pink: ["[data-theme=pink] &"],
  },
  theme: {
    tokens: {
      colors: {
        neutral: {
          100: {
            value: "#F5F5F5",
          },
          200: {
            value: "#E5E5E5",
          },
          300: {
            value: "#CCCCCC",
          },
          400: {
            value: "#AAAAAA",
          },
          500: {
            value: "#888888",
          },
          600: {
            value: "#666666",
          },
          700: {
            value: "#555555",
          },
          800: {
            value: "#3b3b3b",
          },
          900: {
            value: "#222222",
          },
        },
        red: {
          100: {
            value: "#FFE2E0",
          },
          300: {
            value: "#FF6157",
          },
          500: {
            value: "#E80E00",
          },
          700: {
            value: "#CD0D00",
          },
        },
      }
    },
    semanticTokens: {
      colors: {
        "text-default": {
          value: {
            base: "{colors.neutral.900}",
            _dark: "{colors.neutral.100}",
            _pink: "{colors.red.700}",
          },
        },
      },
    }
  },
})

Actual

panda gengerate following css variables.

@layer tokens {
    :where(:root, :host) {
        --colors-neutral-100: #F5F5F5;
        --colors-neutral-200: #E5E5E5;
        --colors-neutral-300: #CCCCCC;
        --colors-neutral-400: #AAAAAA;
        --colors-neutral-500: #888888;
        --colors-neutral-600: #666666;
        --colors-neutral-700: #555555;
        --colors-neutral-800: #3b3b3b;
        --colors-neutral-900: #222222;
        --colors-red-100: #FFE2E0;
        --colors-red-300: #FF6157;
        --colors-red-500: #E80E00;
        --colors-red-700: #CD0D00;
        --breakpoints-sm: 640px;
        --breakpoints-md: 768px;
        --breakpoints-lg: 1024px;
        --breakpoints-xl: 1280px;
        --breakpoints-2xl: 1536px;
        --sizes-breakpoint-sm: 640px;
        --sizes-breakpoint-md: 768px;
        --sizes-breakpoint-lg: 1024px;
        --sizes-breakpoint-xl: 1280px;
        --sizes-breakpoint-2xl: 1536px;
        --colors-text-default: var(--colors-neutral-900);
    }

    [data-theme=pink] {
        --colors-text-default: var(--colors-red-700)
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes ping {
        75%, 100% {
            transform: scale(2);
            opacity: 0;
        }
    }

    @keyframes pulse {
        50% {
            opacity: 0.5;
        }
    }

    @keyframes bounce {
        0%, 100% {
            transform: translateY(-25%);
            animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
        }

        50% {
            transform: none;
            animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
        }
    }
}

However, _dark condition is not generated.

Expected

I expect to generate following css variables.

@layer tokens {
    :where(:root, :host) {
        --colors-neutral-100: #F5F5F5;
        --colors-neutral-200: #E5E5E5;
        --colors-neutral-300: #CCCCCC;
        --colors-neutral-400: #AAAAAA;
        --colors-neutral-500: #888888;
        --colors-neutral-600: #666666;
        --colors-neutral-700: #555555;
        --colors-neutral-800: #3b3b3b;
        --colors-neutral-900: #222222;
        --colors-red-100: #FFE2E0;
        --colors-red-300: #FF6157;
        --colors-red-500: #E80E00;
        --colors-red-700: #CD0D00;
        --breakpoints-sm: 640px;
        --breakpoints-md: 768px;
        --breakpoints-lg: 1024px;
        --breakpoints-xl: 1280px;
        --breakpoints-2xl: 1536px;
        --sizes-breakpoint-sm: 640px;
        --sizes-breakpoint-md: 768px;
        --sizes-breakpoint-lg: 1024px;
        --sizes-breakpoint-xl: 1280px;
        --sizes-breakpoint-2xl: 1536px;
        --colors-text-default: var(--colors-neutral-900);
    }
    /* HERE is missing */
    @container style(--theme-color-mode: dark) {
        --colors-text-default: var(--colors-neutral-100);
    }

    [data-theme=pink] {
        --colors-text-default: var(--colors-red-700)
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes ping {
        75%, 100% {
            transform: scale(2);
            opacity: 0;
        }
    }

    @keyframes pulse {
        50% {
            opacity: 0.5;
        }
    }

    @keyframes bounce {
        0%, 100% {
            transform: translateY(-25%);
            animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
        }

        50% {
            transform: none;
            animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
        }
    }
}

Link to Reproduction

https://github.com/azu/pandacss-nested-condition-bug

Steps to reproduce

git clone https://github.com/azu/pandacss-nested-condition-bug
cd pandacss-nested-condition-bug
pnpm install
pnpm run dev

"panda config token condition"'s "Dark" is not reflected "{colors.neutral.100}" value.

However, "inline token condition"'s "Dark" is reflected _dark condition.

https://github.com/azu/pandacss-nested-condition-bug/blob/9c2220b35a1608ebdf70696095299eb499f7908d/src/app/page.tsx#L64-L71

JS Framework

React(TS)

Panda CSS Version

^0.53.0

Browser

Google Chrome

Operating System

• macOS
• Windows
• Linux

Additional Information

I would like to use @container style() for Conditions, but I ran into this problem.