react-native-unistyles 2.0.0-alpha.9 → 2.0.0-beta.2

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 NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset'
+
+type UnistyleView = Omit<ViewStyle, NestedKeys>
+type UnistyleText = Omit<TextStyle, NestedKeys>
+type UnistyleImage = Omit<ImageStyle, NestedKeys>
+
+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 NestedKeys]?: UnistyleNestedStyles[propName]
+}
+
+export type StyleSheet = {
+    [styleName: string]: UnistylesValues | ((...args: any) => UnistylesValues)
+}
+
+export type StyleSheetWithSuperPowers = ((theme: UnistylesTheme) => StyleSheet) | StyleSheet

package/src/types/unistyles.ts

@@ -1,18 +1,21 @@
-import { CxxUnistylesEventTypes, ScreenOrientation } from '../common'
+import { UnistylesEventType, ScreenOrientation } from '../common'
 import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
-import type { NestedKeys, ScreenSize } from './core'
-import type { Optional } from './common'
+import type { ScreenSize } from './core'
+import type { UnistylesPlugin } from './plugin'
 
-export type ColorSchemeName = Optional<'light' | 'dark'>
+export type ColorSchemeName = 'light' | 'dark' | 'unspecified'
 
 export type UnistylesConfig = {
-    adaptiveThemes?: boolean
+    adaptiveThemes?: boolean,
+    experimentalPlugins?: Array<UnistylesPlugin>,
+    initialTheme?: keyof UnistylesThemes
 }
 
 export type UnistylesBridge = {
     // getters
     screenWidth: number,
     screenHeight: number,
+    enabledPlugins: Array<string>,
     hasAdaptiveThemes: boolean,
     themeName: keyof UnistylesThemes,
     breakpoint: keyof UnistylesBreakpoints,
@@ -23,27 +26,29 @@ export type UnistylesBridge = {
     themes: Array<keyof UnistylesThemes>,
     useBreakpoints(breakpoints: UnistylesBreakpoints): void,
     useTheme(name: keyof UnistylesThemes): void,
-    useAdaptiveThemes(enable: boolean): void
+    useAdaptiveThemes(enable: boolean): void,
+    addPlugin(pluginName: string, notify: boolean): void,
+    removePlugin(pluginName: string): void
 }
 
 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,
-        orientation: ScreenOrientation
+        orientation: typeof ScreenOrientation[keyof typeof ScreenOrientation]
     }
 }
 
-export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent
-
-export interface UnistylesEngine {
-    didMatchMediaQuery(keys: NestedKeys): Optional<string>,
+export type UnistylesPluginEvent = {
+    type: UnistylesEventType.Plugin
 }
+
+export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent | UnistylesPluginEvent

package/src/types/variants.ts

@@ -0,0 +1,19 @@
+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,53 +1,46 @@
 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 { parseStyle, proxifyFunction, withPlugins } from './utils'
+import { useUnistyles, useVariants } from './hooks'
 import type { UnistylesBreakpoints } from './global'
+import type { ExtractVariantNames, ReactNativeStyleSheet, StyleSheetWithSuperPowers, UnistylesTheme } from './types'
 
-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>): ParsedStylesheet<ST> => {
-    const { theme, layout } = useUnistyles()
-    const { screenSize, breakpoint } = layout
-
-    if (!stylesheet) {
-        return {
-            theme,
-            breakpoint,
-            styles: {} as ReactNativeStyleSheet<ST>
-        }
-    }
-
+export const useStyles = <ST extends StyleSheetWithSuperPowers>(
+    stylesheet?: ST,
+    variantsMap?: ExtractVariantNames<typeof stylesheet>
+): ParsedStylesheet<ST> => {
+    const { theme, layout, plugins } = useUnistyles()
+    const variants = useVariants(variantsMap)
     const parsedStyles = useMemo(() => typeof stylesheet === 'function'
         ? stylesheet(theme)
-        : stylesheet, [theme, stylesheet])
+        : stylesheet, [theme, stylesheet, layout])
 
     const dynamicStyleSheet = useMemo(() => Object
-        .entries(parsedStyles)
+        .entries(parsedStyles || {})
         .reduce((acc, [key, value]) => {
-            const style = value as CustomNamedStyles<ST>
-
             if (typeof value === 'function') {
                 return {
                     ...acc,
-                    [key]: proxifyFunction(value, breakpoint, screenSize)
+                    [key]: proxifyFunction(key, value)
                 }
             }
 
             return StyleSheet.create({
                 ...acc,
-                [key]: parseStyle<ST>(style, breakpoint, screenSize)
+                [key]: withPlugins(key, parseStyle(value, variants))
             })
-        }, {} as ST), [breakpoint, screenSize, parsedStyles]) as ReactNativeStyleSheet<ST>
+        }, {}), [parsedStyles, variants, plugins]
+    )
 
     return {
         theme,
-        breakpoint,
-        styles: dynamicStyleSheet
+        breakpoint: layout.breakpoint,
+        styles: dynamicStyleSheet as ReactNativeStyleSheet<ST>
     }
 }

package/src/utils/breakpoints.ts

@@ -1,55 +1,12 @@
 import { unistyles } from '../core'
-import { isMobile, Orientation, throwError } from './common'
-import type { MediaQuery, NestedKeys } from '../types'
+import type { Optional, RNValue } from '../types'
 import type { UnistylesBreakpoints } from '../global'
-import { ScreenOrientation } from '../common'
+import { ScreenOrientation, isMobile } from '../common'
 import { getKeyForUnistylesMediaQuery } from './mqParser'
 
-export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): UnistylesBreakpoints => {
-    const sortedPairs = Object
-        .entries(breakpoints)
-        .sort((breakpoint1, breakpoint2) => {
-            const [, value1] = breakpoint1
-            const [, value2] = breakpoint2
-
-            return (value1 as number) - (value2 as number)
-        })
-
-    const sortedBreakpoints =  Object.freeze(Object.fromEntries(sortedPairs)) as UnistylesBreakpoints
-    const breakpointValues = Object.values(sortedBreakpoints)
-    const [firstBreakpoint] = breakpointValues
-
-    if (firstBreakpoint !== 0) {
-        throwError('first breakpoint must start with 0')
-    }
-
-    if (breakpointValues.length !== new Set(breakpointValues).size) {
-        throwError('breakpoint values are duplicated')
-    }
-
-    return sortedBreakpoints
-}
-
-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 as number
-            const maxVal = otherBreakpoints[index + 1]?.[1]
-
-            if (!maxVal) {
-                return true
-            }
-
-            return width >= minVal && width < maxVal
-        }) as [keyof UnistylesBreakpoints & string, number]
-
-    return key
-}
-
-export const getValueForBreakpoint = (value: Record<keyof UnistylesBreakpoints | MediaQuery, string | number | undefined>): string | number | undefined => {
-    // the highest priority is for custom media queries
+export const getValueForBreakpoint = (value: Record<string, RNValue>): Optional<RNValue> => {
     const customMediaQueryKey = getKeyForUnistylesMediaQuery(
-        Object.entries(value) as NestedKeys,
+        Object.entries(value),
         unistyles.runtime.screen
     ) as keyof typeof value
 
@@ -57,44 +14,31 @@ export const getValueForBreakpoint = (value: Record<keyof UnistylesBreakpoints |
         return value[customMediaQueryKey]
     }
 
-    // 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
+    const hasBreakpoints = unistyles.registry.sortedBreakpointPairs.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
-        ]
+    if (!hasBreakpoints && isMobile && (ScreenOrientation.Landscape in value || ScreenOrientation.Portrait in value)) {
+        return value[unistyles.runtime.orientation]
     }
 
-    // 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 || (breakpoint in value)) {
         return directBreakpoint
     }
 
-    // there is no direct hit for breakpoint nor media-query, let's simulate CSS cascading
-    const breakpointPairs = unistyles.runtime.sortedBreakpoints
-    const currentBreakpoint = breakpointPairs
+    const breakpointPairs = unistyles.registry.sortedBreakpointPairs
+    const currentBreakpointIndex = breakpointPairs
         .findIndex(([key]) => key === breakpoint)
 
     const availableBreakpoints = breakpointPairs
-        .filter(([key], index) => index < currentBreakpoint && key && key in value)
+        .filter(([key], index) => index < currentBreakpointIndex && key in value)
         .map(([key]) => key)
 
-    return breakpointPairs.length > 0
-        ? value[availableBreakpoints[availableBreakpoints.length - 1] as keyof UnistylesBreakpoints & string]
-        : undefined
+    return value[availableBreakpoints[availableBreakpoints.length - 1] as keyof UnistylesBreakpoints & string]
 }

package/src/utils/index.ts

@@ -1,7 +1,5 @@
-export { normalizeStyles } from './normalizeStyles'
-export * from './normalizer'
-export { mq, MQSymbol } from './mq'
-export { getKeyForUnistylesMediaQuery } from './mqParser'
-export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints'
+export { mq } from './mq'
+export { getKeyForUnistylesMediaQuery, isWithinTheWidthAndHeight, isValidMq, parseMq } from './mqParser'
+export { getValueForBreakpoint } from './breakpoints'
 export { proxifyFunction, parseStyle } from './styles'
-export { isServer, Orientation } from './common'
+export { withPlugins } from './withPlugins'

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 || 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/mqParser.ts

@@ -1,4 +1,4 @@
-import type { NestedKeys, Optional, ScreenSize } from '../types'
+import type { Optional, RNValue, ScreenSize } from '../types'
 
 const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/
 const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/
@@ -14,7 +14,7 @@ type UnistylesParsedMq = {
     height?: ParsedMqDimension
 }
 
-const parseMq = (mq: string): UnistylesParsedMq => {
+export const parseMq = (mq: string): UnistylesParsedMq => {
     const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
     const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
 
@@ -32,7 +32,7 @@ const parseMq = (mq: string): UnistylesParsedMq => {
 
 const isUnistylesMq = (mq: string) => IS_UNISTYLES_REGEX.test(mq)
 
-const isValidMq = (parsedMq: UnistylesParsedMq) => {
+export const isValidMq = (parsedMq: UnistylesParsedMq) => {
     const { width, height } = parsedMq
 
     if (width && height) {
@@ -50,7 +50,7 @@ const isValidMq = (parsedMq: UnistylesParsedMq) => {
     return false
 }
 
-const isWithinTheWidthAndHeight = (parsedMq: UnistylesParsedMq, screenSize: ScreenSize): boolean => {
+export const isWithinTheWidthAndHeight = (parsedMq: UnistylesParsedMq, screenSize: ScreenSize): boolean => {
     const { width, height } = parsedMq
 
     if (width && height) {
@@ -80,7 +80,7 @@ const isWithinTheHeight = (height: UnistylesParsedMq['height'], screenHeight: nu
     return screenHeight >= from && screenHeight <= to
 }
 
-export const getKeyForUnistylesMediaQuery = (mediaQueries: NestedKeys, screenSize: ScreenSize) => {
+export const getKeyForUnistylesMediaQuery = (mediaQueries: Array<[string, RNValue]>, screenSize: ScreenSize): Optional<string> => {
     const mq = mediaQueries.find(([key]) => {
         if (!isUnistylesMq(key as string)) {
             return false

package/src/utils/styles.ts

@@ -1,15 +1,14 @@
-import type { CustomNamedStyles, ScreenSize, MediaQuery } from '../types'
+import type { Optional, RNStyle, RNValue } from '../types'
 import { getValueForBreakpoint } from './breakpoints'
-import { normalizeStyles } from './normalizeStyles'
-import type { UnistylesBreakpoints } from '../global'
-import { isAndroid, isIOS, isWeb } from './common'
+import { isAndroid, isIOS } from '../common'
+import { withPlugins } from './withPlugins'
 
 export const proxifyFunction = (
-    fn: Function, breakpoint: keyof UnistylesBreakpoints & string,
-    screenSize: ScreenSize
+    key: string,
+    fn: Function,
+    variant?: Record<string, Optional<string>>
 ): Function => new Proxy(fn, {
-    apply: (target, thisArg, argumentsList) =>
-        parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize)
+    apply: (target, thisArg, argumentsList) => withPlugins(key, parseStyle(target.apply(thisArg, argumentsList), variant))
 })
 
 export const isPlatformColor = <T extends {}>(value: T): boolean => {
@@ -20,52 +19,47 @@ export const isPlatformColor = <T extends {}>(value: T): boolean => {
     return isAndroid && 'resource_paths' in value && typeof value.resource_paths === 'object'
 }
 
-export const parseStyle = <T>(
-    style: CustomNamedStyles<T>,
-    breakpoint: keyof UnistylesBreakpoints & string,
-    screenSize: ScreenSize
-): T => {
-    const entries = Object.entries(style || {}) as [[
-        keyof T,
-        CustomNamedStyles<T> | Record<keyof UnistylesBreakpoints & string, string | number | undefined>]
-    ]
+export const parseStyle = <T extends RNStyle>(
+    style: T,
+    variant: Record<string, Optional<string>> = {}
+): T => Object
+    .entries(style || {})
+    .reduce((acc, [key, value]) => {
+        // nested objects
+        if (key === 'shadowOffset' || key  === 'textShadowOffset') {
+            acc[key] = parseStyle(value, variant)
 
-    const parsedStyles = Object
-        .fromEntries(entries
-            .map(([key, value]) => {
-                const hasNestedProperties = key === 'shadowOffset' || key === 'textShadowOffset'
+            return acc
+        }
 
-                if (hasNestedProperties) {
-                    return [
-                        key,
-                        parseStyle(value as CustomNamedStyles<T>, breakpoint, screenSize)
-                    ]
-                }
+        // transforms
+        if (key === 'transform' && Array.isArray(value)) {
+            acc[key] = value.map(value => parseStyle(value, variant))
 
-                const isTransform = key === 'transform'
+            return acc
+        }
 
-                if (isTransform && Array.isArray(value)) {
-                    return [
-                        key,
-                        value.map(value => parseStyle(value, breakpoint, screenSize))
-                    ]
-                }
+        // values or platform colors
+        if (typeof value !== 'object' || isPlatformColor(value)) {
+            acc[key as keyof T] = value
 
-                const isDynamicFunction = typeof value === 'function'
-                const isValidStyle = typeof value !== 'object' || isPlatformColor(value)
+            return acc
+        }
 
-                if (isDynamicFunction || isValidStyle) {
-                    return [key, value]
-                }
+        if (key === 'variants') {
+            return {
+                ...acc,
+                ...(Object
+                    .keys(value) as Array<keyof typeof value>)
+                    .reduce((acc, key) => ({
+                        ...acc,
+                        ...parseStyle((value)[key][variant[key as keyof typeof variant] || 'default'] ?? {})
+                    }), {})
+            }
+        }
 
-                return [
-                    key,
-                    getValueForBreakpoint(value as Record<keyof UnistylesBreakpoints | MediaQuery, string | number | undefined>)
-                ]
-            })
-        )
-
-    return isWeb
-        ? normalizeStyles(parsedStyles)
-        : parsedStyles
-}
+        return {
+            ...acc,
+            [key]: getValueForBreakpoint(value as Record<string, RNValue>)
+        }
+    }, {} as T)

package/src/utils/withPlugins.ts

@@ -0,0 +1,13 @@
+import type { RNStyle } from '../types'
+import { unistyles } from '../core'
+
+export const withPlugins = (
+    key: string,
+    style: RNStyle
+) => unistyles.registry.plugins.reduce((acc, plugin) => {
+    if (plugin.onParsedStyle) {
+        return plugin.onParsedStyle(key, acc, unistyles.runtime)
+    }
+
+    return acc
+}, style)

package/lib/commonjs/utils/common.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.warn = exports.throwError = exports.isWeb = exports.isServer = exports.isMobile = exports.isIOS = exports.isAndroid = exports.Orientation = void 0;
-var _reactNative = require("react-native");
-const throwError = message => {
-  throw new Error(`🦄 [react-native-unistyles]: ${message}`);
-};
-exports.throwError = throwError;
-const warn = message => {
-  console.warn(`🦄 [react-native-unistyles]: ${message}`);
-};
-exports.warn = warn;
-const isMobile = exports.isMobile = _reactNative.Platform.OS === 'android' || _reactNative.Platform.OS === 'ios';
-const isWeb = exports.isWeb = _reactNative.Platform.OS === 'web';
-const isIOS = exports.isIOS = _reactNative.Platform.OS === 'ios';
-const isAndroid = exports.isAndroid = _reactNative.Platform.OS === 'android';
-const isServer = exports.isServer = typeof window === 'undefined';
-const Orientation = exports.Orientation = {
-  Landscape: 'landscape',
-  Portrait: 'portrait'
-};
-//# sourceMappingURL=common.js.map