How can I use converted stitches css to panda? Token func doesn't work

[deli-ght]

I tried to create a converter which changes stitches css to panda.

const wrappedTokens = (styleLiteral: string) => {
  return styleLiteral.replace(/ \$([a-zA-Z0-9_-]+)/g, (matched, token) => {
    let convertedValue = matched;
    Object.entries(defaultTokens).forEach(([tokenType, tokenValues]) => {
      if (!tokenValues) return;

      Object.entries(tokenValues).forEach(([tokenName]) => {
        if (token === `${tokenName}`) {
          convertedValue = ` token(${tokenType}.$${tokenName}, red)`;
        }
      });
    });
    return convertedValue;
  });
};

const convertStyles = (styles: VesslCSS): SystemStyleObject => {
  const newStyles = new Map();

  Object.entries(styles).forEach(([key, value]) => {
    if (typeof value === "string") {
      newStyles.set(key, wrappedTokens(value));
    } else if (typeof value === "object") {
      newStyles.set(key, convertStyles(value));
    } else {
      newStyles.set(key, value);
    }
  });

  return Object.fromEntries(newStyles);
};

export const css = (styles: VesslCSS) => {
  return pandaCSS(...([convertStyles(styles)] as Parameters<typeof pandaCSS>));
};

export const styled = (component: ElementType, styles: VesslCSS) => {
  return pandaStyled(component, {
    base: convertStyles(styles),
  } as RecipeVariantRecord);
};

when I literally enter border : 1px solid token(colors.$red500), it works. but when I use converter it doesn't work.
so I tried this on playground but I found out the value not work. is there any reason that it doesn't work?

[segunadebayo]

I think this PR: #1848 would solve your needs.

We're going to review and merge pretty soon

[deli-ght]

Thank you for the reply!
Can it solve the problem when I use token function on css var? I'm not sure it could.