@pandacss/parser 0.3.2 → 0.5.0

package/dist/index.d.mts

@@ -0,0 +1,78 @@
+import * as ts_morph from 'ts-morph';
+import { ProjectOptions as ProjectOptions$1 } from 'ts-morph';
+import { ResultItem, RecipeConfig, PandaHookable } from '@pandacss/types';
+
+declare class ParserResult {
+    jsx: Set<ResultItem>;
+    css: Set<ResultItem>;
+    cva: Set<ResultItem>;
+    recipe: Map<string, Set<ResultItem>>;
+    pattern: Map<string, Set<ResultItem>>;
+    filePath: string | undefined;
+    set(name: 'cva' | 'css', result: ResultItem): void;
+    setCva(result: ResultItem): void;
+    setJsx(result: ResultItem): void;
+    setPattern(name: string, result: ResultItem): void;
+    setRecipe(name: string, result: ResultItem): void;
+    isEmpty(): boolean;
+    setFilePath(filePath: string): this;
+    toArray(): ResultItem[];
+    toJSON(): {
+        css: ResultItem[];
+        cva: ResultItem[];
+        recipe: {
+            [k: string]: ResultItem[];
+        };
+        pattern: {
+            [k: string]: ResultItem[];
+        };
+        jsx: ResultItem[];
+    };
+    merge(result: ParserResult): this;
+    static fromJSON(json: string): ParserResult;
+}
+declare const createParserResult: () => ParserResult;
+
+type ParserPatternNode = {
+    name: string;
+    type: 'pattern';
+    props?: string[];
+    baseName: string;
+};
+type ParserRecipeNode = {
+    name: string;
+    type: 'recipe';
+    props: string[];
+    baseName: string;
+    jsx: RecipeConfig['jsx'];
+};
+type ParserNodeOptions = ParserPatternNode | ParserRecipeNode;
+type ParserOptions = {
+    importMap: Record<'css' | 'recipe' | 'pattern' | 'jsx', string>;
+    jsx?: {
+        factory: string;
+        nodes: ParserNodeOptions[];
+        isStyleProp: (prop: string) => boolean;
+    };
+    getRecipeName: (tagName: string) => string;
+    getRecipeByName: (name: string) => RecipeConfig | undefined;
+};
+
+type ProjectOptions = Partial<ProjectOptions$1> & {
+    readFile: (filePath: string) => string;
+    getFiles: () => string[];
+    hooks: PandaHookable;
+    parserOptions: ParserOptions;
+};
+declare const createProject: ({ getFiles, readFile, parserOptions, hooks, ...projectOptions }: ProjectOptions) => {
+    getSourceFile: (filePath: string) => ts_morph.SourceFile | undefined;
+    removeSourceFile: (filePath: string) => void;
+    createSourceFile: (filePath: string) => ts_morph.SourceFile;
+    addSourceFile: (filePath: string, content: string) => ts_morph.SourceFile;
+    parseSourceFile: (filePath: string) => ParserResult | undefined;
+    reloadSourceFile: (filePath: string) => ts_morph.FileSystemRefreshResult | undefined;
+    reloadSourceFiles: () => void;
+};
+type Project = ReturnType<typeof createProject>;
+
+export { ParserResult, Project, ProjectOptions, createParserResult, createProject };

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -87,7 +97,7 @@ function getImportDeclarations(file, options) {
 }
 
 // src/parser-result.ts
-var ParserResult = class {
+var ParserResult = class _ParserResult {
   jsx = /* @__PURE__ */ new Set();
   css = /* @__PURE__ */ new Set();
   cva = /* @__PURE__ */ new Set();
@@ -152,7 +162,7 @@ var ParserResult = class {
   }
   static fromJSON(json) {
     const data = JSON.parse(json);
-    const result = new ParserResult();
+    const result = new _ParserResult();
     result.css = new Set(data.css);
     result.cva = new Set(data.cva);
     result.recipe = new Map(Object.entries(data.recipe));
@@ -165,6 +175,8 @@ var createParserResult = () => new ParserResult();
 
 // src/parser.ts
 var isNodeRecipe = (node) => node.type === "recipe";
+var cvaProps = ["compoundVariants", "defaultVariants", "variants", "base"];
+var isCva = (map) => cvaProps.some((prop) => map.has(prop));
 function createImportMatcher(mod, values) {
   const regex = values ? new RegExp(`^(${values.join("|")})$`) : /.*/;
   return {
@@ -178,10 +190,10 @@ function createImportMatcher(mod, values) {
 var combineResult = (unboxed) => {
   return [...unboxed.conditions, unboxed.raw, ...unboxed.spreadConditions];
 };
-var fallback = (box) => ({
+var fallback = (box2) => ({
   value: void 0,
-  getNode: () => box.getNode(),
-  getStack: () => box.getStack()
+  getNode: () => box2.getNode(),
+  getStack: () => box2.getStack()
 });
 var defaultEnv = { preset: "NONE" };
 function createParser(options) {
@@ -194,7 +206,7 @@ function createParser(options) {
   if (jsx) {
     importRegex.push(createImportMatcher(importMap.jsx, [jsx.factory, ...jsx.nodes.map((node) => node.name)]));
   }
-  return function parse(sourceFile) {
+  return function parse3(sourceFile) {
     if (!sourceFile)
       return;
     const filePath = sourceFile.getFilePath();
@@ -212,6 +224,7 @@ function createParser(options) {
     const isValidPattern = imports.createMatch(importMap.pattern);
     const isValidRecipe = imports.createMatch(importMap.recipe);
     const isValidStyleFn = (name) => name === jsx?.factory;
+    const isFactory = (name) => jsx && name.startsWith(jsx.factory);
     const jsxFactoryAlias = jsx ? imports.getAlias(jsx.factory) : "panda";
     const jsxPatternNodes = new RegExp(
       `^(${jsx?.nodes.map((node) => node.type === "pattern" && node.name).join("|")})$`
@@ -299,6 +312,9 @@ function createParser(options) {
           return true;
         }
       },
+      taggedTemplates: {
+        matchTaggedTemplate: (tag) => matchFn(tag.fnName)
+      },
       getEvaluateOptions: (node) => ({ node, environment: defaultEnv }),
       flags: { skipTraverseFiles: true }
     });
@@ -309,35 +325,86 @@ function createParser(options) {
       if (result.kind === "function") {
         (0, import_ts_pattern.match)(name).when(css.match, (name2) => {
           result.queryList.forEach((query) => {
-            collector.set(name2, {
-              name: name2,
-              box: query.box.value[0] ?? fallback(query.box),
-              data: combineResult((0, import_extractor.unbox)(query.box.value[0]))
-            });
+            if (query.kind === "call-expression") {
+              collector.set(name2, {
+                name: name2,
+                box: query.box.value[0] ?? fallback(query.box),
+                data: combineResult((0, import_extractor.unbox)(query.box.value[0]))
+              });
+            } else if (query.kind === "tagged-template") {
+              const obj = (0, import_shared2.astish)(query.box.value);
+              collector.set(name2, {
+                name: name2,
+                box: query.box ?? fallback(query.box),
+                data: [obj]
+              });
+            }
           });
         }).when(isValidPattern, (name2) => {
           result.queryList.forEach((query) => {
-            collector.setPattern(name2, {
-              name: name2,
-              box: query.box.value[0] ?? fallback(query.box),
-              data: combineResult((0, import_extractor.unbox)(query.box.value[0]))
-            });
+            if (query.kind === "call-expression") {
+              collector.setPattern(name2, {
+                name: name2,
+                box: query.box.value[0] ?? fallback(query.box),
+                data: combineResult((0, import_extractor.unbox)(query.box.value[0]))
+              });
+            }
           });
         }).when(isValidRecipe, (name2) => {
           result.queryList.forEach((query) => {
-            collector.setRecipe(name2, {
-              name: name2,
-              box: query.box.value[0] ?? fallback(query.box),
-              data: combineResult((0, import_extractor.unbox)(query.box.value[0]))
-            });
+            if (query.kind === "call-expression") {
+              collector.setRecipe(name2, {
+                name: name2,
+                box: query.box.value[0] ?? fallback(query.box),
+                data: combineResult((0, import_extractor.unbox)(query.box.value[0]))
+              });
+            }
           });
         }).when(isValidStyleFn, () => {
           result.queryList.forEach((query) => {
-            collector.setCva({
-              name,
-              box: query.box.value[1] ?? fallback(query.box),
-              data: combineResult((0, import_extractor.unbox)(query.box.value[1]))
-            });
+            if (query.kind === "call-expression" && query.box.value[1]) {
+              const map = query.box.value[1];
+              const result2 = {
+                name,
+                box: map ?? fallback(query.box),
+                data: combineResult((0, import_extractor.unbox)(map))
+              };
+              if (import_extractor.box.isMap(map) && isCva(map.value)) {
+                collector.setCva(result2);
+              } else {
+                collector.set("css", result2);
+              }
+            } else if (query.kind === "tagged-template") {
+              const obj = (0, import_shared2.astish)(query.box.value);
+              collector.set("css", {
+                name,
+                box: query.box ?? fallback(query.box),
+                data: [obj]
+              });
+            }
+          });
+        }).when(isFactory, (name2) => {
+          result.queryList.forEach((query) => {
+            if (query.kind === "call-expression") {
+              const map = query.box.value[0];
+              const result2 = {
+                name: name2,
+                box: map ?? fallback(query.box),
+                data: combineResult((0, import_extractor.unbox)(map))
+              };
+              if (import_extractor.box.isMap(map) && isCva(map.value)) {
+                collector.setCva(result2);
+              } else {
+                collector.set("css", result2);
+              }
+            } else if (query.kind === "tagged-template") {
+              const obj = (0, import_shared2.astish)(query.box.value);
+              collector.set("css", {
+                name: name2,
+                box: query.box ?? fallback(query.box),
+                data: [obj]
+              });
+            }
           });
         }).otherwise(() => {
         });
@@ -371,6 +438,88 @@ function createParser(options) {
 }
 var isUpperCase = (value) => value[0] === value[0]?.toUpperCase();
 
+// src/vue-to-tsx.ts
+var import_compiler_sfc = require("@vue/compiler-sfc");
+var import_magic_string = __toESM(require("magic-string"));
+var NodeTypes = {
+  ROOT: 0,
+  ELEMENT: 1,
+  TEXT: 2,
+  COMMENT: 3,
+  SIMPLE_EXPRESSION: 4,
+  INTERPOLATION: 5,
+  ATTRIBUTE: 6,
+  DIRECTIVE: 7,
+  COMPOUND_EXPRESSION: 8,
+  IF: 9,
+  IF_BRANCH: 10,
+  FOR: 11,
+  TEXT_CALL: 12,
+  VNODE_CALL: 13,
+  JS_CALL_EXPRESSION: 14,
+  JS_OBJECT_EXPRESSION: 15,
+  JS_PROPERTY: 16,
+  JS_ARRAY_EXPRESSION: 17,
+  JS_FUNCTION_EXPRESSION: 18,
+  JS_CONDITIONAL_EXPRESSION: 19,
+  JS_CACHE_EXPRESSION: 20,
+  JS_BLOCK_STATEMENT: 21,
+  JS_TEMPLATE_LITERAL: 22,
+  JS_IF_STATEMENT: 23,
+  JS_ASSIGNMENT_EXPRESSION: 24,
+  JS_SEQUENCE_EXPRESSION: 25,
+  JS_RETURN_STATEMENT: 26
+};
+var vueToTsx = (code) => {
+  try {
+    const parsed = (0, import_compiler_sfc.parse)(code);
+    const fileStr = new import_magic_string.default(code);
+    parsed.descriptor.template.ast.children.forEach((node) => {
+      if (node.type === NodeTypes.ELEMENT) {
+        node.props.forEach((prop) => {
+          if (prop.type === NodeTypes.DIRECTIVE && prop.exp?.type === NodeTypes.SIMPLE_EXPRESSION && prop.arg?.type === NodeTypes.SIMPLE_EXPRESSION) {
+            fileStr.update(prop.loc.start.offset, prop.loc.end.offset, `${prop.arg.content}={${prop.exp.content}}`);
+          }
+        });
+      }
+    });
+    const templateStart = code.indexOf("<template");
+    const templateEnd = code.indexOf("</template>") + "</template>".length;
+    const scriptContent = (parsed.descriptor.scriptSetup ?? parsed.descriptor.script)?.content + "\n";
+    const transformed = new import_magic_string.default(
+      `${scriptContent}
+const render = ${fileStr.snip(templateStart, templateEnd).toString()}`
+    );
+    return transformed.toString();
+  } catch (err) {
+    return "";
+  }
+};
+
+// src/svelte-to-tsx.ts
+var svelte = __toESM(require("svelte/compiler"));
+var import_magic_string2 = __toESM(require("magic-string"));
+var svelteToTsx = (code) => {
+  try {
+    const parsed = svelte.parse(code);
+    const fileStr = new import_magic_string2.default(code);
+    if (parsed.instance && parsed.instance.content) {
+      const content = parsed.instance.content;
+      fileStr.update(parsed.instance.start, parsed.instance.end, code.slice(content.start, content.end));
+    }
+    const moduleContext = parsed.module ? fileStr.snip(parsed.module.start, parsed.module.end) : "";
+    const scriptContent = parsed.instance ? fileStr.snip(parsed.instance.start, parsed.instance.end) : "";
+    const templateContent = parsed.html.children?.map((child) => fileStr.snip(child.start, child.end)).join("").trimStart() ?? "";
+    const transformed = new import_magic_string2.default(
+      `${moduleContext + "\n"}${scriptContent + "\n"}
+const render = <div>${templateContent}</div>`
+    );
+    return transformed.toString().trim();
+  } catch (err) {
+    return "";
+  }
+};
+
 // src/project.ts
 var createTsProject = (options) => new import_ts_morph2.Project({
   skipAddingFilesFromTsConfig: true,
@@ -416,6 +565,10 @@ var createProject = ({ getFiles, readFile, parserOptions, hooks, ...projectOptio
       if (!sourceFile)
         return;
       const content = sourceFile.getText();
+      const transformed = transformFile(filePath, content);
+      if (content !== transformed) {
+        sourceFile.replaceWithText(transformed);
+      }
       hooks.callHook("parser:before", filePath, content);
       const result = parser(sourceFile)?.setFilePath(filePath);
       hooks.callHook("parser:after", filePath, result);
@@ -440,6 +593,15 @@ var createProject = ({ getFiles, readFile, parserOptions, hooks, ...projectOptio
   })),
   import_lil_fp.Obj.omit(["project", "parser"])
 );
+var transformFile = (filePath, content) => {
+  if (filePath.endsWith(".vue")) {
+    return vueToTsx(content);
+  }
+  if (filePath.endsWith(".svelte")) {
+    return svelteToTsx(content);
+  }
+  return content;
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ParserResult,

package/dist/index.mjs

@@ -3,9 +3,9 @@ import { Obj, pipe, tap } from "lil-fp";
 import { Project as TsProject, ScriptKind } from "ts-morph";
 
 // src/parser.ts
-import { extract, unbox } from "@pandacss/extractor";
+import { extract, unbox, box } from "@pandacss/extractor";
 import { logger } from "@pandacss/logger";
-import { memo as memo2 } from "@pandacss/shared";
+import { astish, memo as memo2 } from "@pandacss/shared";
 import { Node } from "ts-morph";
 import { match } from "ts-pattern";
 
@@ -59,7 +59,7 @@ function getImportDeclarations(file, options) {
 }
 
 // src/parser-result.ts
-var ParserResult = class {
+var ParserResult = class _ParserResult {
   jsx = /* @__PURE__ */ new Set();
   css = /* @__PURE__ */ new Set();
   cva = /* @__PURE__ */ new Set();
@@ -124,7 +124,7 @@ var ParserResult = class {
   }
   static fromJSON(json) {
     const data = JSON.parse(json);
-    const result = new ParserResult();
+    const result = new _ParserResult();
     result.css = new Set(data.css);
     result.cva = new Set(data.cva);
     result.recipe = new Map(Object.entries(data.recipe));
@@ -137,6 +137,8 @@ var createParserResult = () => new ParserResult();
 
 // src/parser.ts
 var isNodeRecipe = (node) => node.type === "recipe";
+var cvaProps = ["compoundVariants", "defaultVariants", "variants", "base"];
+var isCva = (map) => cvaProps.some((prop) => map.has(prop));
 function createImportMatcher(mod, values) {
   const regex = values ? new RegExp(`^(${values.join("|")})$`) : /.*/;
   return {
@@ -150,10 +152,10 @@ function createImportMatcher(mod, values) {
 var combineResult = (unboxed) => {
   return [...unboxed.conditions, unboxed.raw, ...unboxed.spreadConditions];
 };
-var fallback = (box) => ({
+var fallback = (box2) => ({
   value: void 0,
-  getNode: () => box.getNode(),
-  getStack: () => box.getStack()
+  getNode: () => box2.getNode(),
+  getStack: () => box2.getStack()
 });
 var defaultEnv = { preset: "NONE" };
 function createParser(options) {
@@ -166,7 +168,7 @@ function createParser(options) {
   if (jsx) {
     importRegex.push(createImportMatcher(importMap.jsx, [jsx.factory, ...jsx.nodes.map((node) => node.name)]));
   }
-  return function parse(sourceFile) {
+  return function parse3(sourceFile) {
     if (!sourceFile)
       return;
     const filePath = sourceFile.getFilePath();
@@ -184,6 +186,7 @@ function createParser(options) {
     const isValidPattern = imports.createMatch(importMap.pattern);
     const isValidRecipe = imports.createMatch(importMap.recipe);
     const isValidStyleFn = (name) => name === jsx?.factory;
+    const isFactory = (name) => jsx && name.startsWith(jsx.factory);
     const jsxFactoryAlias = jsx ? imports.getAlias(jsx.factory) : "panda";
     const jsxPatternNodes = new RegExp(
       `^(${jsx?.nodes.map((node) => node.type === "pattern" && node.name).join("|")})$`
@@ -271,6 +274,9 @@ function createParser(options) {
           return true;
         }
       },
+      taggedTemplates: {
+        matchTaggedTemplate: (tag) => matchFn(tag.fnName)
+      },
       getEvaluateOptions: (node) => ({ node, environment: defaultEnv }),
       flags: { skipTraverseFiles: true }
     });
@@ -281,35 +287,86 @@ function createParser(options) {
       if (result.kind === "function") {
         match(name).when(css.match, (name2) => {
           result.queryList.forEach((query) => {
-            collector.set(name2, {
-              name: name2,
-              box: query.box.value[0] ?? fallback(query.box),
-              data: combineResult(unbox(query.box.value[0]))
-            });
+            if (query.kind === "call-expression") {
+              collector.set(name2, {
+                name: name2,
+                box: query.box.value[0] ?? fallback(query.box),
+                data: combineResult(unbox(query.box.value[0]))
+              });
+            } else if (query.kind === "tagged-template") {
+              const obj = astish(query.box.value);
+              collector.set(name2, {
+                name: name2,
+                box: query.box ?? fallback(query.box),
+                data: [obj]
+              });
+            }
           });
         }).when(isValidPattern, (name2) => {
           result.queryList.forEach((query) => {
-            collector.setPattern(name2, {
-              name: name2,
-              box: query.box.value[0] ?? fallback(query.box),
-              data: combineResult(unbox(query.box.value[0]))
-            });
+            if (query.kind === "call-expression") {
+              collector.setPattern(name2, {
+                name: name2,
+                box: query.box.value[0] ?? fallback(query.box),
+                data: combineResult(unbox(query.box.value[0]))
+              });
+            }
           });
         }).when(isValidRecipe, (name2) => {
           result.queryList.forEach((query) => {
-            collector.setRecipe(name2, {
-              name: name2,
-              box: query.box.value[0] ?? fallback(query.box),
-              data: combineResult(unbox(query.box.value[0]))
-            });
+            if (query.kind === "call-expression") {
+              collector.setRecipe(name2, {
+                name: name2,
+                box: query.box.value[0] ?? fallback(query.box),
+                data: combineResult(unbox(query.box.value[0]))
+              });
+            }
           });
         }).when(isValidStyleFn, () => {
           result.queryList.forEach((query) => {
-            collector.setCva({
-              name,
-              box: query.box.value[1] ?? fallback(query.box),
-              data: combineResult(unbox(query.box.value[1]))
-            });
+            if (query.kind === "call-expression" && query.box.value[1]) {
+              const map = query.box.value[1];
+              const result2 = {
+                name,
+                box: map ?? fallback(query.box),
+                data: combineResult(unbox(map))
+              };
+              if (box.isMap(map) && isCva(map.value)) {
+                collector.setCva(result2);
+              } else {
+                collector.set("css", result2);
+              }
+            } else if (query.kind === "tagged-template") {
+              const obj = astish(query.box.value);
+              collector.set("css", {
+                name,
+                box: query.box ?? fallback(query.box),
+                data: [obj]
+              });
+            }
+          });
+        }).when(isFactory, (name2) => {
+          result.queryList.forEach((query) => {
+            if (query.kind === "call-expression") {
+              const map = query.box.value[0];
+              const result2 = {
+                name: name2,
+                box: map ?? fallback(query.box),
+                data: combineResult(unbox(map))
+              };
+              if (box.isMap(map) && isCva(map.value)) {
+                collector.setCva(result2);
+              } else {
+                collector.set("css", result2);
+              }
+            } else if (query.kind === "tagged-template") {
+              const obj = astish(query.box.value);
+              collector.set("css", {
+                name: name2,
+                box: query.box ?? fallback(query.box),
+                data: [obj]
+              });
+            }
           });
         }).otherwise(() => {
         });
@@ -343,6 +400,88 @@ function createParser(options) {
 }
 var isUpperCase = (value) => value[0] === value[0]?.toUpperCase();
 
+// src/vue-to-tsx.ts
+import { parse } from "@vue/compiler-sfc";
+import MagicString from "magic-string";
+var NodeTypes = {
+  ROOT: 0,
+  ELEMENT: 1,
+  TEXT: 2,
+  COMMENT: 3,
+  SIMPLE_EXPRESSION: 4,
+  INTERPOLATION: 5,
+  ATTRIBUTE: 6,
+  DIRECTIVE: 7,
+  COMPOUND_EXPRESSION: 8,
+  IF: 9,
+  IF_BRANCH: 10,
+  FOR: 11,
+  TEXT_CALL: 12,
+  VNODE_CALL: 13,
+  JS_CALL_EXPRESSION: 14,
+  JS_OBJECT_EXPRESSION: 15,
+  JS_PROPERTY: 16,
+  JS_ARRAY_EXPRESSION: 17,
+  JS_FUNCTION_EXPRESSION: 18,
+  JS_CONDITIONAL_EXPRESSION: 19,
+  JS_CACHE_EXPRESSION: 20,
+  JS_BLOCK_STATEMENT: 21,
+  JS_TEMPLATE_LITERAL: 22,
+  JS_IF_STATEMENT: 23,
+  JS_ASSIGNMENT_EXPRESSION: 24,
+  JS_SEQUENCE_EXPRESSION: 25,
+  JS_RETURN_STATEMENT: 26
+};
+var vueToTsx = (code) => {
+  try {
+    const parsed = parse(code);
+    const fileStr = new MagicString(code);
+    parsed.descriptor.template.ast.children.forEach((node) => {
+      if (node.type === NodeTypes.ELEMENT) {
+        node.props.forEach((prop) => {
+          if (prop.type === NodeTypes.DIRECTIVE && prop.exp?.type === NodeTypes.SIMPLE_EXPRESSION && prop.arg?.type === NodeTypes.SIMPLE_EXPRESSION) {
+            fileStr.update(prop.loc.start.offset, prop.loc.end.offset, `${prop.arg.content}={${prop.exp.content}}`);
+          }
+        });
+      }
+    });
+    const templateStart = code.indexOf("<template");
+    const templateEnd = code.indexOf("</template>") + "</template>".length;
+    const scriptContent = (parsed.descriptor.scriptSetup ?? parsed.descriptor.script)?.content + "\n";
+    const transformed = new MagicString(
+      `${scriptContent}
+const render = ${fileStr.snip(templateStart, templateEnd).toString()}`
+    );
+    return transformed.toString();
+  } catch (err) {
+    return "";
+  }
+};
+
+// src/svelte-to-tsx.ts
+import * as svelte from "svelte/compiler";
+import MagicString2 from "magic-string";
+var svelteToTsx = (code) => {
+  try {
+    const parsed = svelte.parse(code);
+    const fileStr = new MagicString2(code);
+    if (parsed.instance && parsed.instance.content) {
+      const content = parsed.instance.content;
+      fileStr.update(parsed.instance.start, parsed.instance.end, code.slice(content.start, content.end));
+    }
+    const moduleContext = parsed.module ? fileStr.snip(parsed.module.start, parsed.module.end) : "";
+    const scriptContent = parsed.instance ? fileStr.snip(parsed.instance.start, parsed.instance.end) : "";
+    const templateContent = parsed.html.children?.map((child) => fileStr.snip(child.start, child.end)).join("").trimStart() ?? "";
+    const transformed = new MagicString2(
+      `${moduleContext + "\n"}${scriptContent + "\n"}
+const render = <div>${templateContent}</div>`
+    );
+    return transformed.toString().trim();
+  } catch (err) {
+    return "";
+  }
+};
+
 // src/project.ts
 var createTsProject = (options) => new TsProject({
   skipAddingFilesFromTsConfig: true,
@@ -388,6 +527,10 @@ var createProject = ({ getFiles, readFile, parserOptions, hooks, ...projectOptio
       if (!sourceFile)
         return;
       const content = sourceFile.getText();
+      const transformed = transformFile(filePath, content);
+      if (content !== transformed) {
+        sourceFile.replaceWithText(transformed);
+      }
       hooks.callHook("parser:before", filePath, content);
       const result = parser(sourceFile)?.setFilePath(filePath);
       hooks.callHook("parser:after", filePath, result);
@@ -412,6 +555,15 @@ var createProject = ({ getFiles, readFile, parserOptions, hooks, ...projectOptio
   })),
   Obj.omit(["project", "parser"])
 );
+var transformFile = (filePath, content) => {
+  if (filePath.endsWith(".vue")) {
+    return vueToTsx(content);
+  }
+  if (filePath.endsWith(".svelte")) {
+    return svelteToTsx(content);
+  }
+  return content;
+};
 export {
   ParserResult,
   createParserResult,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/parser",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "description": "The static parser for panda css",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -11,19 +11,22 @@
     "access": "public"
   },
   "dependencies": {
+    "@vue/compiler-sfc": "^3.3.4",
     "lil-fp": "1.4.5",
+    "magic-string": "^0.30.0",
+    "svelte": "^4.0.0",
     "ts-morph": "18.0.0",
     "ts-pattern": "4.3.0",
-    "@pandacss/extractor": "0.3.2",
-    "@pandacss/is-valid-prop": "0.3.2",
-    "@pandacss/logger": "0.3.2",
-    "@pandacss/shared": "0.3.2",
-    "@pandacss/types": "0.3.2"
+    "@pandacss/extractor": "0.5.0",
+    "@pandacss/is-valid-prop": "0.5.0",
+    "@pandacss/logger": "0.5.0",
+    "@pandacss/shared": "0.5.0",
+    "@pandacss/types": "0.5.0"
   },
   "devDependencies": {
     "hookable": "5.5.3",
-    "@pandacss/fixture": "0.3.2",
-    "@pandacss/generator": "0.3.2"
+    "@pandacss/fixture": "0.5.0",
+    "@pandacss/generator": "0.5.0"
   },
   "files": [
     "dist"