react-native-unistyles 3.0.0-alpha.27 → 3.0.0-alpha.29

package/src/specs/types.js

@@ -0,0 +1,17 @@
+export var ColorScheme;
+(function (ColorScheme) {
+    ColorScheme["Light"] = "light";
+    ColorScheme["Dark"] = "dark";
+    ColorScheme["Unspecified"] = "unspecified";
+})(ColorScheme || (ColorScheme = {}));
+export var Orientation;
+(function (Orientation) {
+    Orientation["Portrait"] = "portrait";
+    Orientation["Landscape"] = "landscape";
+})(Orientation || (Orientation = {}));
+export var StatusBarStyle;
+(function (StatusBarStyle) {
+    StatusBarStyle["Default"] = "default";
+    StatusBarStyle["Light"] = "light";
+    StatusBarStyle["Dark"] = "dark";
+})(StatusBarStyle || (StatusBarStyle = {}));

package/src/types/breakpoints.ts

@@ -17,45 +17,57 @@ type ExtractBreakpoints<T> = T extends object
             }
     : T
 
-type ParseNestedObject<T> = T extends (...args: infer A) => infer R
-    ? (...args: A) => ParseNestedObject<R>
+type ParseNestedObject<T, ShouldFlatten> = T extends (...args: infer A) => infer R
+    ? (...args: A) => ParseNestedObject<R, false>
     : T extends object
         ? T extends { variants: infer R, compoundVariants: infer C }
-            ? ParseVariants<FlattenVariants<R>> & FlattenCompoundVariants<C> & ParseNestedObject<Omit<T, 'variants' | 'compoundVariants'>>
+            // // if intersection of Base, Variants and Compound Variants is never, then flatten variants and compound variants to generic "string"
+            ? (ParseVariants<FlattenVariants<R, false>> & FlattenCompoundVariants<C, false> & ParseNestedObject<Omit<T, 'variants' | 'compoundVariants'>, false>) extends never
+                ? ParseVariants<FlattenVariants<R, true>> & FlattenCompoundVariants<C, true> & ParseNestedObject<Omit<T, 'variants' | 'compoundVariants'>, false>
+                : ParseVariants<FlattenVariants<R, false>> & FlattenCompoundVariants<C, false> & ParseNestedObject<Omit<T, 'variants' | 'compoundVariants'>, false>
             : T extends { variants: infer R }
-                ? ParseVariants<FlattenVariants<R>> & ParseNestedObject<Omit<T, 'variants'>>
+                // if intersection of Base and Variants is never, then flatten variants to generic "string"
+                ? (ParseVariants<FlattenVariants<R, false>> & ParseNestedObject<Omit<T, 'variants'>, false>) extends never
+                    ? ParseVariants<FlattenVariants<R, true>> & ParseNestedObject<Omit<T, 'variants'>, false>
+                    : ParseVariants<FlattenVariants<R, false>> & ParseNestedObject<Omit<T, 'variants'>, false>
                 : T extends { compoundVariants: object }
-                    ? ParseNestedObject<Omit<T, 'compoundVariants'>>
+                    ? ParseNestedObject<Omit<T, 'compoundVariants'>, false>
                     : {
                         [K in keyof T as K extends '_web' ? never : K]: T[K] extends object
                             ? T[K] extends OpaqueColorValue
                                 ? ColorValue
                                 : ExtractBreakpoints<T[K]>
-                            : T[K]
+                            : T[K] extends string
+                                ? ShouldFlatten extends true
+                                    ? string
+                                    : T[K]
+                                : T[K]
                     }
         : T
 
-type FlattenVariants<T> = T extends object
+type FlattenVariants<T, ShouldFlatten> = 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]>
+                    ? ParseNestedObject<T[K][key], ShouldFlatten>
                     : never
             }
             : never
     }
     : never
 
-type FlattenCompoundVariants<T> = T extends Array<infer _>
-    ? FlattenCompoundVariants<T[number]>
+type FlattenCompoundVariants<T, ShouldFlatten> = T extends Array<infer _>
+    ? FlattenCompoundVariants<T[number], ShouldFlatten>
     : T extends { styles: infer S }
-        ? ParseNestedObject<S>
+        ? ParseNestedObject<S, ShouldFlatten>
         : never
 
 type ParseVariants<T> = T extends object
     ? T[keyof T] extends object
-        ? UnionToIntersection<ParseVariants<T[keyof T]>>
+        ? UnionToIntersection<ParseVariants<T[keyof T]>> extends never
+            ? ParseVariants<T[keyof T]>
+            : UnionToIntersection<ParseVariants<T[keyof T]>>
         : T
     : T
 
@@ -63,7 +75,7 @@ type UnionToIntersection<U> =
     (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never
 
 type ParseStyleKeys<T> = T extends object
-    ? { [K in keyof T]: ParseNestedObject<T[K]> }
+    ? { [K in keyof T]: ParseNestedObject<T[K], false> }
     : never
 
 export type ReactNativeStyleSheet<T> = ParseStyleKeys<SafeReturnType<T>>

package/src/types/stylesheet.ts

@@ -1,4 +1,4 @@
-import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
+import type { BoxShadowValue, ImageStyle, TextStyle, ViewStyle, FilterFunction } from 'react-native'
 import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
 import type { UnistylesBreakpoints } from '../global'
 import type { UnistylesMiniRuntime } from '../specs'
@@ -8,7 +8,7 @@ import type { CSSProperties } from 'react'
 import type { Pseudo } from '../web/convert/pseudo'
 
 // these props are treated differently to nest breakpoints and media queries
-type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset'
+type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset' | 'boxShadow' | 'filter'
 
 export type UnistyleView = Omit<ViewStyle, NestedKeys>
 export type UnistyleText = Omit<TextStyle, NestedKeys>
@@ -17,7 +17,9 @@ export type UnistyleImage = Omit<ImageStyle, NestedKeys>
 type UnistyleNestedStyles = {
     shadowOffset?: ToDeepUnistyles<ShadowOffset>,
     textShadowOffset?: ToDeepUnistyles<ShadowOffset>,
-    transform?: Array<ToDeepUnistyles<TransformStyles>>
+    transform?: Array<ToDeepUnistyles<TransformStyles>>,
+    boxShadow?: Array<ToDeepUnistyles<BoxShadowValue>> | string,
+    filter?: Array<ToDeepUnistyles<FilterFunction>> | string
 }
 
 type VariantsObject = {

package/src/web/create.ts

@@ -1,6 +1,6 @@
 import type { ReactNativeStyleSheet } from '../types'
 import type { StyleSheetWithSuperPowers, StyleSheet } from '../types/stylesheet'
-import { assignSecrets, reduceObject, getStyles } from './utils'
+import { assignSecrets, reduceObject, getStyles, deepMergeObjects } from './utils'
 import { UnistylesRuntime } from './runtime'
 import { createUseVariants, getVariants } from './variants'
 
@@ -26,10 +26,7 @@ export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
             const dynamicStyle = (...args: Array<any>) => {
                 const result = value(...args)
                 const variants = Object.fromEntries(getVariants({ [key]: result } as ReactNativeStyleSheet<StyleSheet>, copyVariants()))
-                const resultWithVariants = {
-                    ...result,
-                    ...variants[key]
-                }
+                const resultWithVariants = deepMergeObjects(result, variants[key] ?? {})
 
                 // Add secrets to result of dynamic styles function
                 return addSecrets(getStyles(resultWithVariants), key, args)

package/src/web/registry.ts

@@ -1,7 +1,7 @@
 import type { UnistylesTheme, UnistylesValues } from '../types'
 import type { StyleSheet, StyleSheetWithSuperPowers } from '../types/stylesheet'
 import { UnistylesRuntime } from './runtime'
-import { extractMediaQueryValue, keyInObject, getMediaQuery, generateHash, extractUnistyleDependencies } from './utils'
+import { extractMediaQueryValue, keyInObject, getMediaQuery, generateHash, extractUnistyleDependencies, deepMergeObjects } from './utils'
 import { UnistylesListener } from './listener'
 import { convertUnistyles } from './convert'
 import type { UnistyleDependency } from '../specs/NativePlatform'
@@ -107,10 +107,7 @@ class UnistylesRegistryBuilder {
                     ? newValue(...args)
                     : newValue
                 const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
-                const resultWithVariants = {
-                    ...result,
-                    ...variantsResult
-                }
+                const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
 
                 this.applyStyles(hash, convertUnistyles(resultWithVariants))
             })

package/src/web/runtime.ts

@@ -160,7 +160,7 @@ class UnistylesRuntimeBuilder {
             return
         }
 
-        this.setTheme(schemeToTheme(UnistylesRuntime.colorScheme))
+        this.setTheme(schemeToTheme(UnistylesRuntime.colorScheme) as AppThemeName)
     }
 
     setRootViewBackgroundColor = (hex: string, alpha?: number) => {

package/src/web/shadowRegistry.ts

@@ -1,6 +1,6 @@
 import type { UnistylesValues } from '../types'
 import { UnistylesRegistry } from './registry'
-import { createDoubleMap, equal, extractSecrets, extractUnistyleDependencies, isInDocument } from './utils'
+import { createDoubleMap, deepMergeObjects, equal, extractSecrets, extractUnistyleDependencies, isInDocument } from './utils'
 import { getVariants } from './variants'
 
 type Style = UnistylesValues | ((...args: Array<any>) => UnistylesValues)
@@ -73,10 +73,7 @@ class UnistylesShadowRegistryBuilder {
                 ? style(...args)
                 : style
             const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
-            const resultWithVariants = {
-                ...result,
-                ...variantsResult
-            }
+            const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
             const oldResult = this.resultsMap.get(ref, __uni__key)
 
             // If results are the same do nothing

package/src/web/state.ts

@@ -1,6 +1,6 @@
 import type { UnistylesTheme } from '../types'
 import type { UnistylesConfig } from '../specs/StyleSheet'
-import type { AppBreakpoint, AppThemeName } from '../specs/types'
+import type { AppBreakpoint, AppTheme, AppThemeName } from '../specs/types'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
 import { UnistylesRuntime } from './runtime'
 import { isServer, schemeToTheme } from './utils'
@@ -39,7 +39,7 @@ class UnistylesStateBuilder {
 
     private initThemes = (themes = {} as UnistylesThemes) => {
         Object.entries(themes).forEach(([themeName, theme]) => {
-            this.themes.set(themeName, theme)
+            this.themes.set(themeName, theme as AppTheme)
         })
     }
 
@@ -61,7 +61,7 @@ class UnistylesStateBuilder {
 
         // Adaptive themes
         if (settings.adaptiveThemes) {
-            this.themeName = schemeToTheme(UnistylesRuntime.colorScheme)
+            this.themeName = schemeToTheme(UnistylesRuntime.colorScheme) as AppThemeName
 
             return
         }

package/src/web/utils/unistyle.ts

@@ -1,11 +1,11 @@
 import type { UnistyleDependency } from '../../specs/NativePlatform'
-import { type AppThemeName, ColorScheme, Orientation } from '../../specs/types'
+import { ColorScheme, Orientation } from '../../specs/types'
 import type { StyleSheet, StyleSheetWithSuperPowers, UnistylesValues } from '../../types/stylesheet'
 import { isUnistylesMq, parseMq } from '../mq'
 import { UnistylesState } from '../state'
 import { keyInObject, reduceObject } from './common'
 
-export const schemeToTheme = (scheme: ColorScheme): AppThemeName => {
+export const schemeToTheme = (scheme: ColorScheme): string => {
     switch (scheme) {
         case ColorScheme.Dark:
             return 'dark'