react-native-unistyles 3.5.1 → 3.5.3

package/src/reanimated/useAnimatedTheme.native.ts

@@ -1,20 +1,20 @@
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { type SharedValue, useSharedValue } from 'react-native-reanimated'
 
 import type { UnistylesTheme } from '../types'
 
-import { StyleSheet, UnistyleDependency, UnistylesRuntime, UnistylesShadowRegistry } from '../specs'
+import { ScopedThemeContext } from '../components/ScopedThemeContext'
+import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
 
 export const useAnimatedTheme = () => {
-    const [scopedTheme, setScopedTheme] = useState(
-        () => UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme | undefined,
-    )
+    const scope = useContext(ScopedThemeContext)
+    const [scopedTheme, setScopedTheme] = useState(scope?.name as UnistylesTheme | undefined)
     const theme = useSharedValue(UnistylesRuntime.getTheme(scopedTheme))
-    const maybeNewScopedTheme = UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme | undefined
 
-    if (scopedTheme !== maybeNewScopedTheme) {
-        setScopedTheme(maybeNewScopedTheme)
-        theme.set(UnistylesRuntime.getTheme(maybeNewScopedTheme))
+    // Follow the closest ScopedTheme, see useProxifiedUnistyles
+    if (scope && scopedTheme !== scope.name) {
+        setScopedTheme(scope.name as UnistylesTheme | undefined)
+        theme.set(UnistylesRuntime.getTheme(scope.name as UnistylesTheme | undefined))
     }
 
     useEffect(() => {

package/src/reanimated/useAnimatedTheme.ts

@@ -1,21 +1,21 @@
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { type SharedValue, useSharedValue } from 'react-native-reanimated'
 
 import type { UnistylesTheme } from '../types'
 
-import { UnistyleDependency, UnistylesRuntime, UnistylesShadowRegistry } from '../specs'
+import { ScopedThemeContext } from '../components/ScopedThemeContext'
+import { UnistyleDependency, UnistylesRuntime } from '../specs'
 import { services } from '../web/services'
 
 export const useAnimatedTheme = () => {
-    const [scopedTheme, setScopedTheme] = useState(
-        () => UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme | undefined,
-    )
+    const scope = useContext(ScopedThemeContext)
+    const [scopedTheme, setScopedTheme] = useState(scope?.name as UnistylesTheme | undefined)
     const theme = useSharedValue(UnistylesRuntime.getTheme(scopedTheme))
-    const maybeNewScopedTheme = UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme | undefined
 
-    if (scopedTheme !== maybeNewScopedTheme) {
-        setScopedTheme(maybeNewScopedTheme)
-        theme.set(UnistylesRuntime.getTheme(maybeNewScopedTheme))
+    // Follow the closest ScopedTheme, see useProxifiedUnistyles
+    if (scope && scopedTheme !== scope.name) {
+        setScopedTheme(scope.name as UnistylesTheme | undefined)
+        theme.set(UnistylesRuntime.getTheme(scope.name as UnistylesTheme | undefined))
     }
 
     useEffect(() => {

package/src/specs/ShadowRegistry/index.ts

@@ -1,5 +1,6 @@
 import { NitroModules } from 'react-native-nitro-modules'
 
+import type { Scope } from '../../components/ScopedThemeContext'
 import type { VerifyReport } from '../../diagnostics/types'
 import type { UnistylesShadowRegistry as UnistylesShadowRegistrySpec } from './ShadowRegistry.nitro'
 import type { ShadowNode, Unistyle, ViewHandle } from './types'
@@ -8,7 +9,7 @@ import { StyleSheet } from '../StyleSheet'
 
 interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // Babel API
-    add(handle?: ViewHandle, styles?: Array<Unistyle>): void
+    add(handle?: ViewHandle, styles?: Array<Unistyle>, scope?: Scope | null): void
     remove(handle?: ViewHandle): void
     // JSI
     link(node: ShadowNode, styles?: Array<Unistyle>): void
@@ -18,7 +19,7 @@ interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     setScopedTheme(themeName?: string): void
     getScopedTheme(): string | undefined
     verify(): VerifyReport
-    takeCommittedTags(): Array<number>
+    takeCommittedInstanceHandles(): Array<any>
     refreshReactNodes(nodes: Array<ShadowNode>): void
 }
 
@@ -72,137 +73,122 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
     return node
 }
 
-const getNativeTag = (handle: ViewHandle): number | undefined =>
-    findFiberForHandle(handle)?.stateNode?.canonical?.nativeTag
-
-// by native tag, weak: views unmounted while frozen never unlink, their dead refs are dropped when the map doubles
-const linkedHandles = new Map<number, WeakRef<ViewHandle>>()
-const MIN_SWEEP_SIZE = 256
-let sweepSize = MIN_SWEEP_SIZE
-
-const sweepUnmountedHandles = () => {
-    linkedHandles.forEach((ref, tag) => {
-        if (!ref.deref()) {
-            linkedHandles.delete(tag)
-        }
-    })
-
-    sweepSize = Math.max(MIN_SWEEP_SIZE, linkedHandles.size * 2)
-}
-
-const trackHandle = (handle: ViewHandle) => {
-    const tag = getNativeTag(handle)
-
-    // views re-link on every render
-    if (tag === undefined || linkedHandles.get(tag)?.deref() === handle) {
-        return
-    }
-
-    linkedHandles.set(tag, new WeakRef(handle))
-
-    if (linkedHandles.size >= sweepSize) {
-        sweepUnmountedHandles()
-    }
-}
-
-const untrackHandle = (handle: ViewHandle) => {
-    const tag = getNativeTag(handle)
-
-    if (tag !== undefined && linkedHandles.get(tag)?.deref() === handle) {
-        linkedHandles.delete(tag)
-    }
-}
-
 // React re-attaches an untouched subtree through its root's node and only follows clones made on the JS thread.
 // Once a node was cloned elsewhere (state updates, Reanimated), React would commit a subtree from before a Unistyles
 // update, so after a Unistyles commit the committed nodes and their host ancestors must point at the committed tree
 const refreshReactNodes = () => {
-    const tags = HybridShadowRegistry.takeCommittedTags()
+    const fibers = HybridShadowRegistry.takeCommittedInstanceHandles()
 
-    if (tags.length === 0) {
+    if (fibers.length === 0) {
         return
     }
 
-    const nodes = new Set<ShadowNode>()
-    const visited = new Set<any>()
+    const nodes: Array<ShadowNode> = []
+    const refreshedTags = new Set<number>()
+    const hostFibers: Array<any> = []
 
-    for (const tag of tags) {
-        const handle = linkedHandles.get(tag)?.deref()
-
-        if (!handle) {
+    for (const fiber of fibers) {
+        // collected, unmounted since
+        if (!fiber) {
             continue
         }
 
-        const fiber = findFiberForHandle(handle)
-
-        // hidden by Suspense or a frozen screen
-        if (!fiber || isInsideSuspendedBoundary(fiber)) {
-            continue
-        }
+        let isHidden = false
 
-        for (let current: any = fiber; current && !visited.has(current); current = current.return) {
-            visited.add(current)
+        hostFibers.length = 0
 
-            if (current.alternate) {
-                visited.add(current.alternate)
+        for (let current: any = fiber; current; current = current.return) {
+            // hidden by Suspense or a frozen screen
+            if ((current.tag === SUSPENSE_TAG || current.tag === OFFSCREEN_TAG) && current.memoizedState !== null) {
+                isHidden = true
             }
 
             if (current.tag !== HOST_COMPONENT_TAG) {
                 continue
             }
 
-            for (const target of [current, current.alternate]) {
-                const node = target?.stateNode?.node
+            // its ancestors are visible and already collected
+            if (refreshedTags.has(current.stateNode?.canonical?.nativeTag)) {
+                break
+            }
+
+            hostFibers.push(current)
+        }
+
+        if (isHidden) {
+            continue
+        }
+
+        for (const hostFiber of hostFibers) {
+            const node = hostFiber.stateNode?.node
+            const alternateNode = hostFiber.alternate?.stateNode?.node
+            const hostTag = hostFiber.stateNode?.canonical?.nativeTag
+
+            if (hostTag !== undefined) {
+                refreshedTags.add(hostTag)
+            }
+
+            if (node) {
+                nodes.push(node)
+            }
 
-                if (node) {
-                    nodes.add(node)
-                }
+            if (alternateNode && alternateNode !== node) {
+                nodes.push(alternateNode)
             }
         }
     }
 
-    if (nodes.size > 0) {
-        HybridShadowRegistry.refreshReactNodes(Array.from(nodes))
+    if (nodes.length > 0) {
+        HybridShadowRegistry.refreshReactNodes(nodes)
     }
 }
 
 StyleSheet.addChangeListener(refreshReactNodes)
 
-// runs for every style on every link, so it allocates only for the rare merged style (eg. flattened by Animated)
-const splitMergedUnistyles = (style: any) => {
-    let hasUnistyle = false
+// skips empty styles and splits a style merged from many unistyles (eg. flattened by Animated) into one per unistyle
+// runs for every style on every link, so it reads the keys once and allocates only for the rare merged style
+const collectStyle = (style: any, collected: Array<any>) => {
+    if (!style) {
+        return
+    }
+
+    const keys = Object.keys(style)
+    let unistylesCount = 0
 
-    for (const key in style) {
-        if (!key.startsWith('unistyles_') || !Object.prototype.hasOwnProperty.call(style, key)) {
-            continue
+    for (const key of keys) {
+        if (key.startsWith('unistyles_')) {
+            unistylesCount++
         }
+    }
 
-        if (hasUnistyle) {
-            return Object.keys(style)
-                .filter((unistyleKey) => unistyleKey.startsWith('unistyles_'))
-                .map((unistyleKey) => ({ [unistyleKey]: style[unistyleKey] }))
+    if (unistylesCount < 2) {
+        if (keys.length > 0) {
+            collected.push(style)
         }
 
-        hasUnistyle = true
+        return
     }
 
-    return style
+    for (const key of keys) {
+        if (key.startsWith('unistyles_')) {
+            collected.push({ [key]: style[key] })
+        }
+    }
 }
 
-HybridShadowRegistry.add = (handle, styles) => {
+HybridShadowRegistry.add = (handle, styles, scope) => {
     // virtualized nodes can be null
     if (!handle || !styles) {
         return
     }
 
-    const stylesArray = Array.isArray(styles) ? styles.flat() : [styles]
+    const filteredStyles: Array<any> = []
 
-    // filter styles that are undefined or with no keys
-    const filteredStyles = stylesArray
-        .filter((style) => style && Object.keys(style).length > 0)
-        .flat()
-        .filter(Boolean)
-        .flatMap(splitMergedUnistyles)
+    if (Array.isArray(styles)) {
+        styles.flat(Infinity).forEach((style) => collectStyle(style, filteredStyles))
+    } else {
+        collectStyle(styles, filteredStyles)
+    }
 
     if (filteredStyles.length > 0) {
         const node = findShadowNodeForHandle(handle)
@@ -213,8 +199,18 @@ HybridShadowRegistry.add = (handle, styles) => {
             )
         }
 
+        // the view can link after its ScopedTheme rendered, when the registry is already restored
+        const previousScopedTheme = scope ? HybridShadowRegistry.getScopedTheme() : undefined
+
+        if (scope) {
+            HybridShadowRegistry.setScopedTheme(scope.name)
+        }
+
         HybridShadowRegistry.link(node, filteredStyles)
-        trackHandle(handle)
+
+        if (scope) {
+            HybridShadowRegistry.setScopedTheme(previousScopedTheme)
+        }
     }
 }
 
@@ -232,11 +228,17 @@ HybridShadowRegistry.remove = (handle) => {
             HybridShadowRegistry.suspend(maybeNode)
         } else {
             HybridShadowRegistry.unlink(maybeNode)
-            untrackHandle(handle)
         }
     }
 }
 
-type PrivateMethods = 'add' | 'remove' | 'link' | 'unlink' | 'suspend' | 'takeCommittedTags' | 'refreshReactNodes'
+type PrivateMethods =
+    | 'add'
+    | 'remove'
+    | 'link'
+    | 'unlink'
+    | 'suspend'
+    | 'takeCommittedInstanceHandles'
+    | 'refreshReactNodes'
 
 export const UnistylesShadowRegistry = HybridShadowRegistry as Omit<ShadowRegistry, PrivateMethods>

package/src/web/css/core.ts

@@ -3,6 +3,31 @@ import type { CSSState } from './state'
 import { isPseudoClass } from '../convert/pseudo'
 import { getMediaQuery } from '../utils'
 
+type SetProps = Parameters<CSSState['set']>[0]
+
+// box-none and box-only aren't CSS values, polyfill them like react-native-web: [element, children]
+const POINTER_EVENTS: Record<string, [string, string]> = {
+    'box-none': ['none', 'auto'],
+    'box-only': ['auto', 'none'],
+}
+
+export const getChildrenClassName = (className: string) => `:where(.${className})>*`
+
+const setStyle = (state: CSSState, props: SetProps) => {
+    if (props.propertyKey !== 'pointerEvents') {
+        state.set(props)
+
+        return
+    }
+
+    const [value, childrenValue] = POINTER_EVENTS[props.value] ?? [props.value]
+
+    state.set({ ...props, value })
+    // :where() has no specificity, so a child's own pointerEvents always wins
+    // set it for every value, so re-applying the style can't leave a stale children rule
+    state.set({ ...props, className: getChildrenClassName(props.className), value: childrenValue })
+}
+
 export const convertToCSS = (hash: string, value: Record<string, any>, state: CSSState) => {
     Object.entries(value).forEach(([styleKey, styleValue]) => {
         if (styleKey[0] === '_') {
@@ -15,7 +40,7 @@ export const convertToCSS = (hash: string, value: Record<string, any>, state: CS
                     Object.entries(pseudoStyleValue).forEach(([breakpointStyleKey, breakpointStyleValue]) => {
                         const mediaQuery = getMediaQuery(pseudoStyleKey, allBreakpoints)
 
-                        state.set({
+                        setStyle(state, {
                             mediaQuery,
                             className: pseudoClassName,
                             propertyKey: breakpointStyleKey,
@@ -26,7 +51,7 @@ export const convertToCSS = (hash: string, value: Record<string, any>, state: CS
                     return
                 }
 
-                state.set({
+                setStyle(state, {
                     className: pseudoClassName,
                     propertyKey: pseudoStyleKey,
                     value: pseudoStyleValue,
@@ -49,7 +74,7 @@ export const convertToCSS = (hash: string, value: Record<string, any>, state: CS
                     .map(([key]) => key)
                 const mediaQuery = getMediaQuery(styleKey, allBreakpoints)
 
-                state.set({
+                setStyle(state, {
                     mediaQuery,
                     className: hash,
                     propertyKey: breakpointStyleKey,
@@ -60,7 +85,7 @@ export const convertToCSS = (hash: string, value: Record<string, any>, state: CS
             return
         }
 
-        state.set({
+        setStyle(state, {
             className: hash,
             propertyKey: styleKey,
             value: styleValue,

package/src/web/css/state.ts

@@ -3,7 +3,7 @@ import type { UnistylesServices } from '../types'
 
 import { convertUnistyles } from '../convert'
 import { hyphenate, isServer } from '../utils'
-import { convertToCSS } from './core'
+import { convertToCSS, getChildrenClassName } from './core'
 
 type MapType = Map<string, Map<string, Map<string, any>>>
 type SetProps = {
@@ -89,19 +89,31 @@ export class CSSState {
 
         Object.entries(values).forEach(([key, value]) => convertToCSS(key, value))
 
+        // ScopedTheme renders an element with data-unistyles-theme (or data-unistyles-reset for `reset`),
+        // so the variables follow the closest scope and styles don't need to know it while they render
         if (theme === 'light' || theme === 'dark') {
-            this.themesCSS.set(`media ${theme}`, `@media (prefers-color-scheme: ${theme}){:root{${themeVars}}}`)
+            this.themesCSS.set(
+                `media ${theme}`,
+                `@media (prefers-color-scheme: ${theme}){:root,[data-unistyles-reset]{${themeVars}}}`,
+            )
         }
 
-        this.themesCSS.set(theme, `:root.${theme}{${themeVars}}`)
+        this.themesCSS.set(
+            theme,
+            `:root.${theme},:root.${theme} [data-unistyles-reset],[data-unistyles-theme="${theme}"]{${themeVars}}`,
+        )
     }
 
     remove = (hash: string) => {
+        const childrenClassName = getChildrenClassName(hash)
+
         this.mainMap.forEach((styles) => {
             styles.delete(hash)
+            styles.delete(childrenClassName)
         })
         this.mqMap.forEach((styles) => {
             styles.delete(hash)
+            styles.delete(childrenClassName)
         })
         this.recreate()
     }
@@ -117,7 +129,7 @@ export class CSSState {
             }
 
             for (const [className, thirdLevelMap] of secondLevelMap) {
-                styles += `.${className}{`
+                styles += className[0] === ':' ? `${className}{` : `.${className}{`
 
                 for (const [propertyKey, value] of thirdLevelMap) {
                     if (value === undefined) {

package/src/web/registry.ts

@@ -112,7 +112,7 @@ export class UnistylesRegistry {
 
     add = (value: UnistylesValues, forChild?: boolean) => {
         const generatedHash = generateHash(value)
-        const hash = forChild ? `${generatedHash} > *` : generatedHash
+        const hash = forChild ? `${generatedHash}_child > *` : generatedHash
 
         if (!this.stylesCache.has(hash)) {
             this.applyStyles(hash, value)

package/src/web/shadowRegistry.ts

@@ -101,7 +101,9 @@ export class UnistylesShadowRegistry {
     }
 
     setScopedTheme = (theme?: UnistylesTheme) => {
-        this.scopedTheme = theme
+        // With CSS variables, the closest ScopedTheme element picks the theme, so styles are the same in every scope.
+        // Keeping no scope here also means a suspended ScopedTheme can't leave it behind
+        this.scopedTheme = this.services.state.CSSVars ? undefined : theme
     }
 
     getScopedTheme = () => this.scopedTheme