@pandacss/generator 0.0.0-dev-20230516185132 → 0.0.0-dev-20230516191725

package/dist/index.js

@@ -461,7 +461,7 @@ var import_outdent4 = require("outdent");
 function generateCvaFn(ctx) {
   return {
     js: import_outdent4.outdent`
-    ${ctx.file.import("compact", "../helpers")}
+    ${ctx.file.import("compact, splitProps", "../helpers")}
     ${ctx.file.import("css, mergeCss", "./css")}
 
     export function cva(config) {
@@ -482,12 +482,22 @@ function generateCvaFn(ctx) {
       function cvaFn(props) {
         return css(resolve(props))
       }
+      
+      const variantKeys = Object.keys(variants)
+
+      function splitVariantProps(props) {
+        return splitProps(props, variantKeys)
+      }
+
+      const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]))
 
       return Object.assign(cvaFn, {
         __cva__: true,
-        variants: Object.keys(variants),
+        variants: variantMap,
+        variantKeys,
         resolve,
         config,
+        splitVariantProps,
       })
     }
 
@@ -511,9 +521,7 @@ function generateCvaFn(ctx) {
 
     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.\`,
-        )
+        throw new Error(\`[recipe:\${name}:\${prop}] Conditions are not supported when using compound variants.\`)
       }
     }    
 
@@ -833,7 +841,7 @@ function generatePreactJsxFactory(ctx) {
         const { as: Element = Dynamic, ...restProps } = props
 
         const [styleProps, variantProps, htmlProps, elementProps] = useMemo(() => {
-          return splitProps(restProps, isCssProperty, cvaFn.variants, normalizeHTMLProps.keys)
+          return splitProps(restProps, isCssProperty, cvaFn.variantKeys, normalizeHTMLProps.keys)
         }, [restProps])
     
         function classes() {
@@ -971,7 +979,7 @@ function generateReactJsxFactory(ctx) {
         const { as: Element = Dynamic, ...restProps } = props
     
         const [styleProps, variantProps, htmlProps, elementProps] = useMemo(() => {
-          return splitProps(restProps, isCssProperty, cvaFn.variants, normalizeHTMLProps.keys)
+          return splitProps(restProps, isCssProperty, cvaFn.variantKeys, normalizeHTMLProps.keys)
         }, [restProps])
     
         function classes() {
@@ -1112,7 +1120,7 @@ function generateSolidJsxFactory(ctx) {
           mergedProps,
           ['as', 'class'],
           allCssProperties,
-          cvaFn.variants,
+          cvaFn.variantKeys,
           normalizeHTMLProps.keys
         )
     
@@ -1259,7 +1267,7 @@ function generateVueJsxFactory(ctx) {
         props: { as: { type: [String, Object], default: Dynamic } },
         setup(props, { slots, attrs }) {
           const splittedProps = computed(() => {
-            return splitProps(attrs, isCssProperty, cvaFn.variants, normalizeHTMLProps.keys)
+            return splitProps(attrs, isCssProperty, cvaFn.variantKeys, normalizeHTMLProps.keys)
           })
     
           const classes = computed(() => {
@@ -1554,7 +1562,7 @@ var composition_d_ts_default = {
 
 // src/artifacts/generated/recipe.d.ts.json
 var recipe_d_ts_default = {
-  content: "import type { SystemStyleObject } from './system-types'\n\ntype Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<string, Record<string, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = {\n  [K in keyof T]?: StringToBoolean<keyof T[K]>\n}\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<T extends RecipeVariantFn<RecipeVariantRecord>> = Pretty<Parameters<T>[0]>\n\nexport type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {\n  variants: (keyof T)[]\n  resolve: (props: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n}\n\nexport type RecipeCompoundSelection<\n  T extends RecipeVariantRecord,\n  Key extends Exclude<keyof T, 'css'> = Exclude<keyof T, 'css'>,\n> = {\n  [K in Key]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>\n}\n\nexport type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SystemStyleObject\n}\n\nexport type RecipeDefinition<T extends RecipeVariantRecord> = {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | RecipeVariantRecord\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<RecipeCompoundVariant<T>>\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\nexport type RecipeConfig<T> = RecipeDefinition<T extends RecipeVariantRecord ? T : RecipeVariantRecord> & {\n  /**\n   * The name of the recipe.\n   */\n  name: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\nexport type AnyRecipeConfig = RecipeConfig<RecipeVariantRecord>\n"
+  content: "import type { SystemStyleObject } from './system-types'\n\ntype Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<string, Record<string, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = {\n  [K in keyof T]?: StringToBoolean<keyof T[K]>\n}\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<T extends RecipeVariantFn<RecipeVariantRecord>> = Pretty<Parameters<T>[0]>\n\nexport type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {\n  variants: (keyof T)[]\n  resolve: (props: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<Omit<Props, keyof RecipeVariantRecord>>]\n}\n\nexport type RecipeCompoundSelection<\n  T extends RecipeVariantRecord,\n  Key extends Exclude<keyof T, 'css'> = Exclude<keyof T, 'css'>,\n> = {\n  [K in Key]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>\n}\n\nexport type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SystemStyleObject\n}\n\nexport type RecipeDefinition<T extends RecipeVariantRecord> = {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | RecipeVariantRecord\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<RecipeCompoundVariant<T>>\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\nexport type RecipeConfig<T> = RecipeDefinition<T extends RecipeVariantRecord ? T : RecipeVariantRecord> & {\n  /**\n   * The name of the recipe.\n   */\n  name: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\nexport type AnyRecipeConfig = RecipeConfig<RecipeVariantRecord>\n"
 };
 
 // src/artifacts/generated/pattern.d.ts.json

package/dist/index.mjs

@@ -430,7 +430,7 @@ import { outdent as outdent4 } from "outdent";
 function generateCvaFn(ctx) {
   return {
     js: outdent4`
-    ${ctx.file.import("compact", "../helpers")}
+    ${ctx.file.import("compact, splitProps", "../helpers")}
     ${ctx.file.import("css, mergeCss", "./css")}
 
     export function cva(config) {
@@ -451,12 +451,22 @@ function generateCvaFn(ctx) {
       function cvaFn(props) {
         return css(resolve(props))
       }
+      
+      const variantKeys = Object.keys(variants)
+
+      function splitVariantProps(props) {
+        return splitProps(props, variantKeys)
+      }
+
+      const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]))
 
       return Object.assign(cvaFn, {
         __cva__: true,
-        variants: Object.keys(variants),
+        variants: variantMap,
+        variantKeys,
         resolve,
         config,
+        splitVariantProps,
       })
     }
 
@@ -480,9 +490,7 @@ function generateCvaFn(ctx) {
 
     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.\`,
-        )
+        throw new Error(\`[recipe:\${name}:\${prop}] Conditions are not supported when using compound variants.\`)
       }
     }    
 
@@ -802,7 +810,7 @@ function generatePreactJsxFactory(ctx) {
         const { as: Element = Dynamic, ...restProps } = props
 
         const [styleProps, variantProps, htmlProps, elementProps] = useMemo(() => {
-          return splitProps(restProps, isCssProperty, cvaFn.variants, normalizeHTMLProps.keys)
+          return splitProps(restProps, isCssProperty, cvaFn.variantKeys, normalizeHTMLProps.keys)
         }, [restProps])
     
         function classes() {
@@ -940,7 +948,7 @@ function generateReactJsxFactory(ctx) {
         const { as: Element = Dynamic, ...restProps } = props
     
         const [styleProps, variantProps, htmlProps, elementProps] = useMemo(() => {
-          return splitProps(restProps, isCssProperty, cvaFn.variants, normalizeHTMLProps.keys)
+          return splitProps(restProps, isCssProperty, cvaFn.variantKeys, normalizeHTMLProps.keys)
         }, [restProps])
     
         function classes() {
@@ -1081,7 +1089,7 @@ function generateSolidJsxFactory(ctx) {
           mergedProps,
           ['as', 'class'],
           allCssProperties,
-          cvaFn.variants,
+          cvaFn.variantKeys,
           normalizeHTMLProps.keys
         )
     
@@ -1228,7 +1236,7 @@ function generateVueJsxFactory(ctx) {
         props: { as: { type: [String, Object], default: Dynamic } },
         setup(props, { slots, attrs }) {
           const splittedProps = computed(() => {
-            return splitProps(attrs, isCssProperty, cvaFn.variants, normalizeHTMLProps.keys)
+            return splitProps(attrs, isCssProperty, cvaFn.variantKeys, normalizeHTMLProps.keys)
           })
     
           const classes = computed(() => {
@@ -1523,7 +1531,7 @@ var composition_d_ts_default = {
 
 // src/artifacts/generated/recipe.d.ts.json
 var recipe_d_ts_default = {
-  content: "import type { SystemStyleObject } from './system-types'\n\ntype Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<string, Record<string, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = {\n  [K in keyof T]?: StringToBoolean<keyof T[K]>\n}\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<T extends RecipeVariantFn<RecipeVariantRecord>> = Pretty<Parameters<T>[0]>\n\nexport type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {\n  variants: (keyof T)[]\n  resolve: (props: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n}\n\nexport type RecipeCompoundSelection<\n  T extends RecipeVariantRecord,\n  Key extends Exclude<keyof T, 'css'> = Exclude<keyof T, 'css'>,\n> = {\n  [K in Key]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>\n}\n\nexport type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SystemStyleObject\n}\n\nexport type RecipeDefinition<T extends RecipeVariantRecord> = {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | RecipeVariantRecord\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<RecipeCompoundVariant<T>>\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\nexport type RecipeConfig<T> = RecipeDefinition<T extends RecipeVariantRecord ? T : RecipeVariantRecord> & {\n  /**\n   * The name of the recipe.\n   */\n  name: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\nexport type AnyRecipeConfig = RecipeConfig<RecipeVariantRecord>\n"
+  content: "import type { SystemStyleObject } from './system-types'\n\ntype Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<string, Record<string, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = {\n  [K in keyof T]?: StringToBoolean<keyof T[K]>\n}\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<T extends RecipeVariantFn<RecipeVariantRecord>> = Pretty<Parameters<T>[0]>\n\nexport type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {\n  variants: (keyof T)[]\n  resolve: (props: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<Omit<Props, keyof RecipeVariantRecord>>]\n}\n\nexport type RecipeCompoundSelection<\n  T extends RecipeVariantRecord,\n  Key extends Exclude<keyof T, 'css'> = Exclude<keyof T, 'css'>,\n> = {\n  [K in Key]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>\n}\n\nexport type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SystemStyleObject\n}\n\nexport type RecipeDefinition<T extends RecipeVariantRecord> = {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | RecipeVariantRecord\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<RecipeCompoundVariant<T>>\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\nexport type RecipeConfig<T> = RecipeDefinition<T extends RecipeVariantRecord ? T : RecipeVariantRecord> & {\n  /**\n   * The name of the recipe.\n   */\n  name: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\nexport type AnyRecipeConfig = RecipeConfig<RecipeVariantRecord>\n"
 };
 
 // src/artifacts/generated/pattern.d.ts.json

package/package.json

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