Support Style Props for Svelte

[devunt]

Description

Currently Panda CSS only supports style props for jsx-based components.
This request proposes style props support for svelte components.

Problem Statement/Justification

Component.svelte

<script lang="ts">
  import { css } from '$styled-system/css';
  import type { SystemStyleObject } from '$styled-system/types';

  let cssProp: SystemStyleObject | undefined = undefined;
  export { cssProp as css };
</script>

<div class={css(cssProp)} />

+page.svelte

<script lang="ts">
  import Component from './Component.svelte';
</script>

<Component css={{ color: 'red' }} />

This code renders following markup, but no corresponding styles are generated.

<div class="text_red" />

Panda generator does not see this as a token references, in contrast to what it does to jsx components.

Proposed Solution or API

Please support svelte component props like mentioned above.

Alternatives

Use css.raw as it forcefully make Panda generator to recognize it as a tokens.
But it is somewhat tedious to use css.raw everywhere.

+page.svelte

<script lang="ts">
  import { css } from '$styled-system/css';
  import Component from './Component.svelte';
</script>

<Component css={css.raw({ color: 'red' })} />

Additional Information

No response

[astahmer]

ts-morph only supports ts(x) syntax
Panda supports svelte (and vue) by converting svelte DSL to a ts-friendly syntax so that ts-morph can parse it and generate valid AST nodes

from a quick look at the existing test, it seems like the {#each or {#if etc kind of blocks are messing with the AST
so, currently <Component css={{ color: 'red.100' }} /> isn't parsed correctly but wrapping that inside a <div> seems to fix the issue <div><Component css={{ color: 'red.100' }} /></div>
minimal repro here, without a wrapping ts-morph only sees JsxText
but with a <div> the AST looks good again (it's properly nested in JsxAttribute > Identifier etc)

feel free to make a PR to fix this for better support of style props in this svelteToTsx function

---

an alternative is to use hooks (parser:before and parser:after) to make your own parser and extract svelte style props however you want by using svelte tooling