react-native-unistyles 3.0.0-nightly-20250609 → 3.0.0-nightly-20250613

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/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/shadowRegistry.d.ts

@@ -14,6 +14,7 @@ export declare class UnistylesShadowRegistry {
     addStyles: (unistyles: Array<UnistylesValues>, forChild?: boolean) => UniGeneratedStyle | {
         injectedClassName: string;
         hash: string;
+        parsedStyles: UnistylesValues;
     };
     setScopedTheme: (theme?: UnistylesTheme) => void;
     getScopedTheme: () => undefined;

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,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAInE,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,GAAI,KAAK,GAAG,EAAE,OAAO,MAAM,UAM7B;IAED,SAAS,GAAI,WAAW,KAAK,CAAC,eAAe,CAAC,EAAE,WAAW,OAAO;;;MAoEjE;IAED,cAAc,GAAI,QAAQ,cAAc,UAEvC;IAED,cAAc,kBAAyB;IAEvC,MAAM,GAAI,KAAK,GAAG,EAAE,OAAO,MAAM,UAchC;IAED,KAAK,aAAW;CACnB"}
+{"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,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAInE,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,GAAI,KAAK,GAAG,EAAE,OAAO,MAAM,UAM7B;IAED,SAAS,GAAI,WAAW,KAAK,CAAC,eAAe,CAAC,EAAE,WAAW,OAAO;;;;MAoEjE;IAED,cAAc,GAAI,QAAQ,cAAc,UAEvC;IAED,cAAc,kBAAyB;IAEvC,MAAM,GAAI,KAAK,GAAG,EAAE,OAAO,MAAM,UAchC;IAED,KAAK,aAAW;CACnB"}

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

@@ -1,3 +1,4 @@
+import type { UnistylesValues } from '../types';
 import type { UnistylesListener } from './listener';
 import type { UnistylesRegistry } from './registry';
 import type { UnistylesRuntime } from './runtime';
@@ -12,5 +13,7 @@ export type UnistylesServices = {
 };
 export declare const UNI_GENERATED_KEYS: readonly ["$$css", "hash", "injectedClassName"];
 export type UniGeneratedKey = typeof UNI_GENERATED_KEYS[number];
-export type UniGeneratedStyle = Record<UniGeneratedKey, string>;
+export type UniGeneratedStyle = Record<UniGeneratedKey, string> & {
+    parsedStyles?: UnistylesValues;
+};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/web/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AACnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AACjD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,MAAM,MAAM,iBAAiB,GAAG;IAC5B,OAAO,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,cAAc,EAAE,uBAAuB,CAAC;IACxC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,iBAAiB,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,kBAAkB,iDAAkD,CAAA;AACjF,MAAM,MAAM,eAAe,GAAG,OAAO,kBAAkB,CAAC,MAAM,CAAC,CAAA;AAE/D,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/web/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AACnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AACjD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,MAAM,MAAM,iBAAiB,GAAG;IAC5B,OAAO,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,cAAc,EAAE,uBAAuB,CAAC;IACxC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,iBAAiB,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,kBAAkB,iDAAkD,CAAA;AACjF,MAAM,MAAM,eAAe,GAAG,OAAO,kBAAkB,CAAC,MAAM,CAAC,CAAA;AAE/D,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,GAAG;IAC9D,YAAY,CAAC,EAAE,eAAe,CAAA;CACjC,CAAA"}

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

@@ -1,13 +1,15 @@
+import type { UnistylesBreakpoints } from '../../global';
 import type { UnistyleDependency } from '../../specs/NativePlatform/NativePlatform.nitro';
 import { ColorScheme } from '../../specs/types';
 import type { StyleSheet, StyleSheetWithSuperPowers, UnistylesValues } from '../../types/stylesheet';
+import type { UnistylesRuntime } from '../runtime';
 import { type UniGeneratedStyle } from '../types';
 export declare const schemeToTheme: (scheme: ColorScheme) => "light" | "dark";
 export type UnistyleSecrets = {
     __uni__stylesheet: StyleSheetWithSuperPowers<StyleSheet>;
     __uni__key: string;
     __uni__args?: Array<any>;
-    __uni_variants: Record<string, string | boolean | undefined>;
+    __stylesheetVariants: Record<string, string | boolean | undefined>;
 };
 export declare const assignSecrets: <T>(object: T, secrets: UnistyleSecrets) => T;
 export declare const extractSecrets: (object: any) => {
@@ -20,4 +22,5 @@ export declare const checkForProp: (value: any, prop: string) => boolean;
 export declare const checkForAnimated: (value: any) => boolean;
 export declare const isGeneratedUnistyle: (value: Record<string, any>) => value is UniGeneratedStyle;
 export declare const convertTheme: (key: string, value: any, prev?: string) => [string, any];
+export declare const getClosestBreakpointValue: <T>(runtime: UnistylesRuntime, values: Partial<Record<keyof UnistylesBreakpoints, T>>) => T | undefined;
 //# 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,iDAAiD,CAAA;AACzF,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAGpG,OAAO,EAA4C,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAG3F,eAAO,MAAM,aAAa,GAAI,QAAQ,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,EAAE,QAAQ,CAAC,EAAE,SAAS,eAAe,MAanE,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,QAAQ,GAAG;;aAYzC,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,QAAQ,eAAe,OAUzD,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,EAAE,gBAAgB,KAAK,CAAC,MAAM,CAAC,WA6BzE,CAAA;AAED,eAAO,MAAM,2BAA2B,GAAI,OAAO,GAAG,yBAQrD,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,GAAG,EAAE,MAAM,MAAM,KAAG,OAcvD,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,OAAO,GAAG,KAAG,OAgB7C,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,OAAO,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAG,KAAK,IAAI,iBAIzE,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,EAAE,OAAO,GAAG,EAAE,aAAU,KAAG,CAAC,MAAM,EAAE,GAAG,CAU9E,CAAA"}
+{"version":3,"file":"unistyle.d.ts","sourceRoot":"","sources":["../../../../../src/web/utils/unistyle.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAA;AACzF,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAEpG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAElD,OAAO,EAA4C,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAG3F,eAAO,MAAM,aAAa,GAAI,QAAQ,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,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAA;CACrE,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,CAAC,EAAE,QAAQ,CAAC,EAAE,SAAS,eAAe,MAanE,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,QAAQ,GAAG;;aAYzC,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,QAAQ,eAAe,OAUzD,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,EAAE,gBAAgB,KAAK,CAAC,MAAM,CAAC,WA6BzE,CAAA;AAED,eAAO,MAAM,2BAA2B,GAAI,OAAO,GAAG,yBAQrD,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,GAAG,EAAE,MAAM,MAAM,KAAG,OAcvD,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,OAAO,GAAG,KAAG,OAgB7C,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,OAAO,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAG,KAAK,IAAI,iBAIzE,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,EAAE,OAAO,GAAG,EAAE,aAAU,KAAG,CAAC,MAAM,EAAE,GAAG,CAU9E,CAAA;AAED,eAAO,MAAM,yBAAyB,GAAI,CAAC,EAAE,SAAS,gBAAgB,EAAE,QAAQ,OAAO,CAAC,MAAM,CAAC,MAAM,oBAAoB,EAAE,CAAC,CAAC,CAAC,kBAa7H,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-nightly-20250609",
+  "version": "3.0.0-nightly-20250613",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "NODE_ENV=babel-test jest ./plugin",

package/src/components/ScopedTheme.tsx

@@ -17,9 +17,14 @@ export const ScopedTheme: React.FunctionComponent<React.PropsWithChildren<ThemeP
     children,
     invertedAdaptive
 }) => {
-    const isAdaptiveTheme = invertedAdaptive && UnistylesRuntime.hasAdaptiveThemes
+    const hasAdaptiveThemes = UnistylesRuntime.hasAdaptiveThemes
+    const isAdaptiveTheme = invertedAdaptive && hasAdaptiveThemes
 
-    if (!isAdaptiveTheme && !name) {
+    if (invertedAdaptive && !hasAdaptiveThemes) {
+        return children
+    }
+
+    if (!invertedAdaptive && !name) {
         if (__DEV__) {
             console.error('ScopedTheme: name or invertedAdaptive must be provided')
         }

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

@@ -26,6 +26,7 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
     type PropsWithUnistyles = Partial<TProps> & {
         uniProps?: Mappings<TProps>
     }
+
     const getSecrets = (styleProps: Record<string, any> = {}): MappedSecrets => {
         const styles = Array.isArray(styleProps)
             ? styleProps.flat()

package/src/reanimated/index.ts

@@ -1 +1,2 @@
 export { useAnimatedTheme } from './useAnimatedTheme'
+export { useAnimatedVariantColor } from './variant'

package/src/reanimated/variant/index.ts

@@ -0,0 +1 @@
+export * from './useAnimatedVariantColor'

package/src/reanimated/variant/types.ts

@@ -0,0 +1,14 @@
+export type ColorKeys<T> = {
+    [K in keyof T]: K extends string
+        ? K extends `${string}color${string}` | `${string}Color${string}`
+            ? K
+            : never
+        : never
+}[keyof T]
+
+export type UseUpdateVariantColorConfig<T extends Record<string, any>> = {
+    animateCallback?: (from: string, to: string) => void,
+    colorKey: ColorKeys<T>,
+    style: T,
+    secretKey: string | undefined
+}

package/src/reanimated/variant/useAnimatedVariantColor.ts

@@ -0,0 +1,38 @@
+import { interpolateColor, useDerivedValue, useSharedValue } from 'react-native-reanimated'
+import type { ColorKeys } from './types'
+import { useUpdateVariantColor } from './useUpdateVariantColor'
+
+export const useAnimatedVariantColor = <T extends Record<string, any>>(style: T, colorKey: ColorKeys<T>) => {
+    const secretKey = Object.keys(style).find(key => key.startsWith('unistyles_'))
+    // @ts-ignore this is hidden from TS
+    const hasVariants = style[secretKey]?.__stylesheetVariants
+
+    if (!hasVariants || !colorKey.toLowerCase().includes('color')) {
+        throw new Error('useAnimatedVariantColor: Style was not created by Unistyles, does not have variants or has no color property')
+    }
+
+    const { fromValue, toValue } = useUpdateVariantColor({
+        animateCallback: (from, to) => animate(from, to),
+        colorKey,
+        secretKey,
+        style,
+    })
+
+    const progress = useSharedValue(1)
+    const animate = (from: string, to: string) => {
+        'worklet'
+
+        fromValue.set(from)
+        toValue.set(to)
+    }
+
+    const derivedColor = useDerivedValue(() => {
+        return interpolateColor(
+            progress.value,
+            [0, 1],
+            [fromValue.get(), toValue.get()]
+        )
+    })
+
+    return derivedColor
+}

package/src/reanimated/variant/useUpdateVariantColor.native.ts

@@ -0,0 +1,38 @@
+import { useEffect, useLayoutEffect } from 'react'
+import { useSharedValue } from 'react-native-reanimated'
+import { StyleSheet, UnistyleDependency } from '../../specs'
+import type { UseUpdateVariantColorConfig } from './types'
+
+export const useUpdateVariantColor = <T extends Record<string, any>>({
+    colorKey,
+    style,
+    secretKey
+}: UseUpdateVariantColorConfig<T>) => {
+    const fromValue = useSharedValue<string>(style[colorKey])
+    const toValue = useSharedValue<string>(style[colorKey])
+
+    useEffect(() => {
+        // @ts-ignore this is hidden from TS
+        const dispose = StyleSheet.addChangeListener(changedDependencies => {
+            if (changedDependencies.includes(UnistyleDependency.Theme) || changedDependencies.includes(UnistyleDependency.Breakpoints)) {
+                // @ts-ignore
+                const newStyles = style[secretKey]?.uni__getStyles()
+
+                fromValue.set(toValue.value)
+                toValue.set(newStyles[colorKey])
+            }
+        })
+
+        return () => dispose()
+    }, [style, colorKey])
+
+    useLayoutEffect(() => {
+        fromValue.set(toValue.value)
+        toValue.set(style[colorKey])
+    }, [style, colorKey])
+
+    return {
+        fromValue,
+        toValue
+    }
+}

package/src/reanimated/variant/useUpdateVariantColor.ts

@@ -0,0 +1,81 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import { runOnUI, useSharedValue } from 'react-native-reanimated'
+import { UnistyleDependency } from '../../specs'
+import type { UnistylesValues } from '../../types'
+import { services } from '../../web/services'
+import { getClosestBreakpointValue } from '../../web/utils'
+import type { UseUpdateVariantColorConfig } from './types'
+
+export const useUpdateVariantColor = <T extends Record<string, any>>({
+    animateCallback,
+    colorKey,
+    style
+}: UseUpdateVariantColorConfig<T>) => {
+    const [dummyDiv] = useState(() => {
+        const div = document.createElement('div')
+
+        div.style.display = 'none'
+        document.body.appendChild(div)
+
+        return div
+    })
+    const parsedStyles = useMemo(() => {
+        return services.shadowRegistry.addStyles([style]).parsedStyles
+    }, [style])
+    const getCurrentColor = useCallback(
+        () => {
+            if (!parsedStyles) {
+                return 'rgb(0, 0, 0)'
+            }
+
+            const currentColor = parsedStyles[colorKey as keyof UnistylesValues] as string | Record<string, string>
+            const currentColorVar = typeof currentColor === 'string'
+                ? currentColor
+                : getClosestBreakpointValue<string>(services.runtime, currentColor) ?? 'rgb(0, 0, 0)'
+
+            if (currentColorVar.startsWith('var(--')) {
+                dummyDiv.style.color = currentColorVar
+
+                return getComputedStyle(dummyDiv).color
+            }
+
+            return currentColorVar
+        },
+        [style, colorKey]
+    )
+    const fromValue = useSharedValue<string>(getCurrentColor())
+    const toValue = useSharedValue<string>(getCurrentColor())
+
+    useEffect(() => {
+        const dispose = services.listener.addListeners([UnistyleDependency.Theme], () => {
+            runOnUI(() => {
+                animateCallback?.(toValue.get(), getCurrentColor())
+            })()
+        })
+
+        return () => dispose()
+    }, [style, colorKey])
+
+    useLayoutEffect(() => {
+        animateCallback?.(toValue.get(), getCurrentColor())
+
+        const colorStyle = parsedStyles?.[colorKey as keyof UnistylesValues]
+
+        if (typeof colorStyle !== 'object' || colorStyle === null) {
+            return
+        }
+
+        const dispose = services.listener.addListeners([UnistyleDependency.Breakpoints], () => {
+            animateCallback?.(toValue.get(), getCurrentColor())
+        })
+
+        return () => dispose()
+    }, [style, colorKey])
+
+    useEffect(() => () => dummyDiv.remove(), [])
+
+    return {
+        fromValue,
+        toValue
+    }
+}

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/create.ts

@@ -21,7 +21,7 @@ export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>, id?: s
         __uni__key: key,
         __uni__stylesheet: stylesheet,
         __uni__args: args,
-        __uni_variants: variants
+        __stylesheetVariants: variants
     })
 
     const createStyleSheetStyles = (variants?: Variants) => {

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/shadowRegistry.ts

@@ -49,7 +49,7 @@ export class UnistylesShadowRegistry {
                     return {}
                 }
 
-                const { __uni__key, __uni__stylesheet, __uni__args = [], __uni_variants: variants } = secrets
+                const { __uni__key, __uni__stylesheet, __uni__args = [], __stylesheetVariants: variants } = secrets
                 const newComputedStylesheet = this.services.registry.getComputedStylesheet(__uni__stylesheet, scopedTheme)
                 const style = newComputedStylesheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues))
                 const result = typeof style === 'function'
@@ -94,7 +94,7 @@ export class UnistylesShadowRegistry {
             ? hash.replace(' > *', '')
             : hash
 
-        return { injectedClassName, hash: hashClassname }
+        return { injectedClassName, hash: hashClassname, parsedStyles }
     }
 
     setScopedTheme = (theme?: UnistylesTheme) => {

package/src/web/types.ts

@@ -1,3 +1,4 @@
+import type { UnistylesValues } from '../types'
 import type { UnistylesListener } from './listener'
 import type { UnistylesRegistry } from './registry'
 import type { UnistylesRuntime } from './runtime'
@@ -15,4 +16,6 @@ export type UnistylesServices = {
 export const UNI_GENERATED_KEYS = ['$$css', 'hash', 'injectedClassName'] as const
 export type UniGeneratedKey = typeof UNI_GENERATED_KEYS[number]
 
-export type UniGeneratedStyle = Record<UniGeneratedKey, string>
+export type UniGeneratedStyle = Record<UniGeneratedKey, string> & {
+    parsedStyles?: UnistylesValues
+}

package/src/web/utils/unistyle.ts

@@ -3,7 +3,8 @@ import type { UnistylesBreakpoints } from '../../global'
 import type { UnistyleDependency } from '../../specs/NativePlatform/NativePlatform.nitro'
 import { ColorScheme, Orientation } from '../../specs/types'
 import type { StyleSheet, StyleSheetWithSuperPowers, UnistylesValues } from '../../types/stylesheet'
-import { isUnistylesMq, parseMq } from '../../utils'
+import { isDefined, isUnistylesMq, parseMq } from '../../utils'
+import type { UnistylesRuntime } from '../runtime'
 import * as unistyles from '../services'
 import { UNI_GENERATED_KEYS, type UniGeneratedKey, type UniGeneratedStyle } from '../types'
 import { hyphenate, keyInObject, reduceObject } from './common'
@@ -22,7 +23,7 @@ export type UnistyleSecrets = {
     __uni__stylesheet: StyleSheetWithSuperPowers<StyleSheet>,
     __uni__key: string,
     __uni__args?: Array<any>,
-    __uni_variants: Record<string, string | boolean | undefined>
+    __stylesheetVariants: Record<string, string | boolean | undefined>
 }
 
 export const assignSecrets = <T>(object: T, secrets: UnistyleSecrets) => {
@@ -158,3 +159,18 @@ export const convertTheme = (key: string, value: any, prev = '-'): [string, any]
 
     return [key, value]
 }
+
+export const getClosestBreakpointValue = <T>(runtime: UnistylesRuntime, values: Partial<Record<keyof UnistylesBreakpoints, T>>) => {
+    const breakpoints = runtime.breakpoints
+    const breakpointValues = Object.entries(values)
+        // Filter out non-breakpoint values
+        .filter((pair): pair is [keyof UnistylesBreakpoints, T] => pair[0] in breakpoints)
+        // Sort in descending order
+        .sort(([a], [b]) => (breakpoints[b] ?? 0) - (breakpoints[a] ?? 0))
+    // Get breakpoint value with highest priority
+    const [_, currentBreakpointValue] = breakpointValues.find(
+        ([key]) => isDefined(runtime.breakpoint) && (breakpoints[key] ?? 0) <= (breakpoints[runtime.breakpoint] ?? 0)
+    ) ?? []
+
+    return currentBreakpointValue
+}