react-native-unistyles 2.4.0 → 2.4.1

package/src/core/mocks/UnistylesMockedRegistry.ts

@@ -0,0 +1,47 @@
+// @ts-nocheck
+import type { UnistylesBreakpoints, UnistylesThemes } from '../../global'
+import type { UnistylesPlugin, UnistylesConfig, UnistylesBridge } from '../../types'
+
+export class UnistylesMockedRegistry {
+    public config: UnistylesConfig = {}
+    public breakpoints: UnistylesBreakpoints = {} as UnistylesBreakpoints
+    public sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]> = []
+    public plugins: Array<UnistylesPlugin> = []
+    public themes: UnistylesThemes = {} as UnistylesThemes
+    public themeNames: Array<keyof UnistylesThemes> = []
+
+    constructor(private unistylesBridge: UnistylesBridge) {}
+
+    public addThemes = (themes: UnistylesThemes) => {
+        this.themes = themes
+        this.themeNames = Object.keys(themes) as Array<keyof UnistylesThemes>
+
+        return this
+    }
+    public addBreakpoints = (breakpoints: UnistylesBreakpoints) => {
+        this.breakpoints = breakpoints
+        this.sortedBreakpointPairs = Object
+            .entries(breakpoints)
+            .sort((breakpoint1, breakpoint2) => {
+                const [, value1] = breakpoint1
+                const [, value2] = breakpoint2
+
+                return value1 - value2
+            }) as Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>
+
+        return this
+    }
+    public addConfig = (config: UnistylesConfig) => {}
+    public getTheme = (forName: keyof UnistylesThemes) => {
+        if (this.themeNames.length === 0) {
+            return {} as UnistylesThemes[keyof UnistylesThemes]
+        }
+
+        return this.themes[forName]
+    }
+
+    public addPlugin = (plugin: UnistylesPlugin, notify: boolean = true) => {}
+    public removePlugin = (plugin: UnistylesPlugin) => {}
+    public updateTheme = (name: keyof UnistylesThemes, theme: UnistylesThemes[keyof UnistylesThemes]) => {}
+    public hasTheme = (name: keyof UnistylesThemes) => true
+}

package/src/core/mocks/UnistylesMockedRuntime.ts

@@ -0,0 +1,144 @@
+// @ts-nocheck
+import { ScreenOrientation } from '../../common'
+import type { Color, UnistylesBridge, UnistylesPlugin } from '../../types'
+import type { UnistylesThemes } from '../../global'
+import type { UnistylesMockedRegistry } from './UnistylesMockedRegistry'
+import type { UnistyleRegistry } from '../UnistyleRegistry'
+
+export class UnistylesMockedRuntime {
+    private unistylesRegistry: UnistylesMockedRegistry
+
+    constructor(private unistylesBridge: UnistylesBridge, private unistylesRegistry: UnistyleRegistry) {
+        this.unistylesRegistry = unistylesRegistry as unknown as UnistylesMockedRegistry
+    }
+
+    public get miniRuntime() {
+        return {
+            contentSizeCategory: this.contentSizeCategory,
+            breakpoint: this.breakpoint,
+            screen: this.screen,
+            insets: this.insets,
+            statusBar: {
+                width: this.statusBar.width,
+                height: this.statusBar.height
+            },
+            navigationBar: {
+                width: this.navigationBar.width,
+                height: this.navigationBar.height
+            },
+            orientation: this.orientation,
+            pixelRatio: this.pixelRatio,
+            fontScale: this.fontScale,
+            hairlineWidth: this.hairlineWidth,
+            rtl: this.rtl
+        }
+    }
+
+    public get colorScheme() {
+        return 'dark'
+    }
+
+    public get hasAdaptiveThemes() {
+        return true
+    }
+
+    public get themeName() {
+        return this.unistylesRegistry.themeNames.length > 0
+            ? this.unistylesRegistry.themeNames.at(0)
+            : undefined
+    }
+
+    public get contentSizeCategory() {
+        return 'unspecified'
+    }
+
+    public get breakpoint() {
+        if (this.unistylesRegistry.sortedBreakpointPairs.length === 0) {
+            return undefined
+        }
+
+        const firstBreakpoint = this.unistylesRegistry.sortedBreakpointPairs.at(0)
+
+        return firstBreakpoint
+            ? firstBreakpoint.at(0)
+            : undefined
+    }
+
+    public get rtl() {
+        return false
+    }
+
+    public get breakpoints() {
+        return this.unistylesRegistry.breakpoints
+    }
+
+    public get enabledPlugins() {
+        return this.unistylesRegistry.plugins
+    }
+
+    public get screen() {
+        return {
+            width: 360,
+            height: 800
+        }
+    }
+
+    public get insets() {
+        return {
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0
+        }
+    }
+
+    public get pixelRatio() {
+        return 1.0
+    }
+
+    public get hairlineWidth() {
+        return 0.333333
+    }
+
+    public get fontScale() {
+        return 1.0
+    }
+
+    public get statusBar() {
+        return {
+            height: 24,
+            width: 800,
+            setColor: () => {},
+            setHidden: () => {}
+        }
+    }
+
+    public get navigationBar() {
+        return {
+            height: 0,
+            width: 0,
+            setColor: () => {},
+            setHidden: () => {}
+        }
+    }
+
+    public get orientation() {
+        return ScreenOrientation.Portrait
+    }
+
+    public getTheme = (themeName?: keyof UnistylesThemes) => {
+        if (!themeName) {
+            return this.unistylesRegistry.getTheme(this.themeName)
+        }
+
+        return this.unistylesRegistry.getTheme(themeName)
+    }
+
+    public setTheme = (name: keyof UnistylesThemes) => true
+    public updateTheme = (name: keyof UnistylesThemes, theme: UnistylesThemes[keyof UnistylesThemes]) => {}
+    public setAdaptiveThemes = (enabled: boolean) => {}
+    public addPlugin = (plugin: UnistylesPlugin) => {}
+    public removePlugin = (plugin: UnistylesPlugin) => {}
+    public setRootViewBackgroundColor = (color?: Color | string) => {}
+    public setImmersiveMode = (isEnabled: boolean) => {}
+}

package/src/core/mocks/index.ts

@@ -0,0 +1,3 @@
+export { UnistylesMockedBridge } from './UnistylesMockedBridge'
+export { UnistylesMockedRegistry } from './UnistylesMockedRegistry'
+export { UnistylesMockedRuntime } from './UnistylesMockedRuntime'

package/src/hooks/useSharedContext.ts

@@ -0,0 +1,83 @@
+import { type DependencyList, useEffect, useState } from 'react'
+import { NativeEventEmitter, NativeModules } from 'react-native'
+import { unistyles } from '../core'
+import type { UnistylesEvents, UnistylesMobileLayoutEvent, UnistylesThemeEvent } from '../types'
+import { UnistylesEventType } from '../common'
+
+type SharedContextConfig = {
+    useContext: boolean,
+    deps: DependencyList
+}
+
+const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
+
+export const useSharedContext = (config: SharedContextConfig) => {
+    const [plugins, setPlugins] = useState(unistyles.runtime.enabledPlugins)
+    const [theme, setTheme] = useState(unistyles.registry.getTheme(unistyles.runtime.themeName))
+    const [layout, setLayout] = useState({
+        breakpoint: unistyles.runtime.breakpoint,
+        orientation: unistyles.runtime.orientation,
+        screen: {
+            width: unistyles.runtime.screen.width,
+            height: unistyles.runtime.screen.height
+        },
+        statusBar: {
+            width: unistyles.runtime.statusBar.width,
+            height: unistyles.runtime.statusBar.height
+        },
+        navigationBar: {
+            width: unistyles.runtime.navigationBar.width,
+            height: unistyles.runtime.navigationBar.height
+        },
+        insets: {
+            top: unistyles.runtime.insets.top,
+            bottom: unistyles.runtime.insets.bottom,
+            left: unistyles.runtime.insets.left,
+            right: unistyles.runtime.insets.right
+        }
+    })
+
+    useEffect(() => {
+        if (config.useContext) {
+            return
+        }
+
+        const subscription = unistylesEvents.addListener(
+            '__unistylesOnChange',
+            (event: UnistylesEvents) => {
+                switch (event.type) {
+                    case UnistylesEventType.Theme: {
+                        const themeEvent = event as UnistylesThemeEvent
+
+                        return setTheme(unistyles.registry.getTheme(themeEvent.payload.themeName))
+                    }
+                    case UnistylesEventType.Layout: {
+                        const layoutEvent = event as UnistylesMobileLayoutEvent
+
+                        return setLayout({
+                            breakpoint: layoutEvent.payload.breakpoint,
+                            orientation: layoutEvent.payload.orientation,
+                            screen: layoutEvent.payload.screen,
+                            statusBar: layoutEvent.payload.statusBar,
+                            insets: layoutEvent.payload.insets,
+                            navigationBar: layoutEvent.payload.navigationBar
+                        })
+                    }
+                    case UnistylesEventType.Plugin: {
+                        return setPlugins(unistyles.runtime.enabledPlugins)
+                    }
+                    default:
+                        return
+                }
+            }
+        )
+
+        return subscription.remove
+    }, config.deps)
+
+    return {
+        plugins,
+        theme,
+        layout
+    }
+}

package/src/hooks/useUnistyles.ts

@@ -1,81 +1,25 @@
-import { NativeEventEmitter, NativeModules } from 'react-native'
-import { useEffect, useState } from 'react'
-import { unistyles } from '../core'
-import { UnistylesEventType } from '../common'
-import type { UnistylesDynamicTypeSizeEvent, UnistylesEvents, UnistylesMobileLayoutEvent, UnistylesThemeEvent } from '../types'
-
-const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
+import { useContext } from 'react'
+import { UnistylesContext } from '../UnistylesProvider'
+import { useSharedContext } from './useSharedContext'
 
 export const useUnistyles = () => {
-    const [plugins, setPlugins] = useState(unistyles.runtime.enabledPlugins)
-    const [theme, setTheme] = useState(unistyles.registry.getTheme(unistyles.runtime.themeName))
-    const [contentSizeCategory, setContentSizeCategory] = useState(unistyles.runtime.contentSizeCategory)
-    const [layout, setLayout] = useState({
-        breakpoint: unistyles.runtime.breakpoint,
-        orientation: unistyles.runtime.orientation,
-        screenSize: {
-            width: unistyles.runtime.screen.width,
-            height: unistyles.runtime.screen.height
-        },
-        statusBar: {
-            width: unistyles.runtime.statusBar.width,
-            height: unistyles.runtime.statusBar.height
-        },
-        navigationBar: {
-            width: unistyles.runtime.navigationBar.width,
-            height: unistyles.runtime.navigationBar.height
-        },
-        insets: {
-            top: unistyles.runtime.insets.top,
-            bottom: unistyles.runtime.insets.bottom,
-            left: unistyles.runtime.insets.left,
-            right: unistyles.runtime.insets.right
-        }
+    const unistylesContext = useContext(UnistylesContext)
+    const { theme, layout, plugins } = useSharedContext({
+        useContext: unistylesContext !== undefined,
+        deps: unistylesContext ? [unistylesContext] : []
     })
 
-    useEffect(() => {
-        const subscription = unistylesEvents.addListener(
-            '__unistylesOnChange',
-            (event: UnistylesEvents) => {
-                switch (event.type) {
-                    case UnistylesEventType.Theme: {
-                        const themeEvent = event as UnistylesThemeEvent
-
-                        return setTheme(unistyles.registry.getTheme(themeEvent.payload.themeName))
-                    }
-                    case UnistylesEventType.Layout: {
-                        const layoutEvent = event as UnistylesMobileLayoutEvent
-
-                        return setLayout({
-                            breakpoint: layoutEvent.payload.breakpoint,
-                            orientation: layoutEvent.payload.orientation,
-                            screenSize: layoutEvent.payload.screen,
-                            statusBar: layoutEvent.payload.statusBar,
-                            insets: layoutEvent.payload.insets,
-                            navigationBar: layoutEvent.payload.navigationBar
-                        })
-                    }
-                    case UnistylesEventType.Plugin: {
-                        return setPlugins(unistyles.runtime.enabledPlugins)
-                    }
-                    case UnistylesEventType.DynamicTypeSize: {
-                        const dynamicTypeSizeEvent = event as UnistylesDynamicTypeSizeEvent
-
-                        return setContentSizeCategory(dynamicTypeSizeEvent.payload.contentSizeCategory)
-                    }
-                    default:
-                        return
-                }
-            }
-        )
-
-        return subscription.remove
-    }, [])
+    if (unistylesContext !== undefined) {
+        return {
+            plugins: unistylesContext.plugins,
+            theme: unistylesContext.theme,
+            layout: unistylesContext.layout
+        }
+    }
 
     return {
         plugins,
         theme,
-        layout,
-        contentSizeCategory
+        layout
     }
 }

package/src/index.ts

@@ -1,12 +1,12 @@
 import { unistyles } from './core'
 import { mq } from './utils'
 import { useInitialTheme } from './hooks'
-import type { UnistylesPlugin, UnistylesValues } from './types'
+import type { UnistylesPlugin, UnistylesValues, UnistyleText, UnistyleView, UnistyleImage, ExtractVariantNames, UnistylesTheme } from './types'
 import type { UnistylesThemes, UnistylesBreakpoints } from './global'
 import { ScreenOrientation, AndroidContentSizeCategory, IOSContentSizeCategory } from './common'
 import { useStyles } from './useStyles'
 import { createStyleSheet } from './createStyleSheet'
-
+import { UnistylesProvider } from './UnistylesProvider'
 /**
  * Utility to interact with the Unistyles
  * (should be called only once)
@@ -40,12 +40,18 @@ export {
     AndroidContentSizeCategory,
     IOSContentSizeCategory,
     UnistylesRegistry,
-    UnistylesRuntime
+    UnistylesRuntime,
+    UnistylesProvider
 }
 
 export type {
+    UnistylesTheme,
     UnistylesThemes,
     UnistylesBreakpoints,
     UnistylesPlugin,
-    UnistylesValues
+    UnistylesValues,
+    UnistyleText,
+    UnistyleView,
+    UnistyleImage,
+    ExtractVariantNames as UnistylesVariants
 }

package/src/types/breakpoints.ts

@@ -2,6 +2,7 @@ import type { ColorValue, OpaqueColorValue } from 'react-native'
 import type { UnistylesTheme } from '../types'
 import type { BreakpointsOrMediaQueries, ToDeepUnistyles } from './stylesheet'
 import type { TransformStyles } from './core'
+import type { UnistylesMiniRuntime } from '../core'
 
 type ExtractTransformArray<T> = T extends object
     ? { [K in keyof T]: ExtractBreakpoints<T[K]> }
@@ -17,26 +18,33 @@ type ExtractBreakpoints<T> = T extends object
             }
     : T
 
-type ParseNestedObject<T> = T extends (...args: infer A) => infer R
-    ? (...args: A) => ParseNestedObject<R>
+type ParseNestedObject<T, ShouldFlatten> = T extends (...args: infer A) => infer R
+    ? (...args: A) => ParseNestedObject<R, false>
     : T extends object
         ? T extends { variants: infer R }
-            ? ParseVariants<FlattenVariants<R>> & ParseNestedObject<Omit<T, 'variants'>>
+            // if intersection of Base and Variants is never, then flatten variants to generic "string"
+            ? (ParseVariants<FlattenVariants<R, false>> & ParseNestedObject<Omit<T, 'variants'>, false>) extends never
+                ? ParseVariants<FlattenVariants<R, true>> & ParseNestedObject<Omit<T, 'variants'>, false>
+                : ParseVariants<FlattenVariants<R, false>> & ParseNestedObject<Omit<T, 'variants'>, false>
             : {
                 [K in keyof T]: T[K] extends object
                     ? T[K] extends OpaqueColorValue
                         ? ColorValue
                         : ExtractBreakpoints<T[K]>
-                    : T[K]
+                    : T[K] extends string
+                        ? ShouldFlatten extends true
+                            ? string
+                            : T[K]
+                        : T[K]
             }
         : T
 
-type FlattenVariants<T> = T extends object
+type FlattenVariants<T, ShouldFlatten> = 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]>
+                    ? ParseNestedObject<T[K][key], ShouldFlatten>
                     : never
             }
             : never
@@ -45,7 +53,9 @@ type FlattenVariants<T> = T extends object
 
 type ParseVariants<T> = T extends object
     ? T[keyof T] extends object
-        ? UnionToIntersection<ParseVariants<T[keyof T]>>
+        ? UnionToIntersection<ParseVariants<T[keyof T]>> extends never
+            ? ParseVariants<T[keyof T]>
+            : UnionToIntersection<ParseVariants<T[keyof T]>>
         : T
     : T
 
@@ -53,9 +63,9 @@ type UnionToIntersection<U> =
     (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never
 
 type ParseStyleKeys<T> = T extends object
-    ? { [K in keyof T]: ParseNestedObject<T[K]> }
+    ? { [K in keyof T]: ParseNestedObject<T[K], false> }
     : never
 
-export type ReactNativeStyleSheet<T> = T extends (theme: UnistylesTheme) => infer R
+export type ReactNativeStyleSheet<T> = T extends (theme: UnistylesTheme, runtime: UnistylesMiniRuntime) => infer R
     ? ParseStyleKeys<R>
     : ParseStyleKeys<T>

package/src/types/color.ts

@@ -0,0 +1,26 @@
+type AndroidColor = 'red'
+| 'blue'
+| 'green'
+| 'black'
+| 'white'
+| 'gray'
+| 'cyan'
+| 'magenta'
+| 'yellow'
+| 'light gray'
+| 'dark gray'
+| 'grey'
+| 'light grey'
+| 'dark grey'
+| 'aqua'
+| 'fuchsia'
+| 'lime'
+| 'maroon'
+| 'navy'
+| 'olive'
+| 'purple'
+| 'silver'
+| 'teal'
+| 'transparent'
+
+export type Color = AndroidColor | string | undefined

package/src/types/core.ts

@@ -1,6 +1,6 @@
 import type {
     MatrixTransform,
-    PerpectiveTransform,
+    PerspectiveTransform,
     RotateTransform,
     RotateXTransform,
     RotateYTransform,
@@ -22,7 +22,7 @@ export type ShadowOffset = {
 }
 
 export type TransformStyles =
-    & PerpectiveTransform
+    & PerspectiveTransform
     & RotateTransform
     & RotateXTransform
     & RotateYTransform

package/src/types/index.ts

@@ -1,5 +1,6 @@
 export * from './normalizer'
 export * from './unistyles'
+export * from './color'
 export type { Optional, Nullable } from './common'
 export type {
     NestedStylePairs,
@@ -13,7 +14,10 @@ export type {
     StyleSheetWithSuperPowers,
     StyleSheet,
     AllAvailableKeys,
-    UnistylesValues
+    UnistylesValues,
+    UnistyleText,
+    UnistyleView,
+    UnistyleImage
 } from './stylesheet'
 export type { ReactNativeStyleSheet } from './breakpoints'
 export type { ExtractVariantNames } from './variants'

package/src/types/normalizer.ts

@@ -1,6 +1,6 @@
 import type { ShadowStyleIOS, TextStyle, TransformsStyle } from 'react-native'
 
-type TransformArrayElement<T> = T extends Array<infer U> ? U : never
+type TransformArrayElement<T> = T extends ReadonlyArray<infer U> ? U : never
 type BoxShadow = Required<ShadowStyleIOS>
 type TextShadow = Required<Pick<TextStyle, 'textShadowColor' | 'textShadowOffset' | 'textShadowRadius'>>
 type Transforms = Array<TransformArrayElement<TransformsStyle['transform']>>

package/src/types/stylesheet.ts

@@ -1,18 +1,21 @@
-import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
+import type { BoxShadowValue, FilterFunction, ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
 import type { UnistylesBreakpoints } from '../global'
+import type { UnistylesMiniRuntime } from '../core'
 
 // these props are treated differently to nest breakpoints and media queries
-type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset'
+type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset' | 'boxShadow' | 'filter'
 
-type UnistyleView = Omit<ViewStyle, NestedKeys>
-type UnistyleText = Omit<TextStyle, NestedKeys>
-type UnistyleImage = Omit<ImageStyle, NestedKeys>
+export type UnistyleView = Omit<ViewStyle, NestedKeys>
+export type UnistyleText = Omit<TextStyle, NestedKeys>
+export type UnistyleImage = Omit<ImageStyle, NestedKeys>
 
 type UnistyleNestedStyles = {
     shadowOffset?: ToDeepUnistyles<ShadowOffset>,
     textShadowOffset?: ToDeepUnistyles<ShadowOffset>,
-    transform?: Array<ToDeepUnistyles<TransformStyles>>
+    transform?: Array<ToDeepUnistyles<TransformStyles>>,
+    boxShadow?: Array<ToDeepUnistyles<BoxShadowValue>> | string,
+    filter?: Array<ToDeepUnistyles<FilterFunction>> | string
 }
 
 type Variants = {
@@ -46,4 +49,4 @@ export type StyleSheet = {
     [styleName: string]: UnistylesValues | ((...args: any) => UnistylesValues)
 }
 
-export type StyleSheetWithSuperPowers = ((theme: UnistylesTheme) => StyleSheet) | StyleSheet
+export type StyleSheetWithSuperPowers = ((theme: UnistylesTheme, miniRuntime: UnistylesMiniRuntime) => StyleSheet) | StyleSheet

package/src/types/unistyles.ts

@@ -17,11 +17,23 @@ export type ScreenDimensions = {
     width: number
 }
 
+export interface StatusBar extends ScreenDimensions {
+    setColor(color?: string, alpha?: number): void,
+    setHidden(hidden: boolean): void
+}
+
+export interface NavigationBar extends ScreenDimensions {
+    setColor(color?: string, alpha?: number): void,
+    setHidden(hidden: boolean): void
+}
+
 export type UnistylesConfig = {
     adaptiveThemes?: boolean,
     initialTheme?: keyof UnistylesThemes,
     plugins?: Array<UnistylesPlugin>,
-    experimentalCSSMediaQueries?: boolean
+    experimentalCSSMediaQueries?: boolean,
+    windowResizeDebounceTimeMs?: number,
+    disableAnimatedInsets?: boolean
 }
 
 export type UnistylesBridge = {
@@ -36,8 +48,11 @@ export type UnistylesBridge = {
     contentSizeCategory: IOSContentSizeCategory | AndroidContentSizeCategory,
     sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>,
     insets: ScreenInsets,
-    statusBar: ScreenDimensions,
-    navigationBar: ScreenDimensions
+    statusBar: StatusBar,
+    navigationBar: NavigationBar,
+    pixelRatio: number,
+    fontScale: number,
+    rtl: boolean
 
     // setters
     themes: Array<keyof UnistylesThemes>,
@@ -46,7 +61,15 @@ export type UnistylesBridge = {
     updateTheme(name: keyof UnistylesThemes): void,
     useAdaptiveThemes(enable: boolean): void,
     addPlugin(pluginName: string, notify: boolean): void,
-    removePlugin(pluginName: string): void
+    removePlugin(pluginName: string): void,
+    setRootViewBackgroundColor(color?: string, alpha?: number): void,
+    setImmersiveMode(isEnabled: boolean): void
+
+    // web only
+    setWindowResizeDebounceTimeMs(timeMs: number): void
+
+    // android only
+    disableAnimatedInsets(): void
 }
 
 export type UnistylesThemeEvent = {
@@ -72,11 +95,4 @@ export type UnistylesPluginEvent = {
     type: UnistylesEventType.Plugin
 }
 
-export type UnistylesDynamicTypeSizeEvent = {
-    type: UnistylesEventType.DynamicTypeSize,
-    payload: {
-        contentSizeCategory: IOSContentSizeCategory | AndroidContentSizeCategory
-    }
-}
-
-export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent | UnistylesPluginEvent | UnistylesDynamicTypeSizeEvent
+export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent | UnistylesPluginEvent

package/src/useStyles.ts

@@ -26,7 +26,7 @@ export const useStyles = <ST extends StyleSheetWithSuperPowers>(
     const { theme, layout, plugins } = useUnistyles()
     const variants = useVariants(variantsMap)
     const parsedStyles = useMemo(() => typeof stylesheet === 'function'
-        ? stylesheet(theme)
+        ? stylesheet(theme, unistyles.runtime.miniRuntime)
         : stylesheet, [theme, stylesheet, layout])
 
     const dynamicStyleSheet = useMemo(() => Object

package/src/utils/index.ts

@@ -5,3 +5,4 @@ export { getValueForBreakpoint } from './breakpoints'
 export { proxifyFunction, parseStyle, isPlatformColor } from './styles'
 export { withPlugins } from './withPlugins'
 export { generateReactNativeWebId } from './generateId'
+export { parseColor } from './parseColor'