PandaCSS VSCode Extension does not work with .svelte files

[r4ai]

Hello, I have a problem with the .svelte file. It appears that the VSCode Extension for PandaCSS is not working with .svelte files, as shown in the following image. In addition, I have confirmed that it works fine with the .tsx extension, with color hints displayed.

Is there any way to use the VSCode extension with Svelte files as well?

• JS Framework: Svelte, SvelteKit
• Panda CSS Version: 0.14.0
• Panda CSS VSCode Extension Version: v0.3.16939377
• OS: Windows (WSL2)

[astahmer]

Yes
this is because for svelte (and vue) we don't have the same source between the actual file on disk (your code) and the file that we end up parsing, and we don't have source mapping between the 2

we need the actual (files on disk) position of each AST nodes to show additional informations in the extension

since we use ts-morph for the static analysis and it doesn't know about .svelte (or .vue !) specific syntax, and we don't want to maintain different parsers, we opted for a quick solution to transform svelte/vue specific syntaxes to something close to tsx, so that ts-morph can parse it properly (and then we feed it to our parser that finds style usage)

this is the transform, if you can somehow get a sourcemap from that then the issue would be solved

panda/packages/parser/src/svelte-to-tsx.ts

Line 9 in 6eda29c

export const svelteToTsx = (code: string) => {

[r4ai]

Thank you for your reply. I now have a better understanding of the cause of the problem.

When I have time, I would like to investigate how to get the sourcemap from it.