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

package/dist/index.js

@@ -698,19 +698,27 @@ function generateRecipes(ctx) {
     name: "create-recipe",
     dts: "",
     js: import_outdent9.outdent`
+   ${ctx.file.import("css, mergeCss", "../css/css")}
+   ${ctx.file.import("cx", "../css/cx")}
    ${ctx.file.import("createCss, withoutSpace, compact", "../helpers")}
 
-   export const createRecipe = (name, defaultVariants) => {
+   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.\`,
+          )
+        }
+
          if (value === '__ignore__') {
            return { className: name }
          }
- 
+
          value = withoutSpace(value)
          return { className: \`\${name}--\${prop}${separator}\${value}\` }
       }
-      
+
       const context = {
         hash: ${hash ? "true" : "false"},
         utility: {
@@ -718,14 +726,29 @@ function generateRecipes(ctx) {
           transform,
         }
       }
-      
-      const css = createCss(context)
-      
-      return css({
+
+      const recipeCss = createCss(context)
+      const recipeStyles = {
         [name]: '__ignore__',
         ...defaultVariants,
-        ...compact(variants)
+        ...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)
+        }
       })
+
+      return cx(recipeCss(recipeStyles), css(result))
      }
    }
   `
@@ -734,13 +757,15 @@ function generateRecipes(ctx) {
     createRecipeFn,
     ...ctx.recipes.details.map((recipe) => {
       const { config, upperName, variantKeyMap, dashName } = recipe;
-      const { name, description, defaultVariants } = config;
+      const { name, description, defaultVariants, compoundVariants } = config;
       return {
         name: dashName,
         js: import_outdent9.outdent`
         ${ctx.file.import("createRecipe", "./create-recipe")}
 
-        export const ${name} = createRecipe('${name}', ${JSON.stringify(defaultVariants ?? {})})
+        export const ${name} = createRecipe('${name}', ${JSON.stringify(defaultVariants ?? {})}, ${JSON.stringify(
+          compoundVariants ?? []
+        )})
         ${name}.variants = ${JSON.stringify(variantKeyMap)}
         `,
         dts: import_outdent9.outdent`
@@ -749,15 +774,15 @@ function generateRecipes(ctx) {
         type ${upperName}Variant = {
           ${Object.keys(variantKeyMap).map((key) => `${key}: ${(0, import_shared2.unionType)(variantKeyMap[key])}`).join("\n")}
         }
-    
+
         type ${upperName}VariantMap = {
           [key in keyof ${upperName}Variant]: Array<${upperName}Variant[key]>
         }
-    
+
         export type ${upperName}Variants = {
-          [key in keyof ${upperName}Variant]?: ConditionalValue<${upperName}Variant[key]>
+          [key in keyof ${upperName}Variant]?: ${compoundVariants?.length ? `${upperName}Variant[key]` : `ConditionalValue<${upperName}Variant[key]>`}
         }
-    
+
         ${description ? `/** ${description} */` : ""}
         export declare function ${name}(variants?: ${upperName}Variants): string & {
           variants: ${upperName}VariantMap

package/dist/index.mjs

@@ -667,19 +667,27 @@ function generateRecipes(ctx) {
     name: "create-recipe",
     dts: "",
     js: outdent9`
+   ${ctx.file.import("css, mergeCss", "../css/css")}
+   ${ctx.file.import("cx", "../css/cx")}
    ${ctx.file.import("createCss, withoutSpace, compact", "../helpers")}
 
-   export const createRecipe = (name, defaultVariants) => {
+   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.\`,
+          )
+        }
+
          if (value === '__ignore__') {
            return { className: name }
          }
- 
+
          value = withoutSpace(value)
          return { className: \`\${name}--\${prop}${separator}\${value}\` }
       }
-      
+
       const context = {
         hash: ${hash ? "true" : "false"},
         utility: {
@@ -687,14 +695,29 @@ function generateRecipes(ctx) {
           transform,
         }
       }
-      
-      const css = createCss(context)
-      
-      return css({
+
+      const recipeCss = createCss(context)
+      const recipeStyles = {
         [name]: '__ignore__',
         ...defaultVariants,
-        ...compact(variants)
+        ...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)
+        }
       })
+
+      return cx(recipeCss(recipeStyles), css(result))
      }
    }
   `
@@ -703,13 +726,15 @@ function generateRecipes(ctx) {
     createRecipeFn,
     ...ctx.recipes.details.map((recipe) => {
       const { config, upperName, variantKeyMap, dashName } = recipe;
-      const { name, description, defaultVariants } = config;
+      const { name, description, defaultVariants, compoundVariants } = config;
       return {
         name: dashName,
         js: outdent9`
         ${ctx.file.import("createRecipe", "./create-recipe")}
 
-        export const ${name} = createRecipe('${name}', ${JSON.stringify(defaultVariants ?? {})})
+        export const ${name} = createRecipe('${name}', ${JSON.stringify(defaultVariants ?? {})}, ${JSON.stringify(
+          compoundVariants ?? []
+        )})
         ${name}.variants = ${JSON.stringify(variantKeyMap)}
         `,
         dts: outdent9`
@@ -718,15 +743,15 @@ function generateRecipes(ctx) {
         type ${upperName}Variant = {
           ${Object.keys(variantKeyMap).map((key) => `${key}: ${unionType2(variantKeyMap[key])}`).join("\n")}
         }
-    
+
         type ${upperName}VariantMap = {
           [key in keyof ${upperName}Variant]: Array<${upperName}Variant[key]>
         }
-    
+
         export type ${upperName}Variants = {
-          [key in keyof ${upperName}Variant]?: ConditionalValue<${upperName}Variant[key]>
+          [key in keyof ${upperName}Variant]?: ${compoundVariants?.length ? `${upperName}Variant[key]` : `ConditionalValue<${upperName}Variant[key]>`}
         }
-    
+
         ${description ? `/** ${description} */` : ""}
         export declare function ${name}(variants?: ${upperName}Variants): string & {
           variants: ${upperName}VariantMap

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.0.0-dev-20230414155459",
+  "version": "0.0.0-dev-20230414155738",
   "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-20230414155459",
-    "@pandacss/logger": "0.0.0-dev-20230414155459",
-    "@pandacss/is-valid-prop": "0.0.0-dev-20230414155459",
-    "@pandacss/shared": "0.0.0-dev-20230414155459",
-    "@pandacss/types": "0.0.0-dev-20230414155459",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230414155459"
+    "@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"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.29",
-    "@pandacss/fixture": "0.0.0-dev-20230414155459"
+    "@pandacss/fixture": "0.0.0-dev-20230414155738"
   },
   "scripts": {
     "prebuild": "tsx scripts/prebuild.ts",