react-native-unistyles 2.0.0-alpha.14 → 2.0.0-alpha.16

package/src/hooks/useVariants.ts

@@ -0,0 +1,23 @@
+import { useRef } from 'react'
+import type { Optional } from '../types'
+
+const compareVariants = (prevVariants?: Record<string, Optional<string>>, nextVariants?: Record<string, Optional<string>>) => {
+    const keysA = Object.keys(prevVariants ?? {})
+    const keysB = Object.keys(nextVariants ?? {})
+
+    if (keysA.length !== keysB.length) {
+        return false
+    }
+
+    return keysA.every(key => prevVariants![key] === (nextVariants ?? {})[key])
+}
+
+export const useVariants = (variantsMap?: Record<string, Optional<string>>) => {
+    const variantsRef = useRef<Optional<Record<string, Optional<string>>>>(variantsMap)
+
+    if (!compareVariants(variantsRef.current, variantsMap)) {
+        variantsRef.current = variantsMap
+    }
+
+    return variantsRef.current
+}

package/src/plugins/normalizer/normalizer.ts

@@ -1,7 +1,7 @@
 // based on react-native-web normalizer
 // https://github.com/necolas/react-native-web
 import normalizeColors from '@react-native/normalize-colors'
-import type { TextShadow, Transforms, BoxShadow } from '../../types'
+import type { TextShadow, Transforms, BoxShadow, Nullable } from '../../types'
 
 type Preprocessor = {
     createTextShadowValue(style: TextShadow): string,
@@ -15,9 +15,9 @@ export const normalizeColor = (color: string, opacity: number = 1) => {
         return color
     }
 
-    const integer = normalizeColors(color) as number | null
+    const integer = normalizeColors(color) as Nullable<number>
 
-    // If the colour is an unknown format, the return value is null
+    // If the color is an unknown format, the return value is null
     if (integer === null) {
         return color
     }

package/src/types/breakpoints.ts

@@ -1,34 +1,58 @@
-import type { OpaqueColorValue } from 'react-native'
-import type { UnistylesBreakpoints } from '../global'
-import type { MediaQuery } from './mq'
+import type { ColorValue, OpaqueColorValue } from 'react-native'
+import type { UnistylesTheme } from '../types'
+import type { BreakpointsOrMediaQueries, ToDeepUnistyles } from './stylesheet'
+import type { TransformStyles } from './core'
 
-type WithEmptyObject<V> = keyof V extends never ? {} : V
+type ExtractTransformArray<T> = T extends object
+    ? { [K in keyof T]: ExtractBreakpoints<T[K]> }
+    : never
 
-type ExtractBreakpoints<T> = T extends Partial<Record<keyof UnistylesBreakpoints & string, infer V>>
-    ? WithEmptyObject<V>
-    : T extends (...args: infer A) => infer R
-        ? (...args: A) => ExtractBreakpoints<R>
-        : {
-            [K in keyof T]: T[K] extends (...args: infer A) => infer R
-                ? (...args: A) => ExtractBreakpoints<R>
-                : T[K] extends object
-                    ? ExtractBreakpoints<T[K]>
+type ExtractBreakpoints<T> = T extends object
+    ? keyof T extends BreakpointsOrMediaQueries
+        ? T[keyof T]
+        : T extends Array<ToDeepUnistyles<TransformStyles>>
+            ? Array<ExtractTransformArray<T[number]>>
+            : {
+                [K in keyof T]: ExtractBreakpoints<T[K]>
+            }
+    : T
+
+type ParseNestedObject<T> = T extends (...args: infer A) => infer R
+    ? (...args: A) => ParseNestedObject<R>
+    : T extends object
+        ? T extends { variants: infer R }
+            ? ParseVariants<FlattenVariants<R>> & ParseNestedObject<Omit<T, 'variants'>>
+            : {
+                [K in keyof T]: T[K] extends object
+                    ? T[K] extends OpaqueColorValue
+                        ? ColorValue
+                        : ExtractBreakpoints<T[K]>
                     : T[K]
-        }
+            }
+        : T
 
-type UnionToIntersection<U> =
-    (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never
+type FlattenVariants<T> = T extends object
+    ? {
+        [K in keyof T]: T[K] extends object
+            ? {
+                [key in keyof T[K]]: T[K][key] extends object
+                    ? ParseNestedObject<T[K][key]>
+                    : never
+            }
+            : never
+    }
+    : never
 
-type RemoveKeysWithPrefix<T> = T extends (...args: Array<any>) => infer R
-    ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R>
-    : T extends object
-        ? T extends OpaqueColorValue
-            ? string
-            : T extends Record<string, infer _V>
-                ? T extends { variants: infer _V }
-                    ? Omit<T, 'variants'> & UnionToIntersection<_V[keyof _V]>
-                    : { [K in keyof T as K extends MediaQuery ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
-                : { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
+type ParseVariants<T> = T extends object
+    ? T[keyof T] extends object
+        ? ParseVariants<T[keyof T]>
         : T
+    : T
+
+type ParseStyleKeys<T> = T extends object
+    ? { [K in keyof T]: ParseNestedObject<T[K]> }
+    : never
 
-export type ReactNativeStyleSheet<T> = ExtractBreakpoints<RemoveKeysWithPrefix<T>>
+export type ReactNativeStyleSheet<T> = T extends (theme: UnistylesTheme) => infer R
+    ? ParseStyleKeys<R>
+    : ParseStyleKeys<T>

package/src/types/core.ts

@@ -15,19 +15,13 @@ import type {
 } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
-import type { MediaQuery } from './mq'
 
-type ShadowOffset = {
+export type ShadowOffset = {
     width: number,
     height: number
 }
 
-export type ScreenSize = {
-    width: number,
-    height: number
-}
-
-type TransformStyles =
+export type TransformStyles =
     & PerpectiveTransform
     & RotateTransform
     & RotateXTransform
@@ -42,45 +36,14 @@ type TransformStyles =
     & SkewYTransform
     & MatrixTransform
 
-type UnistyleNested = {
-    shadowOffset?: DeepUniStyle<ShadowOffset>,
-    textShadowOffset?: DeepUniStyle<ShadowOffset>,
-    transform?: Array<DeepUniStyle<TransformStyles>>,
-    variants?: Record<string, UnistyleView | UnistyleText | UnistyleImage & Omit<UnistyleNested, 'variants'>>
-}
-
-type UniStyle<V> = {
-    [innerKey in keyof UnistylesBreakpoints]?: V
-} | {
-    [innerKey in MediaQuery]: V
-}
-
-type DeepUniStyle<T> = {
-    [K in keyof T]?: UniStyle<T[K]> | T[K]
-}
-
-// these props are treated differently to nest breakpoints and media queries
-type NestedTypes = 'shadowOffset' | 'transform' | 'textShadowOffset'
-
-type UnistyleView = DeepUniStyle<Omit<ViewStyle, NestedTypes>>
-type UnistyleText = DeepUniStyle<Omit<TextStyle, NestedTypes>>
-type UnistyleImage = DeepUniStyle<Omit<ImageStyle, NestedTypes>>
-
-export type StaticStyles =
-    | UnistyleView
-    | UnistyleText
-    | UnistyleImage
-    & UnistyleNested
-
-export type CustomNamedStyles<T> = {
-    [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles
-        ? (...args: A) => StaticStyles
-        : StaticStyles
+export type ScreenSize = {
+    width: number,
+    height: number
 }
 
 export type RNStyle = ViewStyle | TextStyle | ImageStyle
 export type RNValue = number | string | undefined
-export type NestedStyle = Record<keyof UnistylesBreakpoints | MediaQuery, RNValue>
-export type NestedStylePairs = Array<[keyof UnistylesBreakpoints | MediaQuery, RNValue]>
+export type NestedStyle = Record<keyof UnistylesBreakpoints | symbol, RNValue>
+export type NestedStylePairs = Array<[keyof UnistylesBreakpoints | symbol, RNValue]>
 export type UnistylesTheme = UnistylesThemes[keyof UnistylesThemes]
-export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST
+export type CreateStylesFactory<ST> = (theme: UnistylesTheme) => ST

package/src/types/index.ts

@@ -1,9 +1,7 @@
 export * from './normalizer'
 export * from './unistyles'
 export type { Optional, Nullable } from './common'
-export type { MediaQuery } from './mq'
 export type {
-    CustomNamedStyles,
     NestedStylePairs,
     UnistylesTheme,
     CreateStylesFactory,
@@ -12,6 +10,7 @@ export type {
     RNValue,
     RNStyle
 } from './core'
+export type { StyleSheetWithSuperPowers, StyleSheet } from './stylesheet'
 export type { ReactNativeStyleSheet } from './breakpoints'
 export type { ExtractVariantNames } from './variants'
 export type { UnistylesPlugin } from './plugin'

package/src/types/stylesheet.ts

@@ -0,0 +1,49 @@
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
+import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
+import type { UnistylesBreakpoints } from '../global'
+
+// these props are treated differently to nest breakpoints and media queries
+type NestedTypes = 'shadowOffset' | 'transform' | 'textShadowOffset'
+
+type UnistyleView = Omit<ViewStyle, NestedTypes>
+type UnistyleText = Omit<TextStyle, NestedTypes>
+type UnistyleImage = Omit<ImageStyle, NestedTypes>
+
+type UnistyleNestedStyles = {
+    shadowOffset?: ToDeepUnistyles<ShadowOffset>,
+    textShadowOffset?: ToDeepUnistyles<ShadowOffset>,
+    transform?: Array<ToDeepUnistyles<TransformStyles>>
+}
+
+type Variants = {
+    variants?: {
+        [variantName: string]: {
+            [variant: string]: Omit<UnistylesValues, 'variants'>
+        }
+    }
+}
+
+export type ToDeepUnistyles<T> = {
+    [K in keyof T]?: T[K] | {
+        [key in BreakpointsOrMediaQueries]?: T[K]
+    }
+}
+
+type AllAvailableStyles = UnistyleView & UnistyleText & UnistyleImage & UnistyleNestedStyles
+
+export type AllAvailableKeys = keyof (UnistyleView & UnistyleText & UnistyleImage)
+export type BreakpointsOrMediaQueries = keyof UnistylesBreakpoints | symbol
+
+export type UnistylesValues = {
+    [propName in AllAvailableKeys]?: AllAvailableStyles[propName] | {
+        [key in BreakpointsOrMediaQueries]?: AllAvailableStyles[propName]
+    }
+} & Variants & {
+    [propName in NestedTypes]?: UnistyleNestedStyles[propName]
+}
+
+export type StyleSheet = {
+    [styleName: string]: UnistylesValues | ((...args: any) => UnistylesValues)
+}
+
+export type StyleSheetWithSuperPowers = ((theme: UnistylesTheme) => StyleSheet) | StyleSheet

package/src/types/unistyles.ts

@@ -1,10 +1,9 @@
-import { CxxUnistylesEventTypes, ScreenOrientation } from '../common'
+import { UnistylesEventType, ScreenOrientation } from '../common'
 import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
 import type { ScreenSize } from './core'
-import type { Optional } from './common'
 import type { UnistylesPlugin } from './plugin'
 
-export type ColorSchemeName = Optional<'light' | 'dark'>
+export type ColorSchemeName = 'light' | 'dark' | 'unspecified'
 
 export type UnistylesConfig = {
     adaptiveThemes?: boolean,
@@ -33,14 +32,14 @@ export type UnistylesBridge = {
 }
 
 export type UnistylesThemeEvent = {
-    type: CxxUnistylesEventTypes.Theme,
+    type: UnistylesEventType.Theme,
     payload: {
         themeName: keyof UnistylesThemes
     }
 }
 
 export type UnistylesMobileLayoutEvent = {
-    type: CxxUnistylesEventTypes.Layout,
+    type: UnistylesEventType.Layout,
     payload: {
         screen: ScreenSize,
         breakpoint: keyof UnistylesBreakpoints,
@@ -49,7 +48,7 @@ export type UnistylesMobileLayoutEvent = {
 }
 
 export type UnistylesPluginEvent = {
-    type: CxxUnistylesEventTypes.Plugin
+    type: UnistylesEventType.Plugin
 }
 
 export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent | UnistylesPluginEvent

package/src/types/variants.ts

@@ -1,11 +1,19 @@
-export type ExtractVariantNames<T> = T extends object
-    ? {
-        [K in keyof T]: T[K] extends { variants: infer V }
-            ? V extends object
-                ?  { [VK in keyof V]: VK extends 'default'
-                    ? never : VK }[keyof V] | ExtractVariantNames<V>
-                : never
-            : ExtractVariantNames<T[K]>
-    }[keyof T]
+export type ExtractVariantNames<T> = T extends (...args: any) => infer R
+    ? ExtractVariantKeys<R>
+    : ExtractVariantKeys<T>
+
+type ExtractVariantKeys<T> = T extends object
+    ? ExtractVariant<T[keyof T]>
+    : never
+
+type ExtractSubVariantKeys<T> = T extends object
+    ? keyof Omit<T, 'default'> | undefined
     : never
 
+type ExtractVariant<T> = T extends (...args: any) => infer R
+    ? R extends { variants: infer V }
+        ? { [key in keyof V]?: ExtractSubVariantKeys<V[key]> }
+        : never
+    : T extends { variants: infer V }
+        ? { [key in keyof V]?: ExtractSubVariantKeys<V[key]> }
+        : never

package/src/useStyles.ts

@@ -1,26 +1,25 @@
 import { useMemo } from 'react'
 import { StyleSheet } from 'react-native'
 import { parseStyle, proxifyFunction } from './utils'
+import { useUnistyles, useVariants } from './hooks'
+import type { UnistylesBreakpoints } from './global'
+import { unistyles } from './core'
 import type {
-    CreateStylesFactory,
-    CustomNamedStyles,
     ExtractVariantNames,
     ReactNativeStyleSheet,
+    StyleSheetWithSuperPowers,
     UnistylesTheme
 } from './types'
-import { useUnistyles } from './hooks'
-import type { UnistylesBreakpoints } from './global'
-import { unistyles } from './core'
 
-type ParsedStylesheet<ST extends CustomNamedStyles<ST>> = {
+type ParsedStylesheet<ST extends StyleSheetWithSuperPowers> = {
     theme: UnistylesTheme,
     breakpoint: keyof UnistylesBreakpoints,
     styles: ReactNativeStyleSheet<ST>
 }
 
-export const useStyles = <ST extends CustomNamedStyles<ST>>(
-    stylesheet?: ST | CreateStylesFactory<ST, UnistylesTheme>,
-    variant?: ExtractVariantNames<typeof stylesheet> & string
+export const useStyles = <ST extends StyleSheetWithSuperPowers>(
+    stylesheet?: ST,
+    variantsMap?: ExtractVariantNames<typeof stylesheet>
 ): ParsedStylesheet<ST> => {
     const { theme, layout, plugins } = useUnistyles()
 
@@ -32,6 +31,7 @@ export const useStyles = <ST extends CustomNamedStyles<ST>>(
         }
     }
 
+    const variants = useVariants(variantsMap)
     const parsedStyles = useMemo(() => typeof stylesheet === 'function'
         ? stylesheet(theme)
         : stylesheet, [theme, stylesheet, layout])
@@ -42,22 +42,22 @@ export const useStyles = <ST extends CustomNamedStyles<ST>>(
             if (typeof value === 'function') {
                 return {
                     ...acc,
-                    [key]: proxifyFunction(key, value,unistyles.registry.plugins, unistyles.runtime, variant)
+                    [key]: proxifyFunction(key, value,unistyles.registry.plugins, unistyles.runtime, variants)
                 }
             }
 
             return StyleSheet.create({
                 ...acc,
-                [key]: parseStyle<ST>(
+                [key]: parseStyle(
                     key,
-                    value as CustomNamedStyles<ST>,
+                    value,
                     unistyles.registry.plugins,
                     unistyles.runtime,
-                    variant
+                    variants
                 )
             })
-        }, {} as ST),
-    [layout, parsedStyles, variant, plugins]
+        }, {}),
+    [layout, parsedStyles, variants, plugins]
     ) as ReactNativeStyleSheet<ST>
 
     return {

package/src/utils/index.ts

@@ -1,4 +1,4 @@
-export { mq, MQSymbol } from './mq'
+export { mq } from './mq'
 export { getKeyForUnistylesMediaQuery, isWithinTheWidthAndHeight, isValidMq, parseMq } from './mqParser'
 export { getValueForBreakpoint } from './breakpoints'
 export { proxifyFunction, parseStyle } from './styles'

package/src/utils/mq.ts

@@ -1,38 +1,24 @@
-import type { MediaQuery, Nullable } from '../types'
+import type { 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'
+    only: {
+        width(wMin?: Nullable<MQValue>, wMax?: MQValue): symbol,
+        height(hMin?: Nullable<MQValue>, hMax?: MQValue): symbol,
+    },
+    width(wMin?: Nullable<MQValue>, wMax?: MQValue): {
+        and: {
+            height(hMin?: Nullable<MQValue>, hMax?: MQValue): symbol
+        }
+    },
+    height(hMin?: Nullable<MQValue>, hMax?: MQValue): {
+        and: {
+            width(wMin?: Nullable<MQValue>, wMax?: MQValue): symbol
+        }
+    }
 }
 
 const getMQValue = (value: Nullable<MQValue>) => {
@@ -47,60 +33,21 @@ const getMQValue = (value: Nullable<MQValue>) => {
     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 || 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)
-    }
-})
-
-export const mq = new Proxy({} as MQHandler, {
-    get: (target, prop, receiver) => {
-        if (prop === MQProp.shortW || prop === MQProp.width) {
-            return heightHandler
+export const mq: MQHandler = {
+    only: {
+        width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]` as unknown as symbol),
+        height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) => (`:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
+    },
+    width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => ({
+        and: {
+            height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) =>
+                (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
         }
-
-        if (prop === MQProp.shortH || prop === MQProp.height) {
-            return widthHandler
+    }),
+    height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) => ({
+        and: {
+            width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) =>
+                (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
         }
-
-        return Reflect.get(target, prop, receiver)
-    }
-})
+    })
+}

package/src/utils/styles.ts

@@ -1,8 +1,8 @@
-import type { CustomNamedStyles, NestedStyle, RNStyle, UnistylesPlugin } from '../types'
+import type { NestedStyle, UnistylesPlugin, StyleSheet, Optional } from '../types'
 import { getValueForBreakpoint } from './breakpoints'
 import type { UnistylesRuntime } from '../core'
 import { isAndroid, isIOS } from '../common'
-import { getStyleWithVariant } from './variants'
+import { getStyleWithVariants } from './variants'
 import { withPlugins } from '../plugins'
 
 export const proxifyFunction = (
@@ -10,7 +10,7 @@ export const proxifyFunction = (
     fn: Function,
     plugins: Array<UnistylesPlugin>,
     runtime: UnistylesRuntime,
-    variant?: string
+    variant?: Record<string, Optional<string>>
 ): Function => new Proxy(fn, {
     apply: (target, thisArg, argumentsList) =>
         parseStyle(key, target.apply(thisArg, argumentsList), plugins, runtime, variant)
@@ -24,41 +24,42 @@ export const isPlatformColor = <T extends {}>(value: T): boolean => {
     return isAndroid && 'resource_paths' in value && typeof value.resource_paths === 'object'
 }
 
-export const parseStyle = <T extends RNStyle>(
+export const parseStyle = <T extends StyleSheet>(
     key: string,
-    style: CustomNamedStyles<T>,
+    style: T,
     plugins: Array<UnistylesPlugin>,
     runtime: UnistylesRuntime,
-    variant?: string
+    variant?: Record<string, Optional<string>>
 ): T => {
     const entries = Object
-        .entries(getStyleWithVariant(style || {}, variant)) as Array<[keyof T, CustomNamedStyles<T> | NestedStyle]>
+        .entries(getStyleWithVariants(style || {}, variant)) as Array<[keyof T, StyleSheet]>
 
     const parsedStyles = Object
         .fromEntries(entries
             .map(([key, value]) => {
-                const hasNestedProperties = key === 'shadowOffset' || key === 'textShadowOffset'
+                // dynamic functions
+                if (typeof value === 'function') {
+                    return [key, value]
+                }
 
-                if (hasNestedProperties) {
+                // nested objects
+                if (key === 'shadowOffset' || key === 'textShadowOffset') {
                     return [
                         key,
-                        parseStyle(key, value as CustomNamedStyles<T>, plugins, runtime, variant)
+                        parseStyle(key, value, plugins, runtime, variant)
                     ]
                 }
 
-                const isTransform = key === 'transform'
-
-                if (isTransform && Array.isArray(value)) {
+                // transforms
+                if (key === 'transform' && Array.isArray(value)) {
                     return [
                         key,
                         value.map(value => parseStyle(key, value, plugins, runtime, variant))
                     ]
                 }
 
-                const isDynamicFunction = typeof value === 'function'
-                const isValidStyle = typeof value !== 'object' || isPlatformColor(value)
-
-                if (isDynamicFunction || isValidStyle) {
+                // values or platform colors
+                if (typeof value !== 'object' || isPlatformColor(value)) {
                     return [key, value]
                 }