react-native-unistyles 3.0.0-alpha.13 → 3.0.0-alpha.15

package/src/web/pseudo.ts

@@ -1,11 +1,137 @@
-// TODO: Add complete list of pseudo selectors
 export const pseudos = [
+    '_-moz-broken',
+    '_-moz-drag-over',
+    '_-moz-first-node',
+    '_-moz-handler-blocked',
+    '_-moz-handler-crashed',
+    '_-moz-handler-disabled',
+    '_-moz-last-node',
+    '_-moz-loading',
+    '_-moz-locale-dir(ltr)',
+    '_-moz-locale-dir(rtl)',
+    '_-moz-only-whitespace',
+    '_-moz-submit-invalid',
+    '_-moz-suppressed',
+    '_-moz-user-disabled',
+    '_-moz-window-inactive',
+    '_active',
+    '_any-link',
+    '_autofill',
+    '_blank',
+    '_buffering',
+    '_checked',
+    '_current',
+    '_default',
+    '_defined',
+    '_dir(',
+    '_disabled',
+    '_empty',
+    '_enabled',
+    '_first',
+    '_first-child',
+    '_first-of-type',
+    '_focus',
+    '_focus-visible',
+    '_focus-within',
+    '_fullscreen',
+    '_future',
+    '_has(',
+    '_host',
+    '_host-context(',
+    '_host(',
     '_hover',
-    '_css',
+    '_in-range',
+    '_indeterminate',
+    '_invalid',
+    '_is(',
+    '_lang(',
+    '_last-child',
+    '_last-of-type',
+    '_left',
+    '_link',
+    '_local-link',
+    '_modal',
+    '_muted',
+    '_not(',
+    '_nth-child(',
+    '_nth-last-child(',
+    '_nth-last-of-type(',
+    '_nth-of-type(',
+    '_only-child',
+    '_only-of-type',
+    '_optional',
+    '_out-of-range',
+    '_past',
+    '_paused',
+    '_picture-in-picture',
+    '_placeholder-shown',
+    '_playing',
+    '_popover-open',
+    '_read-only',
+    '_read-write',
+    '_required',
+    '_right',
+    '_scope',
+    '_seeking',
+    '_stalled',
+    '_state(',
+    '_target',
+    '_target-within',
+    '_user-invalid',
+    '_user-valid',
+    '_valid',
+    '_visited',
+    '_volume-locked',
+    '_where(',
+    '_-moz-color-swatch',
+    '_-moz-focus-inner',
+    '_-moz-list-bullet',
+    '_-moz-list-number',
+    '_-moz-meter-bar',
+    '_-moz-progress-bar',
+    '_-moz-range-progress',
+    '_-moz-range-thumb',
+    '_-moz-range-track',
+    '_-webkit-inner-spin-button',
+    '_-webkit-meter-barDeprecated',
+    '_-webkit-meter-even-less-good-value',
+    '_-webkit-meter-inner-element',
+    '_-webkit-meter-optimum-value',
+    '_-webkit-meter-suboptimum-value',
+    '_-webkit-progress-bar',
+    '_-webkit-progress-inner-element',
+    '_-webkit-progress-value',
+    '_-webkit-scrollbar',
+    '_-webkit-search-cancel-button',
+    '_-webkit-search-results-button',
+    '_-webkit-slider-runnable-track',
+    '_-webkit-slider-thumb',
+    '_after',
+    '_backdrop',
     '_before',
-    '_after'
+    '_cue',
+    '_file-selector-button',
+    '_first-letter',
+    '_first-line',
+    '_grammar-error',
+    '_highlight(',
+    '_marker',
+    '_part(',
+    '_placeholder',
+    '_selection',
+    '_slotted(',
+    '_spelling-error',
+    '_target-text',
+    '_view-transition',
+    '_view-transition-group',
+    '_view-transition-image-pair',
+    '_view-transition-new',
+    '_view-transition-old',
 ] as const
 
-export const isPseudo = (selector: string) => pseudos.includes(selector as Pseudo)
+export const isPseudo = (selector: string) => pseudos.some(pseudo => selector.startsWith(pseudo))
+
+type AddDynamicSelector<T extends string> = T extends `${infer U}(` ? `${U}(${string})` : T
+
+export type Pseudo = AddDynamicSelector<typeof pseudos[number]>
 
-export type Pseudo = typeof pseudos[number]

package/src/web/registry.ts

@@ -1,16 +1,14 @@
 import { createTypeStyle, TypeStyle } from 'typestyle'
 import type { UnistylesValues } from '../types'
 import { convertToTypeStyle } from './convert'
-import { UnistylesState } from './state'
 
 class UnistylesRegistryBuilder {
-    createStyles = (stylesheet: UnistylesValues, key: string | number) => {
-        const stylesTag = UnistylesState.createTag()
-        const unistyles = createTypeStyle(stylesTag)
+    createStyles = (stylesheet: UnistylesValues, key: string) => {
+        const unistyles = createTypeStyle()
         const typestyleStylesheet = convertToTypeStyle(stylesheet)
 
         const className = unistyles.style({
-            $debugName: String(key),
+            $debugName: `${key}-${Math.random().toString(16).slice(10)}`,
         }, typestyleStylesheet)
 
         if (stylesheet._web?._css) {

package/src/web/runtime.ts

@@ -191,8 +191,6 @@ class UnistylesRuntimeBuilder {
 
         UnistylesState.themes.set(themeName, updater(oldTheme))
     }
-
-    getSSRUnistyles = () => UnistylesState.tags
 }
 
 export const UnistylesRuntime = new UnistylesRuntimeBuilder()

package/src/web/shadowRegistry.ts

@@ -0,0 +1,121 @@
+import type { UnistylesValues } from '../types'
+import { listenToDependencies } from './listener'
+import { UnistylesRegistry } from './registry'
+import { UnistylesRuntime } from './runtime'
+import { createDoubleMap, extractHiddenProperties, extractSecrets, isInDocument } from './utils'
+import { getVariants } from './variants'
+
+type WebUnistyle = ReturnType<typeof UnistylesRegistry.createStyles>
+
+type Style = UnistylesValues | ((...args: Array<any>) => UnistylesValues)
+
+class UnistylesShadowRegistryBuilder {
+    // MOCKS
+    name = 'UnistylesShadowRegistry'
+    __type = 'web'
+    equals = () => true
+    toString = () => 'UnistylesShadowRegistry'
+    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>()
+
+    add = (ref: any, _style?: Style | Array<Style>, _variants?: Record<string, any>, _args?: Array<any>) => {
+        // Style is not provided
+        if (!_style) {
+            return
+        }
+
+        // Array of styles
+        if (Array.isArray(_style)) {
+            _style.forEach(style => this.add(ref, style, _variants, _args))
+
+            return
+        }
+
+        // Not a unistyle
+        if (!Object.keys(_style).some(key => key.startsWith('__uni__'))) {
+            return
+        }
+
+        // Ref is unmounted, remove style tags from the document
+        if (ref === null) {
+            const secrets = extractSecrets(_style)
+
+            secrets.forEach(({ __uni__refs }) => {
+                __uni__refs.forEach(ref => {
+                    if (isInDocument(ref)) {
+                        return
+                    }
+
+                    this.remove(ref, _style)
+                })
+            })
+
+            return
+        }
+
+        // Ref is not an HTMLElement
+        if (!(ref instanceof HTMLElement)) {
+            return
+        }
+
+        extractSecrets(_style).forEach(secret => {
+            const { __uni__key, __uni__stylesheet, __uni__refs, __uni__variants, __uni__args = [] } = secret
+            const newComputedStylesheet = typeof __uni__stylesheet === 'function'
+                ? __uni__stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
+                : __uni__stylesheet
+            const style = newComputedStylesheet[__uni__key]
+            const args = _args ?? __uni__args
+            const resultHidden = 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 resultWithVariants = {
+                ...result,
+                ...variants
+            }
+            const storedWebUnistyle = this.webUnistylesMap.get(ref, __uni__key)
+            const webUnistyle = storedWebUnistyle ?? UnistylesRegistry.createStyles(resultWithVariants, __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 (!storedWebUnistyle) {
+                const styleTag = document.createElement('style')
+
+                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 (storedWebUnistyle) {
+                UnistylesRegistry.updateStyles(webUnistyle.unistyles, resultWithVariants, webUnistyle.className)
+            }
+        })
+    }
+
+    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)
+        })
+    }
+}
+
+export const UnistylesShadowRegistry = new UnistylesShadowRegistryBuilder()

package/src/web/state.ts

@@ -1,4 +1,3 @@
-import { type ReactElement, createElement, createRef } from 'react'
 import type { UnistylesTheme } from '../types'
 import type { UnistylesConfig } from '../specs/StyleSheet'
 import type { AppBreakpoint, AppThemeName } from '../specs/types'
@@ -10,7 +9,6 @@ import { UnistyleDependency } from '../specs/NativePlatform'
 
 class UnistylesStateBuilder {
     private readonly isSSR = isServer()
-    readonly tags = [] as Array<ReactElement>
 
     themes = new Map<string, UnistylesTheme>()
     themeName?: AppThemeName
@@ -101,48 +99,6 @@ class UnistylesStateBuilder {
                 })
             })
     }
-
-    createTag() {
-        if (!this.isSSR) {
-            const tag = document.createElement('style')
-
-            document.head.appendChild(tag)
-
-            return tag
-        }
-
-        const tagRef = new Proxy(createRef<HTMLStyleElement>(), {
-            set: (target, prop, value) => {
-                // When ref is assigned
-                if ('textContent' in value) {
-                    value.textContent = tag.textContent
-                }
-
-                return Reflect.set(target, prop, value)
-            }
-        })
-        const tagElement = createElement('style', { ref: tagRef, key: this.tags.length }, '')
-        const tag = new Proxy({ textContent: '' }, {
-            set: (target, prop, value) => {
-                if (prop !== 'textContent') {
-                    return false
-                }
-
-                // When css is updated
-                target.textContent = value
-
-                if (tagRef.current) {
-                    tagRef.current.textContent = value
-                }
-
-                return true
-            }
-        })
-
-        this.tags.push(tagElement)
-
-        return tag
-    }
 }
 
 export const UnistylesState = new UnistylesStateBuilder()

package/src/web/utils.ts

@@ -1,26 +1,11 @@
 import { ColorScheme, type AppThemeName} from '../specs/types'
-import type { UnistylesValues } from '../types'
+import type { StyleSheet, StyleSheetWithSuperPowers, UnistylesValues } from '../types/stylesheet'
 
 export const reduceObject = <TObj extends Record<string, any>, TReducer>(
     obj: TObj,
     reducer: (value: TObj[keyof TObj], key: keyof TObj) => TReducer,
 ) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, reducer(value as TObj[keyof TObj], key)])) as { [K in keyof TObj]: TReducer }
 
-export const toReactNativeClassName = (className: string | null, values: UnistylesValues) => {
-    const returnValue = className ? {
-        $$css: true,
-        [className]: className
-    } : {}
-
-    Object.defineProperties(returnValue, reduceObject(values, value => ({
-        value,
-        enumerable: false,
-        configurable: true
-    })))
-
-    return returnValue
-}
-
 export const keyInObject = <T extends Record<string, any>>(obj: T, key: PropertyKey): key is keyof T => key in obj
 
 export const schemeToTheme = (scheme: ColorScheme): AppThemeName => {
@@ -93,3 +78,92 @@ export const equal = <T>(a: T, b: T) => {
 
     return keysA.every(key => Object.is(a[key], b[key]) && Object.prototype.hasOwnProperty.call(b, key))
 }
+
+type UnistyleSecrets = {
+    __uni__stylesheet: StyleSheetWithSuperPowers<StyleSheet>,
+    __uni__key: string,
+    __uni__refs: Set<HTMLElement>
+    __uni__variants: Record<string, any>
+    __uni__args?: Array<any>
+}
+
+export const assignSecrets = <T>(object: T, secrets: UnistyleSecrets) => {
+    // @ts-expect-error - assign secrets to object
+    object[`__uni__secrets__${Math.random().toString(16).slice(2)}`] = secrets
+
+    return object
+}
+
+export const extractSecrets = (object: any) => {
+    const secrets = Object.entries(object).reduce((acc, [key, value]) => {
+        if (key.startsWith('__uni__secrets__')) {
+            acc.push(value as UnistyleSecrets)
+        }
+
+        return acc
+    }, [] as Array<UnistyleSecrets>)
+
+    return secrets
+}
+
+export const getStyles = (values: UnistylesValues) => {
+    const returnValue = {}
+
+    Object.defineProperties(returnValue, reduceObject(values, value => ({
+        value,
+        enumerable: false,
+        configurable: true
+    })))
+
+    return returnValue
+}
+
+export const createDoubleMap = <TKey, TSecondKey, TValue>() => {
+    const map = new Map<TKey, Map<TSecondKey, TValue>>()
+
+    return {
+        get: (key: TKey, secondKey: TSecondKey) => {
+            const mapForKey = map.get(key)
+
+            if (!mapForKey) {
+                return undefined
+            }
+
+            return mapForKey.get(secondKey)
+        },
+        set: (key: TKey, secondKey: TSecondKey, value: TValue) => {
+            const mapForKey = map.get(key) ?? new Map<TSecondKey, TValue>()
+
+            map.set(key, mapForKey)
+            mapForKey.set(secondKey, value)
+        },
+        delete: (key: TKey, secondKey: TSecondKey) => {
+            const mapForKey = map.get(key)
+
+            if (!mapForKey) {
+                return
+            }
+
+            mapForKey.delete(secondKey)
+        },
+        forEach: (callback: (key: TKey, secondKey: TSecondKey, value: TValue) => void) => {
+            map.forEach((mapForKey, key) => {
+                mapForKey.forEach((value, secondKey) => {
+                    callback(key, secondKey, value)
+                })
+            })
+        }
+    }
+}
+
+export const extractHiddenProperties = (object: any) => {
+    const hiddenProperties = Object.getOwnPropertyNames(object)
+
+    return Object.fromEntries(
+        hiddenProperties
+            .filter(key => !key.startsWith('__uni__'))
+            .map(key => [key, object[key]])
+    )
+}
+
+export const isInDocument = (element: HTMLElement) => document.body.contains(element)

package/src/web/variants/useVariants.ts

@@ -1,14 +1,10 @@
 import { useMemo, useRef, useState } from 'react'
-import type { TypeStyle } from 'typestyle'
 import type { ReactNativeStyleSheet, StyleSheet } from '../../types'
-import { equal, reduceObject } from '../utils'
-import { UnistylesRegistry } from '../registry'
+import { equal, keyInObject, reduceObject } from '../utils'
 import { getVariants } from './getVariants'
 
 export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>, setSelectedVariants: (variants: Record<string, any>) => void) => {
     const useVariants = (selectedVariants: Record<string, any>) => {
-        const [unistylesMap] = useState(() => new Map<string, TypeStyle>())
-        const [classNameMap] = useState(() => new Map<string, string>())
         const [selectedVariantStylesMap] = useState(() => new Map<string, Record<string, any>>())
         const lastSelectedVariantsRef = useRef<Record<string, any>>()
         // Variable that determines if variants have changed and we need to recalculate styles
@@ -29,28 +25,14 @@ export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>, set
             return result
         }, [lastSelectedVariantsRef.current])
 
-        if (unistylesMap.size === 0 && combinedVariantStyles.length > 0) {
-            combinedVariantStyles.forEach(([key, value]) => {
-                const { className, unistyles } = UnistylesRegistry.createStyles(value, `variant-${key}`)
-
-                unistylesMap.set(key, unistyles)
-                classNameMap.set(key, className)
-            })
-        }
-
-        combinedVariantStyles.forEach(([key, value]) => {
+        combinedVariantStyles.forEach(([key]) => {
             const styleEntry = styles[key]
-            const unistyles = unistylesMap.get(key)
-            const className = classNameMap.get(key)
-            const selectedVariantStyles = selectedVariantStylesMap.get(key)
 
-            if (!unistyles || !className) {
+            if (!styleEntry) {
                 return
             }
 
-            if (variantsChanged) {
-                UnistylesRegistry.updateStyles(unistyles, value, className)
-            }
+            const selectedVariantStyles = selectedVariantStylesMap.get(key)
 
             Object.defineProperties(styleEntry, reduceObject(selectedVariantStyles ?? {}, value => ({
                 value,
@@ -58,18 +40,22 @@ export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>, set
                 configurable: true
             })))
 
-            if (styleEntry) {
-                Object.keys(styleEntry ?? {}).forEach(key => {
-                    if (!key.startsWith('variant-')) {
-                        return
-                    }
+            // Add __uni__variants to static styles
+            Object.keys(styleEntry).forEach(key => {
+                if (!key.startsWith('__uni__secrets__')) {
+                    return
+                }
+
+                const secret = keyInObject(styleEntry, key) ? styleEntry[key] : undefined
+
+                if (!secret) {
+                    return
+                }
 
-                    // @ts-expect-error - remove old variants
-                    delete styleEntry[key]
+                Object.defineProperty(secret, '__uni__variants', {
+                    value: selectedVariants
                 })
-                // @ts-expect-error - apply variant className
-                styleEntry[className] = className
-            }
+            })
         })
     }