react-native-unistyles 3.0.0-alpha.21 → 3.0.0-alpha.22

package/src/web/convert/style.ts

@@ -1,7 +1,6 @@
 import { keyInObject } from '../utils'
-import type { NestedCSSProperties } from 'typestyle/lib/types'
 
-const stylesToSkip = [
+const SKIP_STYLES = [
     'borderCurve',
     'elevation',
     'textAlignVertical',
@@ -10,6 +9,53 @@ const stylesToSkip = [
     'tintColor'
 ]
 
+const CSS_NUMBER_KEYS = [
+    'animationIterationCount',
+    'borderImageOutset',
+    'borderImageSlice',
+    'borderImageWidth',
+    'boxFlex',
+    'boxFlexGroup',
+    'boxOrdinalGroup',
+    'columnCount',
+    'columns',
+    'counterIncrement',
+    'counterReset',
+    'flex',
+    'flexGrow',
+    'flexPositive',
+    'flexShrink',
+    'flexNegative',
+    'flexOrder',
+    'fontWeight',
+    'gridArea',
+    'gridColumn',
+    'gridColumnEnd',
+    'gridColumnSpan',
+    'gridColumnStart',
+    'gridRow',
+    'gridRowEnd',
+    'gridRowSpan',
+    'gridRowStart',
+    'line-clamp',
+    'line-height',
+    'opacity',
+    'order',
+    'orphans',
+    'tabSize',
+    'widows',
+    'zIndex',
+    'zoom',
+    'fillOpacity',
+    'floodOpacity',
+    'stopOpacity',
+    'strokeDasharray',
+    'strokeDashoffset',
+    'strokeMiterlimit',
+    'strokeOpacity',
+    'strokeWidth'
+]
+
 const convertMap = {
     marginHorizontal: (value: number) => ({
         marginInline: value
@@ -73,22 +119,27 @@ const convertMap = {
     }),
     resizeMode: (value: string) => ({
         backgroundSize: value
-    }),
-    lineHeight: (value: number) => ({
-        lineHeight: `${value}px`
-    }),
-} as Record<PropertyKey, (value: any) => NestedCSSProperties>
+    })
+} as Record<PropertyKey, (value: any) => Record<string, any>>
+
+const convertNumber = (key: string, value: any) => {
+    if (typeof value === 'number') {
+        return CSS_NUMBER_KEYS.includes(key, value) ? value : `${value}px`
+    }
+
+    return value
+}
 
 export const getStyle = (key: string, value: any) => {
-    if (stylesToSkip.includes(key)) {
+    if (SKIP_STYLES.includes(key)) {
         return {}
     }
 
     if (keyInObject(convertMap, key)) {
-        return convertMap[key]?.(value) ?? {}
+        return convertMap[key]?.(convertNumber(key, value)) ?? {}
     }
 
     return {
-        [key]: value
+        [key]: convertNumber(key, value)
     }
 }

package/src/web/convert/textShadow.ts

@@ -1,8 +1,5 @@
-import { media } from 'typestyle'
-import type { NestedCSSProperties } from 'typestyle/lib/types'
 import { deepMergeObjects, warn } from '../utils'
 import { validateShadow } from './shadow'
-import { convertBreakpoint } from './breakpoint'
 import { TEXT_SHADOW_STYLES, type TextShadow } from './types'
 import { extractShadowValue, normalizeColor, normalizeNumericValue } from './utils'
 
@@ -16,7 +13,7 @@ const createTextShadowValue = (style: TextShadow) => {
     return `${offsetX} ${offsetY} ${radius} ${color}`
 }
 
-export const getTextShadowStyle = (styles: Record<string, any>): NestedCSSProperties => {
+export const getTextShadowStyle = (styles: Record<string, any>) => {
     const missingStyles = TEXT_SHADOW_STYLES.filter(key => !(key in styles))
 
     if (missingStyles.length) {
@@ -52,16 +49,18 @@ export const getTextShadowStyle = (styles: Record<string, any>): NestedCSSProper
         const { width, height } = extractShadowValue('textShadowOffset', breakpoint, styles)
         const radius = extractShadowValue('textShadowRadius', breakpoint, styles)
 
-        return media(convertBreakpoint(breakpoint), {
-            textShadow: createTextShadowValue({
-                textShadowColor: color,
-                textShadowOffset: {
-                    width,
-                    height
-                },
-                textShadowRadius: radius
-            })
-        })
+        return {
+            [breakpoint]: {
+                textShadow: createTextShadowValue({
+                    textShadowColor: color,
+                    textShadowOffset: {
+                        width,
+                        height
+                    },
+                    textShadowRadius: radius
+                })
+            }
+        }
     })
 
     // Merge all breakpoints styles into one

package/src/web/convert/transform.ts

@@ -1,8 +1,5 @@
-import { media } from 'typestyle'
-import type { NestedCSSProperties } from 'typestyle/lib/types'
 import { deepMergeObjects, keyInObject } from '../utils'
 import { normalizeNumericValue } from './utils'
-import { convertBreakpoint } from './breakpoint'
 
 type Transforms = Array<Record<string, any>>
 
@@ -39,7 +36,7 @@ const createTransformValue = (transforms: Transforms) => transforms
     .filter(Boolean)
     .join(' ')
 
-export const getTransformStyle = (transforms: Transforms): NestedCSSProperties => {
+export const getTransformStyle = (transforms: Transforms) => {
     const breakpoints = new Set<string>()
     const normalTransforms: Transforms = []
 
@@ -78,12 +75,14 @@ export const getTransformStyle = (transforms: Transforms): NestedCSSProperties =
             return []
         })
 
-        return media(convertBreakpoint(breakpoint), {
-            transform: createTransformValue(transformsPerBreakpoint)
-        })
+        return [{
+            [breakpoint]: {
+                transform: createTransformValue(transformsPerBreakpoint)
+            }
+        }]
     })
 
-    return deepMergeObjects({
+    return deepMergeObjects<Record<string, any>>({
         transform: createTransformValue(normalTransforms)
     }, ...breakpointTransforms)
 }

package/src/web/{listener/listener.ts → listener.ts}

@@ -1,5 +1,5 @@
-import { UnistyleDependency } from '../../specs/NativePlatform'
-import { UnistylesRuntime } from '../runtime'
+import { UnistyleDependency } from '../specs/NativePlatform'
+import { UnistylesRuntime } from './runtime'
 
 class UnistylesListenerBuilder {
     private isInitialized = false

package/src/web/mq.ts

@@ -1,10 +1,8 @@
-import type { MediaQuery } from 'typestyle/lib/types'
-
 const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/
 const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/
 const UNISTYLES_HEIGHT_REGEX = /:(h)\[(\d+)(?:,\s*(\d+|Infinity))?]/
 
-export const parseMq = (mq: string): MediaQuery => {
+export const parseMq = (mq: string) => {
     const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
     const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
 

package/src/web/registry.ts

@@ -1,13 +1,52 @@
-import { createTypeStyle, TypeStyle } from 'typestyle'
-import type { UnistylesValues } from '../types'
-import { convertToTypeStyle } from './convert'
+import type { UnistylesTheme, UnistylesValues } from '../types'
 import type { StyleSheet, StyleSheetWithSuperPowers } from '../types/stylesheet'
 import { UnistylesRuntime } from './runtime'
-import { keyInObject } from './utils'
+import { extractMediaQueryValue, keyInObject, getMediaQuery, generateHash, extractUnistyleDependencies } from './utils'
 import { UnistylesListener } from './listener'
+import { convertUnistyles } from './convert'
+import type { UnistyleDependency } from '../specs/NativePlatform'
+import type { UnistylesMiniRuntime } from '../specs'
+import { getVariants } from './variants'
+
+type AddProps = {
+    value: UnistylesValues,
+    stylesheet: StyleSheetWithSuperPowers<StyleSheet>,
+    key: string,
+    args: Array<any>,
+    variants: Record<string, any>
+}
+
+type ApplyRuleProps = {
+    hash: string,
+    key: string,
+    value: any,
+    sheet: CSSStyleSheet | CSSMediaRule
+}
+
+type RemoveReadonlyStyleKeys<T extends string> = T extends 'length' | 'parentRule' ? never : T
 
 class UnistylesRegistryBuilder {
-    private stylesheets = new Map<StyleSheetWithSuperPowers<StyleSheet>, StyleSheet>()
+    private readonly stylesheets = new Map<StyleSheetWithSuperPowers<StyleSheet>, StyleSheet>()
+    private readonly stylesCounter = new Map<string, Set<UnistylesValues>>()
+    #styleTag: HTMLStyleElement | null = null
+    private readonly disposeListenersMap = new Map<object, VoidFunction>()
+    private readonly dependenciesMap = new Map<StyleSheetWithSuperPowers<StyleSheet>, Set<UnistyleDependency>>()
+
+    private get styleTag() {
+        const tag = this.#styleTag
+
+        if (!tag) {
+            const newTag = document.createElement('style')
+
+            newTag.id = 'unistyles-web'
+            this.#styleTag = newTag
+            document.head.appendChild(newTag)
+
+            return newTag
+        }
+
+        return tag
+    }
 
     getComputedStylesheet = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
         if (typeof stylesheet !== 'function') {
@@ -21,39 +60,179 @@ class UnistylesRegistryBuilder {
         }
 
         const createdStylesheet = stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
-        // @ts-expect-error uni__dependencies is hidden
-        const dependencies = Object.values(createdStylesheet).flatMap(value => keyInObject(value, 'uni__dependencies') ? value.uni__dependencies : [])
+        const dependencies = Object.values(createdStylesheet).flatMap(value => extractUnistyleDependencies(value))
+
+        this.addDependenciesToStylesheet(stylesheet, dependencies)
+        this.stylesheets.set(stylesheet, createdStylesheet)
 
-        UnistylesListener.addListeners(dependencies, () => {
+        return createdStylesheet
+    }
+
+    addDependenciesToStylesheet = (stylesheet: (theme: UnistylesTheme, miniRuntime: UnistylesMiniRuntime) => StyleSheet, dependencies: Array<UnistyleDependency>) => {
+        this.disposeListenersMap.get(stylesheet)?.()
+
+        const dependenciesMap = this.dependenciesMap.get(stylesheet) ?? new Set(dependencies)
+
+        dependencies.forEach(dependency => dependenciesMap.add(dependency))
+
+        const dispose = UnistylesListener.addListeners(Array.from(dependenciesMap), () => {
             const newComputedStylesheet = stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
 
             this.stylesheets.set(stylesheet, newComputedStylesheet)
         })
 
-        this.stylesheets.set(stylesheet, createdStylesheet)
+        this.dependenciesMap.set(stylesheet, dependenciesMap)
+        this.disposeListenersMap.set(stylesheet, dispose)
+    }
 
-        return createdStylesheet
+    add = ({ key, value, stylesheet, args, variants }: AddProps) => {
+        const hash = generateHash(value)
+        const existingCounter = this.stylesCounter.get(hash)
+
+        if (!existingCounter || existingCounter.size === 0) {
+            const counter = new Set<UnistylesValues>()
+            const dependencies = extractUnistyleDependencies(value)
+
+            counter.add(value)
+            this.stylesCounter.set(hash, counter)
+            this.applyStyles(hash, convertUnistyles(value))
+
+            UnistylesListener.addListeners(dependencies, async () => {
+                // Move this callback to the end of the event loop
+                await Promise.resolve()
+
+                const newComputedStyleSheet = this.getComputedStylesheet(stylesheet)
+                const newValue = newComputedStyleSheet[key]!
+                const result = typeof newValue === 'function'
+                    ? newValue(...args)
+                    : newValue
+                const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
+                const resultWithVariants = {
+                    ...result,
+                    ...variantsResult
+                }
+
+                this.applyStyles(hash, convertUnistyles(resultWithVariants))
+            })
+
+            return hash
+        }
+
+        existingCounter.add(value)
+
+        return hash
     }
 
-    createStyles = (stylesheet: UnistylesValues, key: string) => {
-        const unistyles = createTypeStyle()
-        const typestyleStylesheet = convertToTypeStyle(stylesheet)
+    private applyStyles = (hash: string, styles: Record<string, any>) => {
+        Object.entries(styles).forEach(([key, value]) => {
+            if (!this.styleTag.sheet) {
+                return
+            }
+
+            if (typeof value === 'object' && !key.startsWith('_')) {
+                const mediaQuery = getMediaQuery(key)
+                const cssRules = Array.from(this.styleTag.sheet.cssRules)
+                let queryRule = cssRules.find(rule => {
+                    if (!(rule instanceof CSSMediaRule)) {
+                        return false
+                    }
+
+                    return rule.media.item(0)?.includes(mediaQuery)
+                }) ?? null
+
+                if (!queryRule) {
+                    const mediaQueryValue = extractMediaQueryValue(mediaQuery)
+                    const ruleIndex = mediaQueryValue
+                        ? cssRules.reduce<number | undefined>((acc, rule, ruleIndex) => {
+                            if (!(rule instanceof CSSMediaRule)) {
+                                return acc
+                            }
+
+                            const ruleMediaQueryValue = extractMediaQueryValue(rule.conditionText)
+
+                            if (ruleMediaQueryValue === undefined) {
+                                return
+                            }
+
+                            return ruleMediaQueryValue > mediaQueryValue ? ruleIndex : acc
+                        }, cssRules.length)
+                        : undefined
+                    queryRule = this.styleTag.sheet.cssRules.item(this.styleTag.sheet.insertRule(`@media ${mediaQuery} {.${hash} {}}`, ruleIndex))
+                }
+
+                if (queryRule instanceof CSSMediaRule) {
+                    Object.entries(value).forEach(([mqKey, mqValue]) => {
+                        this.applyRule({
+                            hash,
+                            key: mqKey,
+                            value: mqValue,
+                            sheet: queryRule
+                        })
+                    })
+                }
+
+                return
+            }
+
+            // Pseudo
+            if (typeof value === 'object') {
+                Object.entries(value).forEach(([pseudoKey, pseudoValue]) => {
+                    this.applyRule({
+                        hash: `${hash}${key.replace('_', ':')}`,
+                        key: pseudoKey,
+                        value: pseudoValue,
+                        sheet: this.styleTag.sheet!
+                    })
+                })
 
-        const className = unistyles.style({
-            $debugName: `${key}-${Math.random().toString(16).slice(10)}`,
-        }, typestyleStylesheet)
+                return
+            }
 
-        return {
-            className,
-            unistyles
+            this.applyRule({
+                hash,
+                key,
+                value,
+                sheet: this.styleTag.sheet
+            })
+        })
+    }
+
+    private applyRule = ({ hash, key, value, sheet }: ApplyRuleProps) => {
+        let rule = Array.from(sheet.cssRules).find(rule => {
+            if (!(rule instanceof CSSStyleRule)) {
+                return false
+            }
+
+            // In unistyles pseudos are prefixed with ':' but in css some of them are prefixed with '::'
+            return rule.selectorText.replace('::', ':').includes(hash)
+        }) ?? null
+
+        if (!rule) {
+            rule = sheet.cssRules.item(sheet.insertRule(`.${hash} {}`))
+        }
+
+        if (!(rule instanceof CSSStyleRule) || !keyInObject(rule.style, key)) {
+            return
         }
+
+        rule.style[key as RemoveReadonlyStyleKeys<typeof key>] = value
     }
 
-    updateStyles = (unistyles: TypeStyle, stylesheet: UnistylesValues, className: string) => {
-        const typestyleStylesheet = convertToTypeStyle(stylesheet)
+    remove = (value: UnistylesValues) => {
+        const hash = generateHash(value)
+        const existingStyles = this.stylesCounter.get(hash)
+
+        if (!existingStyles) {
+            return
+        }
+
+        existingStyles.delete(value)
+
+        if (existingStyles.size === 0) {
+            const ruleIndex = Array.from(this.styleTag.sheet?.cssRules ?? []).findIndex(rule => rule.cssText.includes(`.${hash}`))
 
-        unistyles.reinit()
-        unistyles.cssRule(`.${className}`, typestyleStylesheet)
+            this.styleTag.sheet?.deleteRule(ruleIndex)
+        }
     }
 }
 

package/src/web/shadowRegistry.ts

@@ -1,11 +1,8 @@
 import type { UnistylesValues } from '../types'
-import { listenToDependencies } from './listener'
 import { UnistylesRegistry } from './registry'
-import { createDoubleMap, extractHiddenProperties, extractSecrets, isInDocument } from './utils'
+import { createDoubleMap, equal, extractSecrets, extractUnistyleDependencies, isInDocument } from './utils'
 import { getVariants } from './variants'
 
-type WebUnistyle = ReturnType<typeof UnistylesRegistry.createStyles>
-
 type Style = UnistylesValues | ((...args: Array<any>) => UnistylesValues)
 
 class UnistylesShadowRegistryBuilder {
@@ -17,9 +14,8 @@ class UnistylesShadowRegistryBuilder {
     dispose = () => {}
     // END MOCKS
 
-    private readonly webUnistylesMap = createDoubleMap<HTMLElement, string, WebUnistyle>()
-    private readonly disposeMap = createDoubleMap<HTMLElement, string, VoidFunction | undefined>()
-    private readonly stylesMap = createDoubleMap<HTMLElement, string, HTMLStyleElement>()
+    private resultsMap = createDoubleMap<HTMLElement, string, UnistylesValues>()
+    private classNamesMap = createDoubleMap<HTMLElement, string, Array<string>>()
 
     add = (ref: any, _style?: Style | Array<Style>, _variants?: Record<string, any>, _args?: Array<any>) => {
         // Style is not provided
@@ -43,13 +39,19 @@ class UnistylesShadowRegistryBuilder {
         if (ref === null) {
             const secrets = extractSecrets(_style)
 
-            secrets.forEach(({ __uni__refs }) => {
+            secrets.forEach(({ __uni__refs, __uni__key }) => {
                 __uni__refs.forEach(ref => {
                     if (isInDocument(ref)) {
                         return
                     }
 
-                    this.remove(ref, _style)
+                    const oldResult = this.resultsMap.get(ref, __uni__key)
+                    this.resultsMap.delete(ref, __uni__key)
+                    this.classNamesMap.delete(ref, __uni__key)
+
+                    if (oldResult) {
+                        UnistylesRegistry.remove(oldResult)
+                    }
                 })
             })
 
@@ -62,63 +64,61 @@ class UnistylesShadowRegistryBuilder {
         }
 
         extractSecrets(_style).forEach(secret => {
-            const { __uni__key, __uni__stylesheet, __uni__refs, __uni__variants, __uni__args = [] } = secret
+            const { __uni__key, __uni__stylesheet, __uni__variants, __uni__args = [], __uni__refs } = secret
             const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
-            const style = newComputedStylesheet[__uni__key]
+            const style = newComputedStylesheet[__uni__key]!
             const args = _args ?? __uni__args
-            const resultHidden = typeof style === 'function'
+            const variants = _variants && Object.keys(_variants).length > 0 ? _variants : __uni__variants
+            const result = typeof style === 'function'
                 ? style(...args)
                 : style
-            const result = extractHiddenProperties(resultHidden)
-            const { variants } = Object.fromEntries(getVariants({ variants: result }, _variants && Object.keys(_variants).length > 0 ? _variants : __uni__variants))
+            const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
             const resultWithVariants = {
                 ...result,
-                ...variants
+                ...variantsResult
             }
-            const storedWebUnistyle = this.webUnistylesMap.get(ref, __uni__key)
-            const webUnistyle = storedWebUnistyle ?? UnistylesRegistry.createStyles(resultWithVariants, __uni__key)
+            const oldResult = this.resultsMap.get(ref, __uni__key)
 
-            this.webUnistylesMap.set(ref, __uni__key, webUnistyle)
-            this.disposeMap.get(ref, __uni__key)?.()
-            this.disposeMap.set(ref, __uni__key, listenToDependencies({
-                key: __uni__key,
-                stylesheet: __uni__stylesheet,
-                args,
-                className: webUnistyle.className,
-                unistyles: webUnistyle.unistyles,
-            }))
+            // If results are the same do nothing
+            if (equal(oldResult, resultWithVariants)) {
+                return
+            }
+
+            const oldClassNames = this.classNamesMap.get(ref, __uni__key)
 
-            if (!storedWebUnistyle) {
-                const styleTag = document.createElement('style')
+            // Remove old styles
+            if (oldResult) {
+                UnistylesRegistry.remove(oldResult)
+            }
 
-                const additionalClasses = resultWithVariants?._web?._classNames
+            // Remove old classnames from the ref
+            oldClassNames?.forEach(className => ref.classList.remove(className))
+            this.resultsMap.set(ref, __uni__key, resultWithVariants)
 
-                if (additionalClasses) {
-                    ref.classList.add(...Array.isArray(additionalClasses) ? additionalClasses : [additionalClasses])
-                }
+            const className = UnistylesRegistry.add({
+                key: __uni__key,
+                args,
+                stylesheet: __uni__stylesheet,
+                value: resultWithVariants,
+                variants
+            })
+            const injectedClassNames: Array<string> = resultWithVariants?._web?._classNames ?? []
+            const newClassNames = injectedClassNames.concat(className)
+            const dependencies = extractUnistyleDependencies(resultWithVariants)
 
-                ref.classList.add(webUnistyle.className)
-                webUnistyle.unistyles.setStylesTarget(styleTag)
-                document.head.appendChild(styleTag)
-                __uni__refs.add(ref)
-                this.stylesMap.set(ref, __uni__key, styleTag)
+            if (typeof __uni__stylesheet === 'function') {
+                // Add dependencies from dynamic styles to stylesheet
+                UnistylesRegistry.addDependenciesToStylesheet(__uni__stylesheet, dependencies)
             }
 
-            if (storedWebUnistyle) {
-                UnistylesRegistry.updateStyles(webUnistyle.unistyles, resultWithVariants, webUnistyle.className)
-            }
+            __uni__refs.add(ref)
+            this.classNamesMap.set(ref, __uni__key, newClassNames)
+            // Add new classnames to the ref
+            ref.classList.add(...newClassNames)
         })
     }
 
-    remove = (ref: HTMLElement, style: Style) => {
-        extractSecrets(style).forEach(({ __uni__key }) => {
-            this.webUnistylesMap.delete(ref, __uni__key)
-            this.disposeMap.get(ref, __uni__key)?.()
-            this.disposeMap.delete(ref, __uni__key)
-            this.stylesMap.get(ref, __uni__key)?.remove()
-            this.stylesMap.delete(ref, __uni__key)
-        })
-    }
+    remove = () => {}
 }
 
 export const UnistylesShadowRegistry = new UnistylesShadowRegistryBuilder()

package/src/web/state.ts

@@ -8,12 +8,19 @@ import { UnistylesListener } from './listener'
 import { UnistyleDependency } from '../specs/NativePlatform'
 
 class UnistylesStateBuilder {
-    private readonly isSSR = isServer()
-
     themes = new Map<string, UnistylesTheme>()
     themeName?: AppThemeName
 
-    breakpoint?: AppBreakpoint
+    private matchingBreakpoints = new Map<string, boolean>()
+
+    get breakpoint() {
+        const [currentBreakpoint] = Array.from(this.matchingBreakpoints)
+            .reverse()
+            .find(([_key, value]) => value) ?? []
+
+        return currentBreakpoint as AppBreakpoint | undefined
+    }
+
     breakpoints?: UnistylesBreakpoints
 
     hasAdaptiveThemes = false
@@ -23,7 +30,7 @@ class UnistylesStateBuilder {
         this.initBreakpoints(config.breakpoints)
         this.initSettings(config.settings)
 
-        if (this.isSSR) {
+        if (isServer()) {
             return
         }
 
@@ -64,8 +71,6 @@ class UnistylesStateBuilder {
     }
 
     private initBreakpoints = (breakpoints = {} as UnistylesBreakpoints) => {
-        const breakpointsMap = new Map<string, MediaQueryList>()
-
         this.breakpoints = breakpoints
 
         Object.entries(breakpoints)
@@ -76,25 +81,10 @@ class UnistylesStateBuilder {
                 }
 
                 const mediaQuery = window.matchMedia(`(min-width: ${value}px)`)
-                breakpointsMap.set(breakpoint, mediaQuery)
-
-                if (mediaQuery.matches) {
-                    this.breakpoint = breakpoint as AppBreakpoint
-                }
+                this.matchingBreakpoints.set(breakpoint, mediaQuery.matches)
 
                 mediaQuery.addEventListener('change', event => {
-                    if (!event.matches) {
-                        const [currentBreakpoint] = Array.from(breakpointsMap).find(([,mq]) => mq.matches) ?? []
-
-                        if (currentBreakpoint) {
-                            this.breakpoint = currentBreakpoint as AppBreakpoint
-                            UnistylesListener.emitChange(UnistyleDependency.Breakpoints)
-                        }
-
-                        return
-                    }
-
-                    this.breakpoint = breakpoint as AppBreakpoint
+                    this.matchingBreakpoints.set(breakpoint, event.matches)
                     UnistylesListener.emitChange(UnistyleDependency.Breakpoints)
                 })
             })