react-native-unistyles 1.0.0-beta.2 → 1.0.0-beta.4

package/src/types.ts

@@ -1,36 +1,80 @@
-import type { ImageStyle, TextStyle, TransformsStyle, ViewStyle } from 'react-native'
-import type { CSSProperties } from 'react'
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
+import type {
+    MatrixTransform,
+    PerpectiveTransform,
+    RotateTransform,
+    RotateXTransform,
+    RotateYTransform,
+    RotateZTransform,
+    ScaleTransform,
+    ScaleXTransform,
+    ScaleYTransform,
+    SkewXTransform,
+    SkewYTransform,
+    TranslateXTransform,
+    TranslateYTransform
+} from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
 
 export type ScreenSize = {
     width: number,
     height: number
 }
 
-export type CreateStylesFactory<T, Theme> = (theme: Theme) => T
+export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST
 
 type StyleProperty<T, B extends Record<string, number>> = {
-    [key in keyof T]?: {
-        [innerKey in keyof B]?: T[key]
+    [K in keyof T]: {
+        [innerKey in keyof B]?: T[K]
     } | {
-        [innerKey in `:w${string}` | `:h${string}`]?: T[key]
-    } | T[key]
+        [innerKey in string]?: T[K]
+    } | T[K]
 }
 
-export type CustomNamedStyles<T, B extends Record<string, number>> = {
-    [P in keyof T]:
-    | ViewStyle
-    | TextStyle
-    | ImageStyle
-    | TransformsStyle
-    | CSSProperties
-    | StyleProperty<ViewStyle, B>
-    | StyleProperty<ImageStyle, B>
-    | StyleProperty<TextStyle, B>
-    | (
-        (...args: Array<never>) => ViewStyle | TextStyle | ImageStyle | TransformsStyle | CSSProperties | StyleProperty<ViewStyle, B> | StyleProperty<ImageStyle, B> | StyleProperty<TextStyle, B>
-    )
+type ShadowOffsetProps<B extends Record<string, number>> = {
+    shadowOffset: {
+        width: number | {
+            [innerKey in keyof B]?: number
+        },
+        height: number | {
+            [innerKey in keyof B]?: number
+        }
+    }
+}
+
+type TransformStyles<B extends Record<string, number>> =
+    PerpectiveTransform | StyleProperty<PerpectiveTransform, B>
+    | RotateTransform | StyleProperty<RotateTransform, B>
+    | RotateXTransform | StyleProperty<RotateXTransform, B>
+    | RotateYTransform | StyleProperty<RotateYTransform, B>
+    | RotateZTransform | StyleProperty<RotateZTransform, B>
+    | ScaleTransform | StyleProperty<ScaleTransform, B>
+    | ScaleXTransform | StyleProperty<ScaleXTransform, B>
+    | ScaleYTransform | StyleProperty<ScaleYTransform, B>
+    | TranslateXTransform | StyleProperty<TranslateXTransform, B>
+    | TranslateYTransform | StyleProperty<TranslateYTransform, B>
+    | SkewXTransform | StyleProperty<SkewXTransform, B>
+    | SkewYTransform | StyleProperty<SkewYTransform, B>
+    | MatrixTransform | StyleProperty<MatrixTransform, B>
+
+type TransformProps<B extends Record<string, number>> = {
+    transform: Array<TransformStyles<B>>
 }
 
+type UnistyleView = Omit<Omit<ViewStyle, 'shadowOffset'>, 'transform'>
+type UnistyleText = Omit<Omit<TextStyle, 'shadowOffset'>, 'transform'>
+type UnistyleImage = Omit<Omit<ImageStyle, 'shadowOffset'>, 'transform'>
+
+export type StaticStyles<B extends Record<string, number>> =
+    | (UnistyleView | StyleProperty<UnistyleView, B>)
+    | (UnistyleText | StyleProperty<UnistyleText, B>)
+    | (UnistyleImage | StyleProperty<UnistyleImage, 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

package/src/utils/styles.ts

@@ -61,19 +61,49 @@ export const parseStyle = <T, B extends Record<string, number>>(
     breakpoint: keyof B & string,
     screenSize: ScreenSize,
     breakpoints: B
-) => Object
-    .fromEntries(Object
-        .entries(style)
-        .map(([key, value]) => {
-            const isDynamicFunction = typeof value === 'function'
-            const isValidStyle = typeof value !== 'object' || key === 'transform'
+): T => {
+    const entries = Object.entries(style) as [[
+        keyof T,
+        CustomNamedStyles<T, B> | Record<keyof B & string, string | number | undefined>]
+    ]
 
-            if (isDynamicFunction || isValidStyle) {
-                return [key, value]
-            }
+    return Object
+        .fromEntries(entries
+            .map(([key, value]) => {
+                const isNestedStyle = key === 'shadowOffset'
 
-            const valueWithBreakpoint = value as Record<keyof B & string, string | number>
+                if (isNestedStyle) {
+                    return [
+                        key,
+                        parseStyle(value as CustomNamedStyles<T, B>, breakpoint, screenSize, breakpoints)
+                    ]
+                }
 
-            return [key, getValueForBreakpoint<B>(valueWithBreakpoint, breakpoint, screenSize, breakpoints)]
-        })
-    )
+                const isTransform = key === 'transform'
+
+                if (isTransform && Array.isArray(value)) {
+                    return [
+                        key,
+                        value.map(value => parseStyle(value, breakpoint, screenSize, breakpoints))
+                    ]
+                }
+
+                const isDynamicFunction = typeof value === 'function'
+                const isValidStyle = typeof value !== 'object'
+
+                if (isDynamicFunction || isValidStyle) {
+                    return [key, value]
+                }
+
+                return [
+                    key,
+                    getValueForBreakpoint<B>(
+                        value as Record<keyof B & string, string | number | undefined>,
+                        breakpoint,
+                        screenSize,
+                        breakpoints
+                    )
+                ]
+            })
+        )
+}