@pandacss/generator 0.34.2 → 0.35.0

package/dist/index.js

@@ -827,12 +827,15 @@ function generateSvaFn(ctx) {
     js: import_outdent12.outdent`
     ${ctx.file.import("getSlotRecipes, memo, splitProps", "../helpers")}
     ${ctx.file.import("cva", "./cva")}
+    ${ctx.file.import("cx", "./cx")}
+
+    const slotClass = (className, slot) => className + '__' + slot
 
     export function sva(config) {
       const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)])
 
       function svaFn(props) {
-        const result = slots.map(([slot, cvaFn]) => [slot, cvaFn(props)])
+        const result = slots.map(([slot, cvaFn]) => [slot, cx(cvaFn(props), config.className && slotClass(config.className, slot))])
         return Object.fromEntries(result)
       }
 
@@ -876,7 +879,7 @@ function generateTokenJs(ctx) {
   const map = /* @__PURE__ */ new Map();
   tokens.allTokens.forEach((token) => {
     const { varRef, isVirtual } = token.extensions;
-    const value = token.isConditional || isVirtual ? varRef : token.value;
+    const value = isVirtual || token.extensions.condition !== "base" ? varRef : token.value;
     map.set(token.name, { value, variable: varRef });
   });
   const obj = Object.fromEntries(map);
@@ -937,9 +940,10 @@ function generatePreactJsxFactory(ctx) {
 
       const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
       const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+      const __base__ = Dynamic.__base__ || Dynamic
 
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-        const { as: Element = Dynamic.__base__ || Dynamic, children, ...restProps } = props
+        const { as: Element = __base__, children, ...restProps } = props
 
 
         const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
@@ -971,11 +975,11 @@ function generatePreactJsxFactory(ctx) {
         }, combinedProps.children ?? children)
       })
 
-      const name = getDisplayName(Dynamic)
+      const name = getDisplayName(__base__)
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
       ${componentName}.__cva__ = __cvaFn__
-      ${componentName}.__base__ = Dynamic
+      ${componentName}.__base__ = __base__
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
       return ${componentName}
@@ -1149,12 +1153,13 @@ function generatePreactJsxStringLiteralFactory(ctx) {
     ${ctx.file.import("css, cx", "../css/index")}
 
     function createStyledFn(Dynamic) {
+      const __base__ = Dynamic.__base__ || Dynamic
       return function styledFn(template) {
         const styles = css.raw(template)
 
         const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-          const { as: Element = Dynamic.__base__ || Dynamic, ...elementProps } = props
-         
+          const { as: Element = __base__, ...elementProps } = props
+
           function classes() {
             return cx(css(Dynamic.__styles__, styles), elementProps.className)
           }
@@ -1166,11 +1171,11 @@ function generatePreactJsxStringLiteralFactory(ctx) {
           })
         })
 
-        const name = getDisplayName(Dynamic)
-        
+        const name = getDisplayName(__base__)
+
         ${componentName}.displayName = \`${factoryName}.\${name}\`
         ${componentName}.__styles__ = styles
-        ${componentName}.__base__ = Dynamic
+        ${componentName}.__base__ = __base__
 
         return ${componentName}
       }
@@ -1263,9 +1268,10 @@ function generateQwikJsxFactory(ctx) {
 
       const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
       const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+      const __base__ = Dynamic.__base__ || Dynamic
 
       const ${componentName} = function ${componentName}(props) {
-        const { as: Element = Dynamic.__base__ || Dynamic, children, className, ...restProps } = props
+        const { as: Element = __base__, children, className, ...restProps } = props
 
         const combinedProps = Object.assign({}, defaultProps, restProps)
 
@@ -1296,11 +1302,11 @@ function generateQwikJsxFactory(ctx) {
         }, combinedProps.children ?? children)
       }
 
-      const name = getDisplayName(Dynamic)
+      const name = getDisplayName(__base__)
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
       ${componentName}.__cva__ = __cvaFn__
-      ${componentName}.__base__ = Dynamic
+      ${componentName}.__base__ = __base__
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
       return ${componentName}
@@ -1476,14 +1482,15 @@ function generateQwikJsxStringLiteralFactory(ctx) {
     ${ctx.file.import("css, cx", "../css/index")}
 
     function createStyledFn(Dynamic) {
+      const __base__ = Dynamic.__base__ || Dynamic
       return function styledFn(template) {
           const styles = css.raw(template)
-          
+
           const ${componentName} = (props) => {
-            const { as: Element = Dynamic.__base__ || Dynamic, ...elementProps } = props
-            
+            const { as: Element = __base__, ...elementProps } = props
+
             function classes() {
-              return cx(css(Dynamic.__styles__, styles), elementProps.className)
+              return cx(css(__base__.__styles__, styles), elementProps.className)
             }
 
             return h(Element, {
@@ -1492,12 +1499,12 @@ function generateQwikJsxStringLiteralFactory(ctx) {
             })
           }
 
-          const name = getDisplayName(Dynamic)
-        
+          const name = getDisplayName(__base__)
+
           ${componentName}.displayName = \`${factoryName}.\${name}\`
           ${componentName}.__styles__ = styles
-          ${componentName}.__base__ = Dynamic
-  
+          ${componentName}.__base__ = __base__
+
           return ${componentName}
         }
     }
@@ -1595,9 +1602,10 @@ function generateReactJsxFactory(ctx) {
 
       const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
       const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+      const __base__ = Dynamic.__base__ || Dynamic
 
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-        const { as: Element = Dynamic.__base__ || Dynamic, children, ...restProps } = props
+        const { as: Element = __base__, children, ...restProps } = props
 
         const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
 
@@ -1628,11 +1636,11 @@ function generateReactJsxFactory(ctx) {
         }, combinedProps.children ?? children)
       })
 
-      const name = getDisplayName(Dynamic)
+      const name = getDisplayName(__base__)
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
       ${componentName}.__cva__ = __cvaFn__
-      ${componentName}.__base__ = Dynamic
+      ${componentName}.__base__ = __base__
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
       return ${componentName}
@@ -1807,14 +1815,15 @@ function generateReactJsxStringLiteralFactory(ctx) {
     ${ctx.file.import("css, cx", "../css/index")}
 
     function createStyledFn(Dynamic) {
+      const __base__ = Dynamic.__base__ || Dynamic
       return function styledFn(template) {
         const styles = css.raw(template)
 
         const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-          const { as: Element = Dynamic.__base__ || Dynamic, ...elementProps } = props
-          
+          const { as: Element = __base__, ...elementProps } = props
+
           function classes() {
-            return cx(css(Dynamic.__styles__, styles), elementProps.className)
+            return cx(css(__base__.__styles__, styles), elementProps.className)
           }
 
           return createElement(Element, {
@@ -1824,12 +1833,12 @@ function generateReactJsxStringLiteralFactory(ctx) {
           })
         })
 
-        const name = getDisplayName(Dynamic)
-        
+        const name = getDisplayName(__base__)
+
         ${componentName}.displayName = \`${factoryName}.\${name}\`
         ${componentName}.__styles__ = styles
-        ${componentName}.__base__ = Dynamic
-        
+        ${componentName}.__base__ = __base__
+
         return ${componentName}
       }
     }
@@ -2810,7 +2819,7 @@ var pattern_d_ts_default = {
 
 // src/artifacts/generated/recipe.d.ts.json
 var recipe_d_ts_default = {
-  content: "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\n/**\n * Extract the variant as optional props from a `cva` function.\n * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type.\n */\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\n/**\n * Extract the variants from a `cva` function.\n */\nexport type RecipeVariant<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Exclude<Pretty<Required<RecipeVariantProps<T>>>, undefined>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord = 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\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?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The name of the recipe.\n   */\n  className: 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  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n  extends RecipeDefinition<T>,\n    RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n  extends SlotRecipeVariantFn<S, T> {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\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?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
+  content: "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\n/**\n * Extract the variant as optional props from a `cva` function.\n * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type.\n */\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\n/**\n * Extract the variants from a `cva` function.\n */\nexport type RecipeVariant<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Exclude<Pretty<Required<RecipeVariantProps<T>>>, undefined>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord = 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\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?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The class name of the recipe.\n   */\n  className: 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  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n  extends RecipeDefinition<T>,\n    RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n  extends SlotRecipeVariantFn<S, T> {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> {\n  /**\n   * An optional class name that can be used to target slots in the DOM.\n   */\n  className?: string\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\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?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
 };
 
 // src/artifacts/generated/selectors.d.ts.json
@@ -2999,7 +3008,14 @@ function generatePropTypes(ctx) {
     | 'wordBreak'
     | 'writingMode'
 
-  type WithEscapeHatch<T> = T | \`[\${string}]\`
+  type WithColorOpacityModifier<T> = T extends string ? \`$\{T}/\${string}\` : T
+
+  type ImportantMark = "!" | "!important"
+  type WhitespaceImportant = \` \${ImportantMark}\`
+  type Important = ImportantMark | WhitespaceImportant
+  type WithImportant<T> = T extends string ? \`\${T}\${Important}\${string}\` : T
+
+  type WithEscapeHatch<T> = T | \`[\${string}]\` | (T extends string ? WithColorOpacityModifier<string> | WithImportant<T> : T)
 
   type FilterVagueString<Key, Value> = Value extends boolean
     ? Value

package/dist/index.mjs

@@ -791,12 +791,15 @@ function generateSvaFn(ctx) {
     js: outdent12`
     ${ctx.file.import("getSlotRecipes, memo, splitProps", "../helpers")}
     ${ctx.file.import("cva", "./cva")}
+    ${ctx.file.import("cx", "./cx")}
+
+    const slotClass = (className, slot) => className + '__' + slot
 
     export function sva(config) {
       const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)])
 
       function svaFn(props) {
-        const result = slots.map(([slot, cvaFn]) => [slot, cvaFn(props)])
+        const result = slots.map(([slot, cvaFn]) => [slot, cx(cvaFn(props), config.className && slotClass(config.className, slot))])
         return Object.fromEntries(result)
       }
 
@@ -840,7 +843,7 @@ function generateTokenJs(ctx) {
   const map = /* @__PURE__ */ new Map();
   tokens.allTokens.forEach((token) => {
     const { varRef, isVirtual } = token.extensions;
-    const value = token.isConditional || isVirtual ? varRef : token.value;
+    const value = isVirtual || token.extensions.condition !== "base" ? varRef : token.value;
     map.set(token.name, { value, variable: varRef });
   });
   const obj = Object.fromEntries(map);
@@ -901,9 +904,10 @@ function generatePreactJsxFactory(ctx) {
 
       const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
       const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+      const __base__ = Dynamic.__base__ || Dynamic
 
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-        const { as: Element = Dynamic.__base__ || Dynamic, children, ...restProps } = props
+        const { as: Element = __base__, children, ...restProps } = props
 
 
         const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
@@ -935,11 +939,11 @@ function generatePreactJsxFactory(ctx) {
         }, combinedProps.children ?? children)
       })
 
-      const name = getDisplayName(Dynamic)
+      const name = getDisplayName(__base__)
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
       ${componentName}.__cva__ = __cvaFn__
-      ${componentName}.__base__ = Dynamic
+      ${componentName}.__base__ = __base__
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
       return ${componentName}
@@ -1113,12 +1117,13 @@ function generatePreactJsxStringLiteralFactory(ctx) {
     ${ctx.file.import("css, cx", "../css/index")}
 
     function createStyledFn(Dynamic) {
+      const __base__ = Dynamic.__base__ || Dynamic
       return function styledFn(template) {
         const styles = css.raw(template)
 
         const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-          const { as: Element = Dynamic.__base__ || Dynamic, ...elementProps } = props
-         
+          const { as: Element = __base__, ...elementProps } = props
+
           function classes() {
             return cx(css(Dynamic.__styles__, styles), elementProps.className)
           }
@@ -1130,11 +1135,11 @@ function generatePreactJsxStringLiteralFactory(ctx) {
           })
         })
 
-        const name = getDisplayName(Dynamic)
-        
+        const name = getDisplayName(__base__)
+
         ${componentName}.displayName = \`${factoryName}.\${name}\`
         ${componentName}.__styles__ = styles
-        ${componentName}.__base__ = Dynamic
+        ${componentName}.__base__ = __base__
 
         return ${componentName}
       }
@@ -1227,9 +1232,10 @@ function generateQwikJsxFactory(ctx) {
 
       const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
       const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+      const __base__ = Dynamic.__base__ || Dynamic
 
       const ${componentName} = function ${componentName}(props) {
-        const { as: Element = Dynamic.__base__ || Dynamic, children, className, ...restProps } = props
+        const { as: Element = __base__, children, className, ...restProps } = props
 
         const combinedProps = Object.assign({}, defaultProps, restProps)
 
@@ -1260,11 +1266,11 @@ function generateQwikJsxFactory(ctx) {
         }, combinedProps.children ?? children)
       }
 
-      const name = getDisplayName(Dynamic)
+      const name = getDisplayName(__base__)
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
       ${componentName}.__cva__ = __cvaFn__
-      ${componentName}.__base__ = Dynamic
+      ${componentName}.__base__ = __base__
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
       return ${componentName}
@@ -1440,14 +1446,15 @@ function generateQwikJsxStringLiteralFactory(ctx) {
     ${ctx.file.import("css, cx", "../css/index")}
 
     function createStyledFn(Dynamic) {
+      const __base__ = Dynamic.__base__ || Dynamic
       return function styledFn(template) {
           const styles = css.raw(template)
-          
+
           const ${componentName} = (props) => {
-            const { as: Element = Dynamic.__base__ || Dynamic, ...elementProps } = props
-            
+            const { as: Element = __base__, ...elementProps } = props
+
             function classes() {
-              return cx(css(Dynamic.__styles__, styles), elementProps.className)
+              return cx(css(__base__.__styles__, styles), elementProps.className)
             }
 
             return h(Element, {
@@ -1456,12 +1463,12 @@ function generateQwikJsxStringLiteralFactory(ctx) {
             })
           }
 
-          const name = getDisplayName(Dynamic)
-        
+          const name = getDisplayName(__base__)
+
           ${componentName}.displayName = \`${factoryName}.\${name}\`
           ${componentName}.__styles__ = styles
-          ${componentName}.__base__ = Dynamic
-  
+          ${componentName}.__base__ = __base__
+
           return ${componentName}
         }
     }
@@ -1559,9 +1566,10 @@ function generateReactJsxFactory(ctx) {
 
       const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
       const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+      const __base__ = Dynamic.__base__ || Dynamic
 
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-        const { as: Element = Dynamic.__base__ || Dynamic, children, ...restProps } = props
+        const { as: Element = __base__, children, ...restProps } = props
 
         const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
 
@@ -1592,11 +1600,11 @@ function generateReactJsxFactory(ctx) {
         }, combinedProps.children ?? children)
       })
 
-      const name = getDisplayName(Dynamic)
+      const name = getDisplayName(__base__)
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
       ${componentName}.__cva__ = __cvaFn__
-      ${componentName}.__base__ = Dynamic
+      ${componentName}.__base__ = __base__
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
       return ${componentName}
@@ -1771,14 +1779,15 @@ function generateReactJsxStringLiteralFactory(ctx) {
     ${ctx.file.import("css, cx", "../css/index")}
 
     function createStyledFn(Dynamic) {
+      const __base__ = Dynamic.__base__ || Dynamic
       return function styledFn(template) {
         const styles = css.raw(template)
 
         const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-          const { as: Element = Dynamic.__base__ || Dynamic, ...elementProps } = props
-          
+          const { as: Element = __base__, ...elementProps } = props
+
           function classes() {
-            return cx(css(Dynamic.__styles__, styles), elementProps.className)
+            return cx(css(__base__.__styles__, styles), elementProps.className)
           }
 
           return createElement(Element, {
@@ -1788,12 +1797,12 @@ function generateReactJsxStringLiteralFactory(ctx) {
           })
         })
 
-        const name = getDisplayName(Dynamic)
-        
+        const name = getDisplayName(__base__)
+
         ${componentName}.displayName = \`${factoryName}.\${name}\`
         ${componentName}.__styles__ = styles
-        ${componentName}.__base__ = Dynamic
-        
+        ${componentName}.__base__ = __base__
+
         return ${componentName}
       }
     }
@@ -2774,7 +2783,7 @@ var pattern_d_ts_default = {
 
 // src/artifacts/generated/recipe.d.ts.json
 var recipe_d_ts_default = {
-  content: "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\n/**\n * Extract the variant as optional props from a `cva` function.\n * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type.\n */\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\n/**\n * Extract the variants from a `cva` function.\n */\nexport type RecipeVariant<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Exclude<Pretty<Required<RecipeVariantProps<T>>>, undefined>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord = 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\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?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The name of the recipe.\n   */\n  className: 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  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n  extends RecipeDefinition<T>,\n    RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n  extends SlotRecipeVariantFn<S, T> {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\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?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
+  content: "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\n/**\n * Extract the variant as optional props from a `cva` function.\n * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type.\n */\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\n/**\n * Extract the variants from a `cva` function.\n */\nexport type RecipeVariant<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Exclude<Pretty<Required<RecipeVariantProps<T>>>, undefined>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord = 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\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?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The class name of the recipe.\n   */\n  className: 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  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n  extends RecipeDefinition<T>,\n    RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n  extends SlotRecipeVariantFn<S, T> {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> {\n  /**\n   * An optional class name that can be used to target slots in the DOM.\n   */\n  className?: string\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\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?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
 };
 
 // src/artifacts/generated/selectors.d.ts.json
@@ -2963,7 +2972,14 @@ function generatePropTypes(ctx) {
     | 'wordBreak'
     | 'writingMode'
 
-  type WithEscapeHatch<T> = T | \`[\${string}]\`
+  type WithColorOpacityModifier<T> = T extends string ? \`$\{T}/\${string}\` : T
+
+  type ImportantMark = "!" | "!important"
+  type WhitespaceImportant = \` \${ImportantMark}\`
+  type Important = ImportantMark | WhitespaceImportant
+  type WithImportant<T> = T extends string ? \`\${T}\${Important}\${string}\` : T
+
+  type WithEscapeHatch<T> = T | \`[\${string}]\` | (T extends string ? WithColorOpacityModifier<string> | WithImportant<T> : T)
 
   type FilterVagueString<Key, Value> = Value extends boolean
     ? Value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.34.2",
+  "version": "0.35.0",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -37,12 +37,12 @@
     "pluralize": "8.0.0",
     "postcss": "8.4.35",
     "ts-pattern": "5.0.8",
-    "@pandacss/core": "0.34.2",
-    "@pandacss/is-valid-prop": "^0.34.2",
-    "@pandacss/logger": "0.34.2",
-    "@pandacss/shared": "0.34.2",
-    "@pandacss/token-dictionary": "0.34.2",
-    "@pandacss/types": "0.34.2"
+    "@pandacss/core": "0.35.0",
+    "@pandacss/is-valid-prop": "^0.35.0",
+    "@pandacss/logger": "0.35.0",
+    "@pandacss/shared": "0.35.0",
+    "@pandacss/token-dictionary": "0.35.0",
+    "@pandacss/types": "0.35.0"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"