react-native-unistyles 3.0.0-nightly-20250210 → 3.0.0-nightly-20250214

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

@@ -40,10 +40,18 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
         <NativePressableReactNative
             {...props}
             ref={ref => {
+                const isPropStyleAFunction = typeof style === 'function'
+                const unistyles = isPropStyleAFunction
+                    ? style.call(style, { pressed: false })
+                    : getStyles(style as unknown as Record<string, any>)
+
                 if (ref) {
                     storedRef.current = ref
                 }
 
+                // @ts-expect-error - this is hidden from TS
+                UnistylesShadowRegistry.add(storedRef.current, unistyles)
+
                 return passForwardedRef(props, ref, forwardedRef)
             }}
             style={state => {

package/src/core/useProxifiedUnistyles/useProxifiedUnistyles.ts

@@ -26,8 +26,8 @@ const RTDependencyMap = {
     themeName: UnistyleDependency.ThemeName,
 } satisfies Partial<Record<keyof UnistylesMiniRuntime, UnistyleDependency>>
 
-export const useProxifiedUnistyles = () => {
-    const scopedTheme = UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme
+export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
+    const scopedTheme = forcedTheme ?? UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme
     const [dependencies] = useState(() => new Set<number>())
     const [theme, setTheme] = useState(UnistylesRuntime.getTheme(scopedTheme))
     const [_, runtimeChanged] = useReducer(() => ({}), {})

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

@@ -1,5 +1,6 @@
-import React, { forwardRef, useEffect, type ComponentType } from 'react'
-import type { UnistyleDependency } from '../../specs'
+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'
@@ -38,7 +39,8 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         // @ts-ignore we don't know the type of the component
         maybeWarnAboutMultipleUnistyles(narrowedProps.contentContainerStyle, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
 
-        const { proxifiedRuntime, proxifiedTheme, addDependencies } = useProxifiedUnistyles()
+        const scopedTheme = useRef(UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme)
+        const { proxifiedRuntime, proxifiedTheme, addDependencies } = useProxifiedUnistyles(scopedTheme.current)
 
         useEffect(() => {
             const styleSecrets = getSecrets(narrowedProps.style)

package/src/types/stylesheet.ts

@@ -62,7 +62,7 @@ export type UnistylesValues = FlatUnistylesValues & {
 } & VariantsAndCompoundVariants & {
     [propName in NestedKeys]?: UnistyleNestedStyles[propName]
 } & {
-    _web?: CSSProperties & CustomClassName & {
+    _web?: ToDeepUnistyles<CSSProperties> & CustomClassName & {
         [propName in Pseudo]?: ToDeepUnistyles<CSSProperties>
     }
 }

package/plugin/consts.js

@@ -1,63 +0,0 @@
-const REACT_NATIVE_COMPONENT_NAMES = [
-    'ActivityIndicator',
-    'View',
-    'Text',
-    'Image',
-    'ImageBackground',
-    'KeyboardAvoidingView',
-    'Pressable',
-    'ScrollView',
-    'FlatList',
-    'SectionList',
-    'Switch',
-    'TextInput',
-    'RefreshControl',
-    'TouchableHighlight',
-    'TouchableOpacity',
-    'VirtualizedList',
-    'Animated'
-    // Modal - there is no exposed native handle
-    // TouchableWithoutFeedback - can't accept a ref
-]
-
-// auto replace RN imports to Unistyles imports under these paths
-// our implementation simply borrows 'ref' to register it in ShadowRegistry
-// so we won't affect anyone's implementation
-const REPLACE_WITH_UNISTYLES_PATHS = [
-    'react-native-reanimated/src/component',
-    'react-native-gesture-handler/src/components'
-]
-
-// this is more powerful API as it allows to convert unmatched imports to Unistyles
-// { path: string, imports: Array<{ name: string, isDefault: boolean, path: string, mapTo: string }> }
-// path => node_modules path
-// imports:
-// name? <- target import name if isDefault is false
-// isDefault <- is the import default?
-// path <- path to the target import
-// mapTo <- name of the Unistyles component
-const REPLACE_WITH_UNISTYLES_EXOTIC_PATHS = []
-
-// this list will additionally detect React Native direct imports
-const NATIVE_COMPONENTS_PATHS = {
-    imports: [
-        {
-            name: 'NativeText',
-            isDefault: false,
-            path: 'react-native/Libraries/Text/TextNativeComponent',
-            mapTo: 'NativeText'
-        },
-        {
-            isDefault: true,
-            path: 'react-native/Libraries/Components/View/ViewNativeComponent',
-            mapTo: 'NativeView'
-        }
-    ]
-}
-
-module.exports = {
-    NATIVE_COMPONENTS_PATHS,
-    REACT_NATIVE_COMPONENT_NAMES,
-    REPLACE_WITH_UNISTYLES_PATHS,
-    REPLACE_WITH_UNISTYLES_EXOTIC_PATHS
-}

package/plugin/exotic.js

@@ -1,54 +0,0 @@
-function handleExoticImport(t, path, state, exoticImport) {
-    const specifiers = path.node.specifiers
-    const source = path.node.source
-
-    if (path.node.importKind !== 'value') {
-        return
-    }
-
-    specifiers.forEach(specifier => {
-        for (const rule of exoticImport.imports) {
-            const hasMatchingImportType = (!rule.isDefault && t.isImportSpecifier(specifier)) || (rule.isDefault && t.isImportDefaultSpecifier(specifier))
-            const hasMatchingImportName = rule.isDefault || (!rule.isDefault && rule.name === specifier.local.name)
-            const hasMatchingPath = rule.path === source.value
-
-            if (!hasMatchingImportType || !hasMatchingImportName || !hasMatchingPath) {
-                continue
-            }
-
-            if (t.isImportDefaultSpecifier(specifier)) {
-                const newImport = t.importDeclaration(
-                    [t.importDefaultSpecifier(t.identifier(specifier.local.name))],
-                    t.stringLiteral(state.opts.isLocal
-                        ? state.file.opts.filename.split('react-native-unistyles').at(0).concat(`react-native-unistyles/components/native/${rule.mapTo}`)
-                        : `react-native-unistyles/components/native/${rule.mapTo}`
-                    )
-                )
-
-                path.replaceWith(newImport)
-            } else {
-                const newImport = t.importDeclaration(
-                    [t.importSpecifier(t.identifier(rule.mapTo), t.identifier(rule.mapTo))],
-                    t.stringLiteral(state.opts.isLocal
-                        ? state.file.opts.filename.split('react-native-unistyles').at(0).concat(`react-native-unistyles/components/native/${rule.mapTo}`)
-                        : `react-native-unistyles/components/native/${rule.mapTo}`
-                    )
-                )
-
-                path.node.specifiers = specifiers.filter(s => s !== specifier)
-
-                if (path.node.specifiers.length === 0) {
-                    path.replaceWith(newImport)
-                } else {
-                    path.insertBefore(newImport)
-                }
-            }
-
-            return
-        }
-    })
-}
-
-module.exports = {
-    handleExoticImport
-}

package/plugin/import.js

@@ -1,51 +0,0 @@
-/** @param {import('./index').UnistylesPluginPass} state */
-function addUnistylesImport(t, path, state) {
-    const localNames = Object.keys(state.reactNativeImports)
-    const names = Object.values(state.reactNativeImports)
-    const pairs = Object.entries(state.reactNativeImports)
-    const nodesToRemove = []
-
-    // remove rn-imports
-    path.node.body.forEach(node => {
-        // user might have multiple imports like import type, import
-        if (t.isImportDeclaration(node) && node.source.value === 'react-native') {
-            node.specifiers = node.specifiers.filter(specifier => !localNames.some(name => name === specifier.local.name))
-
-            if (node.specifiers.length === 0) {
-                nodesToRemove.push(node)
-            }
-        }
-    })
-
-    // remove RNWeb imports
-    names.forEach(name => {
-        const rnWebImport = path.node.body.find(node => t.isImportDeclaration(node) && node.source.value === `react-native-web/dist/exports/${name}`)
-
-        if (rnWebImport) {
-            rnWebImport.specifiers = []
-        }
-    })
-
-    // import components from react-native-unistyles
-    pairs.forEach(([localName, name]) => {
-        const newImport = t.importDeclaration(
-            [t.importSpecifier(t.identifier(localName), t.identifier(name))],
-            t.stringLiteral(state.opts.isLocal
-                ? state.file.opts.filename.split('react-native-unistyles').at(0).concat(`react-native-unistyles/components/native/${name}`)
-                : `react-native-unistyles/components/native/${name}`
-            )
-        )
-
-        path.node.body.unshift(newImport)
-    })
-
-    // cleanup
-    nodesToRemove.forEach(node => path.node.body.splice(path.node.body.indexOf(node), 1))
-}
-
-const isInsideNodeModules = state => state.file.opts.filename.includes('node_modules')
-
-module.exports = {
-    isInsideNodeModules,
-    addUnistylesImport
-}

package/plugin/ref.js

@@ -1,11 +0,0 @@
-function hasStringRef(t, path) {
-    return path.node.openingElement.attributes.find(attr =>
-        t.isJSXAttribute(attr) &&
-        t.isJSXIdentifier(attr.name, { name: 'ref' }) &&
-        t.isStringLiteral(attr.value)
-    )
-}
-
-module.exports = {
-    hasStringRef
-}