react-native-unistyles 2.0.0-alpha.7 → 2.0.0-alpha.9

package/src/hooks/useUnistyles.ts

@@ -0,0 +1,55 @@
+import { NativeEventEmitter, NativeModules } from 'react-native'
+import { useEffect, useState } from 'react'
+import { unistyles } from '../core'
+import { CxxUnistylesEventTypes } from '../common'
+import type { UnistylesEvents, UnistylesMobileLayoutEvent, UnistylesThemeEvent } from '../types'
+
+const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
+
+export const useUnistyles = () => {
+    const [theme, setTheme] = useState(unistyles.runtime.getTheme(unistyles.runtime.themeName))
+    const [layout, setLayout] = useState({
+        breakpoint: unistyles.runtime.breakpoint,
+        orientation: unistyles.runtime.orientation,
+        screenSize: {
+            width: unistyles.runtime.screen.width,
+            height: unistyles.runtime.screen.height
+        }
+    })
+
+    useEffect(() => {
+        const subscription = unistylesEvents.addListener(
+            'onChange',
+            (event: UnistylesEvents) => {
+                switch (event.type) {
+                    case CxxUnistylesEventTypes.Theme: {
+                        const themeEvent = event as UnistylesThemeEvent
+
+                        return setTheme(unistyles.runtime.getTheme(themeEvent.payload.themeName))
+                    }
+                    case CxxUnistylesEventTypes.Layout: {
+                        const layoutEvent = event as UnistylesMobileLayoutEvent
+
+                        return setLayout({
+                            breakpoint: layoutEvent.payload.breakpoint,
+                            orientation: layoutEvent.payload.orientation,
+                            screenSize: {
+                                width: layoutEvent.payload.screen.width,
+                                height: layoutEvent.payload.screen.height
+                            }
+                        })
+                    }
+                    default:
+                        return
+                }
+            }
+        )
+
+        return subscription.remove
+    }, [])
+
+    return {
+        theme,
+        layout
+    }
+}

package/src/index.ts

@@ -1,30 +1,27 @@
-import { unistyles } from './Unistyles'
+import { unistyles } from './core'
+import { mq } from './utils'
+import { useInitialTheme } from './hooks'
 import type { UnistylesThemes, UnistylesBreakpoints } from './global'
-import { ScreenOrientation } from './types'
+import { ScreenOrientation } from './common'
+import { useStyles } from './useStyles'
+import { createStyleSheet } from './createStyleSheet'
 
-export { mq } from './utils'
-export { useInitialTheme } from './useInitialTheme'
-
-export { useStyles } from './useStyles'
-export { createStyleSheet } from './createStyleSheet'
-
-const { addThemes, addBreakpoints, addConfig  } = unistyles.registry
-const UnistylesRuntime = unistyles.runtime
 const UnistylesRegistry = {
-    addThemes,
-    addBreakpoints,
-    addConfig
+    addThemes: unistyles.registry.addThemes,
+    addBreakpoints: unistyles.registry.addBreakpoints,
+    addConfig: unistyles.registry.addConfig
 }
 
-export const __dangerouslyUnregister = unistyles.registry.dangerouslyUnregister
-
-export {
-    UnistylesRuntime,
-    UnistylesRegistry
-}
+const UnistylesRuntime = unistyles.runtime
 
 export {
-    ScreenOrientation
+    mq,
+    useStyles,
+    useInitialTheme,
+    createStyleSheet,
+    ScreenOrientation,
+    UnistylesRegistry,
+    UnistylesRuntime
 }
 
 export type {

package/src/types/breakpoints.ts

@@ -1,17 +1,10 @@
 import type { OpaqueColorValue } from 'react-native'
 import type { UnistylesBreakpoints } from '../global'
-import type { MediaQueries } from './mediaQueries'
-
-export type ScreenSize = {
-    width: number,
-    height: number
-}
-
-export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST
+import type { MediaQuery } from './mq'
 
 type WithEmptyObject<V> = keyof V extends never ? {} : V
 
-export type ExtractBreakpoints<T> = T extends Partial<Record<keyof UnistylesBreakpoints & string, infer V>>
+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>
@@ -23,12 +16,14 @@ export type ExtractBreakpoints<T> = T extends Partial<Record<keyof UnistylesBrea
                     : T[K]
         }
 
-export type RemoveKeysWithPrefix<T> = T extends (...args: Array<any>) => infer R
+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>
-                ? { [K in keyof T as K extends MediaQueries ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
+                ? { [K in keyof T as K extends MediaQuery ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
                 : { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
         : T
+
+export type ReactNativeStyleSheet<T> = ExtractBreakpoints<RemoveKeysWithPrefix<T>>

package/src/types/common.ts

@@ -0,0 +1,2 @@
+export type Optional<T> = T | undefined
+export type Nullable<T> = T | null

package/src/types/core.ts

@@ -14,14 +14,19 @@ import type {
     TranslateYTransform
 } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
-import type { MediaQueries } from './mediaQueries'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
+import type { MediaQuery } from './mq'
 
 type ShadowOffset = {
     width: number,
     height: number
 }
 
+export type ScreenSize = {
+    width: number,
+    height: number
+}
+
 type TransformStyles =
     & PerpectiveTransform
     & RotateTransform
@@ -44,9 +49,9 @@ type UnistyleNested = {
 }
 
 type UniStyle<V> = {
-    [innerKey in keyof UnistylesBreakpoints]: V
+    [innerKey in keyof UnistylesBreakpoints]?: V
 } | {
-    [innerKey in MediaQueries]: V
+    [innerKey in MediaQuery]: V
 }
 
 type DeepUniStyle<T> = {
@@ -72,5 +77,6 @@ export type CustomNamedStyles<T> = {
         : StaticStyles
 }
 
-export type NestedKeys = Array<[keyof UnistylesBreakpoints | MediaQueries, string | number | undefined]>
+export type NestedKeys = Array<[keyof UnistylesBreakpoints | MediaQuery, string | number | undefined]>
 export type UnistylesTheme = UnistylesThemes[keyof UnistylesThemes]
+export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST

package/src/types/index.ts

@@ -1,10 +1,6 @@
 export * from './normalizer'
-export * from './cxx'
-export type { CustomNamedStyles, NestedKeys, UnistylesTheme } from './core'
-export type { MediaQueries } from './mediaQueries'
-export type {
-    ScreenSize,
-    CreateStylesFactory,
-    ExtractBreakpoints,
-    RemoveKeysWithPrefix
-} from './breakpoints'
+export * from './unistyles'
+export type { Optional, Nullable } from './common'
+export type { MediaQuery } from './mq'
+export type { CustomNamedStyles, NestedKeys, UnistylesTheme, CreateStylesFactory, ScreenSize } from './core'
+export type { ReactNativeStyleSheet } from './breakpoints'

package/src/types/mq.ts

@@ -0,0 +1,3 @@
+import { MQSymbol } from '../utils'
+
+export type MediaQuery = typeof MQSymbol

package/src/types/{cxx.ts → unistyles.ts}

@@ -1,20 +1,14 @@
+import { CxxUnistylesEventTypes, ScreenOrientation } from '../common'
 import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
-import type { ScreenSize } from './breakpoints'
-import type { NestedKeys } from './core'
+import type { NestedKeys, ScreenSize } from './core'
+import type { Optional } from './common'
 
-export type Optional<T> = T | undefined
-export type Nullable<T> = T | null
 export type ColorSchemeName = Optional<'light' | 'dark'>
 
 export type UnistylesConfig = {
     adaptiveThemes?: boolean
 }
 
-export enum ScreenOrientation {
-    Portrait = 1,
-    Landscape = 2
-}
-
 export type UnistylesBridge = {
     // getters
     screenWidth: number,
@@ -29,15 +23,7 @@ export type UnistylesBridge = {
     themes: Array<keyof UnistylesThemes>,
     useBreakpoints(breakpoints: UnistylesBreakpoints): void,
     useTheme(name: keyof UnistylesThemes): void,
-    useAdaptiveThemes(enable: boolean): void,
-
-    // other
-    unregister(): void
-}
-
-export enum CxxUnistylesEventTypes {
-    Theme = 'theme',
-    Layout = 'layout'
+    useAdaptiveThemes(enable: boolean): void
 }
 
 export type UnistylesThemeEvent = {
@@ -58,16 +44,6 @@ export type UnistylesMobileLayoutEvent = {
 
 export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent
 
-export enum UnistylesError {
-    RuntimeUnavailable = 'UNISTYLES_ERROR_RUNTIME_UNAVAILABLE',
-    ThemeNotFound = 'UNISTYLES_ERROR_THEME_NOT_FOUND',
-    ThemeNotRegistered = 'UNISTYLES_ERROR_THEME_NOT_REGISTERED',
-    ThemesCannotBeEmpty = 'UNISTYLES_ERROR_THEMES_CANNOT_BE_EMPTY',
-    BreakpointsCannotBeEmpty = 'UNISTYLES_ERROR_BREAKPOINTS_CANNOT_BE_EMPTY',
-    BreakpointsMustStartFromZero = 'UNISTYLES_ERROR_BREAKPOINTS_MUST_START_FROM_ZERO',
-}
-
 export interface UnistylesEngine {
-    isMediaQuery(key: string): boolean,
     didMatchMediaQuery(keys: NestedKeys): Optional<string>,
 }

package/src/useStyles.ts

@@ -1,18 +1,25 @@
 import { useMemo } from 'react'
 import { StyleSheet } from 'react-native'
 import { parseStyle, proxifyFunction } from './utils'
-import type { CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types'
-import { useUnistyles } from './useUnistyles'
-import type { UnistylesTheme } from './types'
+import type { CreateStylesFactory, CustomNamedStyles, ReactNativeStyleSheet, UnistylesTheme } from './types'
+import { useUnistyles } from './hooks'
+import type { UnistylesBreakpoints } from './global'
 
-export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, UnistylesTheme>) => {
-    const { theme, breakpoint, screenSize } = useUnistyles()
+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>): ParsedStylesheet<ST> => {
+    const { theme, layout } = useUnistyles()
+    const { screenSize, breakpoint } = layout
 
     if (!stylesheet) {
         return {
             theme,
             breakpoint,
-            styles: {} as ExtractBreakpoints<RemoveKeysWithPrefix<ST>>
+            styles: {} as ReactNativeStyleSheet<ST>
         }
     }
 
@@ -36,11 +43,11 @@ export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | Cr
                 ...acc,
                 [key]: parseStyle<ST>(style, breakpoint, screenSize)
             })
-        }, {} as ST), [breakpoint, screenSize, parsedStyles])
+        }, {} as ST), [breakpoint, screenSize, parsedStyles]) as ReactNativeStyleSheet<ST>
 
     return {
         theme,
         breakpoint,
-        styles: dynamicStyleSheet as ExtractBreakpoints<RemoveKeysWithPrefix<ST>>
+        styles: dynamicStyleSheet
     }
 }

package/src/utils/breakpoints.ts

@@ -1,8 +1,9 @@
-import { unistyles } from '../Unistyles'
+import { unistyles } from '../core'
 import { isMobile, Orientation, throwError } from './common'
-import type { MediaQueries } from '../types'
-import { ScreenOrientation } from '../types'
+import type { MediaQuery, NestedKeys } from '../types'
 import type { UnistylesBreakpoints } from '../global'
+import { ScreenOrientation } from '../common'
+import { getKeyForUnistylesMediaQuery } from './mqParser'
 
 export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): UnistylesBreakpoints => {
     const sortedPairs = Object
@@ -45,15 +46,14 @@ export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: A
     return key
 }
 
-export const getValueForBreakpoint = (value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>): string | number | undefined => {
+export const getValueForBreakpoint = (value: Record<keyof UnistylesBreakpoints | MediaQuery, string | number | undefined>): string | number | undefined => {
     // the highest priority is for custom media queries
-    const customMediaQueries = Object
-        .entries(value)
-        .filter(([key]) => unistyles.engine.isMediaQuery(key)) as Array<[keyof UnistylesBreakpoints | MediaQueries, string | number | undefined]>
-    // const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize) as keyof typeof value
-    const customMediaQueryKey = unistyles.engine.didMatchMediaQuery(customMediaQueries) as keyof typeof value
+    const customMediaQueryKey = getKeyForUnistylesMediaQuery(
+        Object.entries(value) as NestedKeys,
+        unistyles.runtime.screen
+    ) as keyof typeof value
 
-    if (customMediaQueryKey && customMediaQueryKey in value) {
+    if (customMediaQueryKey) {
         return value[customMediaQueryKey]
     }
 
@@ -61,8 +61,8 @@ export const getValueForBreakpoint = (value: Record<keyof UnistylesBreakpoints |
     // check if user defined any breakpoints
     const hasBreakpoints = unistyles.runtime.sortedBreakpoints.length > 0
 
-    // if not then we can fallback to horizontal and portrait (mobile only)
-    if (!hasBreakpoints && isMobile && (Orientation.Landscape in  value || Orientation.Portrait in value)) {
+    // 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
@@ -70,6 +70,7 @@ export const getValueForBreakpoint = (value: Record<keyof UnistylesBreakpoints |
         ]
     }
 
+    // let's get the current breakpoint
     const breakpoint = unistyles.runtime.breakpoint
 
     if (!breakpoint) {

package/src/utils/index.ts

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

package/src/utils/mq.ts

@@ -1,17 +1,27 @@
+import type { MediaQuery, Nullable } from '../types'
 import type { UnistylesBreakpoints } from '../global'
-import { unistyles } from '../Unistyles'
+import { unistyles } from '../core'
 
-const MQSymbol = Symbol('unistyles-mq')
+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 = {
-    width(wMin?: MQValue, wMax?: MQValue): typeof MQSymbol
-} & typeof MQSymbol
+    w(wMin?: Nullable<MQValue>, wMax?: MQValue): MediaQuery,
+    width(wMin?: Nullable<MQValue>, wMax?: MQValue): MediaQuery
+} & MediaQuery
 
 type WidthHandler = {
-    height(hMin?: MQValue, hMax?: MQValue): typeof MQSymbol
-} & typeof MQSymbol
+    h(hMin?: Nullable<MQValue>, hMax?: MQValue): MediaQuery,
+    height(hMin?: Nullable<MQValue>, hMax?: MQValue): MediaQuery
+} & MediaQuery
 
 type FinalHandler = {
     [MQSymbol]: true
@@ -20,58 +30,77 @@ type FinalHandler = {
 enum MQProp {
     toString = 'toString',
     width = 'width',
-    height = 'height'
+    height = 'height',
+    shortW = 'w',
+    shortH = 'h'
 }
 
-const getMQValue = (value: MQValue) => {
+const getMQValue = (value: Nullable<MQValue>) => {
     if (typeof value === 'number') {
         return value
     }
 
+    if (value === null) {
+        return 0
+    }
+
     return unistyles.registry.breakpoints[value] ?? 0
 }
 
-export const mq = {
-    height: (hMin: 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) {
-                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)
+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)
+                }
+            })
+        }
+
+        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)}]`
         }
-    }),
-    width: (wMin: 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) {
-                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)
+
+        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)
+                }
+            })
         }
-    })
-}
+
+        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 { NestedKeys, 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: NestedKeys, 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/styles.ts

@@ -1,4 +1,4 @@
-import type { CustomNamedStyles, MediaQueries, ScreenSize } from '../types'
+import type { CustomNamedStyles, ScreenSize, MediaQuery } from '../types'
 import { getValueForBreakpoint } from './breakpoints'
 import { normalizeStyles } from './normalizeStyles'
 import type { UnistylesBreakpoints } from '../global'
@@ -60,7 +60,7 @@ export const parseStyle = <T>(
 
                 return [
                     key,
-                    getValueForBreakpoint(value as Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>)
+                    getValueForBreakpoint(value as Record<keyof UnistylesBreakpoints | MediaQuery, string | number | undefined>)
                 ]
             })
         )

package/lib/commonjs/UnistyleRegistry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["UnistyleRegistry","config","themeNames","themes","breakpoints","sortedBreakpointPairs","constructor","unistylesBridge","addThemes","keys","Object","addBreakpoints","useBreakpoints","addConfig","adaptiveThemes","useAdaptiveThemes","dangerouslyUnregister","unregister","exports"],"sourceRoot":"../../src","sources":["UnistyleRegistry.ts"],"mappings":";;;;;;AAGO,MAAMA,gBAAgB,CAAC;EACnBC,MAAM,GAAoB,CAAC,CAAC;EAC5BC,UAAU,GAAiC,EAAE;EAC7CC,MAAM,GAAoB,CAAC,CAAC;EAC5BC,WAAW,GAAyB,CAAC,CAAC;EACtCC,qBAAqB,GAA0F,EAAE;EAExHC,WAAWA,CAASC,eAAgC,EAAE;IAAA,KAAlCA,eAAgC,GAAhCA,eAAgC;EAAG;EAEhDC,SAAS,GAAIL,MAAuB,IAAK;IAC5C,IAAI,CAACA,MAAM,GAAGA,MAAM;IAEpB,MAAMM,IAAI,GAAGC,MAAM,CAACD,IAAI,CAACN,MAAM,CAAiC;IAEhE,IAAI,CAACI,eAAe,CAACJ,MAAM,GAAGM,IAAI;IAClC,IAAI,CAACP,UAAU,GAAGO,IAAI;IAEtB,OAAO,IAAI;EACf,CAAC;EAEME,cAAc,GAAIP,WAAiC,IAAK;IAC3D,IAAI,CAACG,eAAe,CAACK,cAAc,CAACR,WAAW,CAAC;IAChD,IAAI,CAACC,qBAAqB,GAAG,IAAI,CAACE,eAAe,CAACF,qBAAqB;IAEvE,OAAO,IAAI;EACf,CAAC;EAEMQ,SAAS,GAAIZ,MAAuB,IAAK;IAC5C,IAAI,CAACA,MAAM,GAAGA,MAAM;IAEpB,IAAIA,MAAM,CAACa,cAAc,EAAE;MACvB,IAAI,CAACP,eAAe,CAACQ,iBAAiB,CAACd,MAAM,CAACa,cAAc,CAAC;IACjE;IAEA,OAAO,IAAI;EACf,CAAC;EAEME,qBAAqB,GAAGA,CAAA,KAAM;IACjC,IAAI,CAACf,MAAM,GAAG,CAAC,CAAC;IAChB,IAAI,CAACC,UAAU,GAAG,EAAE;IACpB,IAAI,CAACC,MAAM,GAAG,CAAC,CAAoB;IACnC,IAAI,CAACC,WAAW,GAAG,CAAC,CAAyB;IAC7C,IAAI,CAACC,qBAAqB,GAAG,EAAE;IAE/B,IAAI,CAACE,eAAe,CAACU,UAAU,CAAC,CAAC;EACrC,CAAC;AACL;AAACC,OAAA,CAAAlB,gBAAA,GAAAA,gBAAA"}

package/lib/commonjs/Unistyles.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_UnistylesModule","require","_UnistylesRuntime","_UnistylesEngine","_UnistyleRegistry","_types","Unistyles","constructor","isInstalled","UnistylesModule","install","Error","UnistylesError","RuntimeUnavailable","_bridge","global","__UNISTYLES__","_registry","UnistyleRegistry","_runtime","UnistylesRuntime","_engine","UnistylesBuiltInEngine","registry","runtime","engine","unistyles","exports"],"sourceRoot":"../../src","sources":["Unistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAEA,IAAAI,MAAA,GAAAJ,OAAA;AAEA,MAAMK,SAAS,CAAC;EAMZC,WAAWA,CAAA,EAAG;IACV,MAAMC,WAAW,GAAGC,gCAAe,EAAEC,OAAO,CAAC,CAAC,IAAI,KAAK;IAEvD,IAAI,CAACF,WAAW,EAAE;MACd,MAAM,IAAIG,KAAK,CAACC,qBAAc,CAACC,kBAAkB,CAAC;IACtD;;IAEA;IACA,IAAI,CAACC,OAAO,GAAGC,MAAM,CAACC,aAAgC;IACtD,IAAI,CAACC,SAAS,GAAG,IAAIC,kCAAgB,CAAC,IAAI,CAACJ,OAAO,CAAC;IACnD,IAAI,CAACK,QAAQ,GAAG,IAAIC,kCAAgB,CAAC,IAAI,CAACN,OAAO,EAAE,IAAI,CAACG,SAAS,CAAC;IAClE,IAAI,CAACI,OAAO,GAAG,IAAIC,uCAAsB,CAAC,IAAI,CAACL,SAAS,EAAE,IAAI,CAACE,QAAQ,CAAC;EAC5E;EAEA,IAAWI,QAAQA,CAAA,EAAG;IAClB,OAAO,IAAI,CAACN,SAAS;EACzB;EAEA,IAAWO,OAAOA,CAAA,EAAG;IACjB,OAAO,IAAI,CAACL,QAAQ;EACxB;EAEA,IAAWM,MAAMA,CAAA,EAAG;IAChB,OAAO,IAAI,CAACJ,OAAO;EACvB;AACJ;AAEO,MAAMK,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAIpB,SAAS,CAAC,CAAC"}