cva not exported when syntax: "template-literal"

[altano]

Description

If I add syntax: "template-literal" to panda.config.ts and run panda codegen --clean, ./styled-system/css/cva.d.ts and .mjs are deleted.

I understand that cva uses object syntax, but it shouldn't just disappear when you switch to template-literal syntax for css right? If it is intended, how should you use recipes?

Link to Reproduction

https://stackblitz.com/edit/stackblitz-starters-h6tcy6?file=package.json

Steps to reproduce

Look in ./styled-system/css/

JS Framework

TS

Panda CSS Version

0.5.1

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[frankandrobot]

• Second this
• Use case is migrating a styled-components app
• So i need to enable template-literal
• However, need to also handle styled-components that accept dynamic props like the following.
• And for this recipes seem to be the way to go
• However, if I disable template-literal, it makes the migration more error prone

const NavButton = styled.button<{ $pos: "prev" | "next" }>`
  top: calc(50% - 1.5rem);
  border-radius: 5rem;
  width: 5rem;
  height: 5rem;
  font-size: 3rem;
  ${(p) =>
    p.$pos === "prev"
      ? css`
          left: 10px;
        `
      : css`
          right: 10px;
        `}
`

[frankandrobot]

oh wait, call me dummas :-) With template-literal turned on, the styled-component example I had given becomes the following. cva is used implicitly.

const NavButton = styled("button", {
  base: {
    top: "calc(50% - 1.5rem)",
    borderRadius: "5rem",
    width: "5rem",
    height: "5rem",
    fontSize: "3rem",
   // ...
  },
  variants: {
    type: {
      prev: {
        left: "10px",
      },
      next: {
        right: "10px",
      },
    },
  },
});

[frankandrobot]

Update: looks like i may have spoke too soon. While the above code compiles when template-literals are turned on, the code does not run. Getting these errors. Literally, any recipe doesn't work when template-literal is turned on.

Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, render}). If you meant to render a collection of children, use an array instead.