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

package/src/types/breakpoints.ts

@@ -1,24 +1,26 @@
 import type { ColorValue, OpaqueColorValue } from 'react-native'
 import type { UnistylesTheme } from '../types'
-import type { AllAvailableKeys, BreakpointsOrMediaQueries } from './stylesheet'
+import type { BreakpointsOrMediaQueries, ToDeepUnistyles } from './stylesheet'
+import type { TransformStyles } from './core'
 
-type WithEmptyObject<V> = keyof V extends never ? {} : V
+type ExtractTransformArray<T> = T extends object
+    ? { [K in keyof T]: ExtractBreakpoints<T[K]> }
+    : never
 
-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 ExtractBreakpoints<T> = T extends object
+    ? keyof T extends BreakpointsOrMediaQueries
+        ? T[keyof T]
+        : T extends Array<ToDeepUnistyles<TransformStyles>>
+            ? Array<ExtractTransformArray<T[number]>>
+            : {
+                [K in keyof T]: ExtractBreakpoints<T[K]>
+            }
+    : T
 
 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 }
+    : T extends object
+        ? T extends { variants: infer R }
             ? ParseVariants<FlattenVariants<R>> & ParseNestedObject<Omit<T, 'variants'>>
             : {
                 [K in keyof T]: T[K] extends object
@@ -27,6 +29,7 @@ type ParseNestedObject<T> = T extends (...args: infer A) => infer R
                         : ExtractBreakpoints<T[K]>
                     : T[K]
             }
+        : T
 
 type FlattenVariants<T> = T extends object
     ? {

package/src/types/core.ts

@@ -15,7 +15,6 @@ import type {
 } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
-import type { MediaQuery } from './mq'
 
 export type ShadowOffset = {
     width: number,
@@ -44,7 +43,7 @@ export type ScreenSize = {
 
 export type RNStyle = ViewStyle | TextStyle | ImageStyle
 export type RNValue = number | string | undefined
-export type NestedStyle = Record<keyof UnistylesBreakpoints | MediaQuery, RNValue>
-export type NestedStylePairs = Array<[keyof UnistylesBreakpoints | MediaQuery, RNValue]>
+export type NestedStyle = Record<keyof UnistylesBreakpoints | symbol, RNValue>
+export type NestedStylePairs = Array<[keyof UnistylesBreakpoints | symbol, RNValue]>
 export type UnistylesTheme = UnistylesThemes[keyof UnistylesThemes]
-export type CreateStylesFactory<ST> = (theme: UnistylesTheme) => ST
+export type CreateStylesFactory<ST> = (theme: UnistylesTheme) => ST

package/src/types/index.ts

@@ -1,7 +1,6 @@
 export * from './normalizer'
 export * from './unistyles'
 export type { Optional, Nullable } from './common'
-export type { MediaQuery } from './mq'
 export type {
     NestedStylePairs,
     UnistylesTheme,

package/src/types/stylesheet.ts

@@ -1,7 +1,6 @@
 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'
@@ -19,18 +18,12 @@ type UnistyleNestedStyles = {
 type Variants = {
     variants?: {
         [variantName: string]: {
-            [variant: string]: {
-                [propName in AllAvailableKeys]?: AllAvailableStyles[propName] | {
-                    [key in BreakpointsOrMediaQueries]?: AllAvailableStyles[propName]
-                } & {
-                    [propName in NestedTypes]?: UnistyleNestedStyles[propName]
-                }
-            }
+            [variant: string]: Omit<UnistylesValues, 'variants'>
         }
     }
 }
 
-type ToDeepUnistyles<T> = {
+export type ToDeepUnistyles<T> = {
     [K in keyof T]?: T[K] | {
         [key in BreakpointsOrMediaQueries]?: T[K]
     }
@@ -39,7 +32,7 @@ type ToDeepUnistyles<T> = {
 type AllAvailableStyles = UnistyleView & UnistyleText & UnistyleImage & UnistyleNestedStyles
 
 export type AllAvailableKeys = keyof (UnistyleView & UnistyleText & UnistyleImage)
-export type BreakpointsOrMediaQueries = keyof UnistylesBreakpoints | MediaQuery
+export type BreakpointsOrMediaQueries = keyof UnistylesBreakpoints | symbol
 
 export type UnistylesValues = {
     [propName in AllAvailableKeys]?: AllAvailableStyles[propName] | {

package/src/useStyles.ts

@@ -22,22 +22,13 @@ export const useStyles = <ST extends StyleSheetWithSuperPowers>(
     variantsMap?: ExtractVariantNames<typeof stylesheet>
 ): ParsedStylesheet<ST> => {
     const { theme, layout, plugins } = useUnistyles()
-
-    if (!stylesheet) {
-        return {
-            theme,
-            breakpoint: layout.breakpoint,
-            styles: {} as ReactNativeStyleSheet<ST>
-        }
-    }
-
     const variants = useVariants(variantsMap)
     const parsedStyles = useMemo(() => typeof stylesheet === 'function'
         ? stylesheet(theme)
         : stylesheet, [theme, stylesheet, layout])
 
     const dynamicStyleSheet = useMemo(() => Object
-        .entries(parsedStyles)
+        .entries(parsedStyles || {})
         .reduce((acc, [key, value]) => {
             if (typeof value === 'function') {
                 return {
@@ -56,13 +47,12 @@ export const useStyles = <ST extends StyleSheetWithSuperPowers>(
                     variants
                 )
             })
-        }, {}),
-    [layout, parsedStyles, variants, plugins]
-    ) as ReactNativeStyleSheet<ST>
+        }, {}), [layout, parsedStyles, variants, plugins]
+    )
 
     return {
         theme,
         breakpoint: layout.breakpoint,
-        styles: dynamicStyleSheet
+        styles: dynamicStyleSheet as ReactNativeStyleSheet<ST>
     }
 }

package/src/utils/index.ts

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

package/src/utils/mq.ts

@@ -2,43 +2,25 @@ 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 = {
     only: {
-        width(wMin?: Nullable<MQValue>, wMax?: MQValue): typeof MQWidth,
-        height(hMin?: Nullable<MQValue>, hMax?: MQValue): typeof MQHeight,
+        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): typeof MQWidthAndHeight
+            height(hMin?: Nullable<MQValue>, hMax?: MQValue): symbol
         }
     },
     height(hMin?: Nullable<MQValue>, hMax?: MQValue): {
         and: {
-            width(wMin?: Nullable<MQValue>, wMax?: MQValue): typeof MQHeightAndWidth
+            width(wMin?: Nullable<MQValue>, wMax?: MQValue): symbol
         }
     }
 }
 
-type FinalHandler = {
-    [MQSymbol]: true
-}
-
-enum MQProp {
-    toString = 'toString',
-    width = 'width',
-    height = 'height',
-    only = 'only',
-    and = 'and'
-}
-
 const getMQValue = (value: Nullable<MQValue>) => {
     if (typeof value === 'number') {
         return value
@@ -51,71 +33,21 @@ const getMQValue = (value: Nullable<MQValue>) => {
     return unistyles.registry.breakpoints[value] ?? 0
 }
 
-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.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)
-    }
-})
-
-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.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)
-    }
-})
-
-export const mq = new Proxy<MQHandler>({} as MQHandler, {
-    get: (target, prop, receiver) => {
-        if (prop === MQProp.only) {
-            return {
-                width: heightHandler,
-                height: widthHandler
-            }
-        }
-
-        if (prop === MQProp.height) {
-            return widthHandler
+export const mq: MQHandler = {
+    only: {
+        width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]` as unknown as symbol),
+        height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) => (`:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
+    },
+    width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => ({
+        and: {
+            height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) =>
+                (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
         }
-
-        if (prop === MQProp.width) {
-            return heightHandler
+    }),
+    height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) => ({
+        and: {
+            width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) =>
+                (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
         }
-
-        return Reflect.get(target, prop, receiver)
-    }
-})
+    })
+}

package/lib/commonjs/types/mq.js

@@ -1,6 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-//# sourceMappingURL=mq.js.map

package/lib/commonjs/types/mq.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/mq.ts"],"mappings":""}

package/lib/module/types/mq.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=mq.js.map

package/lib/module/types/mq.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/mq.ts"],"mappings":""}

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

@@ -1,3 +0,0 @@
-import { MQSymbol, MQHeight, MQHeightAndWidth, MQWidth, MQWidthAndHeight } from '../utils';
-export type MediaQuery = typeof MQSymbol | typeof MQHeight | typeof MQWidth | typeof MQHeightAndWidth | typeof MQWidthAndHeight;
-//# sourceMappingURL=mq.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"mq.d.ts","sourceRoot":"","sources":["../../../../src/types/mq.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAE1F,MAAM,MAAM,UAAU,GAAG,OAAO,QAAQ,GAAG,OAAO,QAAQ,GAAG,OAAO,OAAO,GAAG,OAAO,gBAAgB,GAAG,OAAO,gBAAgB,CAAA"}

package/src/types/mq.ts

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