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

package/src/web/css/state.ts

@@ -0,0 +1,191 @@
+import type { UnistylesValues } from '../../types'
+import { convertUnistyles } from '../convert'
+import { hyphenate, isServer } from '../utils'
+import { convertToCSS } from './core'
+
+type MapType = Map<string, Map<string, Map<string, any>>>
+type SetProps = {
+    mediaQuery?: string
+    className: string
+    isMq?: boolean
+    propertyKey: string
+    value: any
+}
+type HydrateState = Array<[ string, Array<[ string, Array<[ string, any ]> ]> ]>
+
+const safeGetMap = (map: Map<string, Map<string, any>>, key: string) => {
+    const nextLevelMap = map.get(key)
+
+    if (!nextLevelMap) {
+        const newMap = new Map<string, any>()
+
+        map.set(key, newMap)
+
+        return newMap
+    }
+
+    return nextLevelMap
+}
+
+export class CSSState {
+    mainMap: MapType = new Map()
+    mqMap: MapType = new Map()
+    private styleTag: HTMLStyleElement | null = null
+    private CSS = ''
+
+    constructor() {
+        if (isServer()) {
+            return
+        }
+
+        const ssrTag = document.getElementById('unistyles-web')
+
+        if (ssrTag) {
+            this.styleTag = ssrTag as HTMLStyleElement
+
+            return
+        }
+
+        this.styleTag = document.createElement('style')
+        this.styleTag.id = 'unistyles-web'
+        document.head.appendChild(this.styleTag)
+    }
+
+    set = ({ className, propertyKey, value, mediaQuery = '', isMq }: SetProps) => {
+        const firstLevelMap = isMq ? this.mqMap : this.mainMap
+        const secondLevelMap = safeGetMap(firstLevelMap, mediaQuery)
+        const thirdLevelMap = safeGetMap(secondLevelMap, className)
+
+        thirdLevelMap.set(propertyKey, value)
+    }
+
+    add = (hash: string, values: UnistylesValues) => {
+        convertToCSS(hash, convertUnistyles(values), this)
+
+        if (this.styleTag) {
+            this.styleTag.innerText = this.getStyles()
+        }
+    }
+
+    addTheme = (theme: string, values: Record<string, any>) => {
+        let themeVars = ''
+
+        const convertToCSS = (key: string, value: any, prev = '-') => {
+            if (typeof value === 'object' && value !== null) {
+                Object.entries(value).forEach(([nestedKey, nestedValue]) => convertToCSS(nestedKey, nestedValue, `${prev}-${key}`))
+            }
+
+            if (typeof value === 'string') {
+                themeVars += `${prev}-${hyphenate(key)}:${value};`
+            }
+        }
+
+        Object.entries(values).forEach(([key, value]) => convertToCSS(key, value))
+
+        if (theme === 'light' || theme === 'dark') {
+            this.CSS += `@media (prefers-color-scheme: ${theme}){:root{${themeVars}}}`
+        }
+
+        this.CSS += `:root.${theme}{${themeVars}}`
+    }
+
+    remove = (hash: string) => {
+        this.mainMap.forEach(styles => {
+            styles.delete(hash)
+        })
+        this.mqMap.forEach(styles => {
+            styles.delete(hash)
+        })
+
+        if (this.styleTag) {
+            this.styleTag.innerText = this.getStyles()
+        }
+    }
+
+    getStyles = () => {
+        let styles = this.CSS
+
+        const generate = (mediaQuery: string, secondLevelMap: Map<string, Map<string, string>>) => {
+            if (mediaQuery) {
+                styles += `${mediaQuery}{`
+            }
+
+            for (const [className, thirdLevelMap] of secondLevelMap) {
+                styles += `.${className}{`
+
+                for (const [propertyKey, value] of thirdLevelMap) {
+                    if (value === undefined) {
+                        continue
+                    }
+
+                    styles += `${hyphenate(propertyKey)}:${value};`
+                }
+
+                styles += '}'
+            }
+
+            if (mediaQuery) {
+                styles += '}'
+            }
+        }
+
+        for (const [mediaQuery, secondLevelMap] of this.mainMap) {
+            generate(mediaQuery, secondLevelMap)
+        }
+
+        for (const [mediaQuery, secondLevelMap] of this.mqMap) {
+            generate(mediaQuery, secondLevelMap)
+        }
+
+        return styles
+    }
+
+    getState = () => {
+        const getState = (map: MapType) => {
+            return Array.from(map).map(([mediaQuery, classNames]) => {
+                return [
+                    mediaQuery,
+                    Array.from(classNames.entries()).map(([className, style]) => {
+                        return [
+                            className,
+                            Array.from(style.entries()).map(([property, value]) => {
+                                return [property, value]
+                            })
+                        ]
+                    })
+                ]
+            }) as HydrateState
+        }
+
+        const mainState = getState(this.mainMap)
+        const mqState = getState(this.mqMap)
+
+        return { mainState, mqState }
+    }
+
+    hydrate = ({ mainState, mqState }: ReturnType<typeof this.getState>) => {
+        const hydrateState = (map: HydrateState, isMq = false) => {
+            map.forEach(([mediaQuery, classNames]) => {
+                classNames.forEach(([className, style]) => {
+                    style.forEach(([propertyKey, value]) => {
+                        this.set({
+                            className,
+                            propertyKey,
+                            value,
+                            mediaQuery,
+                            isMq
+                        })
+                    })
+                })
+            })
+        }
+
+        hydrateState(mainState)
+        hydrateState(mqState, true)
+    }
+
+    reset = () => {
+        this.mqMap.clear()
+        this.mainMap.clear()
+    }
+}

package/src/web/css/utils.ts

@@ -0,0 +1,54 @@
+import { hyphenate } from '../utils'
+import type { CSSState } from './state'
+
+export const safeGetMap = (map: Map<string, Map<string, any>>, key: string) => {
+    const nextLevelMap = map.get(key)
+
+    if (!nextLevelMap) {
+        const newMap = new Map<string, any>()
+
+        map.set(key, newMap)
+
+        return newMap
+    }
+
+    return nextLevelMap
+}
+
+export const getStylesFromState = (state: CSSState) => {
+    let styles = ''
+
+    const generate = (mediaQuery: string, secondLevelMap: Map<string, Map<string, string>>) => {
+        if (mediaQuery) {
+            styles += `${mediaQuery}{`
+        }
+
+        for (const [className, thirdLevelMap] of secondLevelMap) {
+            styles += `.${className}{`
+
+            for (const [propertyKey, value] of thirdLevelMap) {
+                if (value === undefined) {
+                    continue
+                }
+
+                styles += `${hyphenate(propertyKey)}:${value};`
+            }
+
+            styles += '}'
+        }
+
+        if (mediaQuery) {
+            styles += '}'
+        }
+    }
+
+    for (const [mediaQuery, secondLevelMap] of state.mainMap) {
+        generate(mediaQuery, secondLevelMap)
+    }
+
+    for (const [mediaQuery, secondLevelMap] of state.mqMap) {
+        generate(mediaQuery, secondLevelMap)
+    }
+
+    return styles
+}

package/src/web/index.ts

@@ -1,12 +1,24 @@
 import { create } from './create'
-import { UnistylesState } from './state'
 import { deepMergeObjects } from '../utils'
 import type { StyleSheet as NativeStyleSheet } from '../specs/StyleSheet'
-import { UnistylesRuntime as UnistylesRuntimeWeb } from './runtime'
 import type { Runtime as NativeUnistylesRuntime } from '../specs/UnistylesRuntime'
+import type { UnistylesShadowRegistry as NativeUnistylesShadowRegistry } from '../specs/ShadowRegistry'
+import { UnistylesServices } from './services'
+import { isServer } from './utils'
 
+declare global {
+    // @ts-ignore
+    var __unistyles__: UnistylesServices
+}
+
+if (isServer() && !globalThis.__unistyles__) {
+    // @ts-ignore
+    globalThis.__unistyles__ = new UnistylesServices()
+}
+
+export const UnistylesWeb = isServer() ? globalThis.__unistyles__ : new UnistylesServices()
 export const StyleSheet = {
-    configure: UnistylesState.init,
+    configure: UnistylesWeb.state.init,
     create: create,
     absoluteFill: {
         position: 'absolute',
@@ -27,7 +39,8 @@ export const StyleSheet = {
     hairlineWidth: 1
 } as unknown as typeof NativeStyleSheet
 
-export const UnistylesRuntime = UnistylesRuntimeWeb as unknown as typeof NativeUnistylesRuntime
+export const UnistylesRuntime = UnistylesWeb.runtime as unknown as typeof NativeUnistylesRuntime
+export const UnistylesShadowRegistry = UnistylesWeb.shadowRegistry as unknown as typeof NativeUnistylesShadowRegistry
 
 export * from './mock'
-export * from './shadowRegistry'
+

package/src/web/listener.ts

@@ -1,11 +1,13 @@
 import { UnistyleDependency } from '../specs/NativePlatform'
-import { UnistylesRuntime } from './runtime'
+import type { UnistylesServices } from './types'
 
-class UnistylesListenerBuilder {
+export class UnistylesListener {
     private isInitialized = false
     private listeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<VoidFunction>())
     private stylesheetListeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<VoidFunction>())
 
+    constructor(private services: UnistylesServices) {}
+
     emitChange = (dependency: UnistyleDependency) => {
         this.stylesheetListeners[dependency]?.forEach(listener => listener())
         this.listeners[dependency]?.forEach(listener => listener())
@@ -18,25 +20,25 @@ class UnistylesListenerBuilder {
 
         this.isInitialized = true
 
-        UnistylesRuntime.darkMedia?.addEventListener('change', event => {
+        this.services.runtime.darkMedia?.addEventListener('change', event => {
             if (!event.matches) {
                 return
             }
 
             this.emitChange(UnistyleDependency.ColorScheme)
 
-            if (UnistylesRuntime.hasAdaptiveThemes) {
+            if (this.services.runtime.hasAdaptiveThemes) {
                 this.emitChange(UnistyleDependency.Theme)
             }
         })
-        UnistylesRuntime.lightMedia?.addEventListener('change', event => {
+        this.services.runtime.lightMedia?.addEventListener('change', event => {
             if (!event.matches) {
                 return
             }
 
             this.emitChange(UnistyleDependency.ColorScheme)
 
-            if (UnistylesRuntime.hasAdaptiveThemes) {
+            if (this.services.runtime.hasAdaptiveThemes) {
                 this.emitChange(UnistyleDependency.Theme)
             }
         })
@@ -61,5 +63,3 @@ class UnistylesListenerBuilder {
         }
     }
 }
-
-export const UnistylesListener = new UnistylesListenerBuilder()

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()