react-native-unistyles 2.0.0-alpha.1 → 2.0.0-alpha.10

package/src/types/unistyles.ts

@@ -0,0 +1,45 @@
+import { CxxUnistylesEventTypes, ScreenOrientation } from '../common'
+import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
+import type { ScreenSize } from './core'
+import type { Optional } from './common'
+
+export type ColorSchemeName = Optional<'light' | 'dark'>
+
+export type UnistylesConfig = {
+    adaptiveThemes?: boolean
+}
+
+export type UnistylesBridge = {
+    // getters
+    screenWidth: number,
+    screenHeight: number,
+    hasAdaptiveThemes: boolean,
+    themeName: keyof UnistylesThemes,
+    breakpoint: keyof UnistylesBreakpoints,
+    colorScheme: ColorSchemeName,
+    sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>,
+
+    // setters
+    themes: Array<keyof UnistylesThemes>,
+    useBreakpoints(breakpoints: UnistylesBreakpoints): void,
+    useTheme(name: keyof UnistylesThemes): void,
+    useAdaptiveThemes(enable: boolean): void
+}
+
+export type UnistylesThemeEvent = {
+    type: CxxUnistylesEventTypes.Theme,
+    payload: {
+        themeName: keyof UnistylesThemes
+    }
+}
+
+export type UnistylesMobileLayoutEvent = {
+    type: CxxUnistylesEventTypes.Layout,
+    payload: {
+        screen: ScreenSize,
+        breakpoint: keyof UnistylesBreakpoints,
+        orientation: ScreenOrientation
+    }
+}
+
+export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent

package/src/useStyles.ts

@@ -0,0 +1,56 @@
+import { useMemo } from 'react'
+import { StyleSheet } from 'react-native'
+import { parseStyle, proxifyFunction } from './utils'
+import type { CreateStylesFactory, CustomNamedStyles, ReactNativeStyleSheet, UnistylesTheme } from './types'
+import { useUnistyles } from './hooks'
+import type { UnistylesBreakpoints } from './global'
+
+type ParsedStylesheet<ST extends CustomNamedStyles<ST>> = {
+    theme: UnistylesTheme,
+    breakpoint: keyof UnistylesBreakpoints,
+    styles: ReactNativeStyleSheet<ST>
+}
+
+export const useStyles = <ST extends CustomNamedStyles<ST>>(
+    stylesheet?: ST | CreateStylesFactory<ST, UnistylesTheme>,
+    variant?: string
+): ParsedStylesheet<ST> => {
+    const { theme, layout } = useUnistyles()
+    const { screenSize, breakpoint } = layout
+
+    if (!stylesheet) {
+        return {
+            theme,
+            breakpoint,
+            styles: {} as ReactNativeStyleSheet<ST>
+        }
+    }
+
+    const parsedStyles = useMemo(() => typeof stylesheet === 'function'
+        ? stylesheet(theme)
+        : stylesheet, [theme, stylesheet])
+
+    const dynamicStyleSheet = useMemo(() => Object
+        .entries(parsedStyles)
+        .reduce((acc, [key, value]) => {
+            const style = value as CustomNamedStyles<ST>
+
+            if (typeof value === 'function') {
+                return {
+                    ...acc,
+                    [key]: proxifyFunction(value, breakpoint, screenSize, variant)
+                }
+            }
+
+            return StyleSheet.create({
+                ...acc,
+                [key]: parseStyle<ST>(style, breakpoint, screenSize, variant)
+            })
+        }, {} as ST), [breakpoint, screenSize, parsedStyles, variant]) as ReactNativeStyleSheet<ST>
+
+    return {
+        theme,
+        breakpoint,
+        styles: dynamicStyleSheet
+    }
+}

package/src/utils/breakpoints.ts

@@ -1,37 +1,22 @@
-import { throwError } from './common'
-import type { Breakpoints, ScreenSize, SortedBreakpointEntries } from '../types'
-import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
-
-/**
- * Sorts the breakpoints object based on its numeric values in ascending order and validates them.
- *
- * This function takes an object where keys represent breakpoint names and values are numeric.
- * It returns a new object with the same keys but sorted based on their corresponding numeric values.
- * Additionally, it validates that:
- * 1. The first breakpoint starts with a value of 0.
- * 2. No duplicate breakpoint values exist.
- *
- * If the validation fails, appropriate error messages are logged to the console.
- *
- * @template B - An object type where keys are strings and values are numbers.
- * @param {B} breakpoints - The breakpoints object to be sorted and validated.
- * @returns {B} A new object with sorted and validated breakpoints.
- *
- * @example
- * const input = { md: 768, lg: 1024, sm: 0 }
- * sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
- */
-export const sortAndValidateBreakpoints = <B extends Breakpoints>(breakpoints: B): B => {
+import { unistyles } from '../core'
+import { isMobile, Orientation, throwError } from './common'
+import type { NestedStyle, NestedStylePairs, RNValue } from '../types'
+import type { UnistylesBreakpoints } from '../global'
+import { ScreenOrientation } from '../common'
+import { getKeyForUnistylesMediaQuery } from './mqParser'
+import { getKeyForVariant } from './variants'
+
+export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): UnistylesBreakpoints => {
     const sortedPairs = Object
         .entries(breakpoints)
         .sort((breakpoint1, breakpoint2) => {
             const [, value1] = breakpoint1
             const [, value2] = breakpoint2
 
-            return value1 - value2
+            return (value1 as number) - (value2 as number)
         })
 
-    const sortedBreakpoints =  Object.freeze(Object.fromEntries(sortedPairs)) as B
+    const sortedBreakpoints =  Object.freeze(Object.fromEntries(sortedPairs)) as UnistylesBreakpoints
     const breakpointValues = Object.values(sortedBreakpoints)
     const [firstBreakpoint] = breakpointValues
 
@@ -46,25 +31,10 @@ export const sortAndValidateBreakpoints = <B extends Breakpoints>(breakpoints: B
     return sortedBreakpoints
 }
 
-/**
- * Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
- *
- * This function takes a screen width and an object of breakpoints. It returns the key of the breakpoint
- * that the screen width falls into. The breakpoints are assumed to be sorted in ascending order.
- *
- * @template B - An object type where keys are strings and values are numbers representing screen widths.
- * @param {number} width - The screen width to determine the breakpoint for.
- * @param breakpointEntries - sorted pairs of breakpoints
- * @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
- *
- * @example
- * const breakpoints = { sm: 0, md: 768, lg: 1024 }
- * getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
- */
-export const getBreakpointFromScreenWidth = <B extends Breakpoints>(width: number, breakpointEntries: SortedBreakpointEntries<B>): keyof B & string => {
+export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>): keyof UnistylesBreakpoints & string => {
     const [key] = breakpointEntries
         .find(([, value], index, otherBreakpoints) => {
-            const minVal = value
+            const minVal = value as number
             const maxVal = otherBreakpoints[index + 1]?.[1]
 
             if (!maxVal) {
@@ -72,69 +42,68 @@ export const getBreakpointFromScreenWidth = <B extends Breakpoints>(width: numbe
             }
 
             return width >= minVal && width < maxVal
-        }) as [keyof B & string, number]
+        }) as [keyof UnistylesBreakpoints & string, number]
 
     return key
 }
 
-/**
- * Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
- *
- * The function first checks for custom media queries. If a matching custom media query is found, its associated value is returned.
- * If no custom media query matches, the function then checks for a direct breakpoint match.
- * If there's no direct breakpoint match, the function simulates CSS cascading to find the closest matching breakpoint.
- *
- * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
- *
- * @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
- * @param {keyof B & string} breakpoint - The breakpoint name to check against.
- * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
- * @param breakpointPairs - sorted pairs of breakpoints
- *
- * @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
- *
- * @example
- *
- * const values = { ':w[200]': 'value1', sm: 'value2', md: 'value3' }
- * const screenSize = { width: 250, height: 400 }
- * const breakpoints = { sm: 300, md: 600, lg: 900 }
- *
- * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
- */
-export const getValueForBreakpoint = <B extends Breakpoints>(
-    value: Record<keyof B & string, string | number | undefined>,
-    breakpoint: keyof B & string,
-    screenSize: ScreenSize,
-    breakpointPairs: SortedBreakpointEntries<B>
-): string | number | undefined => {
-    // the highest priority is for custom media queries
-    const customMediaQueries = Object
-        .entries(value)
-        .filter(([key]) => isMediaQuery(key))
-    const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize)
-
-    if (customMediaQueryKey && customMediaQueryKey in value) {
+// todo move it to different file
+export const getValueForNestedStyle = (value: NestedStyle, variant?: string): RNValue => {
+    // the highest priority is for variants
+    const variantKey = getKeyForVariant(value, variant)
+
+    if (variantKey) {
+        return value.variants[variantKey as string]
+    }
+
+    // then custom media queries
+    const customMediaQueryKey = getKeyForUnistylesMediaQuery(
+        Object.entries(value) as NestedStylePairs,
+        unistyles.runtime.screen
+    ) as keyof typeof value
+
+    if (customMediaQueryKey) {
         return value[customMediaQueryKey]
     }
 
-    // if no custom media query, or didn't match, proceed with defined breakpoints
-    const unifiedKey = breakpoint.toLowerCase()
-    const directBreakpoint = value[unifiedKey]
+    // at this point user didn't use custom media queries (:w, :h)
+    // check if user defined any breakpoints
+    const hasBreakpoints = unistyles.runtime.sortedBreakpoints.length > 0
+
+    // if not then we can fall back to horizontal and portrait (mobile only)
+    if (!hasBreakpoints && isMobile && (Orientation.Landscape in value || Orientation.Portrait in value)) {
+        return value[
+            unistyles.runtime.orientation === ScreenOrientation.Portrait
+                ? Orientation.Portrait
+                : Orientation.Landscape
+        ]
+    }
+
+    // let's get the current breakpoint
+    const breakpoint = unistyles.runtime.breakpoint
+
+    if (!breakpoint) {
+        return undefined
+    }
+
+    // if user defined breakpoints, then we look for the valid one
+    const directBreakpoint = value[breakpoint]
 
     // if there is a direct key like 'sm' or 'md', or value for this key exists but its undefined
-    if (directBreakpoint || (unifiedKey in value)) {
+    if (directBreakpoint || (breakpoint in value)) {
         return directBreakpoint
     }
 
-    // there is no direct hit for breakpoint nor media-query, so let's simulate CSS cascading
+    // there is no direct hit for breakpoint nor media-query, let's simulate CSS cascading
+    const breakpointPairs = unistyles.runtime.sortedBreakpoints
     const currentBreakpoint = breakpointPairs
-        .findIndex(([key]) => key === unifiedKey)
+        .findIndex(([key]) => key === breakpoint)
 
     const availableBreakpoints = breakpointPairs
         .filter(([key], index) => index < currentBreakpoint && key && key in value)
         .map(([key]) => key)
 
     return breakpointPairs.length > 0
-        ? value[availableBreakpoints[availableBreakpoints.length - 1] as keyof B & string]
+        ? value[availableBreakpoints[availableBreakpoints.length - 1] as keyof UnistylesBreakpoints & string]
         : undefined
 }

package/src/utils/common.ts

@@ -8,4 +8,13 @@ export const warn = (message: string) => {
     console.warn(`🦄 [react-native-unistyles]: ${message}`)
 }
 
-export const isWeb = () => Platform.OS === 'web'
+export const isMobile = Platform.OS === 'android' || Platform.OS === 'ios'
+export const isWeb = Platform.OS === 'web'
+export const isIOS = Platform.OS === 'ios'
+export const isAndroid = Platform.OS === 'android'
+export const isServer = typeof window === 'undefined'
+
+export const Orientation = {
+    Landscape: 'landscape',
+    Portrait: 'portrait'
+} as const

package/src/utils/index.ts

@@ -1,11 +1,8 @@
 export { normalizeStyles } from './normalizeStyles'
-export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints'
+export * from './normalizer'
+export { mq, MQSymbol } from './mq'
+export { getKeyForVariant } from './variants'
+export { getKeyForUnistylesMediaQuery } from './mqParser'
+export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForNestedStyle } from './breakpoints'
 export { proxifyFunction, parseStyle } from './styles'
-export {
-    extractValues,
-    getKeyForCustomMediaQuery,
-    isMediaQuery,
-    isWithinTheHeight,
-    isWithinTheWidth,
-    isWithinTheWidthAndHeight
-} from './mediaQueries'
+export { isServer, Orientation } from './common'

package/src/utils/module.d.ts

@@ -0,0 +1,3 @@
+declare module '@react-native/normalize-colors' {
+    export default function normalizeColor(color: string): number | null
+}

package/src/utils/mq.ts

@@ -0,0 +1,106 @@
+import type { MediaQuery, Nullable } from '../types'
+import type { UnistylesBreakpoints } from '../global'
+import { unistyles } from '../core'
+
+export const MQSymbol = Symbol('unistyles-mq')
+
+type MQValue = keyof UnistylesBreakpoints | number
+
+type MQHandler = {
+    w(wMin?: Nullable<MQValue>, wMax?: MQValue): WidthHandler,
+    width(wMin?: Nullable<MQValue>, wMax?: MQValue): WidthHandler,
+    h(hMin?: Nullable<MQValue>, hMax?: MQValue): HeightHandler,
+    height(hMin?: Nullable<MQValue>, hMax?: MQValue): HeightHandler
+}
+
+type HeightHandler = {
+    w(wMin?: Nullable<MQValue>, wMax?: MQValue): MediaQuery,
+    width(wMin?: Nullable<MQValue>, wMax?: MQValue): MediaQuery
+} & MediaQuery
+
+type WidthHandler = {
+    h(hMin?: Nullable<MQValue>, hMax?: MQValue): MediaQuery,
+    height(hMin?: Nullable<MQValue>, hMax?: MQValue): MediaQuery
+} & MediaQuery
+
+type FinalHandler = {
+    [MQSymbol]: true
+}
+
+enum MQProp {
+    toString = 'toString',
+    width = 'width',
+    height = 'height',
+    shortW = 'w',
+    shortH = 'h'
+}
+
+const getMQValue = (value: Nullable<MQValue>) => {
+    if (typeof value === 'number') {
+        return value
+    }
+
+    if (value === null) {
+        return 0
+    }
+
+    return unistyles.registry.breakpoints[value] ?? 0
+}
+
+const widthHandler = (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) => new Proxy<HeightHandler>({} as HeightHandler, {
+    get: (target, prop, receiver) => {
+        if (prop === Symbol.toPrimitive || prop === MQProp.toString) {
+            return () => `:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]`
+        }
+
+        if (prop === MQProp.width || prop === MQProp.shortW) {
+            return (wMin: MQValue = 0, wMax: MQValue = Infinity) => new Proxy<FinalHandler>({} as FinalHandler, {
+                get: (target, prop, receiver) => {
+                    if (prop === Symbol.toPrimitive || prop === MQProp.toString) {
+                        return () => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]`
+                    }
+
+                    return Reflect.get(target, prop, receiver)
+                }
+            })
+        }
+
+        return Reflect.get(target, prop, receiver)
+    }
+})
+
+const heightHandler = (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => new Proxy({} as WidthHandler, {
+    get: (target, prop, receiver) => {
+        if (prop === Symbol.toPrimitive || prop === MQProp.toString) {
+            return () => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]`
+        }
+
+        if (prop === MQProp.height || prop === MQProp.shortH) {
+            return (hMin: MQValue = 0, hMax: MQValue = Infinity) => new Proxy<FinalHandler>({} as FinalHandler, {
+                get: (target, prop, receiver) => {
+                    if (prop === Symbol.toPrimitive || MQProp.toString) {
+                        return () => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]`
+                    }
+
+                    return Reflect.get(target, prop, receiver)
+                }
+            })
+        }
+
+        return Reflect.get(target, prop, receiver)
+    }
+})
+
+export const mq = new Proxy({} as MQHandler, {
+    get: (target, prop, receiver) => {
+        if (prop === MQProp.shortW || prop === MQProp.width) {
+            return heightHandler
+        }
+
+        if (prop === MQProp.shortH || prop === MQProp.height) {
+            return widthHandler
+        }
+
+        return Reflect.get(target, prop, receiver)
+    }
+})

package/src/utils/mqParser.ts

@@ -0,0 +1,99 @@
+import type { NestedStylePairs, Optional, ScreenSize } from '../types'
+
+const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/
+const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/
+const UNISTYLES_HEIGHT_REGEX = /:(h)\[(\d+)(?:,\s*(\d+|Infinity))?]/
+
+type ParsedMqDimension = {
+    from: number,
+    to: number
+}
+
+type UnistylesParsedMq = {
+    width?: ParsedMqDimension,
+    height?: ParsedMqDimension
+}
+
+const parseMq = (mq: string): UnistylesParsedMq => {
+    const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
+    const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
+
+    return {
+        width: width ? {
+            from: Number(fromW),
+            to: Number(toW)
+        } : undefined,
+        height: height ? {
+            from: Number(fromH),
+            to: Number(toH)
+        } : undefined
+    }
+}
+
+const isUnistylesMq = (mq: string) => IS_UNISTYLES_REGEX.test(mq)
+
+const isValidMq = (parsedMq: UnistylesParsedMq) => {
+    const { width, height } = parsedMq
+
+    if (width && height) {
+        return width.from <= width.to && height.from <= height.to
+    }
+
+    if (width) {
+        return width.from <= width.to
+    }
+
+    if (height) {
+        return height.from <= height.to
+    }
+
+    return false
+}
+
+const isWithinTheWidthAndHeight = (parsedMq: UnistylesParsedMq, screenSize: ScreenSize): boolean => {
+    const { width, height } = parsedMq
+
+    if (width && height) {
+        return isWithinTheWidth(width, screenSize.width) && isWithinTheHeight(height, screenSize.height)
+    }
+
+    if (width) {
+        return isWithinTheWidth(width, screenSize.width)
+    }
+
+    if (height) {
+        return isWithinTheHeight(height, screenSize.height)
+    }
+
+    return false
+}
+
+const isWithinTheWidth = (width: UnistylesParsedMq['width'], screenWidth: number): boolean => {
+    const { from, to } = width as ParsedMqDimension
+
+    return screenWidth >= from && screenWidth <= to
+}
+
+const isWithinTheHeight = (height: UnistylesParsedMq['height'], screenHeight: number): boolean => {
+    const { from, to } = height as ParsedMqDimension
+
+    return screenHeight >= from && screenHeight <= to
+}
+
+export const getKeyForUnistylesMediaQuery = (mediaQueries: NestedStylePairs, screenSize: ScreenSize) => {
+    const mq = mediaQueries.find(([key]) => {
+        if (!isUnistylesMq(key as string)) {
+            return false
+        }
+
+        const parsedMq = parseMq(key as string)
+
+        if (!isValidMq(parsedMq)) {
+            return false
+        }
+
+        return isWithinTheWidthAndHeight(parsedMq, screenSize)
+    })
+
+    return mq?.at(0) as Optional<string>
+}

package/src/utils/normalizeStyles.web.ts

@@ -1,29 +1,8 @@
 import { warn } from './common'
+import { preprocessor } from './normalizer'
+import type { NormalizedBoxShadow, NormalizedTextShadow, BoxShadow, TextShadow, Transforms } from '../types'
 
-const preprocessor: Preprocessor = require('react-native-web/src/exports/StyleSheet/preprocess.js')
-
-type Preprocessor = {
-    createTextShadowValue<T>(styles: any): T,
-    createBoxShadowValue<T>(styles: any): T,
-    createTransformValue<T>(transforms: any): T,
-}
-
-type NormalizedBoxShadow = {
-    shadowColor: undefined,
-    shadowOffset: undefined,
-    shadowOpacity: undefined,
-    shadowRadius: undefined,
-    boxShadow?: string
-}
-
-type NormalizedTextShadow = {
-    textShadowColor: undefined
-    textShadowOffset: undefined
-    textShadowRadius: undefined,
-    textShadow?: string
-}
-
-const normalizeBoxShadow = <T extends {}>(styles: T): NormalizedBoxShadow => {
+const normalizeBoxShadow = <T extends BoxShadow>(style: T): NormalizedBoxShadow => {
     const requiredBoxShadowProperties = [
         'shadowColor',
         'shadowOffset',
@@ -31,7 +10,7 @@ const normalizeBoxShadow = <T extends {}>(styles: T): NormalizedBoxShadow => {
         'shadowRadius'
     ]
 
-    if (!requiredBoxShadowProperties.every(prop => prop in styles)) {
+    if (!requiredBoxShadowProperties.every(prop => prop in style)) {
         warn(`can't apply box shadow as you miss at least one of these properties: ${requiredBoxShadowProperties.join(', ')}`)
 
         return {
@@ -43,7 +22,7 @@ const normalizeBoxShadow = <T extends {}>(styles: T): NormalizedBoxShadow => {
     }
 
     return {
-        boxShadow: preprocessor.createBoxShadowValue(styles),
+        boxShadow: preprocessor.createBoxShadowValue(style),
         shadowColor: undefined,
         shadowOffset: undefined,
         shadowOpacity: undefined,
@@ -51,14 +30,14 @@ const normalizeBoxShadow = <T extends {}>(styles: T): NormalizedBoxShadow => {
     }
 }
 
-const normalizeTextShadow = <T extends {}>(styles: T): NormalizedTextShadow => {
+const normalizeTextShadow = <T extends TextShadow>(style: T): NormalizedTextShadow => {
     const requiredTextShadowProperties = [
         'textShadowColor',
         'textShadowOffset',
         'textShadowRadius'
     ]
 
-    if (!requiredTextShadowProperties.every(prop => prop in styles)) {
+    if (!requiredTextShadowProperties.every(prop => prop in style)) {
         warn(`can't apply text shadow as you miss at least one of these properties: ${requiredTextShadowProperties.join(', ')}`)
 
         return {
@@ -69,33 +48,33 @@ const normalizeTextShadow = <T extends {}>(styles: T): NormalizedTextShadow => {
     }
 
     return {
-        textShadow: preprocessor.createTextShadowValue(styles),
+        textShadow: preprocessor.createTextShadowValue(style),
         textShadowColor: undefined,
         textShadowOffset: undefined,
         textShadowRadius: undefined
     }
 }
 
-export const normalizeStyles = <T extends {}>(styles: T): T => {
-    const normalizedTransform = ('transform' in styles && Array.isArray(styles.transform))
-        ? { transform: preprocessor.createTransformValue(styles.transform) }
+export const normalizeStyles = <T extends BoxShadow | TextShadow | { transform: Transforms }>(style: T): T => {
+    const normalizedTransform = ('transform' in style && Array.isArray(style.transform))
+        ? { transform: preprocessor.createTransformValue(style.transform) }
         : {}
 
     const normalizedBoxShadow = (
-        'shadowColor' in styles ||
-        'shadowOffset' in styles ||
-        'shadowOpacity' in styles ||
-        'shadowRadius' in styles
-    ) ? normalizeBoxShadow(styles) : {}
+        'shadowColor' in style ||
+        'shadowOffset' in style ||
+        'shadowOpacity' in style ||
+        'shadowRadius' in style
+    ) ? normalizeBoxShadow(style as BoxShadow) : {}
 
     const normalizedTextShadow = (
-        'textShadowColor' in styles ||
-        'textShadowOffset' in styles ||
-        'textShadowRadius' in styles
-    ) ? normalizeTextShadow(styles) : {}
+        'textShadowColor' in style ||
+        'textShadowOffset' in style ||
+        'textShadowRadius' in style
+    ) ? normalizeTextShadow(style as TextShadow) : {}
 
     return {
-        ...styles,
+        ...style,
         ...normalizedTransform,
         ...normalizedBoxShadow,
         ...normalizedTextShadow