react-native-unistyles 2.0.0-alpha.14 → 2.0.0-alpha.15

package/src/hooks/useUnistyles.ts

@@ -1,7 +1,7 @@
 import { NativeEventEmitter, NativeModules } from 'react-native'
 import { useEffect, useState } from 'react'
 import { unistyles } from '../core'
-import { CxxUnistylesEventTypes } from '../common'
+import { UnistylesEventType } from '../common'
 import type { UnistylesEvents, UnistylesMobileLayoutEvent, UnistylesThemeEvent } from '../types'
 
 const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
@@ -23,24 +23,21 @@ export const useUnistyles = () => {
             'onChange',
             (event: UnistylesEvents) => {
                 switch (event.type) {
-                    case CxxUnistylesEventTypes.Theme: {
+                    case UnistylesEventType.Theme: {
                         const themeEvent = event as UnistylesThemeEvent
 
                         return setTheme(unistyles.registry.getTheme(themeEvent.payload.themeName))
                     }
-                    case CxxUnistylesEventTypes.Layout: {
+                    case UnistylesEventType.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
-                            }
+                            screenSize: layoutEvent.payload.screen
                         })
                     }
-                    case CxxUnistylesEventTypes.Plugin: {
+                    case UnistylesEventType.Plugin: {
                         return setPlugins(unistyles.runtime.enabledPlugins)
                     }
                     default:

package/src/hooks/useVariants.ts

@@ -0,0 +1,23 @@
+import { useRef } from 'react'
+import type { Optional } from '../types'
+
+const compareVariants = (prevVariants?: Record<string, Optional<string>>, nextVariants?: Record<string, Optional<string>>) => {
+    const keysA = Object.keys(prevVariants ?? {})
+    const keysB = Object.keys(nextVariants ?? {})
+
+    if (keysA.length !== keysB.length) {
+        return false
+    }
+
+    return keysA.every(key => prevVariants![key] === (nextVariants ?? {})[key])
+}
+
+export const useVariants = (variantsMap?: Record<string, Optional<string>>) => {
+    const variantsRef = useRef<Optional<Record<string, Optional<string>>>>(variantsMap)
+
+    if (!compareVariants(variantsRef.current, variantsMap)) {
+        variantsRef.current = variantsMap
+    }
+
+    return variantsRef.current
+}

package/src/plugins/normalizer/normalizer.ts

@@ -1,7 +1,7 @@
 // based on react-native-web normalizer
 // https://github.com/necolas/react-native-web
 import normalizeColors from '@react-native/normalize-colors'
-import type { TextShadow, Transforms, BoxShadow } from '../../types'
+import type { TextShadow, Transforms, BoxShadow, Nullable } from '../../types'
 
 type Preprocessor = {
     createTextShadowValue(style: TextShadow): string,
@@ -15,9 +15,9 @@ export const normalizeColor = (color: string, opacity: number = 1) => {
         return color
     }
 
-    const integer = normalizeColors(color) as number | null
+    const integer = normalizeColors(color) as Nullable<number>
 
-    // If the colour is an unknown format, the return value is null
+    // If the color is an unknown format, the return value is null
     if (integer === null) {
         return color
     }

package/src/types/breakpoints.ts

@@ -1,34 +1,55 @@
-import type { OpaqueColorValue } from 'react-native'
-import type { UnistylesBreakpoints } from '../global'
-import type { MediaQuery } from './mq'
+import type { ColorValue, OpaqueColorValue } from 'react-native'
+import type { UnistylesTheme } from '../types'
+import type { AllAvailableKeys, BreakpointsOrMediaQueries } from './stylesheet'
 
 type WithEmptyObject<V> = keyof V extends never ? {} : 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>
-        : {
-            [K in keyof T]: T[K] extends (...args: infer A) => infer R
-                ? (...args: A) => ExtractBreakpoints<R>
-                : T[K] extends object
-                    ? ExtractBreakpoints<T[K]>
+type ExtractBreakpoints<T> = T extends Partial<Record<BreakpointsOrMediaQueries, infer R>>
+    ? WithEmptyObject<R>
+    : {
+        [K in keyof T]: T[K] extends object
+            ? T[K] extends OpaqueColorValue
+                ? ColorValue
+                : ExtractBreakpoints<T[K]>
+            : T[K]
+    }
+
+type ParseNestedObject<T> = T extends (...args: infer A) => infer R
+    ? (...args: A) => ParseNestedObject<R>
+    : keyof T extends AllAvailableKeys
+        ? ExtractBreakpoints<T>
+        : T extends { variants: infer R }
+            ? ParseVariants<FlattenVariants<R>> & ParseNestedObject<Omit<T, 'variants'>>
+            : {
+                [K in keyof T]: T[K] extends object
+                    ? T[K] extends OpaqueColorValue
+                        ? ColorValue
+                        : ExtractBreakpoints<T[K]>
                     : T[K]
-        }
+            }
 
-type UnionToIntersection<U> =
-    (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never
+type FlattenVariants<T> = 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]>
+                    : never
+            }
+            : never
+    }
+    : never
 
-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>
-                ? T extends { variants: infer _V }
-                    ? Omit<T, 'variants'> & UnionToIntersection<_V[keyof _V]>
-                    : { [K in keyof T as K extends MediaQuery ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
-                : { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
+type ParseVariants<T> = T extends object
+    ? T[keyof T] extends object
+        ? ParseVariants<T[keyof T]>
         : T
+    : T
+
+type ParseStyleKeys<T> = T extends object
+    ? { [K in keyof T]: ParseNestedObject<T[K]> }
+    : never
 
-export type ReactNativeStyleSheet<T> = ExtractBreakpoints<RemoveKeysWithPrefix<T>>
+export type ReactNativeStyleSheet<T> = T extends (theme: UnistylesTheme) => infer R
+    ? ParseStyleKeys<R>
+    : ParseStyleKeys<T>

package/src/types/core.ts

@@ -17,17 +17,12 @@ import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
 import type { MediaQuery } from './mq'
 
-type ShadowOffset = {
+export type ShadowOffset = {
     width: number,
     height: number
 }
 
-export type ScreenSize = {
-    width: number,
-    height: number
-}
-
-type TransformStyles =
+export type TransformStyles =
     & PerpectiveTransform
     & RotateTransform
     & RotateXTransform
@@ -42,40 +37,9 @@ type TransformStyles =
     & SkewYTransform
     & MatrixTransform
 
-type UnistyleNested = {
-    shadowOffset?: DeepUniStyle<ShadowOffset>,
-    textShadowOffset?: DeepUniStyle<ShadowOffset>,
-    transform?: Array<DeepUniStyle<TransformStyles>>,
-    variants?: Record<string, UnistyleView | UnistyleText | UnistyleImage & Omit<UnistyleNested, 'variants'>>
-}
-
-type UniStyle<V> = {
-    [innerKey in keyof UnistylesBreakpoints]?: V
-} | {
-    [innerKey in MediaQuery]: V
-}
-
-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 = DeepUniStyle<Omit<ViewStyle, NestedTypes>>
-type UnistyleText = DeepUniStyle<Omit<TextStyle, NestedTypes>>
-type UnistyleImage = DeepUniStyle<Omit<ImageStyle, NestedTypes>>
-
-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 ScreenSize = {
+    width: number,
+    height: number
 }
 
 export type RNStyle = ViewStyle | TextStyle | ImageStyle
@@ -83,4 +47,4 @@ export type RNValue = number | string | undefined
 export type NestedStyle = Record<keyof UnistylesBreakpoints | MediaQuery, RNValue>
 export type NestedStylePairs = Array<[keyof UnistylesBreakpoints | MediaQuery, RNValue]>
 export type UnistylesTheme = UnistylesThemes[keyof UnistylesThemes]
-export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST
+export type CreateStylesFactory<ST> = (theme: UnistylesTheme) => ST

package/src/types/index.ts

@@ -3,7 +3,6 @@ export * from './unistyles'
 export type { Optional, Nullable } from './common'
 export type { MediaQuery } from './mq'
 export type {
-    CustomNamedStyles,
     NestedStylePairs,
     UnistylesTheme,
     CreateStylesFactory,
@@ -12,6 +11,7 @@ export type {
     RNValue,
     RNStyle
 } from './core'
+export type { StyleSheetWithSuperPowers, StyleSheet } from './stylesheet'
 export type { ReactNativeStyleSheet } from './breakpoints'
 export type { ExtractVariantNames } from './variants'
 export type { UnistylesPlugin } from './plugin'

package/src/types/mq.ts

@@ -1,3 +1,3 @@
-import { MQSymbol } from '../utils'
+import { MQSymbol, MQHeight, MQHeightAndWidth, MQWidth, MQWidthAndHeight } from '../utils'
 
-export type MediaQuery = typeof MQSymbol
+export type MediaQuery = typeof MQSymbol | typeof MQHeight | typeof MQWidth | typeof MQHeightAndWidth | typeof MQWidthAndHeight

package/src/types/stylesheet.ts

@@ -0,0 +1,56 @@
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
+import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
+import type { UnistylesBreakpoints } from '../global'
+import type { MediaQuery } from './mq'
+
+// these props are treated differently to nest breakpoints and media queries
+type NestedTypes = 'shadowOffset' | 'transform' | 'textShadowOffset'
+
+type UnistyleView = Omit<ViewStyle, NestedTypes>
+type UnistyleText = Omit<TextStyle, NestedTypes>
+type UnistyleImage = Omit<ImageStyle, NestedTypes>
+
+type UnistyleNestedStyles = {
+    shadowOffset?: ToDeepUnistyles<ShadowOffset>,
+    textShadowOffset?: ToDeepUnistyles<ShadowOffset>,
+    transform?: Array<ToDeepUnistyles<TransformStyles>>
+}
+
+type Variants = {
+    variants?: {
+        [variantName: string]: {
+            [variant: string]: {
+                [propName in AllAvailableKeys]?: AllAvailableStyles[propName] | {
+                    [key in BreakpointsOrMediaQueries]?: AllAvailableStyles[propName]
+                } & {
+                    [propName in NestedTypes]?: UnistyleNestedStyles[propName]
+                }
+            }
+        }
+    }
+}
+
+type ToDeepUnistyles<T> = {
+    [K in keyof T]?: T[K] | {
+        [key in BreakpointsOrMediaQueries]?: T[K]
+    }
+}
+
+type AllAvailableStyles = UnistyleView & UnistyleText & UnistyleImage & UnistyleNestedStyles
+
+export type AllAvailableKeys = keyof (UnistyleView & UnistyleText & UnistyleImage)
+export type BreakpointsOrMediaQueries = keyof UnistylesBreakpoints | MediaQuery
+
+export type UnistylesValues = {
+    [propName in AllAvailableKeys]?: AllAvailableStyles[propName] | {
+        [key in BreakpointsOrMediaQueries]?: AllAvailableStyles[propName]
+    }
+} & Variants & {
+    [propName in NestedTypes]?: UnistyleNestedStyles[propName]
+}
+
+export type StyleSheet = {
+    [styleName: string]: UnistylesValues | ((...args: any) => UnistylesValues)
+}
+
+export type StyleSheetWithSuperPowers = ((theme: UnistylesTheme) => StyleSheet) | StyleSheet

package/src/types/unistyles.ts

@@ -1,10 +1,9 @@
-import { CxxUnistylesEventTypes, ScreenOrientation } from '../common'
+import { UnistylesEventType, ScreenOrientation } from '../common'
 import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
 import type { ScreenSize } from './core'
-import type { Optional } from './common'
 import type { UnistylesPlugin } from './plugin'
 
-export type ColorSchemeName = Optional<'light' | 'dark'>
+export type ColorSchemeName = 'light' | 'dark' | 'unspecified'
 
 export type UnistylesConfig = {
     adaptiveThemes?: boolean,
@@ -33,14 +32,14 @@ export type UnistylesBridge = {
 }
 
 export type UnistylesThemeEvent = {
-    type: CxxUnistylesEventTypes.Theme,
+    type: UnistylesEventType.Theme,
     payload: {
         themeName: keyof UnistylesThemes
     }
 }
 
 export type UnistylesMobileLayoutEvent = {
-    type: CxxUnistylesEventTypes.Layout,
+    type: UnistylesEventType.Layout,
     payload: {
         screen: ScreenSize,
         breakpoint: keyof UnistylesBreakpoints,
@@ -49,7 +48,7 @@ export type UnistylesMobileLayoutEvent = {
 }
 
 export type UnistylesPluginEvent = {
-    type: CxxUnistylesEventTypes.Plugin
+    type: UnistylesEventType.Plugin
 }
 
 export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent | UnistylesPluginEvent

package/src/types/variants.ts

@@ -1,11 +1,19 @@
-export type ExtractVariantNames<T> = T extends object
-    ? {
-        [K in keyof T]: T[K] extends { variants: infer V }
-            ? V extends object
-                ?  { [VK in keyof V]: VK extends 'default'
-                    ? never : VK }[keyof V] | ExtractVariantNames<V>
-                : never
-            : ExtractVariantNames<T[K]>
-    }[keyof T]
+export type ExtractVariantNames<T> = T extends (...args: any) => infer R
+    ? ExtractVariantKeys<R>
+    : ExtractVariantKeys<T>
+
+type ExtractVariantKeys<T> = T extends object
+    ? ExtractVariant<T[keyof T]>
+    : never
+
+type ExtractSubVariantKeys<T> = T extends object
+    ? keyof Omit<T, 'default'> | undefined
     : never
 
+type ExtractVariant<T> = T extends (...args: any) => infer R
+    ? R extends { variants: infer V }
+        ? { [key in keyof V]?: ExtractSubVariantKeys<V[key]> }
+        : never
+    : T extends { variants: infer V }
+        ? { [key in keyof V]?: ExtractSubVariantKeys<V[key]> }
+        : never

package/src/useStyles.ts

@@ -1,26 +1,25 @@
 import { useMemo } from 'react'
 import { StyleSheet } from 'react-native'
 import { parseStyle, proxifyFunction } from './utils'
+import { useUnistyles, useVariants } from './hooks'
+import type { UnistylesBreakpoints } from './global'
+import { unistyles } from './core'
 import type {
-    CreateStylesFactory,
-    CustomNamedStyles,
     ExtractVariantNames,
     ReactNativeStyleSheet,
+    StyleSheetWithSuperPowers,
     UnistylesTheme
 } from './types'
-import { useUnistyles } from './hooks'
-import type { UnistylesBreakpoints } from './global'
-import { unistyles } from './core'
 
-type ParsedStylesheet<ST extends CustomNamedStyles<ST>> = {
+type ParsedStylesheet<ST extends StyleSheetWithSuperPowers> = {
     theme: UnistylesTheme,
     breakpoint: keyof UnistylesBreakpoints,
     styles: ReactNativeStyleSheet<ST>
 }
 
-export const useStyles = <ST extends CustomNamedStyles<ST>>(
-    stylesheet?: ST | CreateStylesFactory<ST, UnistylesTheme>,
-    variant?: ExtractVariantNames<typeof stylesheet> & string
+export const useStyles = <ST extends StyleSheetWithSuperPowers>(
+    stylesheet?: ST,
+    variantsMap?: ExtractVariantNames<typeof stylesheet>
 ): ParsedStylesheet<ST> => {
     const { theme, layout, plugins } = useUnistyles()
 
@@ -32,6 +31,7 @@ export const useStyles = <ST extends CustomNamedStyles<ST>>(
         }
     }
 
+    const variants = useVariants(variantsMap)
     const parsedStyles = useMemo(() => typeof stylesheet === 'function'
         ? stylesheet(theme)
         : stylesheet, [theme, stylesheet, layout])
@@ -42,22 +42,22 @@ export const useStyles = <ST extends CustomNamedStyles<ST>>(
             if (typeof value === 'function') {
                 return {
                     ...acc,
-                    [key]: proxifyFunction(key, value,unistyles.registry.plugins, unistyles.runtime, variant)
+                    [key]: proxifyFunction(key, value,unistyles.registry.plugins, unistyles.runtime, variants)
                 }
             }
 
             return StyleSheet.create({
                 ...acc,
-                [key]: parseStyle<ST>(
+                [key]: parseStyle(
                     key,
-                    value as CustomNamedStyles<ST>,
+                    value,
                     unistyles.registry.plugins,
                     unistyles.runtime,
-                    variant
+                    variants
                 )
             })
-        }, {} as ST),
-    [layout, parsedStyles, variant, plugins]
+        }, {}),
+    [layout, parsedStyles, variants, plugins]
     ) as ReactNativeStyleSheet<ST>
 
     return {

package/src/utils/index.ts

@@ -1,4 +1,4 @@
-export { mq, MQSymbol } from './mq'
+export { mq, MQSymbol, MQHeight, MQWidth, MQHeightAndWidth, MQWidthAndHeight } from './mq'
 export { getKeyForUnistylesMediaQuery, isWithinTheWidthAndHeight, isValidMq, parseMq } from './mqParser'
 export { getValueForBreakpoint } from './breakpoints'
 export { proxifyFunction, parseStyle } from './styles'

package/src/utils/mq.ts

@@ -1,28 +1,32 @@
-import type { MediaQuery, Nullable } from '../types'
+import type { Nullable } from '../types'
 import type { UnistylesBreakpoints } from '../global'
 import { unistyles } from '../core'
 
 export const MQSymbol = Symbol('unistyles-mq')
+export const MQWidth = Symbol('unistyles-mq-width')
+export const MQHeight = Symbol('unistyles-mq-height')
+export const MQWidthAndHeight = Symbol('unistyles-mq-width-and-height')
+export const MQHeightAndWidth = Symbol('unistyles-mq-height-and-width')
 
 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
+    only: {
+        width(wMin?: Nullable<MQValue>, wMax?: MQValue): typeof MQWidth,
+        height(hMin?: Nullable<MQValue>, hMax?: MQValue): typeof MQHeight,
+    },
+    width(wMin?: Nullable<MQValue>, wMax?: MQValue): {
+        and: {
+            height(hMin?: Nullable<MQValue>, hMax?: MQValue): typeof MQWidthAndHeight
+        }
+    },
+    height(hMin?: Nullable<MQValue>, hMax?: MQValue): {
+        and: {
+            width(wMin?: Nullable<MQValue>, wMax?: MQValue): typeof MQHeightAndWidth
+        }
+    }
 }
 
-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
 }
@@ -31,8 +35,8 @@ enum MQProp {
     toString = 'toString',
     width = 'width',
     height = 'height',
-    shortW = 'w',
-    shortH = 'h'
+    only = 'only',
+    and = 'and'
 }
 
 const getMQValue = (value: Nullable<MQValue>) => {
@@ -47,60 +51,71 @@ const getMQValue = (value: Nullable<MQValue>) => {
     return unistyles.registry.breakpoints[value] ?? 0
 }
 
-const widthHandler = (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) => new Proxy<HeightHandler>({} as HeightHandler, {
+const widthHandler = (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) => new Proxy({} as MQHandler, {
     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)}]`
-                    }
+        if (prop === MQProp.and) {
+            return {
+                width: (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, {
+const heightHandler = (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => new Proxy({} as MQHandler, {
     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 || prop === MQProp.toString) {
-                        return () => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]`
-                    }
+        if (prop === MQProp.and) {
+            return {
+                height: (hMin: MQValue = 0, hMax: 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)
     }
 })
 
-export const mq = new Proxy({} as MQHandler, {
+export const mq = new Proxy<MQHandler>({} as MQHandler, {
     get: (target, prop, receiver) => {
-        if (prop === MQProp.shortW || prop === MQProp.width) {
-            return heightHandler
+        if (prop === MQProp.only) {
+            return {
+                width: heightHandler,
+                height: widthHandler
+            }
         }
 
-        if (prop === MQProp.shortH || prop === MQProp.height) {
+        if (prop === MQProp.height) {
             return widthHandler
         }
 
+        if (prop === MQProp.width) {
+            return heightHandler
+        }
+
         return Reflect.get(target, prop, receiver)
     }
 })