react-native-unistyles 3.0.0-beta.4 → 3.0.0-beta.6

package/src/web/registry.ts

@@ -1,42 +1,19 @@
 import type { UnistylesTheme, UnistylesValues } from '../types'
 import type { StyleSheet, StyleSheetWithSuperPowers } from '../types/stylesheet'
-import { UnistylesRuntime } from './runtime'
-import { extractMediaQueryValue, keyInObject, getMediaQuery, generateHash, extractUnistyleDependencies, error } from './utils'
-import { UnistylesListener } from './listener'
-import { convertUnistyles } from './convert'
+import { generateHash, extractUnistyleDependencies, error } from './utils'
 import type { UnistylesMiniRuntime, UnistyleDependency } from '../specs'
+import { CSSState } from './css'
+import type { UnistylesServices } from './types'
 
-type ApplyRuleProps = {
-    hash: string,
-    key: string,
-    value: any,
-    sheet: CSSStyleSheet | CSSMediaRule
-}
-
-type RemoveReadonlyStyleKeys<T extends string> = T extends 'length' | 'parentRule' ? never : T
-
-class UnistylesRegistryBuilder {
+export class UnistylesRegistry {
     private readonly stylesheets = new Map<StyleSheetWithSuperPowers<StyleSheet>, StyleSheet>()
-    private readonly stylesCounter = new Map<string, Set<UnistylesValues>>()
-    #styleTag: HTMLStyleElement | null = null
+    private readonly stylesCache = new Set<string>()
+    private readonly stylesCounter = new Map<string, Set<HTMLElement>>()
     private readonly disposeListenersMap = new Map<object, VoidFunction>()
     private readonly dependenciesMap = new Map<StyleSheetWithSuperPowers<StyleSheet>, Set<UnistyleDependency>>()
+    readonly css = new CSSState()
 
-    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
-    }
+    constructor(private services: UnistylesServices) {}
 
     getComputedStylesheet = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>, scopedThemeName?: UnistylesTheme) => {
         if (typeof stylesheet !== 'function') {
@@ -44,13 +21,13 @@ class UnistylesRegistryBuilder {
         }
 
         if (scopedThemeName) {
-            const scopedTheme = UnistylesRuntime.getTheme(scopedThemeName)
+            const scopedTheme = this.services.runtime.getTheme(scopedThemeName, this.services.state.CSSVars)
 
             if (!scopedTheme) {
                 throw error(`Unistyles: You're trying to use scoped theme '${scopedThemeName}' but it wasn't registered.`)
             }
 
-            return stylesheet(scopedTheme, UnistylesRuntime.miniRuntime)
+            return stylesheet(scopedTheme, this.services.runtime.miniRuntime)
         }
 
         const computedStylesheet = this.stylesheets.get(stylesheet)
@@ -59,7 +36,8 @@ class UnistylesRegistryBuilder {
             return computedStylesheet
         }
 
-        const createdStylesheet = stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
+        const currentTheme = this.services.runtime.getTheme(this.services.runtime.themeName, this.services.state.CSSVars)
+        const createdStylesheet = stylesheet(currentTheme, this.services.runtime.miniRuntime)
         const dependencies = Object.values(createdStylesheet).flatMap(value => extractUnistyleDependencies(value))
 
         this.addDependenciesToStylesheet(stylesheet, dependencies)
@@ -75,8 +53,8 @@ class UnistylesRegistryBuilder {
 
         dependencies.forEach(dependency => dependenciesMap.add(dependency))
 
-        const dispose = UnistylesListener.addStylesheetListeners(Array.from(dependenciesMap), () => {
-            const newComputedStylesheet = stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
+        const dispose = this.services.listener.addStylesheetListeners(Array.from(dependenciesMap), () => {
+            const newComputedStylesheet = stylesheet(this.services.runtime.theme, this.services.runtime.miniRuntime)
 
             this.stylesheets.set(stylesheet, newComputedStylesheet)
         })
@@ -85,140 +63,57 @@ class UnistylesRegistryBuilder {
         this.disposeListenersMap.set(stylesheet, dispose)
     }
 
-    add = (value: UnistylesValues) => {
-        const hash = generateHash(value)
-        const existingCounter = this.stylesCounter.get(hash)
-
-        if (!existingCounter || existingCounter.size === 0) {
-            const counter = new Set<UnistylesValues>()
-
-            counter.add(value)
-            this.stylesCounter.set(hash, counter)
-            this.applyStyles(hash, value)
-
-            return { hash, existingHash: false }
-        }
+    connect = (ref: HTMLElement, hash: string) => {
+        const stylesCounter = this.stylesCounter.get(hash) ?? new Set()
 
-        existingCounter.add(value)
-
-        return { hash, existingHash: true }
+        stylesCounter.add(ref)
+        this.stylesCounter.set(hash, stylesCounter)
     }
 
-    applyStyles = (hash: string, styles: Record<string, any>) => {
-        Object.entries(convertUnistyles(styles)).forEach(([key, value]) => {
-            if (!this.styleTag.sheet) {
-                return
-            }
+    remove = (ref: HTMLElement, hash: string) => {
+        const stylesCounter = this.stylesCounter.get(hash) ?? new Set()
 
-            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))
-                }
+        stylesCounter.delete(ref)
 
-                if (queryRule instanceof CSSMediaRule) {
-                    Object.entries(value).forEach(([mqKey, mqValue]) => {
-                        this.applyRule({
-                            hash,
-                            key: mqKey,
-                            value: mqValue,
-                            sheet: queryRule
-                        })
-                    })
+        if (stylesCounter.size === 0) {
+            // Move this to the end of the event loop so the element is removed from the DOM
+            Promise.resolve().then(() => {
+                if (document.querySelector(`.${hash}`)) {
+                    return
                 }
 
-                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 as CSSStyleSheet
-                    })
-                })
-
-                return
-            }
-
-            this.applyRule({
-                hash,
-                key,
-                value,
-                sheet: this.styleTag.sheet
+                this.css.remove(hash)
+                this.stylesCache.delete(hash)
             })
-        })
-    }
 
-    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} {}`))
+            return true
         }
 
-        if (!(rule instanceof CSSStyleRule) || !keyInObject(rule.style, key)) {
-            return
-        }
-
-        rule.style[key as RemoveReadonlyStyleKeys<typeof key>] = value
+        return false
     }
 
-    remove = (value: UnistylesValues) => {
+    add = (value: UnistylesValues) => {
         const hash = generateHash(value)
-        const existingStyles = this.stylesCounter.get(hash)
 
-        if (!existingStyles) {
-            return
-        }
+        if (!this.stylesCache.has(hash)) {
+            this.applyStyles(hash, value)
+            this.stylesCache.add(hash)
 
-        existingStyles.delete(value)
+            return { hash, existingHash: false }
+        }
 
-        if (existingStyles.size === 0) {
-            const ruleIndex = Array.from(this.styleTag.sheet?.cssRules ?? []).findIndex(rule => rule.cssText.includes(`.${hash}`))
+        return { hash, existingHash: true }
+    }
 
-            if (ruleIndex === -1) {
-                return
-            }
+    applyStyles = (hash: string, value: UnistylesValues) => {
+        this.css.add(hash, value)
+    }
 
-            this.styleTag.sheet?.deleteRule(ruleIndex)
-        }
+    reset = () => {
+        this.css.reset()
+        this.stylesCache.clear()
+        this.dependenciesMap.clear()
+        this.disposeListenersMap.clear()
+        this.stylesCounter.clear()
     }
 }
-
-export const UnistylesRegistry = new UnistylesRegistryBuilder()

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