fix(style-context): solid-js

segunadebayo · segunadebayo · commit 58f492ab7f40 · 2025-10-16T21:00:50.000+01:00
diff --git a/.changeset/solid-jsx-reactivity-fix.md b/.changeset/solid-jsx-reactivity-fix.md
@@ -0,0 +1,11 @@
+---
+'@pandacss/generator': patch
+---
+
+**Style Context (Solid)**
+
+- Fix issue where `withProvider` does not properly provide context leading to runtime errors when wrapping headless
+  component libraries like Ark UI.
+
+- Refactor `withProvider` and `withContext` types to ensure required props are properly extracted from the component
+  props.
diff --git a/packages/generator/src/artifacts/solid-jsx/create-style-context.ts b/packages/generator/src/artifacts/solid-jsx/create-style-context.ts
@@ -11,7 +11,7 @@ export function generateSolidCreateStyleContext(ctx: Context) {
     ${ctx.file.import(factoryName, './factory')}
     ${ctx.file.import('getDisplayName', './factory-helper')}
     import { createComponent, mergeProps } from 'solid-js/web'
-    import { createContext, useContext, createMemo } from 'solid-js'
+    import { createContext, createMemo, splitProps, useContext } from 'solid-js'
 
     export function createStyleContext(recipe) {
       const StyleContext = createContext({})
@@ -22,7 +22,7 @@ export function generateSolidCreateStyleContext(ctx: Context) {
         const { unstyled, ...restProps } = props
         if (unstyled) return restProps
         if (isConfigRecipe) {
-          return { ...restProps, className: cx(slotStyles, restProps.className) }
+          return { ...restProps, class: cx(slotStyles, restProps.class) }
         }
         ${outdent.string(
           match(ctx.config.jsxStyleProps)
@@ -32,29 +32,33 @@ export function generateSolidCreateStyleContext(ctx: Context) {
             .otherwise(() => `return restProps`),
         )}
       }
-      
 
       const withRootProvider = (Component, options) => {
         const WithRootProvider = (props) => {
-          const finalProps = createMemo(() => {
-            const [variantProps, restProps] = svaFn.splitVariantProps(props)
-            
-            const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
-            slotStyles._classNameMap = svaFn.classNameMap
+          const [variantProps, otherProps] = svaFn.splitVariantProps(props)
+          const [local, propsWithoutChildren] = splitProps(otherProps, ['children'])
+
+          const slotStyles = createMemo(() => {
+            const styles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
+            styles._classNameMap = svaFn.classNameMap
+            return styles
+          })
             
-            const mergedProps = options?.defaultProps ? mergeProps(options.defaultProps, restProps) : restProps
-      
-            return { mergedProps, slotStyles }
+          const mergedProps = createMemo(() => {
+            if (!options?.defaultProps) return propsWithoutChildren
+            return { ...options.defaultProps, ...propsWithoutChildren }
           })
 
           return createComponent(StyleContext.Provider, {
-            value: finalProps().slotStyles,
+            get value() {
+              return slotStyles()
+            },
             get children() {
               return createComponent(
                 Component,
-                mergeProps(finalProps().mergedProps, {
+                mergeProps(mergedProps, {
                   get children() {
-                    return props.children
+                    return local.children
                   },
                 }),
               )
@@ -64,45 +68,51 @@ export function generateSolidCreateStyleContext(ctx: Context) {
         
         const componentName = getDisplayName(Component)
         WithRootProvider.displayName = \`withRootProvider(\${componentName})\`
-        
         return WithRootProvider
       }
 
       const withProvider = (Component, slot, options) => {
         const StyledComponent = ${factoryName}(Component, {}, options)
         
         const WithProvider = (props) => {
-          const finalProps = createMemo(() => {
-            const [variantProps, restProps] = svaFn.splitVariantProps(props)
+          const [variantProps, restProps] = svaFn.splitVariantProps(props)
+          const [local, propsWithoutChildren] = splitProps(restProps, ["children"])
 
-            const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
-            slotStyles._classNameMap = svaFn.classNameMap
+          const slotStyles = createMemo(() => {
+            const styles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
+            styles._classNameMap = svaFn.classNameMap
+            return styles
+          })
 
-            const propsWithClass = { ...restProps, class: restProps.class ?? options?.defaultProps?.class }
-            const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot])
-            resolvedProps.class = cx(resolvedProps.class, slotStyles._classNameMap[slot])
-            
-            return { slotStyles, resolvedProps }
+          const resolvedProps = createMemo(() => {
+            const propsWithClass = {
+              ...propsWithoutChildren,
+              class: propsWithoutChildren.class ?? options?.defaultProps?.class,
+            }
+            const resolved = getResolvedProps(propsWithClass, slotStyles()[slot])
+            resolved.class = cx(resolved.class, slotStyles()._classNameMap[slot])
+            return resolved
           })
 
           return createComponent(StyleContext.Provider, {
-            value: finalProps().slotStyles,
+            get value() {
+              return slotStyles()
+            },
             get children() {
               return createComponent(
                 StyledComponent,
-                mergeProps(finalProps().resolvedProps, {
+                mergeProps(resolvedProps, {
                   get children() {
-                    return props.children
+                    return local.children
                   },
-                }),
+                })
               )
             },
           })
         }
         
         const componentName = getDisplayName(Component)
         WithProvider.displayName = \`withProvider(\${componentName})\`
-        
         return WithProvider
       }
 
@@ -111,19 +121,30 @@ export function generateSolidCreateStyleContext(ctx: Context) {
         
         const WithContext = (props) => {
           const slotStyles = useContext(StyleContext)
-          const finalProps = createMemo(() => {
-            const propsWithClass = { ...props, class: props.class ?? options?.defaultProps?.class }
-            const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot])
-            resolvedProps.class = cx(resolvedProps.class, slotStyles._classNameMap?.[slot])
-            return resolvedProps
+          const [local, propsWithoutChildren] = splitProps(props, ["children"])
+
+          const resolvedProps = createMemo(() => {
+            const propsWithClass = {
+              ...propsWithoutChildren,
+              class: propsWithoutChildren.class ?? options?.defaultProps?.class,
+            }
+            const resolved = getResolvedProps(propsWithClass, slotStyles[slot])
+            resolved.class = cx(resolved.class, slotStyles._classNameMap?.[slot])
+            return resolved
           })
 
-          return createComponent(StyledComponent, finalProps())
+          return createComponent(
+            StyledComponent,
+            mergeProps(resolvedProps, {
+              get children() {
+                return local.children
+              },
+            })
+          )
         }
         
         const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
-        
         return WithContext
       }
 
@@ -144,10 +165,11 @@ export function generateSolidCreateStyleContext(ctx: Context) {
       unstyled?: boolean | undefined
     }
 
-    interface WithProviderOptions<P = {}> {
+    interface WithProviderOptions<P> {
       defaultProps?: Partial<P> | undefined
     }
-    type ElementType<P extends Record<string, any> = {}> = keyof JSX.IntrinsicElements | Component<P>
+    
+    type ElementType = keyof JSX.IntrinsicElements | Component<any>
 
     type SvaFn<S extends string = any> = SlotRecipeRuntimeFn<S, any>
     interface SlotRecipeFn {
@@ -157,7 +179,11 @@ export function generateSolidCreateStyleContext(ctx: Context) {
     }
     type SlotRecipe = SvaFn | SlotRecipeFn
 
-    type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn ? R['__slot'] : R extends SvaFn<infer S> ? S : never
+    type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn
+      ? R['__slot']
+      : R extends SvaFn<infer S>
+        ? S
+        : never
 
     type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = Component<
       JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
diff --git a/packages/generator/src/artifacts/solid-jsx/types.ts b/packages/generator/src/artifacts/solid-jsx/types.ts
@@ -35,7 +35,7 @@ export interface AsProps {
   as?: ElementType | undefined
 }
 
-export type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
+export type ElementType = keyof JSX.IntrinsicElements | Component<any>
 
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
   (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ export interface AsProps {`
`35`	`35`	`as?: ElementType \| undefined`
`36`	`36`	`}`
`37`	`37`
`38`		`-export type ElementType<P = any> = keyof JSX.IntrinsicElements \| Component<P>`
	`38`	`+export type ElementType = keyof JSX.IntrinsicElements \| Component<any>`
`39`	`39`
`40`	`40`	`export interface ${componentName}<T extends ElementType, P extends Dict = {}> {`
`41`	`41`	`(props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element`