react-native-unistyles 2.0.0-alpha.6 → 2.0.0-alpha.8

package/lib/typescript/src/utils/mq.d.ts

@@ -0,0 +1,21 @@
+import type { MediaQuery, Nullable } from '../types';
+import type { UnistylesBreakpoints } from '../global';
+export declare const MQSymbol: unique symbol;
+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;
+export declare const mq: MQHandler;
+export {};
+//# sourceMappingURL=mq.d.ts.map

package/lib/typescript/src/utils/mq.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mq.d.ts","sourceRoot":"","sources":["../../../../src/utils/mq.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAGrD,eAAO,MAAM,QAAQ,eAAyB,CAAA;AAE9C,KAAK,OAAO,GAAG,MAAM,oBAAoB,GAAG,MAAM,CAAA;AAElD,KAAK,SAAS,GAAG;IACb,CAAC,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC;IAC1D,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC;IAC9D,CAAC,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;IAC3D,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,aAAa,CAAA;CAClE,CAAA;AAED,KAAK,aAAa,GAAG;IACjB,CAAC,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACxD,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;CAC9D,GAAG,UAAU,CAAA;AAEd,KAAK,YAAY,GAAG;IAChB,CAAC,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACxD,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;CAC/D,GAAG,UAAU,CAAA;AAsEd,eAAO,MAAM,EAAE,WAYb,CAAA"}

package/lib/typescript/src/utils/mqParser.d.ts

@@ -0,0 +1,3 @@
+import type { NestedKeys, Optional, ScreenSize } from '../types';
+export declare const getKeyForUnistylesMediaQuery: (mediaQueries: NestedKeys, screenSize: ScreenSize) => Optional<string>;
+//# sourceMappingURL=mqParser.d.ts.map

package/lib/typescript/src/utils/mqParser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mqParser.d.ts","sourceRoot":"","sources":["../../../../src/utils/mqParser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAkFhE,eAAO,MAAM,4BAA4B,yCAA0C,UAAU,qBAgB5F,CAAA"}

package/lib/typescript/src/utils/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAgB,UAAU,EAAE,MAAM,UAAU,CAAA;AAG3E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAGrD,eAAO,MAAM,eAAe,OACpB,QAAQ,cAAc,MAAM,oBAAoB,GAAG,MAAM,cACjD,UAAU,KACvB,QAGD,CAAA;AAEF,eAAO,MAAM,eAAe,8BAA6B,OAMxD,CAAA;AAED,eAAO,MAAM,UAAU,+CAEP,MAAM,oBAAoB,GAAG,MAAM,cACnC,UAAU,MA6CzB,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAc,MAAM,UAAU,CAAA;AAGzE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAGrD,eAAO,MAAM,eAAe,OACpB,QAAQ,cAAc,MAAM,oBAAoB,GAAG,MAAM,cACjD,UAAU,KACvB,QAGD,CAAA;AAEF,eAAO,MAAM,eAAe,8BAA6B,OAMxD,CAAA;AAED,eAAO,MAAM,UAAU,+CAEP,MAAM,oBAAoB,GAAG,MAAM,cACnC,UAAU,MA6CzB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.8",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",

package/src/common.ts

@@ -0,0 +1,18 @@
+export enum CxxUnistylesEventTypes {
+    Theme = 'theme',
+    Layout = 'layout'
+}
+
+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 enum ScreenOrientation {
+    Portrait = 1,
+    Landscape = 2
+}

package/src/{UnistyleRegistry.ts → core/UnistyleRegistry.ts}

@@ -1,5 +1,5 @@
-import type { UnistylesBridge, UnistylesConfig } from './types'
-import type { UnistylesThemes, UnistylesBreakpoints } from './global'
+import type { UnistylesBridge, UnistylesConfig } from '../types'
+import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
 
 export class UnistyleRegistry {
     public config: UnistylesConfig = {}

package/src/{Unistyles.ts → core/Unistyles.ts}

@@ -1,13 +1,11 @@
 import { UnistylesModule } from './UnistylesModule'
 import { UnistylesRuntime } from './UnistylesRuntime'
-import { UnistylesBuiltInEngine } from './UnistylesEngine'
 import { UnistyleRegistry } from './UnistyleRegistry'
-import type { UnistylesBridge } from './types'
-import { UnistylesError } from './types'
+import type { UnistylesBridge } from '../types'
+import { UnistylesError } from '../common'
 
 class Unistyles {
     private _runtime: UnistylesRuntime
-    private _engine: UnistylesBuiltInEngine
     private _registry: UnistyleRegistry
     private _bridge: UnistylesBridge
 
@@ -22,7 +20,6 @@ class Unistyles {
         this._bridge = global.__UNISTYLES__ as UnistylesBridge
         this._registry = new UnistyleRegistry(this._bridge)
         this._runtime = new UnistylesRuntime(this._bridge, this._registry)
-        this._engine = new UnistylesBuiltInEngine(this._registry, this._runtime)
     }
 
     public get registry() {
@@ -32,10 +29,6 @@ class Unistyles {
     public get runtime() {
         return this._runtime
     }
-
-    public get engine() {
-        return this._engine
-    }
 }
 
 export const unistyles = new Unistyles()

package/src/{UnistylesRuntime.ts → core/UnistylesRuntime.ts}

@@ -1,7 +1,7 @@
-import type { UnistylesBridge } from './types'
+import { ScreenOrientation, UnistylesError } from '../common'
+import type { UnistylesBridge } from '../types'
+import type { UnistylesThemes } from '../global'
 import type { UnistyleRegistry } from './UnistyleRegistry'
-import { ScreenOrientation, UnistylesError } from './types'
-import type { UnistylesThemes } from './global'
 
 export class UnistylesRuntime {
     constructor(private unistylesBridge: UnistylesBridge, private registry: UnistyleRegistry) {}

package/src/core/index.ts

@@ -0,0 +1 @@
+export { unistyles } from './Unistyles'

package/src/hooks/index.ts

@@ -1 +1,2 @@
-export { useDimensions } from './useDimensions'
+export { useInitialTheme } from './useInitialTheme'
+export { useUnistyles } from './useUnistyles'

package/src/{useInitialTheme.ts → hooks/useInitialTheme.ts}

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
-import { unistyles } from './Unistyles'
-import type { UnistylesThemes } from './global'
+import { unistyles } from '../core'
+import type { UnistylesThemes } from '../global'
 
 export const useInitialTheme = (forName: keyof UnistylesThemes) => {
     useMemo(() => unistyles.runtime.setTheme(forName), [])

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,11 +1,10 @@
-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'
-
-export { useInitialTheme } from './useInitialTheme'
-
-export { useStyles } from './useStyles'
-export { createStyleSheet } from './createStyleSheet'
+import { ScreenOrientation } from './common'
+import { useStyles } from './useStyles'
+import { createStyleSheet } from './createStyleSheet'
 
 const { addThemes, addBreakpoints, addConfig  } = unistyles.registry
 const UnistylesRuntime = unistyles.runtime
@@ -23,6 +22,10 @@ export {
 }
 
 export {
+    mq,
+    useInitialTheme,
+    useStyles,
+    createStyleSheet,
     ScreenOrientation
 }
 

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,
@@ -35,11 +29,6 @@ export type UnistylesBridge = {
     unregister(): void
 }
 
-export enum CxxUnistylesEventTypes {
-    Theme = 'theme',
-    Layout = 'layout'
-}
-
 export type UnistylesThemeEvent = {
     type: CxxUnistylesEventTypes.Theme,
     payload: {
@@ -58,16 +47,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,13 +1,7 @@
 export { normalizeStyles } from './normalizeStyles'
 export * from './normalizer'
+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

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