@pandacss/generator 1.11.0 → 1.11.2

package/dist/index.js

@@ -261,7 +261,26 @@ function generateStringLiteralCssFn(ctx) {
   const { separator } = utility;
   return {
     dts: import_outdent4.outdent`
-    export declare function css(template: { raw: readonly string[] | ArrayLike<string> }): string
+    ${ctx.file.importType("SystemStyleObject", "../types/index")}
+
+    type Styles =
+      | { raw: readonly string[] | ArrayLike<string> }
+      | SystemStyleObject
+      | boolean
+      | null
+      | undefined
+
+    interface CssRawFunction {
+      (...styles: Styles[]): SystemStyleObject
+    }
+
+    interface CssFunction {
+      (...styles: Styles[]): string
+
+      raw: CssRawFunction
+    }
+
+    export declare const css: CssFunction;
     `,
     js: import_outdent4.outdent`
     ${ctx.file.import("astish, createCss, isObject, mergeProps, withoutSpace", "../helpers")}
@@ -1364,7 +1383,10 @@ function generatePreactCreateStyleContext(ctx) {
         
         const WithProvider = forwardRef(function WithProvider(props, ref) {
           const [variantProps, restProps] = svaFn.splitVariantProps(props)
-          
+          options?.forwardProps?.forEach((key) => {
+            if (key in variantProps) restProps[key] = variantProps[key]
+          })
+
           const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
           slotStyles._classNameMap = svaFn.classNameMap
 
@@ -2279,7 +2301,10 @@ function generateReactCreateStyleContext(ctx) {
         
         const WithProvider = forwardRef((props, ref) => {
           const [variantProps, restProps] = svaFn.splitVariantProps(props)
-          
+          options?.forwardProps?.forEach((key) => {
+            if (key in variantProps) restProps[key] = variantProps[key]
+          })
+
           const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
           slotStyles._classNameMap = svaFn.classNameMap
 
@@ -2901,6 +2926,14 @@ function generateSolidCreateStyleContext(ctx) {
           const [variantProps, restProps] = svaFn.splitVariantProps(props)
           const [local, propsWithoutChildren] = splitProps(restProps, ["children"])
 
+          // forward selected variant props to the component without losing reactivity
+          const forwardedProps = {}
+          options?.forwardProps?.forEach((key) => {
+            if (key in variantProps) {
+              Object.defineProperty(forwardedProps, key, { get: () => variantProps[key], enumerable: true })
+            }
+          })
+
           const slotStyles = createMemo(() => {
             const styles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
             styles._classNameMap = svaFn.classNameMap
@@ -2924,7 +2957,7 @@ function generateSolidCreateStyleContext(ctx) {
             get children() {
               return createComponent(
                 StyledComponent,
-                mergeProps(resolvedProps, {
+                mergeProps(resolvedProps, forwardedProps, {
                   get children() {
                     return local.children
                   },
@@ -3548,6 +3581,9 @@ function generateVueCreateStyleContext(ctx) {
             })
             const res = computed(() => {
               const [variantProps, restProps] = svaFn.splitVariantProps(props.value)
+              options?.forwardProps?.forEach((key) => {
+                if (key in variantProps) restProps[key] = variantProps[key]
+              })
               return { variantProps, restProps }
             })
             

package/dist/index.mjs

@@ -224,7 +224,26 @@ function generateStringLiteralCssFn(ctx) {
   const { separator } = utility;
   return {
     dts: outdent4`
-    export declare function css(template: { raw: readonly string[] | ArrayLike<string> }): string
+    ${ctx.file.importType("SystemStyleObject", "../types/index")}
+
+    type Styles =
+      | { raw: readonly string[] | ArrayLike<string> }
+      | SystemStyleObject
+      | boolean
+      | null
+      | undefined
+
+    interface CssRawFunction {
+      (...styles: Styles[]): SystemStyleObject
+    }
+
+    interface CssFunction {
+      (...styles: Styles[]): string
+
+      raw: CssRawFunction
+    }
+
+    export declare const css: CssFunction;
     `,
     js: outdent4`
     ${ctx.file.import("astish, createCss, isObject, mergeProps, withoutSpace", "../helpers")}
@@ -1327,7 +1346,10 @@ function generatePreactCreateStyleContext(ctx) {
         
         const WithProvider = forwardRef(function WithProvider(props, ref) {
           const [variantProps, restProps] = svaFn.splitVariantProps(props)
-          
+          options?.forwardProps?.forEach((key) => {
+            if (key in variantProps) restProps[key] = variantProps[key]
+          })
+
           const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
           slotStyles._classNameMap = svaFn.classNameMap
 
@@ -2242,7 +2264,10 @@ function generateReactCreateStyleContext(ctx) {
         
         const WithProvider = forwardRef((props, ref) => {
           const [variantProps, restProps] = svaFn.splitVariantProps(props)
-          
+          options?.forwardProps?.forEach((key) => {
+            if (key in variantProps) restProps[key] = variantProps[key]
+          })
+
           const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
           slotStyles._classNameMap = svaFn.classNameMap
 
@@ -2864,6 +2889,14 @@ function generateSolidCreateStyleContext(ctx) {
           const [variantProps, restProps] = svaFn.splitVariantProps(props)
           const [local, propsWithoutChildren] = splitProps(restProps, ["children"])
 
+          // forward selected variant props to the component without losing reactivity
+          const forwardedProps = {}
+          options?.forwardProps?.forEach((key) => {
+            if (key in variantProps) {
+              Object.defineProperty(forwardedProps, key, { get: () => variantProps[key], enumerable: true })
+            }
+          })
+
           const slotStyles = createMemo(() => {
             const styles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
             styles._classNameMap = svaFn.classNameMap
@@ -2887,7 +2920,7 @@ function generateSolidCreateStyleContext(ctx) {
             get children() {
               return createComponent(
                 StyledComponent,
-                mergeProps(resolvedProps, {
+                mergeProps(resolvedProps, forwardedProps, {
                   get children() {
                     return local.children
                   },
@@ -3511,6 +3544,9 @@ function generateVueCreateStyleContext(ctx) {
             })
             const res = computed(() => {
               const [variantProps, restProps] = svaFn.splitVariantProps(props.value)
+              options?.forwardProps?.forEach((key) => {
+                if (key in variantProps) restProps[key] = variantProps[key]
+              })
               return { variantProps, restProps }
             })
             

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "1.11.0",
+  "version": "1.11.2",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -36,14 +36,14 @@
     "javascript-stringify": "2.1.0",
     "outdent": " ^0.8.0",
     "pluralize": "8.0.0",
-    "postcss": "8.5.6",
+    "postcss": "8.5.14",
     "ts-pattern": "5.9.0",
-    "@pandacss/core": "1.11.0",
-    "@pandacss/is-valid-prop": "^1.11.0",
-    "@pandacss/logger": "1.11.0",
-    "@pandacss/shared": "1.11.0",
-    "@pandacss/token-dictionary": "1.11.0",
-    "@pandacss/types": "1.11.0"
+    "@pandacss/core": "1.11.2",
+    "@pandacss/is-valid-prop": "^1.11.2",
+    "@pandacss/logger": "1.11.2",
+    "@pandacss/shared": "1.11.2",
+    "@pandacss/token-dictionary": "1.11.2",
+    "@pandacss/types": "1.11.2"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"