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

package/src/specs/StyleSheet/index.ts

@@ -5,12 +5,17 @@ import type { UnistylesStyleSheet as UnistylesStyleSheetSpec } from './Unistyles
 import type { UnistylesBreakpoints, UnistylesThemes } from '../../global'
 import type { CreateUnistylesStyleSheet } from '../../types'
 
-type UnistylesSettings = {
+type UnistylesThemeSettings = {
     initialTheme: (() => keyof UnistylesThemes) | keyof UnistylesThemes
 } | {
     adaptiveThemes: boolean
 }
 
+type UnistylesSettings = UnistylesThemeSettings & {
+    CSSVars?: boolean,
+    nativeBreakpointsMode?: 'pixels' | 'points'
+}
+
 export type UnistylesConfig = {
     settings?: UnistylesSettings,
     themes?: UnistylesThemes,

package/src/utils.ts

@@ -1,22 +1,43 @@
+export const isDefined = <T>(value: T): value is NonNullable<T> => value !== undefined && value !== null
+
 export const deepMergeObjects = <T extends Record<PropertyKey, any>>(...sources: Array<T>) => {
     const target = {} as T
 
-    sources.forEach(source => {
-        Object.keys(source).forEach(key => {
-            const sourceValue = source[key]
-            const targetValue = target[key]
+    sources
+        .filter(isDefined)
+        .forEach(source => {
+            Object.keys(source).forEach(key => {
+                const sourceValue = source[key]
+                const targetValue = target[key]
 
-            if (Object(sourceValue) === sourceValue && Object(targetValue) === targetValue) {
-                // @ts-expect-error - can't assign to generic
-                target[key] = deepMergeObjects(targetValue, sourceValue)
+                if (Object(sourceValue) === sourceValue && Object(targetValue) === targetValue) {
+                    // @ts-expect-error - can't assign to generic
+                    target[key] = deepMergeObjects(targetValue, sourceValue)
 
-                return
-            }
+                    return
+                }
 
-            // @ts-expect-error - can't assign to generic
-            target[key] = sourceValue
+                // @ts-expect-error - can't assign to generic
+                target[key] = sourceValue
         })
     })
 
     return target
 }
+
+export const copyComponentProperties = (Component: any, UnistylesComponent: any) => {
+    Object.entries(Component).forEach(([key, value]) => {
+        // Filter out the keys we don't want to copy
+        if (['$$typeof', 'render'].includes(key)) {
+            return
+        }
+
+        UnistylesComponent[key] = value
+    })
+
+    // Those are not enumerable, so we need to copy them manually
+    UnistylesComponent.displayName = Component.displayName
+    UnistylesComponent.name = Component.name
+
+    return UnistylesComponent
+}

package/src/web/convert/object/filter.ts

@@ -3,8 +3,8 @@ import { hyphenate } from '../../utils'
 import type { Filters } from '../types'
 import { getObjectStyle } from './objectStyle'
 import { normalizeColor, normalizeNumericValue } from '../utils'
-import { UnistylesRuntime } from '../../runtime'
 import { isUnistylesMq } from '../../../mq'
+import { UnistylesWeb } from '../../index'
 
 const getDropShadowStyle = (dropShadow: DropShadowValue) => {
     const { offsetX = 0, offsetY = 0, standardDeviation = 0, color = '#000' } = dropShadow
@@ -21,7 +21,7 @@ export const getFilterStyle = (filters: Array<Filters>) => {
             return []
         }
 
-        const breakpoints = Object.keys(dropShadowValue).filter(key => Object.keys(UnistylesRuntime.breakpoints).includes(key) || isUnistylesMq(key))
+        const breakpoints = Object.keys(dropShadowValue).filter(key => Object.keys(UnistylesWeb.runtime.breakpoints).includes(key) || isUnistylesMq(key))
         const breakpointsDropShadow = Object.fromEntries(breakpoints.map(breakpoint => [breakpoint, getDropShadowStyle(dropShadowValue[breakpoint])]))
 
         if (breakpoints.length === 0) {

package/src/web/convert/style.ts

@@ -1,15 +1,15 @@
 import { keyInObject } from '../utils'
 
-const SKIP_STYLES = [
+const SKIP_STYLES = new Set([
     'borderCurve',
     'elevation',
     'textAlignVertical',
     'includeFontPadding',
     'overlayColor',
     'tintColor'
-]
+])
 
-const CSS_NUMBER_KEYS = [
+const CSS_NUMBER_KEYS = new Set([
     'animationIterationCount',
     'borderImageOutset',
     'borderImageSlice',
@@ -53,8 +53,9 @@ const CSS_NUMBER_KEYS = [
     'strokeDashoffset',
     'strokeMiterlimit',
     'strokeOpacity',
-    'strokeWidth'
-]
+    'strokeWidth',
+    'aspectRatio'
+])
 
 const convertMap = {
     marginHorizontal: (value: number) => ({
@@ -124,14 +125,14 @@ const convertMap = {
 
 const convertNumber = (key: string, value: any) => {
     if (typeof value === 'number') {
-        return CSS_NUMBER_KEYS.includes(key, value) ? value : `${value}px`
+        return CSS_NUMBER_KEYS.has(key) ? value : `${value}px`
     }
 
     return value
 }
 
 export const getStyle = (key: string, value: any) => {
-    if (SKIP_STYLES.includes(key)) {
+    if (SKIP_STYLES.has(key)) {
         return {}
     }
 

package/src/web/create.ts

@@ -1,36 +1,41 @@
 import type { StyleSheetWithSuperPowers, StyleSheet } from '../types/stylesheet'
+import { UnistylesWeb } from './index'
 import { assignSecrets, error, removeInlineStyles } from './utils'
-import { UnistylesRuntime } from './runtime'
 
-const useVariants = ['useVariants', () => {}]
+type Variants = Record<string, string | boolean | undefined>
 
 export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>, id?: string) => {
     if (!id) {
         throw error('Unistyles is not initialized correctly. Please add babel plugin to your babel config.')
     }
 
-    const computedStylesheet = typeof stylesheet === 'function'
-        ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
-        : stylesheet
-
-    const addSecrets = (value: any, key: string, args?: Array<any>) => assignSecrets(value, {
+    const computedStylesheet = UnistylesWeb.registry.getComputedStylesheet(stylesheet)
+    const addSecrets = (value: any, key: string, args = undefined as Array<any> | undefined, variants = {} as Variants) => assignSecrets(value, {
         __uni__key: key,
         __uni__stylesheet: stylesheet,
         __uni__args: args,
-        __uni__refs: new Set()
+        __uni_variants: variants
     })
 
-    const styleSheetStyles = Object.entries(computedStylesheet).map(([key, value]) => {
-        if (typeof value === 'function') {
-            return [key, (...args: Array<any>) => {
-                const result = removeInlineStyles(value(...args))
+    const createStyleSheetStyles = (variants?: Variants) => {
+        const stylesEntries = Object.entries(computedStylesheet).map(([key, value]) => {
+            if (typeof value === 'function') {
+                return [key, (...args: Array<any>) => {
+                    const result = removeInlineStyles(value(...args))
 
-                return addSecrets(result, key, args)
-            }]
-        }
+                    return addSecrets(result, key, args, variants)
+                }]
+            }
 
-        return [key, addSecrets(removeInlineStyles(value), key)]
-    })
+            return [key, addSecrets(removeInlineStyles(value), key, undefined, variants)]
+        })
+
+        return Object.fromEntries(stylesEntries.concat([useVariants]))
+    }
+
+    const useVariants = ['useVariants', (variants: Variants) => {
+        return createStyleSheetStyles(variants)
+    }]
 
-    return Object.fromEntries(styleSheetStyles.concat([useVariants]))
+    return createStyleSheetStyles()
 }

package/src/web/css/core.ts

@@ -0,0 +1,58 @@
+import { getMediaQuery } from '../utils'
+import type { CSSState } from './state'
+
+export const convertToCSS = (hash: string, value: Record<string, any>, state: CSSState) => {
+    Object.entries(value).forEach(([styleKey, styleValue]) => {
+        if (styleKey[0] === '_') {
+            const pseudoClassName = styleKey.replace('_', `${hash}:`)
+
+            Object.entries(styleValue).forEach(([pseudoStyleKey, pseudoStyleValue]) => {
+                if (typeof pseudoStyleValue === 'object' && pseudoStyleValue !== null) {
+                    const allBreakpoints = Object.keys(pseudoStyleValue)
+                    Object.entries(pseudoStyleValue).forEach(([breakpointStyleKey, breakpointStyleValue]) => {
+                        const mediaQuery = getMediaQuery(pseudoStyleKey, allBreakpoints)
+
+                        state.set({
+                            mediaQuery,
+                            className: pseudoClassName,
+                            propertyKey: breakpointStyleKey,
+                            value: breakpointStyleValue,
+                        })
+                    })
+
+                    return
+                }
+
+                state.set({
+                    className: pseudoClassName,
+                    propertyKey: pseudoStyleKey,
+                    value: pseudoStyleValue,
+                })
+            })
+
+            return
+        }
+
+        if (typeof styleValue === 'object') {
+            const allBreakpoints = Object.keys(styleValue)
+            Object.entries(styleValue).forEach(([breakpointStyleKey, breakpointStyleValue]) => {
+                const mediaQuery = getMediaQuery(styleKey, allBreakpoints)
+
+                state.set({
+                    mediaQuery,
+                    className: hash,
+                    propertyKey: breakpointStyleKey,
+                    value: breakpointStyleValue,
+                })
+            })
+
+            return
+        }
+
+        state.set({
+            className: hash,
+            propertyKey: styleKey,
+            value: styleValue,
+        })
+    })
+}

package/src/web/css/index.ts

@@ -0,0 +1 @@
+export * from './state'

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