Emit multiple syntaxes

[mmkal]

Description

We are looking into migrating an existing project from styled-components to panda. To make migration easy, we want to use the template-literal syntax. But we also want to write new components using object-literal syntax, and move over gradually without having to make big modifications to hundreds of files. It would be nice to be able to generate both at the same time, maybe with different entrypoints, or just different export names.

Problem Statement/Justification

To be able to use both syntaxes, it looks like we'd have to define two different config files, and run panda codegen twice, with different output folders + syntaxes.

Proposed Solution or API

Probably the simplest way would be to allow a dictionary of syntax -> export name, e.g.

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{js,jsx,ts,tsx}'],
  exclude: [],
  theme: { extend: {} },
  outdir: 'src/panda',
  syntax: {
    'object-literal': 'css',
    'template-literal': 'styled'
  },
})

Which could then produce two exports, usable like:

import { css, styled } from '../../styled-system/css'

const blue = css({ color: 'blue' })

const GreenDiv = styled.div`
  color: green;
`

export default () => <>
  <div className={blue}>blue</div>
  <GreenDiv>green</GreenDiv>
</>

Alternatives

Run panda codegen twice with two different configs? Or maybe there's a way of doing this in one go that I'm missing?

Additional Information

No response

[segunadebayo]

Discussed with @astahmer, and we've agreed to add support for this.