react-native-unistyles 3.0.0-rc.5 → 3.0.1

package/lib/typescript/src/web/convert/pseudo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pseudo.d.ts","sourceRoot":"","sources":["../../../../../src/web/convert/pseudo.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,ssEAiIV,CAAA;AAEV,eAAO,MAAM,QAAQ,GAAI,UAAU,MAAM,YAAwD,CAAA;AAEjG,KAAK,kBAAkB,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,MAAM,GAAG,GAAG,CAAC,CAAA;AAE3F,MAAM,MAAM,MAAM,GAAG,kBAAkB,CAAC,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAA"}
+{"version":3,"file":"pseudo.d.ts","sourceRoot":"","sources":["../../../../../src/web/convert/pseudo.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,aAAa,43BAoET,CAAA;AAGV,QAAA,MAAM,cAAc,uYAuBV,CAAA;AAEV,KAAK,kBAAkB,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,MAAM,GAAG,GAAG,CAAC,CAAA;AAE3F,MAAM,MAAM,MAAM,GAAG,kBAAkB,CAAC,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AAEzG,eAAO,MAAM,aAAa,GAAI,UAAU,MAAM,YAA8D,CAAA;AAE5G,eAAO,MAAM,eAAe,GAAI,UAAU,MAAM,YAA+D,CAAA;AAE/G,eAAO,MAAM,QAAQ,GAAI,UAAU,MAAM,YAAyD,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/web/convert/utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAqB,KAAK,OAAO,EAAsB,MAAM,SAAS,CAAA;AAEjH,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,OAAO,GAAG,KAAG,KAAK,IAAI,KAAK,CAAC,eAAe,CAAgD,CAAA;AAEpI,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,YAA0E,CAAA;AAElH,eAAO,MAAM,QAAQ,GAAI,KAAK,MAAM,YAAwE,CAAA;AAE5G,eAAO,MAAM,QAAQ,GAAI,KAAK,MAAM,EAAE,OAAO,GAAG,KAAG,KAAK,IAAI,KAAK,CAAC,OAAO,CAA6C,CAAA;AAEtH,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,OAAO,GAAG,KAAG,KAAK,IAAI,KAAK,CAAC,cAAc,CAAgD,CAAA;AAEnI,eAAO,MAAM,qBAAqB,GAAI,OAAO,MAAM,GAAG,MAAM,oBAA8D,CAAA;AAE1H,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,EAAE,gBAAW,WAyBxD,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,IAAI,SAAS,aAAa,EAAE,KAAK,IAAI,EAAE,YAAY,MAAM,EAAE,QAAQ,GAAG,KAAG,SAAS,CAAC,IAAI,CAazH,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/web/convert/utils.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAqB,KAAK,OAAO,EAAsB,MAAM,SAAS,CAAA;AAEjH,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,OAAO,GAAG,KAAG,KAAK,IAAI,KAAK,CAAC,eAAe,CAAgD,CAAA;AAEpI,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,YAA0E,CAAA;AAElH,eAAO,MAAM,QAAQ,GAAI,KAAK,MAAM,YAAwE,CAAA;AAE5G,eAAO,MAAM,QAAQ,GAAI,KAAK,MAAM,EAAE,OAAO,GAAG,KAAG,KAAK,IAAI,KAAK,CAAC,OAAO,CAA6C,CAAA;AAEtH,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,OAAO,GAAG,KAAG,KAAK,IAAI,KAAK,CAAC,cAAc,CAAgD,CAAA;AAEnI,eAAO,MAAM,qBAAqB,GAAI,OAAO,MAAM,GAAG,MAAM,oBAA8D,CAAA;AAE1H,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,EAAE,gBAAW,WAyBxD,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,IAAI,SAAS,aAAa,EAAE,KAAK,IAAI,EAAE,YAAY,MAAM,EAAE,QAAQ,GAAG,KAAG,SAAS,CAAC,IAAI,CAazH,CAAA"}

package/lib/typescript/src/web/css/core.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../../../../../src/web/css/core.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,eAAO,MAAM,YAAY,GAAI,MAAM,MAAM,EAAE,OAAO,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,QAAQ,SA8DrF,CAAA"}
+{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../../../../../src/web/css/core.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,eAAO,MAAM,YAAY,GAAI,MAAM,MAAM,EAAE,OAAO,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,QAAQ,SA+DrF,CAAA"}

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

@@ -1,5 +1,6 @@
 import { UnistyleDependency } from '../specs/NativePlatform';
 import type { UnistylesServices } from './types';
+type Listener = (dependency: UnistyleDependency) => void;
 export declare class UnistylesListener {
     private services;
     private isInitialized;
@@ -8,7 +9,8 @@ export declare class UnistylesListener {
     constructor(services: UnistylesServices);
     emitChange: (dependency: UnistyleDependency) => void;
     initListeners: () => void;
-    addListeners: (dependencies: Array<UnistyleDependency>, listener: VoidFunction) => () => void;
-    addStylesheetListeners: (dependencies: Array<UnistyleDependency>, listener: VoidFunction) => () => void;
+    addListeners: (dependencies: Array<UnistyleDependency>, listener: Listener) => () => void;
+    addStylesheetListeners: (dependencies: Array<UnistyleDependency>, listener: Listener) => () => void;
 }
+export {};
 //# sourceMappingURL=listener.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"listener.d.ts","sourceRoot":"","sources":["../../../../src/web/listener.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEhD,qBAAa,iBAAiB;IAKd,OAAO,CAAC,QAAQ;IAJ5B,OAAO,CAAC,aAAa,CAAQ;IAC7B,OAAO,CAAC,SAAS,CAAoG;IACrH,OAAO,CAAC,mBAAmB,CAAoG;gBAE3G,QAAQ,EAAE,iBAAiB;IAE/C,UAAU,GAAI,YAAY,kBAAkB,UAG3C;IAED,aAAa,aAkCZ;IAED,YAAY,GAAI,cAAc,KAAK,CAAC,kBAAkB,CAAC,EAAE,UAAU,YAAY,gBAM9E;IAED,sBAAsB,GAAI,cAAc,KAAK,CAAC,kBAAkB,CAAC,EAAE,UAAU,YAAY,gBAMxF;CACJ"}
+{"version":3,"file":"listener.d.ts","sourceRoot":"","sources":["../../../../src/web/listener.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEhD,KAAK,QAAQ,GAAG,CAAC,UAAU,EAAE,kBAAkB,KAAK,IAAI,CAAA;AAExD,qBAAa,iBAAiB;IAKd,OAAO,CAAC,QAAQ;IAJ5B,OAAO,CAAC,aAAa,CAAQ;IAC7B,OAAO,CAAC,SAAS,CAAgG;IACjH,OAAO,CAAC,mBAAmB,CAAgG;gBAEvG,QAAQ,EAAE,iBAAiB;IAE/C,UAAU,GAAI,YAAY,kBAAkB,UAG3C;IAED,aAAa,aAkCZ;IAED,YAAY,GAAI,cAAc,KAAK,CAAC,kBAAkB,CAAC,EAAE,UAAU,QAAQ,gBAM1E;IAED,sBAAsB,GAAI,cAAc,KAAK,CAAC,kBAAkB,CAAC,EAAE,UAAU,QAAQ,gBAMpF;CACJ"}

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

@@ -1 +1 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../../../src/web/runtime.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AACrE,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC3F,OAAO,EAAuB,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAEtE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAGhD,qBAAa,gBAAgB;IAKb,OAAO,CAAC,QAAQ;IAJ5B,UAAU,wBAAuB;IACjC,SAAS,wBAAsB;IAC/B,WAAW,iBAAsD;gBAE7C,QAAQ,EAAE,iBAAiB;IAE/C,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,YAAY;IAYpB,IAAI,WAAW,gBASd;IAED,IAAI,SAAS,cAMZ;IAED,IAAI,mBAAmB,2BAEtB;IAED,IAAI,WAAW,sCAEd;IAED,IAAI,UAAU,wDAEb;IAED,IAAI,WAAW,gBAMd;IAED,IAAI,WAAW,YAEd;IAED,IAAI,UAAU,YAEb;IAED,IAAI,KAAK,UAER;IAED,IAAI,UAAU,WAEb;IAED,IAAI,MAAM;;;MAYT;IAED,IAAI,SAAS,WAEZ;IAED,IAAI,MAAM;;;;;;MAQT;IAED,IAAI,SAAS,oDAEZ;IAED,IAAI,GAAG,YAEN;IAED,IAAI,iBAAiB,YAEpB;IAED,IAAI,aAAa,2DAEhB;IAED,IAAI,WAAW,IAAI,oBAAoB,CAuBtC;IAED,QAAQ,GAAI,WAAW,YAAY,UAmBlC;IAED,iBAAiB,GAAI,WAAW,OAAO,UAWtC;IAED,0BAA0B,GAAI,OAAO,MAAM,UAM1C;IAED,gBAAgB,aAAW;IAE3B,WAAW,GAAI,WAAW,YAAY,EAAE,SAAS,CAAC,YAAY,EAAE,QAAQ,KAAK,QAAQ,UAqBpF;IAED,QAAQ,GAAI,qBAA0B,EAAE,iBAAe,WActD;CACJ"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../../../src/web/runtime.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AACrE,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC3F,OAAO,EAAuB,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAEtE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAGhD,qBAAa,gBAAgB;IAKb,OAAO,CAAC,QAAQ;IAJ5B,UAAU,wBAAuB;IACjC,SAAS,wBAAsB;IAC/B,WAAW,iBAAsD;gBAE7C,QAAQ,EAAE,iBAAiB;IAE/C,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,YAAY;IAYpB,IAAI,WAAW,gBASd;IAED,IAAI,SAAS,cAYZ;IAED,IAAI,mBAAmB,2BAEtB;IAED,IAAI,WAAW,sCAEd;IAED,IAAI,UAAU,wDAEb;IAED,IAAI,WAAW,gBAMd;IAED,IAAI,WAAW,YAEd;IAED,IAAI,UAAU,YAEb;IAED,IAAI,KAAK,UAER;IAED,IAAI,UAAU,WAEb;IAED,IAAI,MAAM;;;MAYT;IAED,IAAI,SAAS,WAEZ;IAED,IAAI,MAAM;;;;;;MAQT;IAED,IAAI,SAAS,oDAEZ;IAED,IAAI,GAAG,YAEN;IAED,IAAI,iBAAiB,YAEpB;IAED,IAAI,aAAa,2DAEhB;IAED,IAAI,WAAW,IAAI,oBAAoB,CAuBtC;IAED,QAAQ,GAAI,WAAW,YAAY,UAmBlC;IAED,iBAAiB,GAAI,WAAW,OAAO,UAiBtC;IAED,0BAA0B,GAAI,OAAO,MAAM,UAM1C;IAED,gBAAgB,aAAW;IAE3B,WAAW,GAAI,WAAW,YAAY,EAAE,SAAS,CAAC,YAAY,EAAE,QAAQ,KAAK,QAAQ,UAsBpF;IAED,QAAQ,GAAI,qBAA0B,EAAE,iBAAe,WActD;CACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-rc.5",
+  "version": "3.0.1",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "NODE_ENV=babel-test jest ./plugin",
@@ -91,6 +91,7 @@
     "react-native.config.js",
     "Unistyles.podspec",
     "repack-plugin",
+    "unistyles_get_rn_version.rb",
     "!repack-plugin/__tests__",
     "!repack-plugin/src",
     "!repack-plugin/esbuild.js",

package/src/components/AdaptiveTheme.tsx

@@ -14,7 +14,7 @@ export const AdaptiveTheme: React.FunctionComponent<AdaptiveThemeProps> = ({
     previousScopedTheme
 }) => {
     const { rt } = useUnistyles()
-    const name = (rt.themeName === 'dark' ? 'light' : 'dark') as keyof UnistylesThemes
+    const name = (rt.colorScheme === 'dark' ? 'light' : 'dark') as keyof UnistylesThemes
     const mappedChildren = [
         <ApplyScopedTheme key={name} name={name} />,
         children,

package/src/components/NamedTheme.tsx

@@ -5,7 +5,7 @@ import { UnistylesShadowRegistry } from '../specs'
 import { ApplyScopedTheme } from './ApplyScopedTheme'
 
 interface NamedThemeProps extends PropsWithChildren {
-    name: keyof UnistylesThemes,
+    name: keyof UnistylesThemes | undefined,
     previousScopedTheme?: string
 }
 
@@ -15,7 +15,7 @@ export const NamedTheme: React.FunctionComponent<NamedThemeProps> = ({
     previousScopedTheme
 }) => {
     const mappedChildren = [
-        <ApplyScopedTheme key={name} name={name} />,
+        <ApplyScopedTheme key='apply' name={name} />,
         children,
         <ApplyScopedTheme key='dispose' name={previousScopedTheme as keyof UnistylesThemes | undefined} />
     ]

package/src/components/ScopedTheme.tsx

@@ -6,47 +6,54 @@ import { NamedTheme } from './NamedTheme'
 
 type ThemeProps = {
     name: keyof UnistylesThemes,
-    invertedAdaptive?: boolean
+    invertedAdaptive?: never
+    reset?: never
 } | {
-    name?: undefined,
-    invertedAdaptive: true
+    name?: never,
+    invertedAdaptive: boolean,
+    reset?: never
+} | {
+    name?: never,
+    invertedAdaptive?: never,
+    reset: boolean
 }
 
 export const ScopedTheme: React.FunctionComponent<React.PropsWithChildren<ThemeProps>> = ({
     name,
     children,
-    invertedAdaptive
+    invertedAdaptive,
+    reset
 }) => {
     const hasAdaptiveThemes = UnistylesRuntime.hasAdaptiveThemes
     const isAdaptiveTheme = invertedAdaptive && hasAdaptiveThemes
-
-    if (invertedAdaptive && !hasAdaptiveThemes) {
-        return children
-    }
-
-    if (!invertedAdaptive && !name) {
-        if (__DEV__) {
-            console.error('ScopedTheme: name or invertedAdaptive must be provided')
-        }
-
-        return null
-    }
-
     const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme()
 
-    return isAdaptiveTheme
-        ? (
-            <AdaptiveTheme previousScopedTheme={previousScopedTheme}>
-                {children}
-            </AdaptiveTheme>
-        )
-        : (
-            <NamedTheme
-                name={name as keyof UnistylesThemes}
-                previousScopedTheme={previousScopedTheme}
-            >
-                {children}
-            </NamedTheme>
-        )
-
+    switch (true) {
+        case name !== undefined:
+            return (
+                <NamedTheme
+                    name={name as keyof UnistylesThemes}
+                    previousScopedTheme={previousScopedTheme}
+                >
+                    {children}
+                </NamedTheme>
+            )
+        case isAdaptiveTheme:
+            return (
+                <AdaptiveTheme previousScopedTheme={previousScopedTheme}>
+                    {children}
+                </AdaptiveTheme>
+            )
+        case reset:
+            return (
+                <NamedTheme
+                    name={undefined}
+                    previousScopedTheme={previousScopedTheme}
+                >
+                    {children}
+                </NamedTheme>
+            )
+        default:
+            return children
+    }
 }

package/src/core/createUnistylesElement.tsx

@@ -7,14 +7,16 @@ import { createUnistylesRef } from '../web/utils/createUnistylesRef'
 import { getClassName } from './getClassname'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
-const STYLE_PROPS = ['style', 'contentContainerStyle', 'columnWrapperStyle'] as const
+const STYLE_PROPS = ['contentContainerStyle', 'columnWrapperStyle'] as const
+
+type StyleProp = typeof STYLE_PROPS[number] | 'style'
 
 type ComponentProps = {
-    [K in typeof STYLE_PROPS[number]]?: UnistylesValues
+    [K in StyleProp]?: UnistylesValues
 }
 
 const buildUnistylesProps = (Component: any, props: ComponentProps, forwardedRef: React.ForwardedRef<unknown>) => {
-    const componentStyleProps = STYLE_PROPS.filter(styleProp => styleProp in props)
+    const componentStyleProps = ['style' as const, ...STYLE_PROPS.filter(styleProp => styleProp in props)]
     const classNames = Object.fromEntries(componentStyleProps.map(styleProp => [styleProp, getClassName(props[styleProp])]))
     const refs = componentStyleProps.map(styleProp => {
         return createUnistylesRef(

package/src/core/useProxifiedUnistyles/listener.native.ts

@@ -10,7 +10,9 @@ export const listener = ({ dependencies, updateTheme, updateRuntime }: ListenerP
         }
 
         if (changedDependencies.some((dependency: UnistyleDependency) => dependencies.includes(dependency))) {
-            updateRuntime()
+            const hasThemeNameChange = changedDependencies.includes(UnistyleDependency.ThemeName)
+
+            updateRuntime(hasThemeNameChange)
         }
     })
 

package/src/core/useProxifiedUnistyles/listener.ts

@@ -4,7 +4,7 @@ import type { ListenerProps } from './types'
 
 export const listener = ({ dependencies, updateTheme, updateRuntime }: ListenerProps) => {
     const disposeTheme = unistyles.services.listener.addListeners(dependencies.filter(dependency => dependency === UnistyleDependency.Theme), updateTheme)
-    const disposeRuntime = unistyles.services.listener.addListeners(dependencies.filter(dependency => dependency !== UnistyleDependency.Theme), updateRuntime)
+    const disposeRuntime = unistyles.services.listener.addListeners(dependencies.filter(dependency => dependency !== UnistyleDependency.Theme), dependency => updateRuntime(dependency === UnistyleDependency.ThemeName))
 
     return () => {
         disposeTheme()

package/src/core/useProxifiedUnistyles/types.ts

@@ -2,6 +2,6 @@ import type { UnistyleDependency } from '../../specs'
 
 export type ListenerProps = {
     updateTheme: VoidFunction,
-    updateRuntime: VoidFunction,
+    updateRuntime(themeNameChange: boolean): void,
     dependencies: Array<UnistyleDependency>
 }

package/src/core/useProxifiedUnistyles/useProxifiedUnistyles.ts

@@ -28,7 +28,7 @@ const RTDependencyMap = {
 } satisfies Partial<Record<keyof UnistylesMiniRuntime, UnistyleDependency>>
 
 export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
-    const scopedTheme = forcedTheme ?? UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme
+    const [scopedTheme, setScopedTheme] = useState(forcedTheme ?? UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme)
     const [dependencies] = useState(() => new Set<number>())
     const [theme, setTheme] = useState(UnistylesRuntime.getTheme(scopedTheme))
     const [_, runtimeChanged] = useReducer(() => ({}), {})
@@ -45,7 +45,13 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
 
                 setTheme(UnistylesRuntime.getTheme(scopedTheme))
             },
-            updateRuntime: () => runtimeChanged()
+            updateRuntime: (hasThemeNameChange: boolean) => {
+                if (hasThemeNameChange && scopedTheme) {
+                    return
+                }
+
+                runtimeChanged()
+            }
         })
     }
 
@@ -55,6 +61,13 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
         return () => disposeRef.current?.()
     }, [dependencies.size])
 
+
+    const maybeNewScopedTheme = UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme
+
+    if (scopedTheme && maybeNewScopedTheme && scopedTheme !== maybeNewScopedTheme) {
+        setScopedTheme(maybeNewScopedTheme)
+    }
+
     const proxifiedTheme = new Proxy(theme, {
         get: (target, prop) => {
             dependencies.add(UnistyleDependency.Theme)
@@ -84,6 +97,10 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
                 dependencies.add(RTDependencyMap[prop as keyof typeof RTDependencyMap])
             }
 
+            if (prop === 'themeName' && scopedTheme) {
+                return scopedTheme
+            }
+
             return target[prop as keyof typeof target]
         }
     })

package/src/core/withUnistyles/types.ts

@@ -4,4 +4,4 @@ import type { UnistylesTheme } from '../../types';
 export const SUPPORTED_STYLE_PROPS = ['style', 'contentContainerStyle'] as const
 
 export type SupportedStyleProps = typeof SUPPORTED_STYLE_PROPS[number]
-export type Mappings<T = {}> = (theme: UnistylesTheme, rt: UnistylesMiniRuntime) => Omit<Partial<T>, SupportedStyleProps>
+export type Mappings<T = {}> = (theme: UnistylesTheme, rt: UnistylesMiniRuntime) => Omit<Partial<T>, SupportedStyleProps> & { key?: string }

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

@@ -75,8 +75,8 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
             addDependencies(Array.from(new Set([...styleSecrets.dependencies, ...contentContainerStyleSecrets.dependencies])))
         }, [narrowedProps.style, narrowedProps.contentContainerStyle])
 
-        const mappingsProps = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
-        const unistyleProps = narrowedProps.uniProps ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime) : {}
+        const { key: mappingsKey, ...mappingsProps } = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
+        const { key: uniPropsKey, ...unistyleProps } = narrowedProps.uniProps ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime) : {}
 
         const styleSecrets = getSecrets(narrowedProps.style)
         const contentContainerStyleSecrets = getSecrets(narrowedProps.contentContainerStyle)
@@ -91,6 +91,12 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
             } : {},
         } as any
 
-        return <NativeComponent {...finalProps as TProps} ref={ref} />
+        return (
+            <NativeComponent
+                key={uniPropsKey || mappingsKey}
+                {...finalProps as TProps}
+                ref={ref}
+            />
+        )
     })
 }

package/src/core/withUnistyles/withUnistyles.tsx

@@ -27,16 +27,15 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         const contentContainerStyleClassNames = getClassName(narrowedProps.contentContainerStyle)
         const { proxifiedRuntime, proxifiedTheme } = useProxifiedUnistyles()
 
-        const mappingsProps = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
-        const unistyleProps = narrowedProps.uniProps ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime) : {}
-
+        const { key: mappingsKey, ...mappingsProps } = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
+        const { key: uniPropsKey, ...unistyleProps } = narrowedProps.uniProps ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime) : {}
 
         const emptyStyles = narrowedProps.style
             ? Object.fromEntries(
-                  Object.entries(Object.getOwnPropertyDescriptors(narrowedProps.style))
-                      .filter(([key]) => !key.startsWith("unistyles") && !key.startsWith("_"))
-                      .map(([key]) => [key, undefined])
-              )
+                Object.entries(Object.getOwnPropertyDescriptors(narrowedProps.style))
+                    .filter(([key]) => !key.startsWith("unistyles") && !key.startsWith("_"))
+                    .map(([key]) => [key, undefined])
+            )
             : undefined
 
         const combinedProps = {
@@ -63,7 +62,11 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
                 className={classNames?.hash}
                 style={{ display: 'contents' }}
             >
-                <NativeComponent {...combinedProps} ref={ref} />
+                <NativeComponent
+                    key={uniPropsKey || mappingsKey}
+                    {...combinedProps}
+                    ref={ref}
+                />
             </div>
         )
     })

package/src/mocks.ts

@@ -217,4 +217,27 @@ jest.mock('react-native-unistyles', () => {
     }
 })
 
+jest.mock('react-native-unistyles/reanimated', () => {
+    const unistyles = require('react-native-unistyles')
+    const mockedSharedValue = (value: any) => ({
+        value
+    })
 
+    return {
+        useAnimatedTheme: () => {
+            const theme = unistyles.useUnistyles().theme
+            const sharedTheme = mockedSharedValue(theme)
+
+            return sharedTheme
+        },
+        useAnimatedVariantColor: () => {
+            const fromValue = mockedSharedValue('#000000')
+            const toValue = mockedSharedValue('#FFFFFF')
+
+            return {
+                fromValue,
+                toValue
+            }
+        },
+    }
+})

package/src/specs/UnistylesRuntime/index.ts

@@ -44,7 +44,6 @@ const HybridUnistylesRuntime = NitroModules
 
 HybridUnistylesRuntime.statusBar = HybridUnistylesRuntime.createHybridStatusBar()
 HybridUnistylesRuntime.navigationBar = HybridUnistylesRuntime.createHybridNavigationBar()
-HybridUnistylesRuntime._setRootViewBackgroundColor = HybridUnistylesRuntime.setRootViewBackgroundColor
 
 HybridUnistylesRuntime.setRootViewBackgroundColor = (color?: string) => {
     const parsedColor = processColor(color) ?? 0

package/src/web/convert/object/boxShadow.ts

@@ -25,7 +25,7 @@ export const getBoxShadow = (boxShadow: Array<BoxShadowValue>) => {
         const boxShadowStyle = Object.fromEntries(boxShadow.map(shadow => {
             const [key] = Object.keys(shadow)
             return [key, shadow[key as keyof BoxShadowValue]]
-        }))
+        })) as BoxShadowValue
 
         return {
             boxShadow: createBoxShadowValue(boxShadowStyle)
@@ -42,7 +42,7 @@ export const getBoxShadow = (boxShadow: Array<BoxShadowValue>) => {
             }
 
             return [key, value]
-        }))
+        })) as BoxShadowValue
 
         return {
             [breakpoint]: {

package/src/web/convert/pseudo.ts

@@ -1,26 +1,12 @@
-export const pseudos = [
-    '_-moz-broken',
-    '_-moz-drag-over',
-    '_-moz-first-node',
-    '_-moz-handler-blocked',
-    '_-moz-handler-crashed',
-    '_-moz-handler-disabled',
-    '_-moz-last-node',
-    '_-moz-loading',
-    '_-moz-locale-dir(ltr)',
-    '_-moz-locale-dir(rtl)',
-    '_-moz-only-whitespace',
-    '_-moz-submit-invalid',
-    '_-moz-suppressed',
-    '_-moz-user-disabled',
-    '_-moz-window-inactive',
+// All non experimental pseudo clasess and elements
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
+const pseudoClasses = [
     '_active',
     '_any-link',
     '_autofill',
-    '_blank',
     '_buffering',
     '_checked',
-    '_current',
     '_default',
     '_defined',
     '_dir(',
@@ -33,8 +19,8 @@ export const pseudos = [
     '_focus',
     '_focus-visible',
     '_focus-within',
-    '_fullscreen',
     '_future',
+    '_has-slotted',
     '_has(',
     '_host',
     '_host-context(',
@@ -49,7 +35,6 @@ export const pseudos = [
     '_last-of-type',
     '_left',
     '_link',
-    '_local-link',
     '_modal',
     '_muted',
     '_not(',
@@ -59,6 +44,7 @@ export const pseudos = [
     '_nth-of-type(',
     '_only-child',
     '_only-of-type',
+    '_open',
     '_optional',
     '_out-of-range',
     '_past',
@@ -71,45 +57,27 @@ export const pseudos = [
     '_read-write',
     '_required',
     '_right',
+    '_root',
     '_scope',
     '_seeking',
     '_stalled',
     '_state(',
     '_target',
-    '_target-within',
     '_user-invalid',
     '_user-valid',
     '_valid',
     '_visited',
     '_volume-locked',
-    '_where(',
-    '_-moz-color-swatch',
-    '_-moz-focus-inner',
-    '_-moz-list-bullet',
-    '_-moz-list-number',
-    '_-moz-meter-bar',
-    '_-moz-progress-bar',
-    '_-moz-range-progress',
-    '_-moz-range-thumb',
-    '_-moz-range-track',
-    '_-webkit-inner-spin-button',
-    '_-webkit-meter-barDeprecated',
-    '_-webkit-meter-even-less-good-value',
-    '_-webkit-meter-inner-element',
-    '_-webkit-meter-optimum-value',
-    '_-webkit-meter-suboptimum-value',
-    '_-webkit-progress-bar',
-    '_-webkit-progress-inner-element',
-    '_-webkit-progress-value',
-    '_-webkit-scrollbar',
-    '_-webkit-search-cancel-button',
-    '_-webkit-search-results-button',
-    '_-webkit-slider-runnable-track',
-    '_-webkit-slider-thumb',
+    '_where',
+] as const
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
+const pseudoElements = [
     '_after',
     '_backdrop',
     '_before',
     '_cue',
+    '_details-content',
     '_file-selector-button',
     '_first-letter',
     '_first-line',
@@ -123,15 +91,18 @@ export const pseudos = [
     '_spelling-error',
     '_target-text',
     '_view-transition',
-    '_view-transition-group',
-    '_view-transition-image-pair',
-    '_view-transition-new',
-    '_view-transition-old',
+    '_view-transition-group(',
+    '_view-transition-image-pair(',
+    '_view-transition-new(',
+    '_view-transition-old(',
 ] as const
 
-export const isPseudo = (selector: string) => pseudos.some(pseudo => selector.startsWith(pseudo))
-
 type AddDynamicSelector<T extends string> = T extends `${infer U}(` ? `${U}(${string})` : T
 
-export type Pseudo = AddDynamicSelector<typeof pseudos[number]>
+export type Pseudo = AddDynamicSelector<(typeof pseudoClasses)[number] | (typeof pseudoElements)[number]>
+
+export const isPseudoClass = (selector: string) => pseudoClasses.some(pseudo => selector.startsWith(pseudo))
+
+export const isPseudoElement = (selector: string) => pseudoElements.some(pseudo => selector.startsWith(pseudo))
 
+export const isPseudo = (selector: string) => isPseudoClass(selector) || isPseudoElement(selector)

package/src/web/convert/utils.ts

@@ -1,5 +1,6 @@
 // based on react-native-web normalizer
 // https://github.com/necolas/react-native-web
+/// <reference path="module.d.ts" />
 import normalizeColors from '@react-native/normalize-colors'
 import type { BoxShadowValue } from 'react-native'
 import type { TransformStyles } from '../../types/core'
@@ -30,7 +31,7 @@ export const normalizeColor = (color: string, opacity = 1) => {
         return color
     }
 
-    const hex = integer.toString(16).padStart(8, '0')
+    const hex = integer.toString(16).padStart(8, '0') as string
 
     if (hex.length === 8) {
         const [r = 0, g = 0, b = 0, a = 1] = hex

package/src/web/css/core.ts

@@ -1,10 +1,12 @@
+import { isPseudoClass } from '../convert/pseudo'
 import { getMediaQuery } from '../utils'
 import type { CSSState } from './state'
 
 export const convertToCSS = (hash: string, value: Record<string, any>, state: CSSState) => {
     Object.entries(value).forEach(([styleKey, styleValue]) => {
         if (styleKey[0] === '_') {
-            const pseudoClassName = styleKey.replace('_', `${hash}:`)
+            const isStylePseudoClass = isPseudoClass(styleKey)
+            const pseudoClassName = `${hash}${isStylePseudoClass ? ':' : '::'}${styleKey.slice(1)}`
 
             Object.entries(styleValue).forEach(([pseudoStyleKey, pseudoStyleValue]) => {
                 if (typeof pseudoStyleValue === 'object' && pseudoStyleValue !== null) {

package/src/web/listener.ts

@@ -1,16 +1,18 @@
 import { UnistyleDependency } from '../specs/NativePlatform'
 import type { UnistylesServices } from './types'
 
+type Listener = (dependency: UnistyleDependency) => void
+
 export class UnistylesListener {
     private isInitialized = false
-    private listeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<VoidFunction>())
-    private stylesheetListeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<VoidFunction>())
+    private listeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<Listener>())
+    private stylesheetListeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<Listener>())
 
     constructor(private services: UnistylesServices) {}
 
     emitChange = (dependency: UnistyleDependency) => {
-        this.stylesheetListeners[dependency]?.forEach(listener => listener())
-        this.listeners[dependency]?.forEach(listener => listener())
+        this.stylesheetListeners[dependency]?.forEach(listener => listener(dependency))
+        this.listeners[dependency]?.forEach(listener => listener(dependency))
     }
 
     initListeners = () => {
@@ -49,7 +51,7 @@ export class UnistylesListener {
         window.addEventListener('resize', () => this.emitChange(UnistyleDependency.Dimensions))
     }
 
-    addListeners = (dependencies: Array<UnistyleDependency>, listener: VoidFunction) => {
+    addListeners = (dependencies: Array<UnistyleDependency>, listener: Listener) => {
         dependencies.forEach(dependency => this.listeners[dependency]?.add(listener))
 
         return () => {
@@ -57,7 +59,7 @@ export class UnistylesListener {
         }
     }
 
-    addStylesheetListeners = (dependencies: Array<UnistyleDependency>, listener: VoidFunction) => {
+    addStylesheetListeners = (dependencies: Array<UnistyleDependency>, listener: Listener) => {
         dependencies.forEach(dependency => this.stylesheetListeners[dependency]?.add(listener))
 
         return () => {