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

package/src/utils/styles.ts

@@ -1,8 +1,8 @@
-import type { CustomNamedStyles, NestedStyle, RNStyle, UnistylesPlugin } from '../types'
+import type { NestedStyle, UnistylesPlugin, StyleSheet, Optional } from '../types'
 import { getValueForBreakpoint } from './breakpoints'
 import type { UnistylesRuntime } from '../core'
 import { isAndroid, isIOS } from '../common'
-import { getStyleWithVariant } from './variants'
+import { getStyleWithVariants } from './variants'
 import { withPlugins } from '../plugins'
 
 export const proxifyFunction = (
@@ -10,7 +10,7 @@ export const proxifyFunction = (
     fn: Function,
     plugins: Array<UnistylesPlugin>,
     runtime: UnistylesRuntime,
-    variant?: string
+    variant?: Record<string, Optional<string>>
 ): Function => new Proxy(fn, {
     apply: (target, thisArg, argumentsList) =>
         parseStyle(key, target.apply(thisArg, argumentsList), plugins, runtime, variant)
@@ -24,41 +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>,
+    style: T,
     plugins: Array<UnistylesPlugin>,
     runtime: UnistylesRuntime,
-    variant?: string
+    variant?: Record<string, Optional<string>>
 ): T => {
     const entries = Object
-        .entries(getStyleWithVariant(style || {}, variant)) as Array<[keyof T, CustomNamedStyles<T> | NestedStyle]>
+        .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>, plugins, runtime, 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, 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]
                 }
 

package/src/utils/variants.ts

@@ -1,37 +1,61 @@
-import type { Optional, CustomNamedStyles, NestedStyle } from '../types'
+import type { Optional, StyleSheet, NestedStyle } from '../types'
 
-const getKeyForVariant = (value: Record<string, 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']
+                }
 
-    if ('default' in value) {
-        return 'default'
+                return undefined
+            })
+            .filter(Boolean) as Array<[string, string]>
     }
 
-    return undefined
+    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 getStyleWithVariant = <T>(
-    style: CustomNamedStyles<T>,
-    variant?: string
+export const getStyleWithVariants = (
+    style: StyleSheet,
+    variantValues?: Record<string, Optional<string>>
 ) => {
     if (!('variants' in style)) {
         return style
     }
 
-    const variantKey = getKeyForVariant(
+    const keys = getKeysForVariants(
         style.variants as Record<string, NestedStyle>,
-        variant
+        Object.entries(variantValues || {})
     )
-    const variantValue = variantKey
-        ? (style.variants as Record<string, NestedStyle>)[variantKey]
-        : {}
+
+    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,
-        ...variantValue
+        ...variantsValues
     }
 }