@pandacss/parser 0.5.0 → 0.6.0

package/dist/index.d.mts

@@ -54,8 +54,7 @@ type ParserOptions = {
         nodes: ParserNodeOptions[];
         isStyleProp: (prop: string) => boolean;
     };
-    getRecipeName: (tagName: string) => string;
-    getRecipeByName: (name: string) => RecipeConfig | undefined;
+    getRecipesByJsxName: (jsxName: string) => RecipeConfig[];
 };
 
 type ProjectOptions = Partial<ProjectOptions$1> & {

package/dist/index.d.ts

@@ -54,8 +54,7 @@ type ParserOptions = {
         nodes: ParserNodeOptions[];
         isStyleProp: (prop: string) => boolean;
     };
-    getRecipeName: (tagName: string) => string;
-    getRecipeByName: (name: string) => RecipeConfig | undefined;
+    getRecipesByJsxName: (jsxName: string) => RecipeConfig[];
 };
 
 type ProjectOptions = Partial<ProjectOptions$1> & {

package/dist/index.js

@@ -197,7 +197,7 @@ var fallback = (box2) => ({
 });
 var defaultEnv = { preset: "NONE" };
 function createParser(options) {
-  const { jsx, importMap, getRecipeByName } = options;
+  const { jsx, importMap, getRecipesByJsxName } = options;
   const importRegex = [
     createImportMatcher(importMap.css, ["css", "cva"]),
     createImportMatcher(importMap.recipe),
@@ -206,7 +206,7 @@ function createParser(options) {
   if (jsx) {
     importRegex.push(createImportMatcher(importMap.jsx, [jsx.factory, ...jsx.nodes.map((node) => node.name)]));
   }
-  return function parse3(sourceFile) {
+  return function parse2(sourceFile) {
     if (!sourceFile)
       return;
     const filePath = sourceFile.getFilePath();
@@ -221,13 +221,13 @@ function createParser(options) {
       imports.value.length ? `Found import { ${imports} } in ${filePath}` : `No import found in ${filePath}`
     );
     const [css] = importRegex;
+    const jsxFactoryAlias = jsx ? imports.getAlias(jsx.factory) : "styled";
     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 isFactory = (name) => Boolean(jsx && name.startsWith(jsxFactoryAlias));
     const jsxPatternNodes = new RegExp(
-      `^(${jsx?.nodes.map((node) => node.type === "pattern" && node.name).join("|")})$`
+      `^(${jsx?.nodes.filter((node) => node.type === "pattern").map((node) => node.name).join("|")})$`
     );
     const recipes = /* @__PURE__ */ new Set();
     const patterns = /* @__PURE__ */ new Set();
@@ -269,30 +269,27 @@ function createParser(options) {
         components.set(alias, propertiesMap);
       });
     }
-    const getRecipeName = (0, import_shared2.memo)(options.getRecipeName);
     const isJsxTagRecipe = (0, import_shared2.memo)(
       (tagName) => recipeJsxLists.string.has(tagName) || recipeJsxLists.regex.some((regex) => regex.test(tagName))
     );
     const matchTag = (0, import_shared2.memo)((tagName) => {
       if (!tagName)
         return false;
-      return components.has(tagName) || isUpperCase(tagName) || tagName.startsWith(jsxFactoryAlias) || isJsxTagRecipe(tagName);
+      return components.has(tagName) || isUpperCase(tagName) || isFactory(tagName) || isJsxTagRecipe(tagName);
     });
     const matchTagProp = (0, import_shared2.memo)((tagName, propName) => {
-      if (propertiesMap.size === 0)
-        return true;
       if (Boolean(components.get(tagName)?.has(propName)) || options.jsx?.isStyleProp(propName) || propertiesMap.has(propName))
         return true;
       if (isJsxTagRecipe(tagName)) {
-        const recipe = getRecipeByName(getRecipeName(tagName));
-        return recipe != null && !!recipePropertiesByName.get(recipe.name)?.has(propName);
+        const recipeList = getRecipesByJsxName(tagName);
+        return recipeList.some((recipe) => recipePropertiesByName.get(recipe.name)?.has(propName));
       }
       return false;
     });
     const matchFn = (0, import_shared2.memo)((fnName) => {
       if (recipes.has(fnName) || patterns.has(fnName))
         return true;
-      if (fnName === cvaAlias || fnName === cssAlias || fnName.startsWith(jsxFactoryAlias))
+      if (fnName === cvaAlias || fnName === cssAlias || isFactory(fnName))
         return true;
       return functions.has(fnName);
     });
@@ -321,7 +318,7 @@ function createParser(options) {
     measure();
     extractResultByName.forEach((result, alias) => {
       const name = imports.getName(alias);
-      import_logger.logger.debug(`ast:${name}`, { filePath, result, alias });
+      import_logger.logger.debug(`ast:${name}`, name !== alias ? { kind: result.kind, alias } : { kind: result.kind });
       if (result.kind === "function") {
         (0, import_ts_pattern.match)(name).when(css.match, (name2) => {
           result.queryList.forEach((query) => {
@@ -411,23 +408,19 @@ function createParser(options) {
       } else if (result.kind === "component") {
         result.queryList.forEach((query) => {
           const data = combineResult((0, import_extractor.unbox)(query.box));
-          import_logger.logger.debug(`ast:jsx:${name}`, { filePath, result: data });
-          (0, import_ts_pattern.match)(name).when(
-            (name2) => jsx && name2.startsWith(jsxFactoryAlias),
-            (name2) => {
-              collector.setJsx({ name: name2, box: query.box, type: "jsx-factory", data });
-            }
-          ).when(
+          (0, import_ts_pattern.match)(name).when(isFactory, (name2) => {
+            collector.setJsx({ name: name2, box: query.box, type: "jsx-factory", data });
+          }).when(
             (name2) => jsxPatternNodes.test(name2),
             (name2) => {
               collector.setPattern(name2, { type: "jsx-pattern", name: name2, box: query.box, data });
             }
-          ).when(
-            (name2) => recipeJsxLists.string.has(name2) || recipeJsxLists.regex.some((regex) => regex.test(name2)),
-            (name2) => {
-              collector.setRecipe(getRecipeName(name2), { type: "jsx-recipe", name: name2, box: query.box, data });
-            }
-          ).otherwise(() => {
+          ).when(isJsxTagRecipe, (name2) => {
+            const recipeList = getRecipesByJsxName(name2);
+            recipeList.map((recipe) => {
+              collector.setRecipe(recipe.name, { type: "jsx-recipe", name: name2, box: query.box, data });
+            });
+          }).otherwise(() => {
             collector.setJsx({ name, box: query.box, type: "jsx", data });
           });
         });
@@ -497,23 +490,24 @@ const render = ${fileStr.snip(templateStart, templateEnd).toString()}`
 };
 
 // src/svelte-to-tsx.ts
-var svelte = __toESM(require("svelte/compiler"));
 var import_magic_string2 = __toESM(require("magic-string"));
+var regex_style_tags = /<!--[^]*?-->|<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi;
+var regex_script_tags = /<!--[^]*?-->|<script(\s[^]*?)?(?:>([^]*?)<\/script>|\/>)/gi;
 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 scripts = [];
+    const original = new import_magic_string2.default(code);
+    let match2;
+    while ((match2 = regex_script_tags.exec(code)) != null) {
+      const [fullMatch, _attributesStr, scriptContent] = match2;
+      if (scriptContent) {
+        scripts.push(scriptContent);
+        original.remove(match2.index, match2.index + fullMatch.length);
+      }
     }
-    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>`
-    );
+    const templateContent = original.toString().trimStart().replace(regex_style_tags, "").replace(regex_style_tags, "");
+    const transformed = `${scripts.join("")}
+const render = <div>${templateContent}</div>`;
     return transformed.toString().trim();
   } catch (err) {
     return "";

package/dist/index.mjs

@@ -159,7 +159,7 @@ var fallback = (box2) => ({
 });
 var defaultEnv = { preset: "NONE" };
 function createParser(options) {
-  const { jsx, importMap, getRecipeByName } = options;
+  const { jsx, importMap, getRecipesByJsxName } = options;
   const importRegex = [
     createImportMatcher(importMap.css, ["css", "cva"]),
     createImportMatcher(importMap.recipe),
@@ -168,7 +168,7 @@ function createParser(options) {
   if (jsx) {
     importRegex.push(createImportMatcher(importMap.jsx, [jsx.factory, ...jsx.nodes.map((node) => node.name)]));
   }
-  return function parse3(sourceFile) {
+  return function parse2(sourceFile) {
     if (!sourceFile)
       return;
     const filePath = sourceFile.getFilePath();
@@ -183,13 +183,13 @@ function createParser(options) {
       imports.value.length ? `Found import { ${imports} } in ${filePath}` : `No import found in ${filePath}`
     );
     const [css] = importRegex;
+    const jsxFactoryAlias = jsx ? imports.getAlias(jsx.factory) : "styled";
     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 isFactory = (name) => Boolean(jsx && name.startsWith(jsxFactoryAlias));
     const jsxPatternNodes = new RegExp(
-      `^(${jsx?.nodes.map((node) => node.type === "pattern" && node.name).join("|")})$`
+      `^(${jsx?.nodes.filter((node) => node.type === "pattern").map((node) => node.name).join("|")})$`
     );
     const recipes = /* @__PURE__ */ new Set();
     const patterns = /* @__PURE__ */ new Set();
@@ -231,30 +231,27 @@ function createParser(options) {
         components.set(alias, propertiesMap);
       });
     }
-    const getRecipeName = memo2(options.getRecipeName);
     const isJsxTagRecipe = memo2(
       (tagName) => recipeJsxLists.string.has(tagName) || recipeJsxLists.regex.some((regex) => regex.test(tagName))
     );
     const matchTag = memo2((tagName) => {
       if (!tagName)
         return false;
-      return components.has(tagName) || isUpperCase(tagName) || tagName.startsWith(jsxFactoryAlias) || isJsxTagRecipe(tagName);
+      return components.has(tagName) || isUpperCase(tagName) || isFactory(tagName) || isJsxTagRecipe(tagName);
     });
     const matchTagProp = memo2((tagName, propName) => {
-      if (propertiesMap.size === 0)
-        return true;
       if (Boolean(components.get(tagName)?.has(propName)) || options.jsx?.isStyleProp(propName) || propertiesMap.has(propName))
         return true;
       if (isJsxTagRecipe(tagName)) {
-        const recipe = getRecipeByName(getRecipeName(tagName));
-        return recipe != null && !!recipePropertiesByName.get(recipe.name)?.has(propName);
+        const recipeList = getRecipesByJsxName(tagName);
+        return recipeList.some((recipe) => recipePropertiesByName.get(recipe.name)?.has(propName));
       }
       return false;
     });
     const matchFn = memo2((fnName) => {
       if (recipes.has(fnName) || patterns.has(fnName))
         return true;
-      if (fnName === cvaAlias || fnName === cssAlias || fnName.startsWith(jsxFactoryAlias))
+      if (fnName === cvaAlias || fnName === cssAlias || isFactory(fnName))
         return true;
       return functions.has(fnName);
     });
@@ -283,7 +280,7 @@ function createParser(options) {
     measure();
     extractResultByName.forEach((result, alias) => {
       const name = imports.getName(alias);
-      logger.debug(`ast:${name}`, { filePath, result, alias });
+      logger.debug(`ast:${name}`, name !== alias ? { kind: result.kind, alias } : { kind: result.kind });
       if (result.kind === "function") {
         match(name).when(css.match, (name2) => {
           result.queryList.forEach((query) => {
@@ -373,23 +370,19 @@ function createParser(options) {
       } else if (result.kind === "component") {
         result.queryList.forEach((query) => {
           const data = combineResult(unbox(query.box));
-          logger.debug(`ast:jsx:${name}`, { filePath, result: data });
-          match(name).when(
-            (name2) => jsx && name2.startsWith(jsxFactoryAlias),
-            (name2) => {
-              collector.setJsx({ name: name2, box: query.box, type: "jsx-factory", data });
-            }
-          ).when(
+          match(name).when(isFactory, (name2) => {
+            collector.setJsx({ name: name2, box: query.box, type: "jsx-factory", data });
+          }).when(
             (name2) => jsxPatternNodes.test(name2),
             (name2) => {
               collector.setPattern(name2, { type: "jsx-pattern", name: name2, box: query.box, data });
             }
-          ).when(
-            (name2) => recipeJsxLists.string.has(name2) || recipeJsxLists.regex.some((regex) => regex.test(name2)),
-            (name2) => {
-              collector.setRecipe(getRecipeName(name2), { type: "jsx-recipe", name: name2, box: query.box, data });
-            }
-          ).otherwise(() => {
+          ).when(isJsxTagRecipe, (name2) => {
+            const recipeList = getRecipesByJsxName(name2);
+            recipeList.map((recipe) => {
+              collector.setRecipe(recipe.name, { type: "jsx-recipe", name: name2, box: query.box, data });
+            });
+          }).otherwise(() => {
             collector.setJsx({ name, box: query.box, type: "jsx", data });
           });
         });
@@ -459,23 +452,24 @@ const render = ${fileStr.snip(templateStart, templateEnd).toString()}`
 };
 
 // src/svelte-to-tsx.ts
-import * as svelte from "svelte/compiler";
 import MagicString2 from "magic-string";
+var regex_style_tags = /<!--[^]*?-->|<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi;
+var regex_script_tags = /<!--[^]*?-->|<script(\s[^]*?)?(?:>([^]*?)<\/script>|\/>)/gi;
 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 scripts = [];
+    const original = new MagicString2(code);
+    let match2;
+    while ((match2 = regex_script_tags.exec(code)) != null) {
+      const [fullMatch, _attributesStr, scriptContent] = match2;
+      if (scriptContent) {
+        scripts.push(scriptContent);
+        original.remove(match2.index, match2.index + fullMatch.length);
+      }
     }
-    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>`
-    );
+    const templateContent = original.toString().trimStart().replace(regex_style_tags, "").replace(regex_style_tags, "");
+    const transformed = `${scripts.join("")}
+const render = <div>${templateContent}</div>`;
     return transformed.toString().trim();
   } catch (err) {
     return "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/parser",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "The static parser for panda css",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -14,19 +14,18 @@
     "@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.5.0",
-    "@pandacss/is-valid-prop": "0.5.0",
-    "@pandacss/logger": "0.5.0",
-    "@pandacss/shared": "0.5.0",
-    "@pandacss/types": "0.5.0"
+    "@pandacss/extractor": "0.6.0",
+    "@pandacss/is-valid-prop": "0.6.0",
+    "@pandacss/logger": "0.6.0",
+    "@pandacss/shared": "0.6.0",
+    "@pandacss/types": "0.6.0"
   },
   "devDependencies": {
     "hookable": "5.5.3",
-    "@pandacss/fixture": "0.5.0",
-    "@pandacss/generator": "0.5.0"
+    "@pandacss/fixture": "0.6.0",
+    "@pandacss/generator": "0.6.0"
   },
   "files": [
     "dist"