react-native-unistyles 3.0.0-nightly-20250226 → 3.0.0-nightly-20250319

package/lib/typescript/src/web/shadowRegistry.d.ts

@@ -11,7 +11,7 @@ export declare class UnistylesShadowRegistry {
     private disposeMap;
     constructor(services: UnistylesServices);
     add: (ref: any, hash?: string) => void;
-    addStyles: (unistyles: Array<UnistylesValues>) => {
+    addStyles: (unistyles: Array<UnistylesValues>, forChild?: boolean) => {
         injectedClassName: string;
         hash: string;
     };

package/lib/typescript/src/web/shadowRegistry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shadowRegistry.d.ts","sourceRoot":"","sources":["../../../../src/web/shadowRegistry.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAIhD,qBAAa,uBAAuB;IAYpB,OAAO,CAAC,QAAQ;IAV5B,IAAI,SAA4B;IAChC,MAAM,SAAQ;IACd,MAAM,gBAAa;IACnB,QAAQ,eAAkC;IAC1C,OAAO,aAAW;IAGlB,OAAO,CAAC,WAAW,CAAwC;IAC3D,OAAO,CAAC,UAAU,CAAkC;gBAEhC,QAAQ,EAAE,iBAAiB;IAE/C,GAAG,QAAS,GAAG,SAAS,MAAM,UAM7B;IAED,SAAS,cAAe,KAAK,CAAC,eAAe,CAAC;;;MAiD7C;IAED,cAAc,WAAY,cAAc,UAEvC;IAED,cAAc,kBAAyB;IAEvC,MAAM,QAAS,GAAG,SAAS,MAAM,UAWhC;CACJ"}
+{"version":3,"file":"shadowRegistry.d.ts","sourceRoot":"","sources":["../../../../src/web/shadowRegistry.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAIhD,qBAAa,uBAAuB;IAYpB,OAAO,CAAC,QAAQ;IAV5B,IAAI,SAA4B;IAChC,MAAM,SAAQ;IACd,MAAM,gBAAa;IACnB,QAAQ,eAAkC;IAC1C,OAAO,aAAW;IAGlB,OAAO,CAAC,WAAW,CAAwC;IAC3D,OAAO,CAAC,UAAU,CAAkC;gBAEhC,QAAQ,EAAE,iBAAiB;IAE/C,GAAG,QAAS,GAAG,SAAS,MAAM,UAM7B;IAED,SAAS,cAAe,KAAK,CAAC,eAAe,CAAC,aAAa,OAAO;;;MAqDjE;IAED,cAAc,WAAY,cAAc,UAEvC;IAED,cAAc,kBAAyB;IAEvC,MAAM,QAAS,GAAG,SAAS,MAAM,UAWhC;CACJ"}

package/lib/typescript/src/web/state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../src/web/state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAmB,MAAM,WAAW,CAAA;AAEtE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAY,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAG3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAKhD,qBAAa,cAAc;IAqBX,OAAO,CAAC,QAAQ;IApB5B,aAAa,UAAQ;IACrB,MAAM,qBAAoC;IAC1C,SAAS,qBAAoC;IAC7C,SAAS,CAAC,EAAE,YAAY,CAAA;IACxB,OAAO,UAAO;IAEd,OAAO,CAAC,mBAAmB,CAA6B;IAExD,IAAI,UAAU,IAKkB,aAAa,GAAG,SAAS,CACxD;IAED,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAElC,iBAAiB,UAAQ;gBAEL,QAAQ,EAAE,iBAAiB;IAE/C,IAAI,WAAY,eAAe,UAwB9B;IAED,OAAO,CAAC,UAAU,CA0BjB;IAED,OAAO,CAAC,YAAY,CA6BnB;IAED,OAAO,CAAC,eAAe,CA2BtB;CACJ"}
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../src/web/state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAmB,MAAM,WAAW,CAAA;AAEtE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAY,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAG3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAKhD,qBAAa,cAAc;IAqBX,OAAO,CAAC,QAAQ;IApB5B,aAAa,UAAQ;IACrB,MAAM,qBAAoC;IAC1C,SAAS,qBAAoC;IAC7C,SAAS,CAAC,EAAE,YAAY,CAAA;IACxB,OAAO,UAAO;IAEd,OAAO,CAAC,mBAAmB,CAA6B;IAExD,IAAI,UAAU,IAKkB,aAAa,GAAG,SAAS,CACxD;IAED,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAElC,iBAAiB,UAAQ;gBAEL,QAAQ,EAAE,iBAAiB;IAE/C,IAAI,WAAY,eAAe,UAwB9B;IAED,OAAO,CAAC,UAAU,CA8BjB;IAED,OAAO,CAAC,YAAY,CA6BnB;IAED,OAAO,CAAC,eAAe,CA+BtB;CACJ"}

package/lib/typescript/src/web/utils/unistyle.d.ts

@@ -13,7 +13,6 @@ export declare const extractSecrets: (object: any) => {
     [x: string]: any;
 } | undefined;
 export declare const removeInlineStyles: (values: UnistylesValues) => {};
-export declare const isInDocument: (element: HTMLElement) => boolean;
 export declare const getMediaQuery: (query: string, allBreakpoints: Array<string>) => string;
 export declare const extractUnistyleDependencies: (value: any) => UnistyleDependency[];
 //# sourceMappingURL=unistyle.d.ts.map

package/lib/typescript/src/web/utils/unistyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"unistyle.d.ts","sourceRoot":"","sources":["../../../../../src/web/utils/unistyle.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AACpE,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAIpG,eAAO,MAAM,aAAa,WAAY,WAAW,qBAQhD,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC1B,iBAAiB,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAC;IACzD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAA;CAC/D,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,CAAC,UAAU,CAAC,WAAW,eAAe,MAanE,CAAA;AAED,eAAO,MAAM,cAAc,WAAY,GAAG;;aAkBzC,CAAA;AAED,eAAO,MAAM,kBAAkB,WAAY,eAAe,OAUzD,CAAA;AAED,eAAO,MAAM,YAAY,YAAa,WAAW,YAAoC,CAAA;AAErF,eAAO,MAAM,aAAa,UAAW,MAAM,kBAAkB,KAAK,CAAC,MAAM,CAAC,WA6BzE,CAAA;AAED,eAAO,MAAM,2BAA2B,UAAW,GAAG,yBAQrD,CAAA"}
+{"version":3,"file":"unistyle.d.ts","sourceRoot":"","sources":["../../../../../src/web/utils/unistyle.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AACpE,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAIpG,eAAO,MAAM,aAAa,WAAY,WAAW,qBAQhD,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC1B,iBAAiB,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAC;IACzD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAA;CAC/D,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,CAAC,UAAU,CAAC,WAAW,eAAe,MAanE,CAAA;AAED,eAAO,MAAM,cAAc,WAAY,GAAG;;aAkBzC,CAAA;AAED,eAAO,MAAM,kBAAkB,WAAY,eAAe,OAUzD,CAAA;AAED,eAAO,MAAM,aAAa,UAAW,MAAM,kBAAkB,KAAK,CAAC,MAAM,CAAC,WA6BzE,CAAA;AAED,eAAO,MAAM,2BAA2B,UAAW,GAAG,yBAQrD,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-nightly-20250226",
+  "version": "3.0.0-nightly-20250319",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",

package/plugin/index.js

@@ -59,6 +59,9 @@ var REACT_NATIVE_COMPONENT_NAMES = [
 ];
 var REPLACE_WITH_UNISTYLES_PATHS = [
   "react-native-reanimated/src/component",
+  "react-native-reanimated/lib/module/component",
+  "react-native-gesture-handler/lib/module/components",
+  "react-native-gesture-handler/lib/commonjs/components",
   "react-native-gesture-handler/src/components"
 ];
 var REPLACE_WITH_UNISTYLES_EXOTIC_PATHS = [];

package/src/components/native/Pressable.native.tsx

@@ -51,7 +51,7 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
                 }
 
                 // @ts-expect-error - this is hidden from TS
-                UnistylesShadowRegistry.add(storedRef.current, unistyles)
+                UnistylesShadowRegistry.add(ref, unistyles)
 
                 return passForwardedRef(props, ref, forwardedRef)
             }}

package/src/core/getClassname.ts

@@ -1,13 +1,14 @@
 import type { UnistylesValues } from '../types'
 import { UnistylesWeb } from '../web'
 
-export const getClassName = (unistyle: UnistylesValues | undefined | Array<UnistylesValues>) => {
+export const getClassName = (unistyle: UnistylesValues | undefined | Array<UnistylesValues>, forChild?: boolean) => {
     if (!unistyle) {
         return undefined
     }
 
     const { hash, injectedClassName } = UnistylesWeb.shadowRegistry.addStyles(
-        Array.isArray(unistyle) ? unistyle.flat(Number.POSITIVE_INFINITY) : [unistyle]
+        Array.isArray(unistyle) ? unistyle.flat(Number.POSITIVE_INFINITY) : [unistyle],
+        forChild
     )
 
     return hash ? { $$css: true, hash, injectedClassName } : undefined

package/src/core/useProxifiedUnistyles/useProxifiedUnistyles.ts

@@ -63,6 +63,22 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
     })
     const proxifiedRuntime = new Proxy(getMiniRuntime(), {
         get: (target, prop) => {
+            if (prop === 'insets') {
+                return new Proxy(target.insets, {
+                    get: (target, prop) => {
+                        if (prop === 'ime') {
+                            dependencies.add(UnistyleDependency.Ime)
+
+                            return target[prop as keyof typeof target]
+                        }
+
+                        dependencies.add(UnistyleDependency.Insets)
+
+                        return target[prop as keyof typeof target]
+                    }
+                })
+            }
+
             if (prop in RTDependencyMap) {
                 dependencies.add(RTDependencyMap[prop as keyof typeof RTDependencyMap])
             }

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

@@ -1,11 +1,10 @@
 import React, { forwardRef, useEffect, type ComponentType, useRef } from 'react'
 import { type UnistyleDependency, UnistylesShadowRegistry } from '../../specs'
 import type { UnistylesTheme } from '../../types'
-import type { PartialBy } from '../../types/common'
 import { deepMergeObjects } from '../../utils'
 import { useProxifiedUnistyles } from '../useProxifiedUnistyles'
 import { maybeWarnAboutMultipleUnistyles } from '../warn'
-import type { Mappings, SupportedStyleProps } from './types'
+import type { Mappings } from './types'
 
 // @ts-expect-error
 type GenericComponentProps<P> = ComponentProps<P>
@@ -24,12 +23,12 @@ type MappedSecrets = {
 
 export const withUnistyles = <TComponent, TMappings extends GenericComponentProps<TComponent>>(Component: TComponent, mappings?: Mappings<TMappings>) => {
     type TProps = GenericComponentProps<TComponent>
-    type PropsWithUnistyles = PartialBy<TProps, keyof TMappings | SupportedStyleProps> & {
+    type PropsWithUnistyles = Partial<TProps> & {
         uniProps?: Mappings<TProps>
     }
     const getSecrets = (styleProps: Record<string, any> = {}): MappedSecrets => {
         const styles = Array.isArray(styleProps)
-            ? styleProps
+            ? styleProps.flat()
             : [styleProps]
 
         const secrets: Array<UnistylesSecrets> = styles

package/src/core/withUnistyles/withUnistyles.tsx

@@ -1,11 +1,10 @@
 import React, { type ComponentType, forwardRef, type ComponentProps, type ComponentRef } from 'react'
 import type { UnistylesValues } from '../../types'
-import type { PartialBy } from '../../types/common'
 import { deepMergeObjects } from '../../utils'
 import { getClassName } from '../getClassname'
 import { useProxifiedUnistyles } from '../useProxifiedUnistyles'
 import { maybeWarnAboutMultipleUnistyles } from '../warn'
-import type { Mappings, SupportedStyleProps } from './types'
+import type { Mappings } from './types'
 
 // @ts-expect-error
 type GenericComponentProps<T> = ComponentProps<T>
@@ -14,7 +13,7 @@ type GenericComponentRef<T> = ComponentRef<T>
 
 export const withUnistyles = <TComponent, TMappings extends GenericComponentProps<TComponent>>(Component: TComponent, mappings?: Mappings<TMappings>) => {
     type TProps = GenericComponentProps<TComponent>
-    type PropsWithUnistyles = PartialBy<TProps, keyof TMappings | SupportedStyleProps> & {
+    type PropsWithUnistyles = Partial<TProps> & {
         uniProps?: Mappings<TProps>
     }
     type UnistyleStyles = {
@@ -24,17 +23,22 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
 
     return forwardRef<GenericComponentRef<TComponent>, PropsWithUnistyles>((props, ref) => {
         const narrowedProps = props as PropsWithUnistyles & UnistyleStyles
-        const styleClassNames = getClassName(narrowedProps.style)
+        const styleClassNames = getClassName(narrowedProps.style, true)
         const contentContainerStyleClassNames = getClassName(narrowedProps.contentContainerStyle)
         const { proxifiedRuntime, proxifiedTheme } = useProxifiedUnistyles()
 
         const mappingsProps = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
         const unistyleProps = narrowedProps.uniProps ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime) : {}
 
+        const emptyStyles = Object.fromEntries(Object.entries(Object.getOwnPropertyDescriptors(narrowedProps.style))
+            .filter(([key]) => !key.startsWith('unistyles') && !key.startsWith('_'))
+            .map(([key]) => [key, undefined]))
+
         const combinedProps = {
             ...deepMergeObjects(mappingsProps, unistyleProps, props),
             ...narrowedProps.style ? {
-                style: styleClassNames,
+                // Override default component styles with undefined values to reset them
+                style: emptyStyles
             } : {},
             ...narrowedProps.contentContainerStyle ? {
                 contentContainerStyle: contentContainerStyleClassNames,
@@ -48,6 +52,13 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
 
         const NativeComponent = Component as ComponentType
 
-        return <NativeComponent {...combinedProps} ref={ref} />
+        return (
+            <div
+                className={styleClassNames?.hash}
+                style={{ display: 'contents' }}
+            >
+                <NativeComponent {...combinedProps} ref={ref} />
+            </div>
+        )
     })
 }

package/src/types/common.ts

@@ -1,5 +1,4 @@
 export type Optional<T> = T | undefined
 export type Nullable<T> = T | null
 export type SafeReturnType<T> = T extends (...args: any) => infer R ? R : T
-export type PartialBy<T, K> = Omit<T, K & keyof T> & Partial<Pick<T, K & keyof T>>
 export type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never

package/src/web/registry.ts

@@ -21,7 +21,7 @@ export class UnistylesRegistry {
         }
 
         if (scopedThemeName) {
-            const scopedTheme = this.services.runtime.getTheme(scopedThemeName, this.services.state.CSSVars)
+            const scopedTheme = this.services.runtime.getTheme(scopedThemeName)
 
             if (!scopedTheme) {
                 throw error(`Unistyles: You're trying to use scoped theme '${scopedThemeName}' but it wasn't registered.`)
@@ -92,8 +92,11 @@ export class UnistylesRegistry {
         return false
     }
 
-    add = (value: UnistylesValues) => {
-        const hash = generateHash(value)
+    add = (value: UnistylesValues, forChild?: boolean) => {
+        const generatedHash = generateHash(value)
+        const hash = forChild
+            ? `${generatedHash} > *`
+            : generatedHash
 
         if (!this.stylesCache.has(hash)) {
             this.applyStyles(hash, value)

package/src/web/runtime.ts

@@ -1,7 +1,7 @@
 import { UnistyleDependency } from '../specs/NativePlatform'
 import type { UnistylesMiniRuntime } from '../specs/UnistylesRuntime'
 import { type AppTheme, type AppThemeName, ColorScheme, Orientation } from '../specs/types'
-import { WebContentSizeCategory } from '../types'
+import { type UnistylesTheme, WebContentSizeCategory } from '../types'
 import { NavigationBar, StatusBar } from './mock'
 import type { UnistylesServices } from './types'
 import { error, isServer, schemeToTheme } from './utils'
@@ -213,7 +213,11 @@ export class UnistylesRuntime {
             : this.services.state.themes.get(themeName ?? '')
 
         if (!themeName || !theme) {
-            throw error(`You're trying to get theme "${themeName}" but it wasn't registered.`)
+            return new Proxy({} as UnistylesTheme, {
+                get: () => {
+                    throw error(`You're trying to get theme "${themeName}" but it wasn't registered.`)
+                }
+            })
         }
 
         return theme

package/src/web/shadowRegistry.ts

@@ -27,7 +27,7 @@ export class UnistylesShadowRegistry {
         this.services.registry.connect(ref, hash)
     }
 
-    addStyles = (unistyles: Array<UnistylesValues>) => {
+    addStyles = (unistyles: Array<UnistylesValues>, forChild?: boolean) => {
         const getParsedStyles = () => {
             const allStyles = unistyles.map(unistyle => {
                 const secrets = extractSecrets(unistyle)
@@ -61,7 +61,7 @@ export class UnistylesShadowRegistry {
         // Copy scoped theme to not use referenced value
         const scopedTheme = this.scopedTheme
         const parsedStyles = getParsedStyles()
-        const { hash, existingHash } = this.services.registry.add(parsedStyles)
+        const { hash, existingHash } = this.services.registry.add(parsedStyles, forChild)
         const injectedClassNames = parsedStyles?._web?._classNames ?? []
         const injectedClassName = Array.isArray(injectedClassNames) ? injectedClassNames.join(' ') : injectedClassNames
         const dependencies = extractUnistyleDependencies(parsedStyles)
@@ -75,7 +75,11 @@ export class UnistylesShadowRegistry {
             }))
         }
 
-        return { injectedClassName, hash }
+        const hashClassname = forChild
+            ? hash.replace(' > *', '')
+            : hash
+
+        return { injectedClassName, hash: hashClassname }
     }
 
     setScopedTheme = (theme?: UnistylesTheme) => {

package/src/web/state.ts

@@ -58,7 +58,11 @@ export class UnistylesState {
         this.services.listener.initListeners()
     }
 
-    private initThemes = (themes = {} as UnistylesThemes, CSSVars = true) => {
+    private initThemes = (themes?: UnistylesThemes, CSSVars = true) => {
+        if (!themes) {
+            return
+        }
+
         this.CSSVars = CSSVars
 
         Object.entries(themes).forEach(([themeName, theme]) => {
@@ -117,7 +121,11 @@ export class UnistylesState {
         }
     }
 
-    private initBreakpoints = (breakpoints = {} as UnistylesBreakpoints) => {
+    private initBreakpoints = (breakpoints?: UnistylesBreakpoints) => {
+        if (!breakpoints) {
+            return
+        }
+
         this.breakpoints = breakpoints
         const breakpointsEntries = Object.entries(breakpoints)
 

package/src/web/utils/unistyle.ts

@@ -70,8 +70,6 @@ export const removeInlineStyles = (values: UnistylesValues) => {
     return returnValue
 }
 
-export const isInDocument = (element: HTMLElement) => document.body.contains(element)
-
 export const getMediaQuery = (query: string, allBreakpoints: Array<string>) => {
     if (Object.values(Orientation).includes(query as Orientation)) {
         return `@media (orientation: ${query})`