feat: improve types for dynamic functions

Author: jpudysz

example/src/examples/Extreme.tsx

@@ -24,8 +24,7 @@ const stylesheet = createStyles(theme => ({
         backgroundColor: {
             xs: theme.colors.oak,
             md: theme.colors.sky
-        },
-        shadowOpacity: 20
+        }
     }),
     text: {
         height: 100,

src/types.ts

@@ -64,23 +64,17 @@ type UnistyleView = Omit<Omit<ViewStyle, 'shadowOffset'>, 'transform'>
 type UnistyleText = Omit<Omit<TextStyle, 'shadowOffset'>, 'transform'>
 type UnistyleImage = Omit<Omit<ImageStyle, 'shadowOffset'>, 'transform'>
 
-export type CustomNamedStyles<T, B extends Record<string, number>> = {
-    [P in keyof T]:
-    | (UnistyleView| StyleProperty<UnistyleView, B>)
+export type StaticStyles<B extends Record<string, number>> =
+    | (UnistyleView | StyleProperty<UnistyleView, B>)
     | (UnistyleText | StyleProperty<UnistyleText, B>)
     | (UnistyleImage | StyleProperty<UnistyleImage, B>)
-    | ShadowOffsetProps<B>
-    | TransformProps<B>
-    | (
-        (...args: Array<never>) =>
-        | (UnistyleView| StyleProperty<UnistyleView, B>)
-        | (UnistyleText | StyleProperty<UnistyleText, B>)
-        | (UnistyleImage | StyleProperty<UnistyleImage, B>)
-        | ShadowOffsetProps<B>
-        | TransformProps<B>
-    )
-}
+    & TransformProps<B> & ShadowOffsetProps<B>
 
+export type CustomNamedStyles<T, B extends Record<string, number>> = {
+    [K in keyof T]: T[K] extends (...args: infer A) => unknown
+        ? (...args: A) => StaticStyles<B>
+        : StaticStyles<B>
+}
 export type ExtractBreakpoints<T, B extends Record<string, number>> = T extends Partial<Record<keyof B & string, infer V>>
     ? V
     : T extends (...args: infer A) => infer R

src/utils/styles.ts

@@ -62,7 +62,10 @@ export const parseStyle = <T, B extends Record<string, number>>(
     screenSize: ScreenSize,
     breakpoints: B
 ): T => {
-    const entries = Object.entries(style) as [[keyof T, CustomNamedStyles<T, B>]]
+    const entries = Object.entries(style) as [[
+        keyof T,
+        CustomNamedStyles<T, B> | Record<keyof B & string, string | number | undefined>]
+    ]
 
     return Object
         .fromEntries(entries
@@ -72,7 +75,7 @@ export const parseStyle = <T, B extends Record<string, number>>(
                 if (isNestedStyle) {
                     return [
                         key,
-                        parseStyle(value, breakpoint, screenSize, breakpoints)
+                        parseStyle(value as CustomNamedStyles<T, B>, breakpoint, screenSize, breakpoints)
                     ]
                 }
 
@@ -92,9 +95,15 @@ export const parseStyle = <T, B extends Record<string, number>>(
                     return [key, value]
                 }
 
-                const valueWithBreakpoint = value as Record<keyof B & string, string | number>
-
-                return [key, getValueForBreakpoint<B>(valueWithBreakpoint, breakpoint, screenSize, breakpoints)]
+                return [
+                    key,
+                    getValueForBreakpoint<B>(
+                        value as Record<keyof B & string, string | number | undefined>,
+                        breakpoint,
+                        screenSize,
+                        breakpoints
+                    )
+                ]
             })
         )
 }