react-native-unistyles 3.0.24 → 3.1.0

package/src/web/runtime.ts

@@ -1,9 +1,10 @@
-import { UnistyleDependency } from '../specs/NativePlatform'
 import type { UnistylesMiniRuntime } from '../specs/UnistylesRuntime'
+import type { UnistylesServices } from './types'
+
+import { UnistyleDependency } from '../specs/NativePlatform'
 import { type AppTheme, type AppThemeName, ColorScheme, Orientation } from '../specs/types'
 import { type UnistylesTheme, WebContentSizeCategory } from '../types'
 import { NavigationBar, StatusBar } from './mock'
-import type { UnistylesServices } from './types'
 import { convertTheme, error, isServer, schemeToTheme } from './utils'
 
 export class UnistylesRuntime {
@@ -102,13 +103,13 @@ export class UnistylesRuntime {
         if (isServer()) {
             return {
                 width: 0,
-                height: 0
+                height: 0,
             }
         }
 
         return {
             width: window.innerWidth,
-            height: window.innerHeight
+            height: window.innerHeight,
         }
     }
 
@@ -122,7 +123,7 @@ export class UnistylesRuntime {
             bottom: 0,
             left: 0,
             right: 0,
-            ime: 0
+            ime: 0,
         }
     }
 
@@ -156,14 +157,14 @@ export class UnistylesRuntime {
             insets: this.insets,
             statusBar: {
                 width: this.statusBar.width,
-                height: this.statusBar.height
+                height: this.statusBar.height,
             },
             navigationBar: {
                 width: this.navigationBar.width,
                 height: this.navigationBar.height,
             },
             rtl: this.rtl,
-            hasAdaptiveThemes: this.hasAdaptiveThemes
+            hasAdaptiveThemes: this.hasAdaptiveThemes,
         }
     }
 
@@ -179,8 +180,7 @@ export class UnistylesRuntime {
         const oldTheme = this.services.state.themeName
 
         this.services.state.themeName = themeName
-        this.services.listener.emitChange(UnistyleDependency.Theme)
-        this.services.listener.emitChange(UnistyleDependency.ThemeName)
+        this.services.listener.emitChanges([UnistyleDependency.Theme, UnistyleDependency.ThemeName])
 
         if (!isServer() && !this.services.state.hasAdaptiveThemes && this.services.state.CSSVars) {
             this.rootElement?.classList.remove(oldTheme ?? '')
@@ -232,9 +232,11 @@ export class UnistylesRuntime {
         if (this.services.state.CSSVars) {
             this.services.state.cssThemes.set(
                 themeName,
-                Object.fromEntries(Object.entries(newTheme).map(([key, value]) => {
-                    return convertTheme(key, value)
-                })) as UnistylesTheme
+                Object.fromEntries(
+                    Object.entries(newTheme).map(([key, value]) => {
+                        return convertTheme(key, value)
+                    }),
+                ) as UnistylesTheme,
             )
             this.services.registry.css.addTheme(themeName, newTheme)
             this.services.registry.css.recreate()
@@ -247,16 +249,20 @@ export class UnistylesRuntime {
         if (!hasSomeThemes) {
             return new Proxy({} as UnistylesTheme, {
                 get: () => {
-                    throw error('One of your stylesheets is trying to get the theme, but no theme has been selected yet. Did you forget to call StyleSheet.configure? If you called it, make sure you did so before any StyleSheet.create.')
-                }
+                    throw error(
+                        'One of your stylesheets is trying to get the theme, but no theme has been selected yet. Did you forget to call StyleSheet.configure? If you called it, make sure you did so before any StyleSheet.create.',
+                    )
+                },
             })
         }
 
         if (!themeName) {
             return new Proxy({} as UnistylesTheme, {
                 get: () => {
-                    throw error('One of your stylesheets is trying to get the theme, but no theme has been selected yet. Did you forget to select an initial theme?')
-                }
+                    throw error(
+                        'One of your stylesheets is trying to get the theme, but no theme has been selected yet. Did you forget to select an initial theme?',
+                    )
+                },
             })
         }
 
@@ -268,7 +274,7 @@ export class UnistylesRuntime {
             return new Proxy({} as UnistylesTheme, {
                 get: () => {
                     throw error(`You're trying to get theme "${themeName}" but it wasn't registered.`)
-                }
+                },
             })
         }
 

package/src/web/shadowRegistry.ts

@@ -1,7 +1,8 @@
-import { UnistyleDependency } from '../specs/NativePlatform/NativePlatform.nitro'
 import type { UnistylesTheme, UnistylesValues } from '../types'
-import { deepMergeObjects } from '../utils'
 import type { UniGeneratedStyle, UnistylesServices } from './types'
+
+import { UnistyleDependency } from '../specs/NativePlatform/NativePlatform.nitro'
+import { deepMergeObjects } from '../utils'
 import { extractSecrets, extractUnistyleDependencies, isGeneratedUnistyle, isServer } from './utils'
 import { getVariants } from './variants'
 
@@ -36,7 +37,7 @@ export class UnistylesShadowRegistry {
         }
 
         const getParsedStyles = () => {
-            const allStyles = unistyles.map(unistyle => {
+            const allStyles = unistyles.map((unistyle) => {
                 const secrets = extractSecrets(unistyle)
 
                 // Regular style
@@ -50,11 +51,12 @@ export class UnistylesShadowRegistry {
                 }
 
                 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'
-                    ? style(...__uni__args)
-                    : style
+                const newComputedStylesheet = this.services.registry.getComputedStylesheet(
+                    __uni__stylesheet,
+                    scopedTheme,
+                )
+                const style = newComputedStylesheet[__uni__key] as UnistylesValues | ((...args: any) => UnistylesValues)
+                const result = typeof style === 'function' ? style(...__uni__args) : style
                 const variantsResult = getVariants(result, variants)
                 const resultWithVariants = deepMergeObjects(result, variantsResult)
                 const dependencies = extractUnistyleDependencies(resultWithVariants)
@@ -66,7 +68,7 @@ export class UnistylesShadowRegistry {
 
                 return {
                     ...resultWithVariants,
-                    ...resultWithVariants._web
+                    ...resultWithVariants._web,
                 } as UnistylesValues
             })
 
@@ -81,18 +83,19 @@ export class UnistylesShadowRegistry {
         const injectedClassName = Array.isArray(injectedClassNames) ? injectedClassNames.join(' ') : injectedClassNames
         const dependencies = extractUnistyleDependencies(parsedStyles)
         const filteredDependencies = this.services.state.CSSVars
-            ? dependencies.filter(dependency => dependency !== UnistyleDependency.Theme)
+            ? dependencies.filter((dependency) => dependency !== UnistyleDependency.Theme)
             : dependencies
 
         if (!existingHash) {
-            this.disposeMap.set(hash, this.services.listener.addListeners(filteredDependencies, () => {
-                this.services.registry.applyStyles(hash, getParsedStyles())
-            }))
+            this.disposeMap.set(
+                hash,
+                this.services.listener.addListeners(filteredDependencies, () => {
+                    this.services.registry.applyStyles(hash, getParsedStyles())
+                }),
+            )
         }
 
-        const hashClassname = forChild
-            ? hash.replace(' > *', '')
-            : hash
+        const hashClassname = forChild ? hash.replace(' > *', '') : hash
 
         return { injectedClassName, hash: hashClassname, parsedStyles }
     }
@@ -108,15 +111,14 @@ export class UnistylesShadowRegistry {
             return
         }
 
-        this.services.registry.remove(ref, hash)
-            .then(removed => {
-                if (!removed) {
-                    return
-                }
+        this.services.registry.remove(ref, hash).then((removed) => {
+            if (!removed) {
+                return
+            }
 
-                this.disposeMap.get(hash)?.()
-                this.disposeMap.delete(hash)
-            })
+            this.disposeMap.get(hash)?.()
+            this.disposeMap.delete(hash)
+        })
     }
 
     flush = () => {}

package/src/web/state.ts

@@ -1,13 +1,14 @@
 import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
-import { UnistyleDependency } from '../specs/NativePlatform'
 import type { UnistylesConfig } from '../specs/StyleSheet'
 import type { AppBreakpoint, AppTheme, AppThemeName } from '../specs/types'
 import type { UnistylesTheme } from '../types'
 import type { UnionToIntersection } from '../types'
 import type { UnistylesServices } from './types'
+
+import { UnistyleDependency } from '../specs/NativePlatform'
 import { convertTheme, error, isServer, schemeToTheme } from './utils'
 
-type RemoveNevers<T> = { [K in keyof T as T[K] extends (never | undefined) ? never : K]: T[K] }
+type RemoveNevers<T> = { [K in keyof T as T[K] extends never | undefined ? never : K]: T[K] }
 type UnistylesSettings = Partial<UnionToIntersection<RemoveNevers<Required<UnistylesConfig>['settings']>>>
 
 export class UnistylesState {
@@ -21,9 +22,10 @@ export class UnistylesState {
     private _config: UnistylesConfig = {}
 
     get breakpoint() {
-        const [currentBreakpoint] = Array.from(this.matchingBreakpoints)
-            .reverse()
-            .find(([_key, value]) => value) ?? []
+        const [currentBreakpoint] =
+            Array.from(this.matchingBreakpoints)
+                .reverse()
+                .find(([_key, value]) => value) ?? []
 
         return currentBreakpoint as AppBreakpoint | undefined
     }
@@ -72,9 +74,11 @@ export class UnistylesState {
                 this.services.registry.css.addTheme(themeName, theme)
                 this.cssThemes.set(
                     themeName,
-                    Object.fromEntries(Object.entries(theme).map(([key, value]) => {
-                        return convertTheme(key, value)
-                    })) as UnistylesTheme
+                    Object.fromEntries(
+                        Object.entries(theme).map(([key, value]) => {
+                            return convertTheme(key, value)
+                        }),
+                    ) as UnistylesTheme,
                 )
             }
         })
@@ -84,13 +88,17 @@ export class UnistylesState {
         this.hasAdaptiveThemes = settings?.adaptiveThemes ?? false
 
         if (settings?.initialTheme && settings.adaptiveThemes) {
-            throw error('You\'re trying to set initial theme and enable adaptiveThemes, but these options are mutually exclusive.')
+            throw error(
+                "You're trying to set initial theme and enable adaptiveThemes, but these options are mutually exclusive.",
+            )
         }
 
         // Adaptive themes
         if (settings?.adaptiveThemes) {
             if (!this.themes.get('light') || !this.themes.get('dark')) {
-                throw error(`You're trying to enable adaptiveThemes, but you didn't register both 'light' and 'dark' themes.`)
+                throw error(
+                    `You're trying to enable adaptiveThemes, but you didn't register both 'light' and 'dark' themes.`,
+                )
             }
 
             this.themeName = schemeToTheme(this.services.runtime.colorScheme) as AppThemeName
@@ -99,9 +107,8 @@ export class UnistylesState {
         }
 
         if (settings?.initialTheme) {
-            const initialTheme = typeof settings.initialTheme === 'function'
-                ? settings.initialTheme()
-                : settings.initialTheme
+            const initialTheme =
+                typeof settings.initialTheme === 'function' ? settings.initialTheme() : settings.initialTheme
 
             if (!this.themes.get(initialTheme)) {
                 throw error(`You're trying to select theme "${initialTheme}" but it wasn't registered.`)
@@ -126,11 +133,11 @@ export class UnistylesState {
         const breakpointsEntries = Object.entries(breakpoints)
 
         if (breakpointsEntries.length === 0) {
-            throw error('StyleSheet.configure\'s breakpoints can\'t be empty.')
+            throw error("StyleSheet.configure's breakpoints can't be empty.")
         }
 
         if (breakpointsEntries?.[0]?.[1] !== 0) {
-            throw error('StyleSheet.configure\'s first breakpoint must start from 0.')
+            throw error("StyleSheet.configure's first breakpoint must start from 0.")
         }
 
         breakpointsEntries
@@ -143,7 +150,7 @@ export class UnistylesState {
                 const mediaQuery = window.matchMedia(`(min-width: ${value}px)`)
                 this.matchingBreakpoints.set(breakpoint, mediaQuery.matches)
 
-                mediaQuery.addEventListener('change', event => {
+                mediaQuery.addEventListener('change', (event) => {
                     this.matchingBreakpoints.set(breakpoint, event.matches)
                     this.services.listener.emitChange(UnistyleDependency.Breakpoints)
                 })

package/src/web/types.ts

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

package/src/web/utils/common.ts

@@ -1,7 +1,10 @@
 export const reduceObject = <TObj extends Record<string, any>, TReducer>(
     obj: TObj,
     reducer: (value: TObj[keyof TObj], key: keyof TObj) => TReducer,
-) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, reducer(value as TObj[keyof TObj], key)])) as { [K in keyof TObj]: TReducer }
+) =>
+    Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, reducer(value as TObj[keyof TObj], key)])) as {
+        [K in keyof TObj]: TReducer
+    }
 
 export const keyInObject = <T extends Record<string, any>>(obj: T, key: PropertyKey): key is keyof T => key in obj
 
@@ -14,12 +17,7 @@ export const equal = <T>(a: T, b: T) => {
         return true
     }
 
-    if (
-        typeof a !== 'object'
-        || a === null
-        || typeof b !== 'object'
-        || b === null
-    ) {
+    if (typeof a !== 'object' || a === null || typeof b !== 'object' || b === null) {
         return false
     }
 
@@ -29,7 +27,7 @@ export const equal = <T>(a: T, b: T) => {
         return false
     }
 
-    return keysA.every(key => Object.is(a[key], b[key]) && Object.prototype.hasOwnProperty.call(b, key))
+    return keysA.every((key) => Object.is(a[key], b[key]) && Object.prototype.hasOwnProperty.call(b, key))
 }
 
 export const hyphenate = (propertyName: string) => propertyName.replace(/[A-Z]/g, (m: string) => `-${m.toLowerCase()}`)
@@ -40,7 +38,7 @@ export const serialize = (obj: string | number | object): string => {
     }
 
     const sortedKeys = Object.keys(obj).sort()
-    const sortedKeyValuePairs = sortedKeys.map(key => `${key}:${serialize(obj[key as keyof typeof obj])}`)
+    const sortedKeyValuePairs = sortedKeys.map((key) => `${key}:${serialize(obj[key as keyof typeof obj])}`)
 
     return `{${sortedKeyValuePairs.join(',')}}`
 }

package/src/web/utils/createUnistylesRef.ts

@@ -1,5 +1,7 @@
 import type React from 'react'
+
 import type { Nullable, UnistylesValues } from '../../types'
+
 import * as unistyles from '../services'
 import { isServer } from './common'
 
@@ -7,27 +9,29 @@ type Styles = readonly [
     {
         hash: string
     },
-    Array<UnistylesValues>
+    Array<UnistylesValues>,
 ]
 
 export const createUnistylesRef = <T>(styles?: Styles, forwardedRef?: React.ForwardedRef<T>) => {
     const storedRef = { current: null as Nullable<T> }
     const [classNames] = styles ?? []
 
-    return isServer() ? undefined : (ref: Nullable<T>) => {
-        if (!ref) {
-            unistyles.services.shadowRegistry.remove(storedRef, classNames?.hash)
-        }
+    return isServer()
+        ? undefined
+        : (ref: Nullable<T>) => {
+              if (!ref) {
+                  unistyles.services.shadowRegistry.remove(storedRef, classNames?.hash)
+              }
 
-        storedRef.current = ref
-        unistyles.services.shadowRegistry.add(ref, classNames?.hash)
+              storedRef.current = ref
+              unistyles.services.shadowRegistry.add(ref, classNames?.hash)
 
-        if (typeof forwardedRef === 'function') {
-            return forwardedRef(ref)
-        }
+              if (typeof forwardedRef === 'function') {
+                  return forwardedRef(ref)
+              }
 
-        if (forwardedRef) {
-            forwardedRef.current = ref
-        }
-    }
+              if (forwardedRef) {
+                  forwardedRef.current = ref
+              }
+          }
 }

package/src/web/utils/unistyle.ts

@@ -1,10 +1,12 @@
 import { Animated } from 'react-native'
+
 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 { isDefined, isUnistylesMq, parseMq } from '../../utils'
 import type { UnistylesRuntime } from '../runtime'
+
+import { ColorScheme, Orientation } from '../../specs/types'
+import { isDefined, isUnistylesMq, parseMq } from '../../utils'
 import * as unistyles from '../services'
 import { UNI_GENERATED_KEYS, type UniGeneratedKey, type UniGeneratedStyle } from '../types'
 import { hyphenate, keyInObject, reduceObject } from './common'
@@ -20,9 +22,9 @@ export const schemeToTheme = (scheme: ColorScheme) => {
 }
 
 export type UnistyleSecrets = {
-    __uni__stylesheet: StyleSheetWithSuperPowers<StyleSheet>,
-    __uni__key: string,
-    __uni__args?: Array<any>,
+    __uni__stylesheet: StyleSheetWithSuperPowers<StyleSheet>
+    __uni__key: string
+    __uni__args?: Array<any>
     __stylesheetVariants: Record<string, string | boolean | undefined>
 }
 
@@ -32,10 +34,11 @@ export const assignSecrets = <T>(object: T, secrets: UnistyleSecrets) => {
     // @ts-expect-error assign hidden secrets
     object[`unistyles_${secretsId}`] = {}
     // @ts-expect-error assign hidden secrets
-    Object.defineProperties(object[`unistyles_${secretsId}`], reduceObject(secrets, secret => ({
+    // prettier-ignore
+    Object.defineProperties(object[`unistyles_${secretsId}`], reduceObject(secrets, (secret) => ({
         value: secret,
         enumerable: false,
-        configurable: true
+        configurable: true,
     })))
 
     return object
@@ -52,17 +55,20 @@ export const extractSecrets = (object: any) => {
         return undefined
     }
 
-    return reduceObject(Object.getOwnPropertyDescriptors(secrets), secret => secret.value)
+    return reduceObject(Object.getOwnPropertyDescriptors(secrets), (secret) => secret.value)
 }
 
 export const removeInlineStyles = (values: UnistylesValues) => {
     const returnValue = {}
 
-    Object.defineProperties(returnValue, reduceObject(values, value => ({
-        value,
-        enumerable: false,
-        configurable: true
-    })))
+    Object.defineProperties(
+        returnValue,
+        reduceObject(values, (value) => ({
+            value,
+            enumerable: false,
+            configurable: true,
+        })),
+    )
 
     return returnValue
 }
@@ -79,21 +85,25 @@ export const getMediaQuery = (query: string, allBreakpoints: Array<string>) => {
             minWidth ? `(min-width: ${minWidth}px)` : undefined,
             maxWidth ? `(max-width: ${maxWidth}px)` : undefined,
             minHeight ? `(min-height: ${minHeight}px)` : undefined,
-            maxHeight ? `(max-height: ${maxHeight}px)` : undefined
-        ].filter(Boolean).join(' and ')
+            maxHeight ? `(max-height: ${maxHeight}px)` : undefined,
+        ]
+            .filter(Boolean)
+            .join(' and ')
         return `@media ${queries}`
     }
 
     const breakpointValue = unistyles.services.runtime.breakpoints[query as keyof UnistylesBreakpoints] ?? 0
     const nextBreakpoint = allBreakpoints
         .filter((b): b is keyof UnistylesBreakpoints => b in unistyles.services.runtime.breakpoints)
-        .map(b => unistyles.services.runtime.breakpoints[b] as number)
+        .map((b) => unistyles.services.runtime.breakpoints[b] as number)
         .sort((a, b) => a - b)
-        .find(b => b > breakpointValue)
+        .find((b) => b > breakpointValue)
     const queries = [
         `(min-width: ${breakpointValue}px)`,
         nextBreakpoint ? `(max-width: ${nextBreakpoint - 1}px)` : undefined,
-    ].filter(Boolean).join(' and ')
+    ]
+        .filter(Boolean)
+        .join(' and ')
 
     return `@media ${queries}`
 }
@@ -103,22 +113,20 @@ export const extractUnistyleDependencies = (value: any) => {
         return []
     }
 
-    const dependencies: Array<UnistyleDependency> = keyInObject(value, 'uni__dependencies') ? value.uni__dependencies : []
+    const dependencies: Array<UnistyleDependency> = keyInObject(value, 'uni__dependencies')
+        ? value.uni__dependencies
+        : []
 
     return Array.isArray(dependencies) ? dependencies : []
 }
 
 export const checkForProp = (value: any, prop: string): boolean => {
     if (Array.isArray(value)) {
-        return value.some(nestedValue => checkForProp(nestedValue, prop))
+        return value.some((nestedValue) => checkForProp(nestedValue, prop))
     }
 
     if (typeof value === 'object' && value !== null) {
-        return keyInObject(value, prop)
-            ? true
-            : keyInObject(value, '_web')
-                ? checkForProp(value._web, prop)
-                : false
+        return keyInObject(value, prop) ? true : keyInObject(value, '_web') ? checkForProp(value._web, prop) : false
     }
 
     return false
@@ -134,9 +142,8 @@ export const checkForAnimated = (value: any): boolean => {
         const secrets = extractSecrets(value)
 
         // @ts-expect-error React Native Web exports Animated.AnimatedNode as Animated.Node
-        return value instanceof Animated.Node ||
-            objectValues.length > 0 && objectValues.some(checkForAnimated) ||
-            secrets && Object.keys(secrets).length === 0
+        // prettier-ignore
+        return value instanceof Animated.Node || objectValues.length > 0 && objectValues.some(checkForAnimated) || secrets && Object.keys(secrets).length === 0
     }
 
     return false
@@ -145,12 +152,19 @@ export const checkForAnimated = (value: any): boolean => {
 export const isGeneratedUnistyle = (value: Record<string, any>): value is UniGeneratedStyle => {
     const keys = Object.keys(value)
 
-    return keys.length > 0 && keys.every(key => UNI_GENERATED_KEYS.includes(key as UniGeneratedKey))
+    return keys.length > 0 && keys.every((key) => UNI_GENERATED_KEYS.includes(key as UniGeneratedKey))
 }
 
 export const convertTheme = (key: string, value: any, prev = '-'): [string, any] => {
     if (typeof value === 'object' && value !== null) {
-        return [key, Object.fromEntries(Object.entries(value).map(([nestedKey, nestedValue]) => convertTheme(nestedKey, nestedValue, `${prev}-${key}`)))]
+        return [
+            key,
+            Object.fromEntries(
+                Object.entries(value).map(([nestedKey, nestedValue]) =>
+                    convertTheme(nestedKey, nestedValue, `${prev}-${key}`),
+                ),
+            ),
+        ]
     }
 
     if (typeof value === 'string') {
@@ -160,7 +174,10 @@ 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>>) => {
+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
@@ -168,9 +185,11 @@ export const getClosestBreakpointValue = <T>(runtime: UnistylesRuntime, values:
         // 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)
-    ) ?? []
+    const [_, currentBreakpointValue] =
+        breakpointValues.find(
+            ([key]) =>
+                isDefined(runtime.breakpoint) && (breakpoints[key] ?? 0) <= (breakpoints[runtime.breakpoint] ?? 0),
+        ) ?? []
 
     return currentBreakpointValue
 }

package/src/web/variants.ts

@@ -1,12 +1,15 @@
 import type { UnistylesValues } from '../types'
+
 import { deepMergeObjects } from '../utils'
 import { keyInObject } from './utils'
 
 type StylesWithVariants = {
-    variants: Record<string, string | boolean | undefined>,
-    compoundVariants?: Array<Record<string, string | boolean | undefined> & {
-        styles: Record<string, any>
-    }>
+    variants: Record<string, string | boolean | undefined>
+    compoundVariants?: Array<
+        Record<string, string | boolean | undefined> & {
+            styles: Record<string, any>
+        }
+    >
 }
 const hasVariants = (value: any): value is StylesWithVariants => {
     return keyInObject(value, 'variants')
@@ -28,15 +31,20 @@ export const getVariants = (styles: UnistylesValues, selectedVariants: Record<st
         return selectedVariantStyles
     })
 
-    const compoundVariantStyles = styles.compoundVariants?.flatMap(compoundVariant => {
-        const { styles, ...conditions } = compoundVariant
+    const compoundVariantStyles =
+        styles.compoundVariants?.flatMap((compoundVariant) => {
+            const { styles, ...conditions } = compoundVariant
 
-        if (Object.entries(conditions).some(([variant, value]) => String(selectedVariants[variant]) !== String(value))) {
-            return []
-        }
+            if (
+                Object.entries(conditions).some(
+                    ([variant, value]) => String(selectedVariants[variant]) !== String(value),
+                )
+            ) {
+                return []
+            }
 
-        return styles
-    }) ?? []
+            return styles
+        }) ?? []
 
     return deepMergeObjects(...variantStyles, ...compoundVariantStyles)
 }