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

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