@pandacss/generator 0.0.0-dev-20230414155738 → 0.0.0-dev-20230415084325

package/dist/index.d.ts

@@ -42,6 +42,7 @@ declare const getEngine: (conf: LoadConfigResult) => {
             props: string[];
             baseName: string;
             jsx: (string | RegExp)[];
+            match: RegExp;
         }[];
         recipes: Record<string, _pandacss_types.AnyRecipeConfig>;
         getConfig: (name: string) => _pandacss_types.AnyRecipeConfig | undefined;
@@ -157,6 +158,7 @@ declare const createGenerator: (conf: LoadConfigResult) => {
             props: string[];
             baseName: string;
             jsx: (string | RegExp)[];
+            match: RegExp;
         }[];
         recipes: Record<string, _pandacss_types.AnyRecipeConfig>;
         getConfig: (name: string) => _pandacss_types.AnyRecipeConfig | undefined;
@@ -265,6 +267,7 @@ declare const createGenerator: (conf: LoadConfigResult) => {
                 props: string[];
                 baseName: string;
                 jsx: (string | RegExp)[];
+                match: RegExp;
             })[];
         };
         getRecipeName: (jsx: string) => string;

package/dist/index.js

@@ -498,27 +498,14 @@ function generateCvaFn(ctx) {
 
       function resolve(props) {
         const computedVariants = { ...defaultVariants, ...compact(props) }
-        let result = { ...base }
+        let variantCss = { ...base }
         for (const [key, value] of Object.entries(computedVariants)) {
           if (variants[key]?.[value]) {
-            result = mergeCss(result, variants[key][value])
+            variantCss = mergeCss(variantCss, variants[key][value])
           }
         }
-
-        compoundVariants.forEach((compoundVariant) => {
-          const isMatching = Object.entries(compoundVariant).every(([key, value]) => {
-            if (key === 'css') return true
-
-            const values = Array.isArray(value) ? value : [value]
-            return values.some((value) => computedVariants[key] === value)
-          })
-
-          if (isMatching) {
-            result = mergeCss(result, compoundVariant.css)
-          }
-        })
-
-        return result
+        const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants)
+        return mergeCss(variantCss, compoundVariantCss)
       }
 
       function cvaFn(props) {
@@ -532,6 +519,33 @@ function generateCvaFn(ctx) {
         config,
       })
     }
+
+    export function getCompoundVariantCss(compoundVariants, variantMap) {
+      let result = {}
+      compoundVariants.forEach((compoundVariant) => {
+        const isMatching = Object.entries(compoundVariant).every(([key, value]) => {
+          if (key === 'css') return true
+
+          const values = Array.isArray(value) ? value : [value]
+          return values.some((value) => variantMap[key] === value)
+        })
+
+        if (isMatching) {
+          result = mergeCss(result, compoundVariant.css)
+        }
+      })
+
+      return result
+    }
+
+    export function assertCompoundVariant(name, compoundVariants, variants, prop) {
+      if (compoundVariants.length > 0 && typeof variants[prop] === 'object') {
+        throw new Error(
+          \`[recipe:\${name}:\${prop}] Conditions are not supported when using compound variants.\`,
+        )
+      }
+    }    
+
     `,
     dts: import_outdent5.outdent`
     import type { RecipeCreatorFn } from '../types/recipe'
@@ -698,18 +712,15 @@ function generateRecipes(ctx) {
     name: "create-recipe",
     dts: "",
     js: import_outdent9.outdent`
-   ${ctx.file.import("css, mergeCss", "../css/css")}
+   ${ctx.file.import("css", "../css/css")}
+   ${ctx.file.import("assertCompoundVariant, getCompoundVariantCss", "../css/cva")}
    ${ctx.file.import("cx", "../css/cx")}
-   ${ctx.file.import("createCss, withoutSpace, compact", "../helpers")}
+   ${ctx.file.import("compact, createCss, withoutSpace", "../helpers")}
 
    export const createRecipe = (name, defaultVariants, compoundVariants) => {
      return (variants) => {
       const transform = (prop, value) => {
-        if (compoundVariants.length > 0 && typeof variants[prop] === 'object') {
-          throw new Error(
-            \`[recipe:\${name}:\${prop}:\${value}] Conditions are not supported when using compound variants.\`,
-          )
-        }
+        assertCompoundVariant(name, compoundVariants, variants, prop)
 
          if (value === '__ignore__') {
            return { className: name }
@@ -719,36 +730,23 @@ function generateRecipes(ctx) {
          return { className: \`\${name}--\${prop}${separator}\${value}\` }
       }
 
-      const context = {
+      const recipeCss = createCss({
         hash: ${hash ? "true" : "false"},
         utility: {
           prefix: ${prefix ? JSON.stringify(prefix) : void 0},
           transform,
         }
-      }
+      })
 
-      const recipeCss = createCss(context)
       const recipeStyles = {
         [name]: '__ignore__',
         ...defaultVariants,
         ...compact(variants),
       }
 
-      let result = {}
-      compoundVariants.forEach((compoundVariant) => {
-        const isMatching = Object.entries(compoundVariant).every(([key, value]) => {
-          if (key === 'css') return true
-
-          const values = Array.isArray(value) ? value : [value]
-          return values.some((value) => recipeStyles[key] === value)
-        })
-
-        if (isMatching) {
-          result = mergeCss(result, compoundVariant.css)
-        }
-      })
+      const compoundVariantStyles = getCompoundVariantCss(compoundVariants, recipeStyles)
 
-      return cx(recipeCss(recipeStyles), css(result))
+      return cx(recipeCss(recipeStyles), css(compoundVariantStyles))
      }
    }
   `
@@ -2289,7 +2287,8 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
         for (const pattern of patternSet) {
           (0, import_ts_pattern5.match)(pattern).with({ type: "jsx-pattern", name: import_ts_pattern5.P.string }, ({ name: name2 }) => {
             pattern.data.forEach((data) => {
-              const styleProps = patterns.transform(name2, flattenStyles(data));
+              const fnName = patterns.getFnName(name2);
+              const styleProps = patterns.transform(fnName, flattenStyles(data));
               sheet.processAtomic(styleProps);
             });
           }).otherwise(() => {
@@ -2444,6 +2443,10 @@ var getPatternEngine = (config) => {
 // src/engines/recipe.ts
 var import_shared7 = require("@pandacss/shared");
 var import_lil_fp3 = require("lil-fp");
+var mergeRegex = (item) => {
+  const regex = item.map((item2) => typeof item2 === "string" ? item2 : item2.source).join("|");
+  return new RegExp(regex);
+};
 var getRecipeEngine = (config) => {
   return (0, import_lil_fp3.pipe)(
     { recipes: config.theme?.recipes ?? {} },
@@ -2458,27 +2461,28 @@ var getRecipeEngine = (config) => {
       });
     }),
     import_lil_fp3.Obj.bind("nodes", ({ recipes }) => {
-      return Object.entries(recipes).map(([name, recipe]) => ({
-        type: "recipe",
-        name: (0, import_shared7.capitalize)(name),
-        props: Object.keys(recipe.variants ?? {}),
-        baseName: name,
-        jsx: recipe.jsx ?? [(0, import_shared7.capitalize)(name)]
-      }));
+      return Object.entries(recipes).map(([name, recipe]) => {
+        const jsx = recipe.jsx ?? [(0, import_shared7.capitalize)(name)];
+        const match6 = mergeRegex(jsx);
+        return {
+          type: "recipe",
+          name: (0, import_shared7.capitalize)(name),
+          props: Object.keys(recipe.variants ?? {}),
+          baseName: name,
+          jsx,
+          match: match6
+        };
+      });
     }),
     import_lil_fp3.Obj.bind("getFnName", ({ nodes }) => {
       return (jsx) => {
-        const recipe = nodes.find((node) => {
-          return node.jsx.some((tag) => typeof tag === "string" ? tag === jsx : tag.test(jsx));
-        });
+        const recipe = nodes.find((node) => node.match.test(jsx));
         return recipe?.baseName ?? (0, import_shared7.uncapitalize)(jsx);
       };
     }),
     import_lil_fp3.Obj.bind("splitProps", ({ nodes }) => {
       return (name, props) => {
-        const recipe = nodes.find((node) => {
-          return node.jsx.some((tag) => typeof tag === "string" ? tag === name : tag.test(name));
-        });
+        const recipe = nodes.find((node) => node.match.test(name));
         if (!recipe)
           return [{}, props];
         return (0, import_shared7.splitProps)(props, recipe.props);

package/dist/index.mjs

@@ -467,27 +467,14 @@ function generateCvaFn(ctx) {
 
       function resolve(props) {
         const computedVariants = { ...defaultVariants, ...compact(props) }
-        let result = { ...base }
+        let variantCss = { ...base }
         for (const [key, value] of Object.entries(computedVariants)) {
           if (variants[key]?.[value]) {
-            result = mergeCss(result, variants[key][value])
+            variantCss = mergeCss(variantCss, variants[key][value])
           }
         }
-
-        compoundVariants.forEach((compoundVariant) => {
-          const isMatching = Object.entries(compoundVariant).every(([key, value]) => {
-            if (key === 'css') return true
-
-            const values = Array.isArray(value) ? value : [value]
-            return values.some((value) => computedVariants[key] === value)
-          })
-
-          if (isMatching) {
-            result = mergeCss(result, compoundVariant.css)
-          }
-        })
-
-        return result
+        const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants)
+        return mergeCss(variantCss, compoundVariantCss)
       }
 
       function cvaFn(props) {
@@ -501,6 +488,33 @@ function generateCvaFn(ctx) {
         config,
       })
     }
+
+    export function getCompoundVariantCss(compoundVariants, variantMap) {
+      let result = {}
+      compoundVariants.forEach((compoundVariant) => {
+        const isMatching = Object.entries(compoundVariant).every(([key, value]) => {
+          if (key === 'css') return true
+
+          const values = Array.isArray(value) ? value : [value]
+          return values.some((value) => variantMap[key] === value)
+        })
+
+        if (isMatching) {
+          result = mergeCss(result, compoundVariant.css)
+        }
+      })
+
+      return result
+    }
+
+    export function assertCompoundVariant(name, compoundVariants, variants, prop) {
+      if (compoundVariants.length > 0 && typeof variants[prop] === 'object') {
+        throw new Error(
+          \`[recipe:\${name}:\${prop}] Conditions are not supported when using compound variants.\`,
+        )
+      }
+    }    
+
     `,
     dts: outdent5`
     import type { RecipeCreatorFn } from '../types/recipe'
@@ -667,18 +681,15 @@ function generateRecipes(ctx) {
     name: "create-recipe",
     dts: "",
     js: outdent9`
-   ${ctx.file.import("css, mergeCss", "../css/css")}
+   ${ctx.file.import("css", "../css/css")}
+   ${ctx.file.import("assertCompoundVariant, getCompoundVariantCss", "../css/cva")}
    ${ctx.file.import("cx", "../css/cx")}
-   ${ctx.file.import("createCss, withoutSpace, compact", "../helpers")}
+   ${ctx.file.import("compact, createCss, withoutSpace", "../helpers")}
 
    export const createRecipe = (name, defaultVariants, compoundVariants) => {
      return (variants) => {
       const transform = (prop, value) => {
-        if (compoundVariants.length > 0 && typeof variants[prop] === 'object') {
-          throw new Error(
-            \`[recipe:\${name}:\${prop}:\${value}] Conditions are not supported when using compound variants.\`,
-          )
-        }
+        assertCompoundVariant(name, compoundVariants, variants, prop)
 
          if (value === '__ignore__') {
            return { className: name }
@@ -688,36 +699,23 @@ function generateRecipes(ctx) {
          return { className: \`\${name}--\${prop}${separator}\${value}\` }
       }
 
-      const context = {
+      const recipeCss = createCss({
         hash: ${hash ? "true" : "false"},
         utility: {
           prefix: ${prefix ? JSON.stringify(prefix) : void 0},
           transform,
         }
-      }
+      })
 
-      const recipeCss = createCss(context)
       const recipeStyles = {
         [name]: '__ignore__',
         ...defaultVariants,
         ...compact(variants),
       }
 
-      let result = {}
-      compoundVariants.forEach((compoundVariant) => {
-        const isMatching = Object.entries(compoundVariant).every(([key, value]) => {
-          if (key === 'css') return true
-
-          const values = Array.isArray(value) ? value : [value]
-          return values.some((value) => recipeStyles[key] === value)
-        })
-
-        if (isMatching) {
-          result = mergeCss(result, compoundVariant.css)
-        }
-      })
+      const compoundVariantStyles = getCompoundVariantCss(compoundVariants, recipeStyles)
 
-      return cx(recipeCss(recipeStyles), css(result))
+      return cx(recipeCss(recipeStyles), css(compoundVariantStyles))
      }
    }
   `
@@ -2258,7 +2256,8 @@ var generateParserCss = (ctx) => (result) => pipe(
         for (const pattern of patternSet) {
           match5(pattern).with({ type: "jsx-pattern", name: P.string }, ({ name: name2 }) => {
             pattern.data.forEach((data) => {
-              const styleProps = patterns.transform(name2, flattenStyles(data));
+              const fnName = patterns.getFnName(name2);
+              const styleProps = patterns.transform(fnName, flattenStyles(data));
               sheet.processAtomic(styleProps);
             });
           }).otherwise(() => {
@@ -2413,6 +2412,10 @@ var getPatternEngine = (config) => {
 // src/engines/recipe.ts
 import { capitalize as capitalize4, dashCase as dashCase2, splitProps, uncapitalize as uncapitalize2 } from "@pandacss/shared";
 import { Obj as Obj3, pipe as pipe4 } from "lil-fp";
+var mergeRegex = (item) => {
+  const regex = item.map((item2) => typeof item2 === "string" ? item2 : item2.source).join("|");
+  return new RegExp(regex);
+};
 var getRecipeEngine = (config) => {
   return pipe4(
     { recipes: config.theme?.recipes ?? {} },
@@ -2427,27 +2430,28 @@ var getRecipeEngine = (config) => {
       });
     }),
     Obj3.bind("nodes", ({ recipes }) => {
-      return Object.entries(recipes).map(([name, recipe]) => ({
-        type: "recipe",
-        name: capitalize4(name),
-        props: Object.keys(recipe.variants ?? {}),
-        baseName: name,
-        jsx: recipe.jsx ?? [capitalize4(name)]
-      }));
+      return Object.entries(recipes).map(([name, recipe]) => {
+        const jsx = recipe.jsx ?? [capitalize4(name)];
+        const match6 = mergeRegex(jsx);
+        return {
+          type: "recipe",
+          name: capitalize4(name),
+          props: Object.keys(recipe.variants ?? {}),
+          baseName: name,
+          jsx,
+          match: match6
+        };
+      });
     }),
     Obj3.bind("getFnName", ({ nodes }) => {
       return (jsx) => {
-        const recipe = nodes.find((node) => {
-          return node.jsx.some((tag) => typeof tag === "string" ? tag === jsx : tag.test(jsx));
-        });
+        const recipe = nodes.find((node) => node.match.test(jsx));
         return recipe?.baseName ?? uncapitalize2(jsx);
       };
     }),
     Obj3.bind("splitProps", ({ nodes }) => {
       return (name, props) => {
-        const recipe = nodes.find((node) => {
-          return node.jsx.some((tag) => typeof tag === "string" ? tag === name : tag.test(name));
-        });
+        const recipe = nodes.find((node) => node.match.test(name));
         if (!recipe)
           return [{}, props];
         return splitProps(props, recipe.props);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.0.0-dev-20230414155738",
+  "version": "0.0.0-dev-20230415084325",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -20,16 +20,16 @@
     "pluralize": "8.0.0",
     "postcss": "8.4.21",
     "ts-pattern": "4.2.2",
-    "@pandacss/core": "0.0.0-dev-20230414155738",
-    "@pandacss/logger": "0.0.0-dev-20230414155738",
-    "@pandacss/is-valid-prop": "0.0.0-dev-20230414155738",
-    "@pandacss/shared": "0.0.0-dev-20230414155738",
-    "@pandacss/types": "0.0.0-dev-20230414155738",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230414155738"
+    "@pandacss/core": "0.0.0-dev-20230415084325",
+    "@pandacss/logger": "0.0.0-dev-20230415084325",
+    "@pandacss/is-valid-prop": "0.0.0-dev-20230415084325",
+    "@pandacss/shared": "0.0.0-dev-20230415084325",
+    "@pandacss/types": "0.0.0-dev-20230415084325",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230415084325"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.29",
-    "@pandacss/fixture": "0.0.0-dev-20230414155738"
+    "@pandacss/fixture": "0.0.0-dev-20230415084325"
   },
   "scripts": {
     "prebuild": "tsx scripts/prebuild.ts",