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

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-20250607",
+  "version": "3.0.0-nightly-20250613",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "NODE_ENV=babel-test jest ./plugin",
@@ -147,11 +147,11 @@
     "husky": "9.1.7",
     "jest": "29.7.0",
     "metro-react-native-babel-preset": "0.77.0",
-    "nitro-codegen": "0.26.0",
+    "nitro-codegen": "0.26.2",
     "react": "19.1.0",
     "react-native": "0.79.2",
     "react-native-builder-bob": "0.40.10",
-    "react-native-nitro-modules": "0.26.0",
+    "react-native-nitro-modules": "0.26.2",
     "react-native-reanimated": "3.17.5",
     "react-native-web": "0.20.0",
     "react-test-renderer": "19.1.0",

package/plugin/index.d.ts

@@ -104,7 +104,7 @@ export interface UnistylesPluginOptions {
     * Defaults to:
     *
     * ```ts
-    * ['react-native-reanimated/src/component', 'react-native-gesture-handler/src/components']
+    * ['react-native-reanimated/src/component']
     * ```
     */
     autoProcessPaths?: Array<string>,

package/plugin/index.js

@@ -60,10 +60,7 @@ 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"
+  "react-native-reanimated/lib/module/component"
 ];
 var REPLACE_WITH_UNISTYLES_EXOTIC_PATHS = [];
 var NATIVE_COMPONENTS_PATHS = {

package/repack-plugin/index.js

@@ -54,10 +54,7 @@ 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"
+  "react-native-reanimated/lib/module/component"
 ];
 
 // repack-plugin/src/loader.ts

package/src/components/AdaptiveTheme.tsx

@@ -0,0 +1,34 @@
+import React, { useLayoutEffect } from 'react'
+import type { PropsWithChildren } from 'react'
+import { useUnistyles } from '../core'
+import type { UnistylesThemes } from '../global'
+import { UnistylesShadowRegistry } from '../specs'
+import { ApplyScopedTheme } from './ApplyScopedTheme'
+
+interface AdaptiveThemeProps extends PropsWithChildren {
+    previousScopedTheme?: string
+}
+
+export const AdaptiveTheme: React.FunctionComponent<AdaptiveThemeProps> = ({
+    children,
+    previousScopedTheme
+}) => {
+    const { rt } = useUnistyles()
+    const name = (rt.themeName === 'dark' ? 'light' : 'dark') as keyof UnistylesThemes
+    const mappedChildren = [
+        <ApplyScopedTheme key={name} name={name} />,
+        children,
+        <ApplyScopedTheme key='dispose' name={previousScopedTheme as keyof UnistylesThemes | undefined} />
+    ]
+
+    useLayoutEffect(() => {
+        // this will affect only scoped styles as other styles are not yet mounted
+        UnistylesShadowRegistry.flush()
+    })
+
+    return (
+        <React.Fragment key={name}>
+            {mappedChildren}
+        </React.Fragment>
+    )
+}

package/src/components/ApplyScopedTheme.tsx

@@ -0,0 +1,17 @@
+import { useLayoutEffect } from 'react'
+import type { UnistylesThemes } from '../global'
+import { UnistylesShadowRegistry } from '../specs'
+
+type ApplyScopedThemeProps = {
+    name?: keyof UnistylesThemes
+}
+
+export const ApplyScopedTheme: React.FunctionComponent<ApplyScopedThemeProps> = ({ name }) => {
+    UnistylesShadowRegistry.setScopedTheme(name)
+
+    useLayoutEffect(() => {
+        UnistylesShadowRegistry.setScopedTheme(name)
+    })
+
+    return null
+}

package/src/components/NamedTheme.tsx

@@ -0,0 +1,33 @@
+import React, { useLayoutEffect } from 'react'
+import type { PropsWithChildren } from 'react'
+import type { UnistylesThemes } from '../global'
+import { UnistylesShadowRegistry } from '../specs'
+import { ApplyScopedTheme } from './ApplyScopedTheme'
+
+interface NamedThemeProps extends PropsWithChildren {
+    name: keyof UnistylesThemes,
+    previousScopedTheme?: string
+}
+
+export const NamedTheme: React.FunctionComponent<NamedThemeProps> = ({
+    name,
+    children,
+    previousScopedTheme
+}) => {
+    const mappedChildren = [
+        <ApplyScopedTheme key={name} name={name} />,
+        children,
+        <ApplyScopedTheme key='dispose' name={previousScopedTheme as keyof UnistylesThemes | undefined} />
+    ]
+
+    useLayoutEffect(() => {
+        // this will affect only scoped styles as other styles are not yet mounted
+        UnistylesShadowRegistry.flush()
+    })
+
+    return (
+        <React.Fragment>
+            {mappedChildren}
+        </React.Fragment>
+    )
+}

package/src/components/ScopedTheme.tsx

@@ -1,37 +1,52 @@
-import React, { useLayoutEffect } from 'react'
+import React from 'react'
 import type { UnistylesThemes } from '../global'
-import { UnistylesShadowRegistry } from '../specs'
+import { UnistylesRuntime, UnistylesShadowRegistry } from '../specs'
+import { AdaptiveTheme } from './AdaptiveTheme'
+import { NamedTheme } from './NamedTheme'
 
 type ThemeProps = {
-    name: keyof UnistylesThemes
+    name: keyof UnistylesThemes,
+    invertedAdaptive?: boolean
+} | {
+    name?: undefined,
+    invertedAdaptive: true
 }
 
-const Apply = ({ name }: { name?: keyof UnistylesThemes }) => {
-    UnistylesShadowRegistry.setScopedTheme(name)
+export const ScopedTheme: React.FunctionComponent<React.PropsWithChildren<ThemeProps>> = ({
+    name,
+    children,
+    invertedAdaptive
+}) => {
+    const hasAdaptiveThemes = UnistylesRuntime.hasAdaptiveThemes
+    const isAdaptiveTheme = invertedAdaptive && hasAdaptiveThemes
 
-    useLayoutEffect(() => {
-        UnistylesShadowRegistry.setScopedTheme(name)
-    })
+    if (invertedAdaptive && !hasAdaptiveThemes) {
+        return children
+    }
 
-    return null
-}
+    if (!invertedAdaptive && !name) {
+        if (__DEV__) {
+            console.error('ScopedTheme: name or invertedAdaptive must be provided')
+        }
+
+        return null
+    }
 
-export const ScopedTheme: React.FunctionComponent<React.PropsWithChildren<ThemeProps>> = ({ name, children }) => {
     const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme()
-    const mappedChildren = [
-        <Apply key={name} name={name} />,
-        children,
-        <Apply key='dispose' name={previousScopedTheme as keyof UnistylesThemes | undefined} />
-    ]
-
-    useLayoutEffect(() => {
-        // this will affect only scoped styles as other styles are not yet mounted
-        UnistylesShadowRegistry.flush()
-    })
-
-    return (
-        <React.Fragment>
-            {mappedChildren}
-        </React.Fragment>
-    )
+
+    return isAdaptiveTheme
+        ? (
+            <AdaptiveTheme previousScopedTheme={previousScopedTheme}>
+                {children}
+            </AdaptiveTheme>
+        )
+        : (
+            <NamedTheme
+                name={name as keyof UnistylesThemes}
+                previousScopedTheme={previousScopedTheme}
+            >
+                {children}
+            </NamedTheme>
+        )
+
 }

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/specs/ShadowRegistry/index.ts

@@ -24,8 +24,13 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
         ?? handle?.viewRef?.current?.__internalInstanceHandle?.stateNode?.node
         ?? handle?._nativeRef?.__internalInstanceHandle?.stateNode?.node
 
+    // @ts-ignore we don't know the type of handle
+    if (!node && handle?.props?.horizontal && handle?.constructor?.name === 'FlatList') {
+        throw new Error('Unistyles: detected an unsupported FlatList with the horizontal prop. This will cause crashes on Android due to a bug in React Native core. Read more: https://github.com/facebook/react-native/issues/51601')
+    }
+
     if (!node) {
-        throw new Error(`Unistyles: Could not find shadow node for one of your components of type ${handle?.__internalInstanceHandle?.elementType ?? 'unknown'}`)
+        throw new Error(`Unistyles: Could not find shadow node for one of your components of type ${handle?.constructor?.name ?? 'unknown'}`)
     }
 
     return node

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

@@ -29,6 +29,7 @@ export class UnistylesListener {
 
             if (this.services.runtime.hasAdaptiveThemes) {
                 this.emitChange(UnistyleDependency.Theme)
+                this.emitChange(UnistyleDependency.ThemeName)
             }
         })
         this.services.runtime.lightMedia?.addEventListener('change', event => {
@@ -40,6 +41,7 @@ export class UnistylesListener {
 
             if (this.services.runtime.hasAdaptiveThemes) {
                 this.emitChange(UnistyleDependency.Theme)
+                this.emitChange(UnistyleDependency.ThemeName)
             }
         })
 

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
+}