react-native-unistyles 3.0.24 → 3.1.0

package/src/core/withUnistyles/types.ts

@@ -1,7 +1,10 @@
-import type { UnistylesMiniRuntime } from '../../specs';
-import type { UnistylesTheme } from '../../types';
+import type { UnistylesMiniRuntime } from '../../specs'
+import type { UnistylesTheme } from '../../types'
 
 export const SUPPORTED_STYLE_PROPS = ['style', 'contentContainerStyle'] as const
 
-export type SupportedStyleProps = typeof SUPPORTED_STYLE_PROPS[number]
-export type Mappings<T = {}> = (theme: UnistylesTheme, rt: UnistylesMiniRuntime) => Omit<Partial<T>, SupportedStyleProps> & { key?: string }
+export type SupportedStyleProps = (typeof SUPPORTED_STYLE_PROPS)[number]
+export type Mappings<T = {}> = (
+    theme: UnistylesTheme,
+    rt: UnistylesMiniRuntime,
+) => Omit<Partial<T>, SupportedStyleProps> & { key?: string }

package/src/core/withUnistyles/withUnistyles.native.tsx

@@ -1,10 +1,12 @@
 import React, { forwardRef, useEffect, useRef, type ComponentProps, type ComponentRef, type ComponentType } from 'react'
-import { type UnistyleDependency, UnistylesShadowRegistry } from '../../specs'
+
 import type { UnistylesTheme, UnistylesValues } from '../../types'
+import type { Mappings } from './types'
+
+import { type UnistyleDependency, UnistylesShadowRegistry } from '../../specs'
 import { deepMergeObjects } from '../../utils'
 import { useProxifiedUnistyles } from '../useProxifiedUnistyles'
 import { maybeWarnAboutMultipleUnistyles } from '../warn'
-import type { Mappings } from './types'
 
 // @ts-expect-error
 type GenericComponentProps<P> = ComponentProps<P>
@@ -12,51 +14,50 @@ type GenericComponentProps<P> = ComponentProps<P>
 type GenericComponentRef<T> = ComponentRef<T>
 
 type UnistylesSecrets = {
-    uni__getStyles: () => Record<string, any>,
+    uni__getStyles: () => Record<string, any>
     uni__dependencies: Array<UnistyleDependency>
 }
 
 type MappedSecrets = {
-    styles: Record<string, any>,
+    styles: Record<string, any>
     dependencies: Array<UnistyleDependency>
 }
 
-export const withUnistyles = <TComponent, TMappings extends GenericComponentProps<TComponent>>(Component: TComponent, mappings?: Mappings<TMappings>) => {
+export const withUnistyles = <TComponent, TMappings extends GenericComponentProps<TComponent>>(
+    Component: TComponent,
+    mappings?: Mappings<TMappings>,
+) => {
     type TProps = GenericComponentProps<TComponent>
     type PropsWithUnistyles = Partial<TProps> & {
         uniProps?: Mappings<TProps>
     }
     type UnistyleStyles = {
-        style?: UnistylesValues,
+        style?: UnistylesValues
         contentContainerStyle?: UnistylesValues
     }
 
     const getSecrets = (styleProps: Record<string, any> = {}): MappedSecrets => {
-        const styles = Array.isArray(styleProps)
-            ? styleProps.flat()
-            : [styleProps]
-
-        const secrets: Array<UnistylesSecrets> = styles
-            .filter(Boolean)
-            .reduce((acc, style) => {
-                const unistyleKey = Object
-                    .keys(style)
-                    .find(key => key.startsWith('unistyles_'))
-
-                return acc.concat([
-                    unistyleKey
-                        ? style[unistyleKey]
-                        : {
-                            uni__getStyles: () => style,
-                            uni__dependencies: [],
-                        }
-                ])
-            }, [])
+        const styles = Array.isArray(styleProps) ? styleProps.flat() : [styleProps]
+
+        const secrets: Array<UnistylesSecrets> = styles.filter(Boolean).reduce((acc, style) => {
+            const unistyleKey = Object.keys(style).find((key) => key.startsWith('unistyles_'))
+
+            return acc.concat([
+                unistyleKey
+                    ? style[unistyleKey]
+                    : {
+                          uni__getStyles: () => style,
+                          uni__dependencies: [],
+                      },
+            ])
+        }, [])
 
         return {
-            styles: secrets.reduce((acc, secret) => Object
-                .assign(acc, secret.uni__getStyles()), {} as Record<string, any>),
-            dependencies: secrets.flatMap(secret => secret.uni__dependencies),
+            styles: secrets.reduce(
+                (acc, secret) => Object.assign(acc, secret.uni__getStyles()),
+                {} as Record<string, any>,
+            ),
+            dependencies: secrets.flatMap((secret) => secret.uni__dependencies),
         }
     }
 
@@ -65,42 +66,50 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         const NativeComponent = Component as ComponentType
 
         // @ts-ignore we don't know the type of the component
+        // prettier-ignore
         maybeWarnAboutMultipleUnistyles(narrowedProps.style, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
         // @ts-ignore we don't know the type of the component
+        // prettier-ignore
         maybeWarnAboutMultipleUnistyles(narrowedProps.contentContainerStyle, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
 
         const scopedTheme = useRef(UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme)
         const { proxifiedRuntime, proxifiedTheme, addDependencies } = useProxifiedUnistyles(scopedTheme.current)
 
+        // Always track Theme dependency — accessing any property on proxifiedTheme
+        // triggers the Proxy get trap which adds Theme to the dependency Set
+        void (proxifiedTheme as Record<string, unknown>).__uni
+
         useEffect(() => {
             const styleSecrets = getSecrets(narrowedProps.style)
             const contentContainerStyleSecrets = getSecrets(narrowedProps.contentContainerStyle)
 
-            addDependencies(Array.from(new Set([...styleSecrets.dependencies, ...contentContainerStyleSecrets.dependencies])))
+            addDependencies(
+                Array.from(new Set([...styleSecrets.dependencies, ...contentContainerStyleSecrets.dependencies])),
+            )
         }, [narrowedProps.style, narrowedProps.contentContainerStyle])
 
         const { key: mappingsKey, ...mappingsProps } = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
-        const { key: uniPropsKey, ...unistyleProps } = narrowedProps.uniProps ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime) : {}
+        const { key: uniPropsKey, ...unistyleProps } = narrowedProps.uniProps
+            ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime)
+            : {}
 
         const styleSecrets = getSecrets(narrowedProps.style)
         const contentContainerStyleSecrets = getSecrets(narrowedProps.contentContainerStyle)
 
         const finalProps = {
             ...deepMergeObjects(mappingsProps, unistyleProps, props),
-            ...narrowedProps.style ? {
-                style: styleSecrets.styles,
-            } : {},
-            ...narrowedProps.contentContainerStyle ? {
-                contentContainerStyle: contentContainerStyleSecrets.styles,
-            } : {},
+            ...(narrowedProps.style
+                ? {
+                      style: styleSecrets.styles,
+                  }
+                : {}),
+            ...(narrowedProps.contentContainerStyle
+                ? {
+                      contentContainerStyle: contentContainerStyleSecrets.styles,
+                  }
+                : {}),
         } as any
 
-        return (
-            <NativeComponent
-                key={uniPropsKey || mappingsKey}
-                {...finalProps}
-                ref={ref}
-            />
-        )
+        return <NativeComponent key={uniPropsKey || mappingsKey} {...finalProps} ref={ref} />
     })
 }

package/src/core/withUnistyles/withUnistyles.tsx

@@ -1,23 +1,28 @@
 import React, { type ComponentType, forwardRef, type ComponentProps, type ComponentRef } from 'react'
+
 import type { UnistylesValues } from '../../types'
+import type { Mappings } from './types'
+
 import { deepMergeObjects } from '../../utils'
 import { getClassName } from '../getClassname'
 import { useProxifiedUnistyles } from '../useProxifiedUnistyles'
 import { maybeWarnAboutMultipleUnistyles } from '../warn'
-import type { Mappings } from './types'
 
 // @ts-expect-error
 type GenericComponentProps<T> = ComponentProps<T>
 // @ts-expect-error
 type GenericComponentRef<T> = ComponentRef<T>
 
-export const withUnistyles = <TComponent, TMappings extends GenericComponentProps<TComponent>>(Component: TComponent, mappings?: Mappings<TMappings>) => {
+export const withUnistyles = <TComponent, TMappings extends GenericComponentProps<TComponent>>(
+    Component: TComponent,
+    mappings?: Mappings<TMappings>,
+) => {
     type TProps = GenericComponentProps<TComponent>
     type PropsWithUnistyles = Partial<TProps> & {
         uniProps?: Mappings<TProps>
     }
     type UnistyleStyles = {
-        style?: UnistylesValues,
+        style?: UnistylesValues
         contentContainerStyle?: UnistylesValues
     }
 
@@ -28,45 +33,46 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         const { proxifiedRuntime, proxifiedTheme } = useProxifiedUnistyles()
 
         const { key: mappingsKey, ...mappingsProps } = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
-        const { key: uniPropsKey, ...unistyleProps } = narrowedProps.uniProps ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime) : {}
+        const { key: uniPropsKey, ...unistyleProps } = narrowedProps.uniProps
+            ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime)
+            : {}
 
         const emptyStyles = narrowedProps.style
             ? Object.fromEntries(
-                Object.entries(Object.getOwnPropertyDescriptors(narrowedProps.style))
-                    .filter(([key]) => !key.startsWith("unistyles") && !key.startsWith("_"))
-                    .map(([key]) => [key, undefined])
-            )
+                  Object.entries(Object.getOwnPropertyDescriptors(narrowedProps.style))
+                      .filter(([key]) => !key.startsWith('unistyles') && !key.startsWith('_'))
+                      .map(([key]) => [key, undefined]),
+              )
             : undefined
 
         const combinedProps = {
             ...deepMergeObjects(mappingsProps, unistyleProps, props),
-            ...narrowedProps.style ? {
-                // Override default component styles with undefined values to reset them
-                style: emptyStyles
-            } : {},
-            ...narrowedProps.contentContainerStyle ? {
-                contentContainerStyle: contentContainerStyleClassNames,
-            } : {},
+            ...(narrowedProps.style
+                ? {
+                      // Override default component styles with undefined values to reset them
+                      style: emptyStyles,
+                  }
+                : {}),
+            ...(narrowedProps.contentContainerStyle
+                ? {
+                      contentContainerStyle: contentContainerStyleClassNames,
+                  }
+                : {}),
         } as any
 
         // @ts-ignore
+        // prettier-ignore
         maybeWarnAboutMultipleUnistyles(narrowedProps.style, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
         // @ts-ignore
+        // prettier-ignore
         maybeWarnAboutMultipleUnistyles(narrowedProps.contentContainerStyle, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
 
         const NativeComponent = Component as ComponentType
         const [classNames] = styleClassNames ?? []
 
         return (
-            <div
-                className={classNames?.hash}
-                style={{ display: 'contents' }}
-            >
-                <NativeComponent
-                    key={uniPropsKey || mappingsKey}
-                    {...combinedProps}
-                    ref={ref}
-                />
+            <div className={classNames?.hash} style={{ display: 'contents' }}>
+                <NativeComponent key={uniPropsKey || mappingsKey} {...combinedProps} ref={ref} />
             </div>
         )
     })

package/src/global.ts

@@ -1,6 +1,6 @@
 export interface UnistylesThemes {}
 export interface UnistylesBreakpoints {
     // these breakpoints are only available on mobile, when you didn't specify any breakpoints
-    landscape?: number,
-    portrait?: number,
+    landscape?: number
+    portrait?: number
 }

package/src/hooks/useMedia.native.ts

@@ -1,4 +1,5 @@
 import { useEffect, useLayoutEffect, useState } from 'react'
+
 import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
 import { isUnistylesMq, isValidMq, parseMq } from '../utils'
 
@@ -47,7 +48,6 @@ export const useMedia = (config: { mq: symbol }) => {
     }, [config.mq])
 
     useLayoutEffect(() => {
-        // @ts-expect-error - this is hidden from TS
         const removeChangeListener = StyleSheet.addChangeListener((dependencies: Array<UnistyleDependency>) => {
             if (dependencies.includes(UnistyleDependency.Breakpoints)) {
                 setIsVisible(computeIsVisible())
@@ -60,6 +60,6 @@ export const useMedia = (config: { mq: symbol }) => {
     }, [config.mq])
 
     return {
-        isVisible
+        isVisible,
     }
 }

package/src/hooks/useMedia.ts

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
+
 import { isUnistylesMq, isValidMq, parseMq } from '../utils'
 
 export const useMedia = (config: { mq: symbol }) => {
@@ -26,8 +27,10 @@ export const useMedia = (config: { mq: symbol }) => {
             minWidth !== undefined ? `(min-width: ${minWidth}px)` : undefined,
             maxWidth !== undefined ? `(max-width: ${maxWidth}px)` : undefined,
             minHeight !== undefined ? `(min-height: ${minHeight}px)` : undefined,
-            maxHeight !== undefined ? `(max-height: ${maxHeight}px)` : undefined
-        ].filter(Boolean).join(' and ')
+            maxHeight !== undefined ? `(max-height: ${maxHeight}px)` : undefined,
+        ]
+            .filter(Boolean)
+            .join(' and ')
 
         const media = window.matchMedia(mediaQuery)
         const handler = (event: MediaQueryListEvent) => setIsVisible(event.matches)
@@ -42,6 +45,6 @@ export const useMedia = (config: { mq: symbol }) => {
     useEffect(() => () => disposeRef.current(), [])
 
     return {
-        isVisible
+        isVisible,
     }
 }

package/src/index.ts

@@ -7,6 +7,7 @@ if (majorReactVersions === undefined || majorReactVersions < 19) {
 }
 
 export { StyleSheet, UnistylesRuntime, StatusBar, NavigationBar } from './specs'
+export { UnistyleDependency } from './specs'
 export { mq } from './mq'
 export type { UnistylesThemes, UnistylesBreakpoints } from './global'
 export { withUnistyles, useUnistyles, createUnistylesElement } from './core'

package/src/mocks.ts

@@ -2,8 +2,8 @@ import type { UnistylesBreakpoints, UnistylesThemes } from './global'
 import type { UnistylesNavigationBar } from './specs/NavigtionBar'
 import type { UnistylesStatusBar } from './specs/StatusBar'
 import type { UnistylesConfig, UnistylesStyleSheet } from './specs/StyleSheet'
-import type { UnistylesRuntimePrivate } from './specs/UnistylesRuntime'
 import type { ColorScheme, Orientation } from './specs/types'
+import type { UnistylesRuntimePrivate } from './specs/UnistylesRuntime'
 import type { IOSContentSizeCategory, UnistylesTheme } from './types'
 
 type Registry = {
@@ -20,15 +20,15 @@ jest.mock('react-native-nitro-modules', () => ({
                 setStyle: () => {},
             }),
             createHybridNavigationBar: () => {},
-        })
-    }
+        }),
+    },
 }))
 
 jest.mock('react-native-unistyles', () => {
     const React = require('react')
     const _REGISTRY: Registry = {
         themes: {},
-        breakpoints: {}
+        breakpoints: {},
     }
     const miniRuntime = {
         themeName: undefined,
@@ -41,7 +41,7 @@ jest.mock('react-native-unistyles', () => {
             left: 0,
             right: 0,
             bottom: 0,
-            ime: 0
+            ime: 0,
         },
         pixelRatio: 1,
         fontScale: 1,
@@ -50,16 +50,16 @@ jest.mock('react-native-unistyles', () => {
         isPortrait: true,
         navigationBar: {
             width: 0,
-            height: 0
+            height: 0,
         },
         screen: {
             width: 0,
-            height: 0
+            height: 0,
         },
         statusBar: {
             width: 0,
-            height: 0
-        }
+            height: 0,
+        },
     }
     const unistylesRuntime = {
         colorScheme: 'unspecified' as ColorScheme,
@@ -68,7 +68,7 @@ jest.mock('react-native-unistyles', () => {
         isPortrait: true,
         isLandscape: false,
         breakpoints: {},
-        dispose: () => { },
+        dispose: () => {},
         equals: () => false,
         name: 'UnistylesRuntimeMock',
         miniRuntime: miniRuntime,
@@ -77,16 +77,16 @@ jest.mock('react-native-unistyles', () => {
             width: 0,
             name: 'StatusBarMock',
             equals: () => false,
-            setHidden: () => { },
-            setStyle: () => { }
+            setHidden: () => {},
+            setStyle: () => {},
         },
         navigationBar: {
             height: 0,
             width: 0,
             name: 'NavigationBarMock',
             equals: () => false,
-            setHidden: () => { },
-            dispose: () => { }
+            setHidden: () => {},
+            dispose: () => {},
         },
         fontScale: 1,
         hasAdaptiveThemes: false,
@@ -113,51 +113,79 @@ jest.mock('react-native-unistyles', () => {
             left: 0,
             right: 0,
             bottom: 0,
-            ime: 0
+            ime: 0,
         },
         screen: {
             width: 0,
-            height: 0
+            height: 0,
         },
-        breakpoint: undefined
+        breakpoint: undefined,
     } satisfies UnistylesRuntimePrivate
 
+    const stripVariants = (styleEntries: Record<string, any>): any => {
+        const result: Record<string, any> = {}
+
+        for (const [name, style] of Object.entries(styleEntries)) {
+            if (typeof style === 'function') {
+                result[name] = (...args: Array<any>) => {
+                    const resolved = style(...args)
+                    const { variants, compoundVariants, ...rest } = resolved
+
+                    return rest
+                }
+            } else if (style !== null && typeof style === 'object' && !Array.isArray(style)) {
+                const { variants, compoundVariants, ...rest } = style
+
+                result[name] = rest
+            } else {
+                result[name] = style
+            }
+        }
+
+        return result
+    }
+
     return {
         Hide: () => null,
         Display: () => null,
         ScopedTheme: () => null,
-        withUnistyles: <TComponent,>(Component: TComponent, mapper?: (theme: UnistylesTheme, runtime: typeof miniRuntime) => TComponent) => (props: any) =>
-            React.createElement(Component, {
-                ...mapper?.((Object.values(_REGISTRY.themes).at(0) ?? {}) as UnistylesTheme, miniRuntime),
-                ...props
-            }),
+        withUnistyles:
+            <TComponent>(
+                Component: TComponent,
+                mapper?: (theme: UnistylesTheme, runtime: typeof miniRuntime) => TComponent,
+            ) =>
+            (props: any) =>
+                React.createElement(Component, {
+                    ...mapper?.((Object.values(_REGISTRY.themes).at(0) ?? {}) as UnistylesTheme, miniRuntime),
+                    ...props,
+                }),
         mq: {
             only: {
                 width: () => ({
                     and: {
-                        height: () => ({})
-                    }
+                        height: () => ({}),
+                    },
                 }),
                 height: () => ({
                     and: {
-                        width: () => ({})
-                    }
-                })
+                        width: () => ({}),
+                    },
+                }),
             },
             width: () => ({
                 and: {
-                    height: () => ({})
-                }
+                    height: () => ({}),
+                },
             }),
             height: () => ({
                 and: {
-                    width: () => ({})
-                }
-            })
+                    width: () => ({}),
+                },
+            }),
         },
         useUnistyles: () => ({
             theme: Object.values(_REGISTRY.themes).at(0) ?? {},
-            rt: unistylesRuntime
+            rt: unistylesRuntime,
         }),
         StyleSheet: {
             absoluteFillObject: {
@@ -165,14 +193,14 @@ jest.mock('react-native-unistyles', () => {
                 left: 0,
                 right: 0,
                 top: 0,
-                bottom: 0
+                bottom: 0,
             },
             absoluteFill: {
                 position: 'absolute',
                 left: 0,
                 right: 0,
                 top: 0,
-                bottom: 0
+                bottom: 0,
             } as unknown as UnistylesStyleSheet['absoluteFill'],
             compose: (styles: any) => {
                 return styles
@@ -181,16 +209,14 @@ jest.mock('react-native-unistyles', () => {
                 return styles
             },
             create: (styles: any) => {
-                if (typeof styles === 'function') {
-                    return {
-                        ...styles(Object.values(_REGISTRY.themes).at(0) ?? {}, miniRuntime),
-                        useVariants: () => {}
-                    }
-                }
+                const resolved =
+                    typeof styles === 'function'
+                        ? styles(Object.values(_REGISTRY.themes).at(0) ?? {}, miniRuntime)
+                        : styles
 
                 return {
-                    ...styles,
-                    useVariants: () => {}
+                    ...stripVariants(resolved),
+                    useVariants: () => {},
                 }
             },
             configure: (config: UnistylesConfig) => {
@@ -204,17 +230,16 @@ jest.mock('react-native-unistyles', () => {
             },
             jsMethods: {
                 processColor: () => null,
-                parseBoxShadowString: () => []
+                parseBoxShadowString: () => [],
             },
             hairlineWidth: 1,
-            unid: -1,
             addChangeListener: () => () => {},
             init: () => {},
             name: 'StyleSheetMock',
             dispose: () => {},
-            equals: () => false
+            equals: () => false,
         } satisfies UnistylesStyleSheet,
-        UnistylesRuntime: unistylesRuntime
+        UnistylesRuntime: unistylesRuntime,
     }
 })
 
@@ -223,7 +248,7 @@ jest.mock('react-native-unistyles/reanimated', () => {
     const mockedSharedValue = (value: any) => ({
         get: () => value,
         set: (_value: any) => {},
-        value
+        value,
     })
 
     return {
@@ -239,7 +264,7 @@ jest.mock('react-native-unistyles/reanimated', () => {
 
             return {
                 fromValue,
-                toValue
+                toValue,
             }
         },
     }

package/src/mq.ts

@@ -1,20 +1,27 @@
 import type { UnistylesBreakpoints } from './global'
-import { UnistylesRuntime } from './specs'
 import type { Nullable } from './types'
 
+import { UnistylesRuntime } from './specs'
+
 type MQValue = keyof UnistylesBreakpoints | number
 
 type MQHandler = {
     only: {
-        width(wMin?: Nullable<MQValue>, wMax?: MQValue): symbol,
-        height(hMin?: Nullable<MQValue>, hMax?: MQValue): symbol,
-    },
-    width(wMin?: Nullable<MQValue>, wMax?: MQValue): {
+        width(wMin?: Nullable<MQValue>, wMax?: MQValue): symbol
+        height(hMin?: Nullable<MQValue>, hMax?: MQValue): symbol
+    }
+    width(
+        wMin?: Nullable<MQValue>,
+        wMax?: MQValue,
+    ): {
         and: {
             height(hMin?: Nullable<MQValue>, hMax?: MQValue): symbol
         }
-    },
-    height(hMin?: Nullable<MQValue>, hMax?: MQValue): {
+    }
+    height(
+        hMin?: Nullable<MQValue>,
+        hMax?: MQValue,
+    ): {
         and: {
             width(wMin?: Nullable<MQValue>, wMax?: MQValue): symbol
         }
@@ -41,20 +48,21 @@ const getMQValue = (value: Nullable<MQValue>) => {
  */
 export const mq: MQHandler = {
     only: {
-        width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Number.POSITIVE_INFINITY) => (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]` as unknown as symbol),
-        height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Number.POSITIVE_INFINITY) => (`:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
+        width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Number.POSITIVE_INFINITY) =>
+            `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]` as unknown as symbol,
+        height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Number.POSITIVE_INFINITY) =>
+            `:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol,
     },
     width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Number.POSITIVE_INFINITY) => ({
         and: {
             height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Number.POSITIVE_INFINITY) =>
-                (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
-        }
+                `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol,
+        },
     }),
     height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Number.POSITIVE_INFINITY) => ({
         and: {
             width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Number.POSITIVE_INFINITY) =>
-                (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
-        }
-    })
+                `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol,
+        },
+    }),
 }
-