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

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,37 +1,37 @@
 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'
 
-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()
-    const { screenSize, breakpoint } = layout
 
     if (!stylesheet) {
         return {
             theme,
-            breakpoint,
+            breakpoint: layout.breakpoint,
             styles: {} as ReactNativeStyleSheet<ST>
         }
     }
 
+    const variants = useVariants(variantsMap)
     const parsedStyles = useMemo(() => typeof stylesheet === 'function'
         ? stylesheet(theme)
         : stylesheet, [theme, stylesheet, layout])
@@ -39,24 +39,30 @@ export const useStyles = <ST extends CustomNamedStyles<ST>>(
     const dynamicStyleSheet = useMemo(() => Object
         .entries(parsedStyles)
         .reduce((acc, [key, value]) => {
-            const style = value as CustomNamedStyles<ST>
-
             if (typeof value === 'function') {
                 return {
                     ...acc,
-                    [key]: proxifyFunction(key, value, breakpoint, screenSize, variant)
+                    [key]: proxifyFunction(key, value,unistyles.registry.plugins, unistyles.runtime, variants)
                 }
             }
 
             return StyleSheet.create({
                 ...acc,
-                [key]: parseStyle<ST>(key, style, breakpoint, screenSize, variant)
+                [key]: parseStyle(
+                    key,
+                    value,
+                    unistyles.registry.plugins,
+                    unistyles.runtime,
+                    variants
+                )
             })
-        }, {} as ST), [breakpoint, screenSize, parsedStyles, variant, plugins]) as ReactNativeStyleSheet<ST>
+        }, {}),
+    [layout, parsedStyles, variants, plugins]
+    ) as ReactNativeStyleSheet<ST>
 
     return {
         theme,
-        breakpoint,
+        breakpoint: layout.breakpoint,
         styles: dynamicStyleSheet
     }
 }

package/src/utils/index.ts

@@ -1,5 +1,4 @@
-export { mq, MQSymbol } from './mq'
-export { getKeyForVariant } from './variants'
+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)
     }
 })

package/src/utils/styles.ts

@@ -1,18 +1,19 @@
-import type { CustomNamedStyles, ScreenSize, NestedStyle, RNStyle } from '../types'
+import type { NestedStyle, UnistylesPlugin, StyleSheet, Optional } from '../types'
 import { getValueForBreakpoint } from './breakpoints'
-import type { UnistylesBreakpoints } from '../global'
+import type { UnistylesRuntime } from '../core'
 import { isAndroid, isIOS } from '../common'
-import { getKeyForVariant } from './variants'
+import { getStyleWithVariants } from './variants'
 import { withPlugins } from '../plugins'
 
 export const proxifyFunction = (
     key: string,
-    fn: Function, breakpoint: keyof UnistylesBreakpoints & string,
-    screenSize: ScreenSize,
-    variant?: string
+    fn: Function,
+    plugins: Array<UnistylesPlugin>,
+    runtime: UnistylesRuntime,
+    variant?: Record<string, Optional<string>>
 ): Function => new Proxy(fn, {
     apply: (target, thisArg, argumentsList) =>
-        parseStyle(key, target.apply(thisArg, argumentsList), breakpoint, screenSize, variant)
+        parseStyle(key, target.apply(thisArg, argumentsList), plugins, runtime, variant)
 })
 
 export const isPlatformColor = <T extends {}>(value: T): boolean => {
@@ -23,60 +24,42 @@ export const isPlatformColor = <T extends {}>(value: T): boolean => {
     return isAndroid && 'resource_paths' in value && typeof value.resource_paths === 'object'
 }
 
-export const parseStyle = <T extends RNStyle>(
+export const parseStyle = <T extends StyleSheet>(
     key: string,
-    style: CustomNamedStyles<T>,
-    breakpoint: keyof UnistylesBreakpoints & string,
-    screenSize: ScreenSize,
-    variant?: string
+    style: T,
+    plugins: Array<UnistylesPlugin>,
+    runtime: UnistylesRuntime,
+    variant?: Record<string, Optional<string>>
 ): T => {
-    const entries = (Object
-        .entries(style || {}) as Array<[keyof T, CustomNamedStyles<T> | NestedStyle]>)
-        .map(([key, value]) => {
-            if (key !== 'variants') {
-                return [key, value]
-            }
-
-            const variantKey = getKeyForVariant(
-                value as NestedStyle,
-                variant
-            )
-
-            if (!variantKey) {
-                return undefined
-            }
-
-            return Object
-                .entries(value[variantKey as keyof typeof value] as NestedStyle)
-                .flat()
-        })
-        .filter(Boolean) as Array<[keyof T, CustomNamedStyles<T> | NestedStyle]>
+    const entries = Object
+        .entries(getStyleWithVariants(style || {}, variant)) as Array<[keyof T, StyleSheet]>
 
     const parsedStyles = Object
         .fromEntries(entries
             .map(([key, value]) => {
-                const hasNestedProperties = key === 'shadowOffset' || key === 'textShadowOffset'
+                // dynamic functions
+                if (typeof value === 'function') {
+                    return [key, value]
+                }
 
-                if (hasNestedProperties) {
+                // nested objects
+                if (key === 'shadowOffset' || key === 'textShadowOffset') {
                     return [
                         key,
-                        parseStyle(key, value as CustomNamedStyles<T>, breakpoint, screenSize, variant)
+                        parseStyle(key, value, plugins, runtime, variant)
                     ]
                 }
 
-                const isTransform = key === 'transform'
-
-                if (isTransform && Array.isArray(value)) {
+                // transforms
+                if (key === 'transform' && Array.isArray(value)) {
                     return [
                         key,
-                        value.map(value => parseStyle(key, value, breakpoint, screenSize, variant))
+                        value.map(value => parseStyle(key, value, plugins, runtime, variant))
                     ]
                 }
 
-                const isDynamicFunction = typeof value === 'function'
-                const isValidStyle = typeof value !== 'object' || isPlatformColor(value)
-
-                if (isDynamicFunction || isValidStyle) {
+                // values or platform colors
+                if (typeof value !== 'object' || isPlatformColor(value)) {
                     return [key, value]
                 }
 
@@ -87,5 +70,5 @@ export const parseStyle = <T extends RNStyle>(
             })
         ) as T
 
-    return withPlugins(key, parsedStyles) as T
+    return withPlugins(key, parsedStyles, plugins, runtime) as T
 }

package/src/utils/variants.ts

@@ -1,13 +1,61 @@
-import type { Optional, NestedStyle } from '../types'
+import type { Optional, StyleSheet, NestedStyle } from '../types'
 
-export const getKeyForVariant = (value: NestedStyle, variant?: string): Optional<string> => {
-    if (variant && variant in value) {
-        return variant
+const getKeysForVariants = (
+    value: Record<string, NestedStyle>,
+    variants: Array<[string, Optional<string>]>
+): Array<[string, string]> => {
+    // case for no specified variants by user, we should fallback to 'default'
+    if (!variants.length) {
+        return Object
+            .entries(value)
+            .map(([key, value]) => {
+                if ('default' in value) {
+                    return [key, 'default']
+                }
+
+                return undefined
+            })
+            .filter(Boolean) as Array<[string, string]>
     }
 
-    if ('default' in value) {
-        return 'default'
+    return variants
+        .map(([variantKey, variantValue]) => {
+            const variantStyle = value[variantKey]
+
+            if (variantStyle && variantValue && variantValue in variantStyle) {
+                return [variantKey, variantValue]
+            }
+
+            if (variantStyle && 'default' in variantStyle) {
+                return [variantKey, 'default']
+            }
+
+            return undefined
+        })
+        .filter(Boolean) as Array<[string, string]>
+}
+
+export const getStyleWithVariants = (
+    style: StyleSheet,
+    variantValues?: Record<string, Optional<string>>
+) => {
+    if (!('variants' in style)) {
+        return style
     }
 
-    return undefined
+    const keys = getKeysForVariants(
+        style.variants as Record<string, NestedStyle>,
+        Object.entries(variantValues || {})
+    )
+
+    const variantsValues = keys
+        .map(([key, nestedKey]) => ((style.variants as Record<string, Record<string, NestedStyle>>)[key] as Record<string, NestedStyle>)[nestedKey])
+        .reduce((acc, styles) => ({ ...acc, ...styles }), {})
+
+    const { variants, ...otherStyles } = style
+
+    return {
+        ...otherStyles,
+        ...variantsValues
+    }
 }