feat(parser): vue/svelte support (#758)

* fix(cli): default ship outfile

* feat(parser): vue support

* feat(parser): better svelte support

* chore: add changeset

* chore: include components dir in nuxt sandbox

* chore: update snapshots

* fix(playground): use browser version of vue compiler
chore(parser): add try/catch on vue/svelte to tsx functions

Author: astahmer

.changeset/cold-apricots-clap.md

@@ -0,0 +1,7 @@
+---
+'@pandacss/parser': patch
+'@pandacss/dev': patch
+---
+
+- Experimental support for .vue files and better .svelte support
+- Fix `panda ship` default outfile path

packages/cli/src/cli-main.ts

@@ -270,7 +270,7 @@ export async function main() {
           config: maybeGlob ? { include: [maybeGlob] } : undefined,
         })
 
-        const outfile = outfileFlag ?? join(...ctx.paths.root, 'debug')
+        const outfile = outfileFlag ?? join(...ctx.paths.root, `${ctx.config.outdir}/panda.json`)
 
         if (minify) {
           ctx.config.minify = true

packages/parser/__tests__/fixture.ts

@@ -71,7 +71,7 @@ export function getFixtureProject(code: string, options?: <Conf extends UserConf
     hooks,
   })
 
-  return { parse: () => project.parseSourceFile(staticFilePath), generator }
+  return { parse: (filePath = staticFilePath) => project.parseSourceFile(filePath), generator, project }
 }
 
 export function importParser(code: string, option: { name: string; module: string }) {

packages/parser/__tests__/svelte.test.ts

@@ -0,0 +1,91 @@
+import { describe, expect, test } from 'vitest'
+import { svelteToTsx } from '../src/svelte-to-tsx'
+import { getFixtureProject } from './fixture'
+
+const run = (code: string) => {
+  const { parse, generator } = getFixtureProject(code)
+  const result = parse()!
+  return {
+    json: result?.toArray().map(({ box, ...item }) => item),
+    css: generator.getParserCss(result)!,
+  }
+}
+
+describe('extract svelte templates', () => {
+  test('svelte basic template', () => {
+    const code = `
+    <script lang="ts">
+        import { css } from "styled-system/css";
+
+        let style = css({ color: 'green.400' })
+        let style2 = css({ color: 'purple.400' })
+    </script>
+
+    <h1 class={style}>using class binding</h1>
+    <p class={css({ color: 'red.500' })}>using inline styles</p>
+    <span class="style3">using actual class</span>
+    `
+
+    const transformed = svelteToTsx(code)
+    expect(transformed).toMatchInlineSnapshot(`
+      "import { css } from \\"styled-system/css\\";
+
+              let style = css({ color: 'green.400' })
+              let style2 = css({ color: 'purple.400' })
+          
+
+      const render = <div><h1 class={style}>using class binding</h1>
+          <p class={css({ color: 'red.500' })}>using inline styles</p>
+          <span class=\\"style3\\">using actual class</span></div>"
+    `)
+
+    const result = run(transformed)
+    expect(result.json).toMatchInlineSnapshot(`
+      [
+        {
+          "data": [
+            {
+              "color": "green.400",
+            },
+          ],
+          "name": "css",
+          "type": "object",
+        },
+        {
+          "data": [
+            {
+              "color": "purple.400",
+            },
+          ],
+          "name": "css",
+          "type": "object",
+        },
+        {
+          "data": [
+            {
+              "color": "red.500",
+            },
+          ],
+          "name": "css",
+          "type": "object",
+        },
+      ]
+    `)
+
+    expect(result.css).toMatchInlineSnapshot(`
+      "@layer utilities {
+        .text_green\\\\.400 {
+          color: var(--colors-green-400)
+          }
+
+        .text_purple\\\\.400 {
+          color: var(--colors-purple-400)
+          }
+
+        .text_red\\\\.500 {
+          color: var(--colors-red-500)
+          }
+      }"
+    `)
+  })
+})