Generated css, fonts tokens values is appended (should be replaced)

[quangphuchuynh95]

Prepare to reproduce:

• Config file content:

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

export const config = defineConfig({
  theme: {
    extend: {
      tokens: {
        fonts: {
          mono: {
            value: ["my-mono1", "my-mono-2"],
          },
        },
      }
    }
  },
});

• Use the token fontFamily: 'mono' anywhere
  Example react code:

import { css } from 'styled-system/css';

export const App = () => {
  return (
    <div
      className={css({ fontFamily: 'mono' })}
    >
      Hello from Panda
    </div>
  );
};

• Run command panda to generate the style.css file
• Find the variable --fonts-mono in style.css

Expected result:

The css variable should be like this --fonts-mono: my-mono1, my-mono-2

Got wrong result:

The css variable was --fonts-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, my-mono1, my-mono-2
=> If this is the expected result, it should be documented somewhere

Quick sample on playground:

https://play.panda-css.com/uvAlpYzKCk

JS Framework

React

Panda CSS Version

0.51.1

Browser

Chrome

Operating System

• macOS
• Windows
• Linux

[quangphuchuynh95]

I've just realized that the problem happen only when I use array syntax for value

• value: ["my-mono1", "my-mono-2"] => doesn't works well
• value: "my-mono1, my-mono-2" => works well

=> So the temporary solution for anyone stuck with this is using string instead of array syntax