react-native-unistyles 1.2.0 → 2.0.0-alpha.10

package/src/types/breakpoints.ts

@@ -1,36 +1,33 @@
 import type { OpaqueColorValue } from 'react-native'
-import type { MediaQueries } from './mediaQueries'
-
-export type Breakpoints = Record<string, number>
-export type SortedBreakpointEntries<B extends Breakpoints> = [[keyof B & string, number]]
-
-export type ScreenSize = {
-    width: number,
-    height: number
-}
-
-export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST
+import type { UnistylesBreakpoints } from '../global'
+import type { MediaQuery } from './mq'
+import type { VariantValue } from './core'
 
 type WithEmptyObject<V> = keyof V extends never ? {} : V
 
-export type ExtractBreakpoints<T, B extends Breakpoints> = T extends Partial<Record<keyof B & 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, B>
+        ? (...args: A) => ExtractBreakpoints<R>
         : {
             [K in keyof T]: T[K] extends (...args: infer A) => infer R
-                ? (...args: A) => ExtractBreakpoints<R, B>
+                ? (...args: A) => ExtractBreakpoints<R>
                 : T[K] extends object
-                    ? ExtractBreakpoints<T[K], B>
+                    ? ExtractBreakpoints<T[K]>
                     : T[K]
         }
 
-export type RemoveKeysWithPrefix<T, B extends Breakpoints> = T extends (...args: Array<any>) => infer R
-    ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B>
+type FlattenObjectTypes<T> = T[keyof T]
+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 B & string : K]: RemoveKeysWithPrefix<T[K], B> }
-                : { [K in keyof T]: RemoveKeysWithPrefix<T[K], B> }
+                ? T extends { variants: VariantValue }
+                    ? RemoveKeysWithPrefix<FlattenObjectTypes<T['variants']>>
+                    : { [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 { Breakpoints } from './breakpoints'
-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
@@ -37,37 +42,50 @@ type TransformStyles =
     & SkewYTransform
     & MatrixTransform
 
-type UnistyleNested<B> = {
-    shadowOffset?: DeepUniStyle<ShadowOffset, B>,
-    textShadowOffset?: DeepUniStyle<ShadowOffset, B>,
-    transform?: Array<DeepUniStyle<TransformStyles, B>>
+type UnistyleNested = {
+    shadowOffset?: DeepUniStyle<ShadowOffset>,
+    textShadowOffset?: DeepUniStyle<ShadowOffset>,
+    transform?: Array<DeepUniStyle<TransformStyles>>
 }
 
-type UniStyle<V, B> = {
-    [innerKey in keyof B]?: V
+type UniStyle<V> = {
+    [innerKey in keyof UnistylesBreakpoints]?: V
 } | {
-    [innerKey in MediaQueries]?: V
-} | V
+    [innerKey in MediaQuery]: V
+} | {
+    [innerKey in 'variants']?: {
+        [variant: string]: V
+    }
+}
 
-type DeepUniStyle<T, B> = {
-    [K in keyof T]?: UniStyle<T[K], B>
+type DeepUniStyle<T> = {
+    [K in keyof T]?: UniStyle<T[K]> | T[K]
 }
 
 // these props are treated differently to nest breakpoints and media queries
 type NestedTypes = 'shadowOffset' | 'transform' | 'textShadowOffset'
 
-type UnistyleView<B> = DeepUniStyle<Omit<ViewStyle, NestedTypes>, B>
-type UnistyleText<B> = DeepUniStyle<Omit<TextStyle, NestedTypes>, B>
-type UnistyleImage<B> = DeepUniStyle<Omit<ImageStyle, NestedTypes>, B>
+type UnistyleView = DeepUniStyle<Omit<ViewStyle, NestedTypes>>
+type UnistyleText = DeepUniStyle<Omit<TextStyle, NestedTypes>>
+type UnistyleImage = DeepUniStyle<Omit<ImageStyle, NestedTypes>>
 
-export type StaticStyles<B extends Breakpoints> =
-    | UnistyleView<B>
-    | UnistyleText<B>
-    | UnistyleImage<B>
-    & UnistyleNested<B>
+export type StaticStyles =
+    | UnistyleView
+    | UnistyleText
+    | UnistyleImage
+    & UnistyleNested
+
+export type CustomNamedStyles<T> = {
+    [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles
+        ? (...args: A) => StaticStyles
+        : StaticStyles
+}
 
-export type CustomNamedStyles<T, B extends Breakpoints> = {
-    [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles<B>
-        ? (...args: A) => StaticStyles<B>
-        : StaticStyles<B>
+export type RNValue = number | string | undefined
+export type VariantValue = Record<string, RNValue>
+export type NestedStyle = Record<keyof UnistylesBreakpoints | MediaQuery | 'variants', RNValue> & {
+    variants: VariantValue
 }
+export type NestedStylePairs = Array<[keyof UnistylesBreakpoints | MediaQuery | 'variants', RNValue | VariantValue]>
+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 type { CustomNamedStyles } from './core'
-export type {
-    ScreenSize,
-    Breakpoints,
-    CreateStylesFactory,
-    ExtractBreakpoints,
-    RemoveKeysWithPrefix,
-    SortedBreakpointEntries
-} from './breakpoints'
+export * from './unistyles'
+export type { Optional, Nullable } from './common'
+export type { MediaQuery } from './mq'
+export type { CustomNamedStyles, NestedStylePairs, UnistylesTheme, CreateStylesFactory, ScreenSize, NestedStyle, RNValue } 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/unistyles.ts

@@ -0,0 +1,45 @@
+import { CxxUnistylesEventTypes, ScreenOrientation } from '../common'
+import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
+import type { ScreenSize } from './core'
+import type { Optional } from './common'
+
+export type ColorSchemeName = Optional<'light' | 'dark'>
+
+export type UnistylesConfig = {
+    adaptiveThemes?: boolean
+}
+
+export type UnistylesBridge = {
+    // getters
+    screenWidth: number,
+    screenHeight: number,
+    hasAdaptiveThemes: boolean,
+    themeName: keyof UnistylesThemes,
+    breakpoint: keyof UnistylesBreakpoints,
+    colorScheme: ColorSchemeName,
+    sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>,
+
+    // setters
+    themes: Array<keyof UnistylesThemes>,
+    useBreakpoints(breakpoints: UnistylesBreakpoints): void,
+    useTheme(name: keyof UnistylesThemes): void,
+    useAdaptiveThemes(enable: boolean): void
+}
+
+export type UnistylesThemeEvent = {
+    type: CxxUnistylesEventTypes.Theme,
+    payload: {
+        themeName: keyof UnistylesThemes
+    }
+}
+
+export type UnistylesMobileLayoutEvent = {
+    type: CxxUnistylesEventTypes.Layout,
+    payload: {
+        screen: ScreenSize,
+        breakpoint: keyof UnistylesBreakpoints,
+        orientation: ScreenOrientation
+    }
+}
+
+export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent

package/src/useStyles.ts

@@ -0,0 +1,56 @@
+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 type { UnistylesBreakpoints } from './global'
+
+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>,
+    variant?: string
+): ParsedStylesheet<ST> => {
+    const { theme, layout } = useUnistyles()
+    const { screenSize, breakpoint } = layout
+
+    if (!stylesheet) {
+        return {
+            theme,
+            breakpoint,
+            styles: {} as ReactNativeStyleSheet<ST>
+        }
+    }
+
+    const parsedStyles = useMemo(() => typeof stylesheet === 'function'
+        ? stylesheet(theme)
+        : stylesheet, [theme, stylesheet])
+
+    const dynamicStyleSheet = useMemo(() => Object
+        .entries(parsedStyles)
+        .reduce((acc, [key, value]) => {
+            const style = value as CustomNamedStyles<ST>
+
+            if (typeof value === 'function') {
+                return {
+                    ...acc,
+                    [key]: proxifyFunction(value, breakpoint, screenSize, variant)
+                }
+            }
+
+            return StyleSheet.create({
+                ...acc,
+                [key]: parseStyle<ST>(style, breakpoint, screenSize, variant)
+            })
+        }, {} as ST), [breakpoint, screenSize, parsedStyles, variant]) as ReactNativeStyleSheet<ST>
+
+    return {
+        theme,
+        breakpoint,
+        styles: dynamicStyleSheet
+    }
+}

package/src/utils/breakpoints.ts

@@ -1,37 +1,22 @@
-import { throwError } from './common'
-import type { Breakpoints, ScreenSize, SortedBreakpointEntries } from '../types'
-import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
-
-/**
- * Sorts the breakpoints object based on its numeric values in ascending order and validates them.
- *
- * This function takes an object where keys represent breakpoint names and values are numeric.
- * It returns a new object with the same keys but sorted based on their corresponding numeric values.
- * Additionally, it validates that:
- * 1. The first breakpoint starts with a value of 0.
- * 2. No duplicate breakpoint values exist.
- *
- * If the validation fails, appropriate error messages are logged to the console.
- *
- * @template B - An object type where keys are strings and values are numbers.
- * @param {B} breakpoints - The breakpoints object to be sorted and validated.
- * @returns {B} A new object with sorted and validated breakpoints.
- *
- * @example
- * const input = { md: 768, lg: 1024, sm: 0 }
- * sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
- */
-export const sortAndValidateBreakpoints = <B extends Breakpoints>(breakpoints: B): B => {
+import { unistyles } from '../core'
+import { isMobile, Orientation, throwError } from './common'
+import type { NestedStyle, NestedStylePairs, RNValue } from '../types'
+import type { UnistylesBreakpoints } from '../global'
+import { ScreenOrientation } from '../common'
+import { getKeyForUnistylesMediaQuery } from './mqParser'
+import { getKeyForVariant } from './variants'
+
+export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): UnistylesBreakpoints => {
     const sortedPairs = Object
         .entries(breakpoints)
         .sort((breakpoint1, breakpoint2) => {
             const [, value1] = breakpoint1
             const [, value2] = breakpoint2
 
-            return value1 - value2
+            return (value1 as number) - (value2 as number)
         })
 
-    const sortedBreakpoints =  Object.freeze(Object.fromEntries(sortedPairs)) as B
+    const sortedBreakpoints =  Object.freeze(Object.fromEntries(sortedPairs)) as UnistylesBreakpoints
     const breakpointValues = Object.values(sortedBreakpoints)
     const [firstBreakpoint] = breakpointValues
 
@@ -46,25 +31,10 @@ export const sortAndValidateBreakpoints = <B extends Breakpoints>(breakpoints: B
     return sortedBreakpoints
 }
 
-/**
- * Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
- *
- * This function takes a screen width and an object of breakpoints. It returns the key of the breakpoint
- * that the screen width falls into. The breakpoints are assumed to be sorted in ascending order.
- *
- * @template B - An object type where keys are strings and values are numbers representing screen widths.
- * @param {number} width - The screen width to determine the breakpoint for.
- * @param breakpointEntries - sorted pairs of breakpoints
- * @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
- *
- * @example
- * const breakpoints = { sm: 0, md: 768, lg: 1024 }
- * getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
- */
-export const getBreakpointFromScreenWidth = <B extends Breakpoints>(width: number, breakpointEntries: SortedBreakpointEntries<B>): keyof B & string => {
+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
+            const minVal = value as number
             const maxVal = otherBreakpoints[index + 1]?.[1]
 
             if (!maxVal) {
@@ -72,69 +42,68 @@ export const getBreakpointFromScreenWidth = <B extends Breakpoints>(width: numbe
             }
 
             return width >= minVal && width < maxVal
-        }) as [keyof B & string, number]
+        }) as [keyof UnistylesBreakpoints & string, number]
 
     return key
 }
 
-/**
- * Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
- *
- * The function first checks for custom media queries. If a matching custom media query is found, its associated value is returned.
- * If no custom media query matches, the function then checks for a direct breakpoint match.
- * If there's no direct breakpoint match, the function simulates CSS cascading to find the closest matching breakpoint.
- *
- * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
- *
- * @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
- * @param {keyof B & string} breakpoint - The breakpoint name to check against.
- * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
- * @param breakpointPairs - sorted pairs of breakpoints
- *
- * @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
- *
- * @example
- *
- * const values = { ':w[200]': 'value1', sm: 'value2', md: 'value3' }
- * const screenSize = { width: 250, height: 400 }
- * const breakpoints = { sm: 300, md: 600, lg: 900 }
- *
- * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
- */
-export const getValueForBreakpoint = <B extends Breakpoints>(
-    value: Record<keyof B & string, string | number | undefined>,
-    breakpoint: keyof B & string,
-    screenSize: ScreenSize,
-    breakpointPairs: SortedBreakpointEntries<B>
-): string | number | undefined => {
-    // the highest priority is for custom media queries
-    const customMediaQueries = Object
-        .entries(value)
-        .filter(([key]) => isMediaQuery(key))
-    const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize)
-
-    if (customMediaQueryKey && customMediaQueryKey in value) {
+// todo move it to different file
+export const getValueForNestedStyle = (value: NestedStyle, variant?: string): RNValue => {
+    // the highest priority is for variants
+    const variantKey = getKeyForVariant(value, variant)
+
+    if (variantKey) {
+        return value.variants[variantKey as string]
+    }
+
+    // then custom media queries
+    const customMediaQueryKey = getKeyForUnistylesMediaQuery(
+        Object.entries(value) as NestedStylePairs,
+        unistyles.runtime.screen
+    ) as keyof typeof value
+
+    if (customMediaQueryKey) {
         return value[customMediaQueryKey]
     }
 
-    // if no custom media query, or didn't match, proceed with defined breakpoints
-    const unifiedKey = breakpoint
-    const directBreakpoint = value[unifiedKey]
+    // 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
+
+    // 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
+        ]
+    }
+
+    // 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 || (unifiedKey in value)) {
+    if (directBreakpoint || (breakpoint in value)) {
         return directBreakpoint
     }
 
-    // there is no direct hit for breakpoint nor media-query, so let's simulate CSS cascading
+    // there is no direct hit for breakpoint nor media-query, let's simulate CSS cascading
+    const breakpointPairs = unistyles.runtime.sortedBreakpoints
     const currentBreakpoint = breakpointPairs
-        .findIndex(([key]) => key === unifiedKey)
+        .findIndex(([key]) => key === breakpoint)
 
     const availableBreakpoints = breakpointPairs
         .filter(([key], index) => index < currentBreakpoint && key && key in value)
         .map(([key]) => key)
 
     return breakpointPairs.length > 0
-        ? value[availableBreakpoints[availableBreakpoints.length - 1] as keyof B & string]
+        ? value[availableBreakpoints[availableBreakpoints.length - 1] as keyof UnistylesBreakpoints & string]
         : undefined
 }

package/src/utils/common.ts

@@ -8,7 +8,13 @@ export const warn = (message: string) => {
     console.warn(`🦄 [react-native-unistyles]: ${message}`)
 }
 
+export const isMobile = Platform.OS === 'android' || Platform.OS === 'ios'
 export const isWeb = Platform.OS === 'web'
 export const isIOS = Platform.OS === 'ios'
 export const isAndroid = Platform.OS === 'android'
 export const isServer = typeof window === 'undefined'
+
+export const Orientation = {
+    Landscape: 'landscape',
+    Portrait: 'portrait'
+} as const

package/src/utils/index.ts

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

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)
+    }
+})