react-native-unistyles 3.0.0-beta.3 → 3.0.0-beta.5

package/src/web/runtime.ts

@@ -2,16 +2,16 @@ import { UnistyleDependency } from '../specs/NativePlatform'
 import { ColorScheme, Orientation, type AppTheme, type AppThemeName } from '../specs/types'
 import type { UnistylesMiniRuntime } from '../specs/UnistylesRuntime'
 import { WebContentSizeCategory } from '../types'
-import { UnistylesListener } from './listener'
 import { NavigationBar, StatusBar } from './mock'
 import { error, isServer, schemeToTheme } from './utils'
+import type { UnistylesServices } from './types'
 
-// Keep this import here, otherwise circular dependency will occur and break the build
-import { UnistylesState } from './state'
-
-class UnistylesRuntimeBuilder {
+export class UnistylesRuntime {
     lightMedia = this.getLightMedia()
     darkMedia = this.getDarkMedia()
+    rootElement = isServer() ? null : document.querySelector(':root')
+
+    constructor(private services: UnistylesServices) {}
 
     private getLightMedia(): MediaQueryList | null {
         if (isServer()) {
@@ -49,11 +49,11 @@ class UnistylesRuntimeBuilder {
     }
 
     get themeName() {
-        if (UnistylesState.hasAdaptiveThemes) {
+        if (this.services.state.hasAdaptiveThemes) {
             return schemeToTheme(this.colorScheme) as AppThemeName
         }
 
-        return UnistylesState.themeName
+        return this.services.state.themeName
     }
 
     get contentSizeCategory() {
@@ -61,11 +61,11 @@ class UnistylesRuntimeBuilder {
     }
 
     get breakpoints() {
-        return UnistylesState.breakpoints ?? {}
+        return this.services.state.breakpoints ?? {}
     }
 
     get breakpoint() {
-        return UnistylesState.breakpoint
+        return this.services.state.breakpoint
     }
 
     get orientation() {
@@ -121,7 +121,7 @@ class UnistylesRuntimeBuilder {
     }
 
     get hasAdaptiveThemes() {
-        return UnistylesState.hasAdaptiveThemes
+        return this.services.state.hasAdaptiveThemes
     }
 
     get navigationBar() {
@@ -158,23 +158,33 @@ class UnistylesRuntimeBuilder {
             throw error(`You're trying to set theme to: '${themeName}', but adaptiveThemes are enabled.`)
         }
 
-        if (themeName === UnistylesRuntime.themeName) {
+        if (themeName === this.themeName) {
             return
         }
 
-        UnistylesState.themeName = themeName
-        UnistylesListener.emitChange(UnistyleDependency.Theme)
-        UnistylesListener.emitChange(UnistyleDependency.ThemeName)
+        const oldTheme = this.services.state.themeName
+
+        this.services.state.themeName = themeName
+        this.services.listener.emitChange(UnistyleDependency.Theme)
+        this.services.listener.emitChange(UnistyleDependency.ThemeName)
+
+        if (!isServer() && !this.services.state.hasAdaptiveThemes && this.services.state.CSSVars) {
+            this.rootElement?.classList.remove(oldTheme ?? '')
+            this.rootElement?.classList.add(themeName ?? '')
+        }
     }
 
     setAdaptiveThemes = (isEnabled: boolean) => {
-        UnistylesState.hasAdaptiveThemes = isEnabled
+        this.services.state.hasAdaptiveThemes = isEnabled
 
         if (!isEnabled) {
+            this.rootElement?.classList.add(this.themeName ?? '')
+
             return
         }
 
-        this.setTheme(schemeToTheme(UnistylesRuntime.colorScheme) as AppThemeName)
+        this.rootElement?.classList.remove(this.themeName ?? '')
+        this.setTheme(schemeToTheme(this.colorScheme) as AppThemeName)
     }
 
     setRootViewBackgroundColor = (color: string) => {
@@ -188,17 +198,19 @@ class UnistylesRuntimeBuilder {
     setImmersiveMode = () => {}
 
     updateTheme = (themeName: AppThemeName, updater: (currentTheme: AppTheme) => AppTheme) => {
-        const oldTheme = UnistylesState.themes.get(themeName)
+        const oldTheme = this.services.state.themes.get(themeName)
 
         if (!oldTheme) {
             throw error(`Unistyles: You're trying to update theme "${themeName}" but it wasn't registered.`)
         }
 
-        UnistylesState.themes.set(themeName, updater(oldTheme))
+        this.services.state.themes.set(themeName, updater(oldTheme))
     }
 
-    getTheme = (themeName = this.themeName) => {
-        const theme = UnistylesState.themes.get(themeName ?? '')
+    getTheme = (themeName = this.themeName, CSSVars = false) => {
+        const theme = CSSVars
+            ? this.services.state.cssThemes.get(themeName ?? '')
+            : this.services.state.themes.get(themeName ?? '')
 
         if (!themeName || !theme) {
             throw error(`You're trying to get theme "${themeName}" but it wasn't registered.`)
@@ -207,5 +219,3 @@ class UnistylesRuntimeBuilder {
         return theme
     }
 }
-
-export const UnistylesRuntime = new UnistylesRuntimeBuilder()

package/src/web/services.ts

@@ -0,0 +1,28 @@
+import { UnistylesListener } from './listener'
+import { UnistylesRegistry } from './registry'
+import { UnistylesRuntime } from './runtime'
+import { UnistylesShadowRegistry } from './shadowRegistry'
+import { UnistylesState } from './state'
+
+export class UnistylesServices {
+    runtime: UnistylesRuntime
+    registry: UnistylesRegistry
+    shadowRegistry: UnistylesShadowRegistry
+    state: UnistylesState
+    listener: UnistylesListener
+
+    private services = {} as UnistylesServices
+
+    constructor() {
+        this.runtime = new UnistylesRuntime(this.services)
+        this.registry = new UnistylesRegistry(this.services)
+        this.shadowRegistry = new UnistylesShadowRegistry(this.services)
+        this.state = new UnistylesState(this.services)
+        this.listener = new UnistylesListener(this.services)
+        this.services.runtime = this.runtime
+        this.services.registry = this.registry
+        this.services.shadowRegistry = this.shadowRegistry
+        this.services.state = this.state
+        this.services.listener = this.listener
+    }
+}

package/src/web/shadowRegistry.ts

@@ -1,13 +1,11 @@
 import type { UnistylesTheme, UnistylesValues } from '../types'
-import { UnistylesListener } from './listener'
-import { UnistylesRegistry } from './registry'
 import { deepMergeObjects } from '../utils'
-import { equal, extractSecrets, extractUnistyleDependencies, isInDocument } from './utils'
+import { extractSecrets, extractUnistyleDependencies } from './utils'
 import { getVariants } from './variants'
+import type { UnistylesServices } from './types'
+import { UnistyleDependency } from '../specs'
 
-type Style = UnistylesValues | ((...args: Array<any>) => UnistylesValues)
-
-class UnistylesShadowRegistryBuilder {
+export class UnistylesShadowRegistry {
     // MOCKS
     name = 'UnistylesShadowRegistry'
     __type = 'web'
@@ -16,131 +14,68 @@ class UnistylesShadowRegistryBuilder {
     dispose = () => {}
     // END MOCKS
 
-    private resultsMap = new Map<HTMLElement, UnistylesValues>()
-    private classNamesMap = new Map<HTMLElement, Array<string>>()
-    private selectedVariants = new Map<string, string | boolean | undefined>()
     private scopedTheme: UnistylesTheme | undefined = undefined
-    private disposeMap = new Map<HTMLElement, VoidFunction>()
-
-    add = (ref: any, styles: Array<Style>) => {
-        // Styles are not provided
-        if (!styles || !Array.isArray(styles)) {
-            return
-        }
+    private disposeMap = new Map<string, VoidFunction>()
 
-        // Ref is unmounted
-        if (ref === null) {
-            styles.flat().forEach(style => {
-                extractSecrets(style)?.__uni__refs.forEach(ref => {
-                    if (isInDocument(ref)) {
-                        return
-                    }
-
-                    const oldResult = this.resultsMap.get(ref)
-
-                    this.resultsMap.delete(ref)
-                    this.classNamesMap.delete(ref)
-                    this.disposeMap.get(ref)?.()
-                    this.disposeMap.delete(ref)
-
-                    if (oldResult) {
-                        UnistylesRegistry.remove(oldResult)
-                    }
-                })
-            })
+    constructor(private services: UnistylesServices) {}
 
+    add = (ref: any, hash?: string) => {
+        if (!(ref instanceof HTMLElement) || !hash) {
             return
         }
 
-        // Ref is not an HTMLElement
-        if (!(ref instanceof HTMLElement)) {
-            return
-        }
+        this.services.registry.connect(ref, hash)
+    }
 
+    addStyles = (unistyles: Array<UnistylesValues>) => {
         const getParsedStyles = () => {
-            return styles.flat().flatMap(unistyleStyle => {
-                if (!unistyleStyle) {
-                    return []
-                }
-
-                const secrets = extractSecrets(unistyleStyle)
+            const allStyles = unistyles.map(unistyle => {
+                const secrets = extractSecrets(unistyle)
 
                 // Regular style
                 if (!secrets) {
-                    return unistyleStyle as UnistylesValues
+                    return unistyle
                 }
 
-                const { __uni__key, __uni__stylesheet, __uni__args = [], __uni__refs } = secrets
-                const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet, scopedTheme)
+                const { __uni__key, __uni__stylesheet, __uni__args = [], __uni_variants: variants } = secrets
+                const newComputedStylesheet = this.services.registry.getComputedStylesheet(__uni__stylesheet, scopedTheme)
                 const style = newComputedStylesheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues))
-                const args = __uni__args
                 const result = typeof style === 'function'
-                    ? style(...args)
+                    ? style(...__uni__args)
                     : style
-                const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
-                const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
+                const variantsResult = getVariants(result, variants)
+                const resultWithVariants = deepMergeObjects(result, variantsResult)
                 const dependencies = extractUnistyleDependencies(resultWithVariants)
 
                 if (typeof __uni__stylesheet === 'function') {
                     // Add dependencies from dynamic styles to stylesheet
-                    UnistylesRegistry.addDependenciesToStylesheet(__uni__stylesheet, dependencies)
+                    this.services.registry.addDependenciesToStylesheet(__uni__stylesheet, dependencies)
                 }
 
-                __uni__refs.add(ref)
-
                 return resultWithVariants as UnistylesValues
             })
+
+            return deepMergeObjects(...allStyles)
         }
 
         // Copy scoped theme to not use referenced value
-        const variants = this.getVariants()
         const scopedTheme = this.scopedTheme
         const parsedStyles = getParsedStyles()
-        const combinedStyles = deepMergeObjects(...parsedStyles)
-        const oldStyles = this.resultsMap.get(ref)
-
-        if (equal(combinedStyles, oldStyles)) {
-            return
+        const { hash, existingHash } = this.services.registry.add(parsedStyles)
+        const injectedClassNames = parsedStyles?._web?._classNames ?? []
+        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
+
+        if (!existingHash) {
+            this.disposeMap.set(hash, this.services.listener.addListeners(filteredDependencies, () => {
+                this.services.registry.applyStyles(hash, getParsedStyles())
+            }))
         }
 
-        const oldClassNames = this.classNamesMap.get(ref)
-
-        // Remove old styles
-        if (oldStyles) {
-            UnistylesRegistry.remove(oldStyles)
-        }
-
-        // Remove old classnames from the ref
-        oldClassNames?.forEach(className => ref.classList.remove(className))
-        this.resultsMap.set(ref, combinedStyles)
-
-        const { hash } = UnistylesRegistry.add(combinedStyles)
-        const injectedClassNames = combinedStyles?._web?._classNames ?? []
-        const newClassNames = (Array.isArray(injectedClassNames) ? injectedClassNames : [injectedClassNames]).concat(hash)
-        const dependencies = Array.from(new Set(parsedStyles.flatMap(style => extractUnistyleDependencies(style))))
-
-        this.disposeMap.get(ref)?.()
-        this.disposeMap.set(ref, UnistylesListener.addListeners(dependencies, () => {
-            UnistylesRegistry.applyStyles(hash, deepMergeObjects(...getParsedStyles()))
-        }))
-        this.classNamesMap.set(ref, newClassNames)
-        // Add new classnames to the ref
-        ref.classList.add(...newClassNames)
-        ref.removeAttribute('styles')
-
-        return newClassNames
-    }
-
-    selectVariants = (variants?: Record<string, string | boolean | undefined>) => {
-        if (!variants) {
-            this.selectedVariants.clear()
-
-            return
-        }
-
-        Object.entries(variants).forEach(([key, value]) => {
-            this.selectedVariants.set(key, value)
-        })
+        return { injectedClassName, hash }
     }
 
     setScopedTheme = (theme?: UnistylesTheme) => {
@@ -149,9 +84,16 @@ class UnistylesShadowRegistryBuilder {
 
     getScopedTheme = () => this.scopedTheme
 
-    getVariants = () => Object.fromEntries(this.selectedVariants.entries())
+    remove = (ref: any, hash?: string) => {
+        if (!(ref instanceof HTMLElement) || !hash) {
+            return
+        }
 
-    remove = () => {}
-}
+        const removed = this.services.registry.remove(ref, hash)
 
-export const UnistylesShadowRegistry = new UnistylesShadowRegistryBuilder()
+        if (removed) {
+            this.disposeMap.get(hash)?.()
+            this.disposeMap.delete(hash)
+        }
+    }
+}

package/src/web/state.ts

@@ -2,17 +2,19 @@ import type { UnistylesTheme } from '../types'
 import type { UnistylesConfig } from '../specs/StyleSheet'
 import type { AppBreakpoint, AppTheme, AppThemeName } from '../specs/types'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
-import { UnistylesRuntime } from './runtime'
-import { error, isServer, schemeToTheme } from './utils'
-import { UnistylesListener } from './listener'
+import { error, hyphenate, isServer, schemeToTheme } from './utils'
 import { UnistyleDependency } from '../specs/NativePlatform'
 import type { UnionToIntersection } from '../types'
+import type { UnistylesServices } from './types'
 
 type UnistylesSettings = Partial<UnionToIntersection<Required<UnistylesConfig>['settings']>>
 
-class UnistylesStateBuilder {
+export class UnistylesState {
+    isInitialized = false
     themes = new Map<string, UnistylesTheme>()
+    cssThemes = new Map<string, UnistylesTheme>()
     themeName?: AppThemeName
+    CSSVars = true
 
     private matchingBreakpoints = new Map<string, boolean>()
 
@@ -28,8 +30,15 @@ class UnistylesStateBuilder {
 
     hasAdaptiveThemes = false
 
+    constructor(private services: UnistylesServices) {}
+
     init = (config: UnistylesConfig) => {
-        this.initThemes(config.themes)
+        if (this.isInitialized) {
+            return
+        }
+
+        this.isInitialized = true
+        this.initThemes(config.themes, config.settings?.CSSVars)
         this.initBreakpoints(config.breakpoints)
 
         if (config.settings) {
@@ -40,12 +49,40 @@ class UnistylesStateBuilder {
             return
         }
 
-        UnistylesListener.initListeners()
+        // Ensure we have a themeName before calling this
+        // classList.add throws a "SyntaxError" DOMException if one of the arguments is an empty string.
+        if (!this.hasAdaptiveThemes && this.CSSVars && this.themeName) {
+            document.querySelector(':root')?.classList.add(this.themeName)
+        }
+
+        this.services.listener.initListeners()
     }
 
-    private initThemes = (themes = {} as UnistylesThemes) => {
+    private initThemes = (themes = {} as UnistylesThemes, CSSVars = true) => {
+        this.CSSVars = CSSVars
+
         Object.entries(themes).forEach(([themeName, theme]) => {
             this.themes.set(themeName, theme as AppTheme)
+
+            if (CSSVars) {
+                this.services.registry.css.addTheme(themeName, theme)
+
+                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}`)))]
+                    }
+
+                    if (typeof value === 'string') {
+                        return [key, `var(${prev}-${hyphenate(key)})`]
+                    }
+
+                    return [key, value]
+                }
+
+                this.cssThemes.set(themeName, Object.fromEntries(Object.entries(theme).map(([key, value]) => {
+                    return convertTheme(key, value)
+                })) as UnistylesTheme)
+            }
         })
     }
 
@@ -62,7 +99,7 @@ class UnistylesStateBuilder {
                 throw error(`You're trying to enable adaptiveThemes, but you didn't register both 'light' and 'dark' themes.`)
             }
 
-            this.themeName = schemeToTheme(UnistylesRuntime.colorScheme) as AppThemeName
+            this.themeName = schemeToTheme(this.services.runtime.colorScheme) as AppThemeName
 
             return
         }
@@ -104,10 +141,8 @@ class UnistylesStateBuilder {
 
                 mediaQuery.addEventListener('change', event => {
                     this.matchingBreakpoints.set(breakpoint, event.matches)
-                    UnistylesListener.emitChange(UnistyleDependency.Breakpoints)
+                    this.services.listener.emitChange(UnistyleDependency.Breakpoints)
                 })
             })
     }
 }
-
-export const UnistylesState = new UnistylesStateBuilder()

package/src/web/types.ts

@@ -0,0 +1,13 @@
+import type { UnistylesListener } from './listener'
+import type{ UnistylesRegistry } from './registry'
+import type{ UnistylesRuntime } from './runtime'
+import type{ UnistylesShadowRegistry } from './shadowRegistry'
+import type{ UnistylesState } from './state'
+
+export type UnistylesServices = {
+    runtime: UnistylesRuntime,
+    registry: UnistylesRegistry,
+    shadowRegistry: UnistylesShadowRegistry,
+    state: UnistylesState,
+    listener: UnistylesListener
+}

package/src/web/utils/common.ts

@@ -5,7 +5,7 @@ export const reduceObject = <TObj extends Record<string, any>, TReducer>(
 
 export const keyInObject = <T extends Record<string, any>>(obj: T, key: PropertyKey): key is keyof T => key in obj
 
-export const isServer = () => typeof window === 'undefined'
+export const isServer = () => typeof window === 'undefined' || typeof document === 'undefined'
 
 export const error = (message: string) => new Error(`Unistyles: ${message}`)
 
@@ -32,14 +32,38 @@ export const equal = <T>(a: T, b: T) => {
     return keysA.every(key => Object.is(a[key], b[key]) && Object.prototype.hasOwnProperty.call(b, key))
 }
 
-export const generateHash = (value: any) => {
-    const str = JSON.stringify(value)
-    let hasher = 5381
-    let length = str.length
+export const hyphenate = (propertyName: string) => propertyName.replace(/[A-Z]/g, (m: string) => `-${m.toLowerCase()}`)
+
+export const serialize = (obj: string | number | object): string => {
+    if (typeof obj !== 'object') {
+        return String(obj)
+    }
 
-    while (length--) hasher = (hasher * 33) ^ str.charCodeAt(length)
+    const sortedKeys = Object.keys(obj).sort()
+    const sortedKeyValuePairs = sortedKeys.map(key => `${key}:${serialize(obj[key as keyof typeof obj])}`)
 
-    return `unistyles-${(hasher >>> 0).toString(36)}`
+    return `{${sortedKeyValuePairs.join(',')}}`
 }
 
-export const hyphenate = (propertyName: string) => propertyName.replace(/[A-Z]/g, (m: string) => `-${m.toLowerCase()}`)
+// Based on https://github.com/bryc/code/blob/master/jshash/experimental/cyrb53.js
+const cyrb53 = (data: string, seed = 0) => {
+    let h1 = 0xdeadbeef ^ seed
+    let h2 = 0x41c6ce57 ^ seed
+
+    for (let i = 0, ch: number; i < data.length; i++) {
+        ch = data.charCodeAt(i)
+        h1 = Math.imul(h1 ^ ch, 2654435761)
+        h2 = Math.imul(h2 ^ ch, 1597334677)
+    }
+
+    h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909)
+    h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909)
+
+    return 4294967296 * (2097151 & h2) + (h1 >>> 0)
+}
+
+export const generateHash = (value: any) => {
+    const serialized = serialize(value)
+
+    return `unistyles-${cyrb53(serialized).toString(36)}`
+}

package/src/web/utils/unistyle.ts

@@ -2,8 +2,9 @@ import type { UnistyleDependency } from '../../specs/NativePlatform'
 import { ColorScheme, Orientation } from '../../specs/types'
 import type { StyleSheet, StyleSheetWithSuperPowers, UnistylesValues } from '../../types/stylesheet'
 import { isUnistylesMq, parseMq } from '../../mq'
-import { UnistylesState } from '../state'
 import { keyInObject, reduceObject } from './common'
+import type { UnistylesBreakpoints } from '../../global'
+import { UnistylesWeb } from '../index'
 
 export const schemeToTheme = (scheme: ColorScheme) => {
     switch (scheme) {
@@ -18,19 +19,37 @@ export const schemeToTheme = (scheme: ColorScheme) => {
 export type UnistyleSecrets = {
     __uni__stylesheet: StyleSheetWithSuperPowers<StyleSheet>,
     __uni__key: string,
-    __uni__refs: Set<HTMLElement>
-    __uni__args?: Array<any>
+    __uni__args?: Array<any>,
+    __uni_variants: Record<string, string | boolean | undefined>
 }
 
 export const assignSecrets = <T>(object: T, secrets: UnistyleSecrets) => {
-    // @ts-expect-error - assign secrets to object
-    object.__uni__secrets__ = secrets
+    const secretsId = Math.random().toString(36).slice(8)
+
+    // @ts-expect-error assign hidden secrets
+    object[`unistyles-${secretsId}`] = {}
+    // @ts-expect-error assign hidden secrets
+    Object.defineProperties(object[`unistyles-${secretsId}`], reduceObject(secrets, secret => ({
+        value: secret,
+        enumerable: false,
+        configurable: true
+    })))
 
     return object
 }
 
 export const extractSecrets = (object: any) => {
-    return object && keyInObject(object, '__uni__secrets__') ? object.__uni__secrets__ as UnistyleSecrets : undefined
+    if (!object) {
+        return undefined
+    }
+
+    const [, secrets] = Object.entries(object).find(([key]) => key.startsWith('unistyles-')) ?? []
+
+    if (!secrets) {
+        return undefined
+    }
+
+    return reduceObject(Object.getOwnPropertyDescriptors(secrets), secret => secret.value)
 }
 
 export const removeInlineStyles = (values: UnistylesValues) => {
@@ -47,39 +66,35 @@ export const removeInlineStyles = (values: UnistylesValues) => {
 
 export const isInDocument = (element: HTMLElement) => document.body.contains(element)
 
-export const extractMediaQueryValue = (query: string) => {
-    const [_, px] = query.match(/(\d+)px/) ?? []
-
-    if (!px) {
-        return undefined
-    }
-
-    const value = Number(px)
-
-    return Number.isNaN(value)
-        ? undefined
-        : value
-}
-
-export const getMediaQuery = (query: string) => {
+export const getMediaQuery = (query: string, allBreakpoints: Array<string>) => {
     if (Object.values(Orientation).includes(query as Orientation)) {
-        return `(orientation: ${query})`
+        return `@media (orientation: ${query})`
     }
 
     if (isUnistylesMq(query)) {
         const { minWidth, maxWidth, minHeight, maxHeight } = parseMq(query)
 
-        return [
+        const queries = [
             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 ')
+        return `@media ${queries}`
     }
 
-    const minWidth = UnistylesState.breakpoints && keyInObject(UnistylesState.breakpoints, query) ? UnistylesState.breakpoints[query] : undefined
+    const breakpointValue = UnistylesWeb.runtime.breakpoints[query as keyof UnistylesBreakpoints] ?? 0
+    const nextBreakpoint = allBreakpoints
+            .filter((b): b is keyof UnistylesBreakpoints => b in UnistylesWeb.runtime.breakpoints)
+            .map(b => UnistylesWeb.runtime.breakpoints[b] as number)
+            .sort((a, b) => a - b)
+            .find(b => b > breakpointValue)
+        const queries = [
+            `(min-width: ${breakpointValue}px)`,
+            nextBreakpoint ? `(max-width: ${nextBreakpoint - 1}px)` : undefined,
+        ].filter(Boolean).join(' and ')
 
-    return `(min-width: ${minWidth ?? 0}px)`
+        return `@media ${queries}`
 }
 
 export const extractUnistyleDependencies = (value: any) => {