react-native-unistyles 3.0.24 → 3.1.0

package/src/web/convert/style.ts

@@ -6,7 +6,7 @@ const SKIP_STYLES = new Set([
     'textAlignVertical',
     'includeFontPadding',
     'overlayColor',
-    'tintColor'
+    'tintColor',
 ])
 
 const CSS_NUMBER_KEYS = new Set([
@@ -54,73 +54,73 @@ const CSS_NUMBER_KEYS = new Set([
     'strokeMiterlimit',
     'strokeOpacity',
     'strokeWidth',
-    'aspectRatio'
+    'aspectRatio',
 ])
 
 const convertMap = {
     marginHorizontal: (value: number) => ({
-        marginInline: value
+        marginInline: value,
     }),
     marginVertical: (value: number) => ({
-        marginBlock: value
+        marginBlock: value,
     }),
     paddingHorizontal: (value: number) => ({
-        paddingInline: value
+        paddingInline: value,
     }),
     paddingVertical: (value: number) => ({
-        paddingBlock: value
+        paddingBlock: value,
     }),
     writingDirection: (value: string) => ({
-        direction: value
+        direction: value,
     }),
     borderBottomEndRadius: (value: number) => ({
-        borderBottomRightRadius: value
+        borderBottomRightRadius: value,
     }),
     borderBottomStartRadius: (value: number) => ({
-        borderBottomLeftRadius: value
+        borderBottomLeftRadius: value,
     }),
     borderEndColor: (value: string) => ({
-        borderInlineEndColor: value
+        borderInlineEndColor: value,
     }),
     borderStartColor: (value: string) => ({
-        borderInlineStartColor: value
+        borderInlineStartColor: value,
     }),
     borderTopEndRadius: (value: number) => ({
-        borderTopRightRadius: value
+        borderTopRightRadius: value,
     }),
     borderTopStartRadius: (value: number) => ({
-        borderTopLeftRadius: value
+        borderTopLeftRadius: value,
     }),
     borderEndWidth: (value: number) => ({
-        borderInlineEndWidth: value
+        borderInlineEndWidth: value,
     }),
     borderStartWidth: (value: number) => ({
-        borderInlineStartWidth: value
+        borderInlineStartWidth: value,
     }),
     end: (value: number) => ({
-        right: value
+        right: value,
     }),
     start: (value: number) => ({
-        left: value
+        left: value,
     }),
     marginEnd: (value: number) => ({
-        marginRight: value
+        marginRight: value,
     }),
     marginStart: (value: number) => ({
-        marginLeft: value
+        marginLeft: value,
     }),
     paddingEnd: (value: number) => ({
-        paddingRight: value
+        paddingRight: value,
     }),
     paddingStart: (value: number) => ({
-        paddingLeft: value
+        paddingLeft: value,
     }),
     transformMatrix: (value: Array<number>) => ({
-        transform: `matrix(${value.join(', ')})`
+        transform: `matrix(${value.join(', ')})`,
     }),
     resizeMode: (value: string) => ({
-        backgroundSize: value
-    })
+        backgroundSize: value,
+    }),
 } as Record<PropertyKey, (value: any) => Record<string, any>>
 
 const convertNumber = (key: string, value: any) => {
@@ -141,6 +141,6 @@ export const getStyle = (key: string, value: any) => {
     }
 
     return {
-        [key]: convertNumber(key, value)
+        [key]: convertNumber(key, value),
     }
 }

package/src/web/convert/types.ts

@@ -1,16 +1,17 @@
 import type { FilterFunction, TextStyle, ViewStyle } from 'react-native'
+
 import type { UnionToIntersection } from '../../types'
 import type { ToDeepUnistyles } from '../../types/stylesheet'
 
-export type ShadowOffset = ToDeepUnistyles<{ width: number, height: number }>
+export type ShadowOffset = ToDeepUnistyles<{ width: number; height: number }>
 
 export const TEXT_SHADOW_STYLES = ['textShadowColor', 'textShadowOffset', 'textShadowRadius'] as const
 
-export type TextShadow = Required<Pick<TextStyle, typeof TEXT_SHADOW_STYLES[number]>>
+export type TextShadow = Required<Pick<TextStyle, (typeof TEXT_SHADOW_STYLES)[number]>>
 
 export const BOX_SHADOW_STYLES = ['shadowColor', 'shadowRadius', 'shadowOpacity', 'shadowOffset'] as const
 
-export type BoxShadow = Required<Pick<ViewStyle, typeof BOX_SHADOW_STYLES[number]>>
+export type BoxShadow = Required<Pick<ViewStyle, (typeof BOX_SHADOW_STYLES)[number]>>
 
 export type AllShadow = TextShadow & BoxShadow
 

package/src/web/convert/utils.ts

@@ -1,22 +1,28 @@
+import type { BoxShadowValue } from 'react-native'
+
 // based on react-native-web normalizer
 // https://github.com/necolas/react-native-web
 /// <reference path="module.d.ts" />
 import normalizeColors from '@react-native/normalize-colors'
-import type { BoxShadowValue } from 'react-native'
+
 import type { TransformStyles } from '../../types/core'
+
 import { type AllShadow, type AllShadowKeys, BOX_SHADOW_STYLES, type Filters, TEXT_SHADOW_STYLES } from './types'
 
-export const isTransform = (key: string, value: any): value is Array<TransformStyles> => key === 'transform' && Array.isArray(value)
+export const isTransform = (key: string, value: any): value is Array<TransformStyles> =>
+    key === 'transform' && Array.isArray(value)
 
-export const isTextShadow = (key: string) => TEXT_SHADOW_STYLES.includes(key as typeof TEXT_SHADOW_STYLES[number])
+export const isTextShadow = (key: string) => TEXT_SHADOW_STYLES.includes(key as (typeof TEXT_SHADOW_STYLES)[number])
 
-export const isShadow = (key: string) => BOX_SHADOW_STYLES.includes(key as typeof BOX_SHADOW_STYLES[number])
+export const isShadow = (key: string) => BOX_SHADOW_STYLES.includes(key as (typeof BOX_SHADOW_STYLES)[number])
 
 export const isFilter = (key: string, value: any): value is Array<Filters> => key === 'filter' && Array.isArray(value)
 
-export const isBoxShadow = (key: string, value: any): value is Array<BoxShadowValue> => key === 'boxShadow' && Array.isArray(value)
+export const isBoxShadow = (key: string, value: any): value is Array<BoxShadowValue> =>
+    key === 'boxShadow' && Array.isArray(value)
 
-export const normalizeNumericValue = (value: number | string) => value && typeof value === 'number' ? `${value}px` : value
+export const normalizeNumericValue = (value: number | string) =>
+    value && typeof value === 'number' ? `${value}px` : value
 
 export const normalizeColor = (color: string, opacity = 1) => {
     // If the opacity is 1 there's no need to normalize the color
@@ -36,8 +42,8 @@ export const normalizeColor = (color: string, opacity = 1) => {
     if (hex.length === 8) {
         const [r = 0, g = 0, b = 0, a = 1] = hex
             .split(/(?=(?:..)*$)/)
-            .map(x => Number.parseInt(x, 16))
-            .filter(num => !Number.isNaN(num))
+            .map((x) => Number.parseInt(x, 16))
+            .filter((num) => !Number.isNaN(num))
 
         return `rgba(${r},${g},${b},${(a / 255) * opacity})`
     }
@@ -45,7 +51,11 @@ export const normalizeColor = (color: string, opacity = 1) => {
     return color
 }
 
-export const extractShadowValue = <TKey extends AllShadowKeys>(key: TKey, breakpoint: string, styles: any): AllShadow[TKey] => {
+export const extractShadowValue = <TKey extends AllShadowKeys>(
+    key: TKey,
+    breakpoint: string,
+    styles: any,
+): AllShadow[TKey] => {
     const value = styles[key]
 
     if (key === 'textShadowOffset' || key === 'shadowOffset') {
@@ -53,7 +63,7 @@ export const extractShadowValue = <TKey extends AllShadowKeys>(key: TKey, breakp
 
         return {
             width: typeof width === 'object' ? width[breakpoint] : width,
-            height: typeof height === 'object' ? height[breakpoint] : height
+            height: typeof height === 'object' ? height[breakpoint] : height,
         } as AllShadow[TKey]
     }
 

package/src/web/create.ts

@@ -1,14 +1,11 @@
 import type { StyleSheet, StyleSheetWithSuperPowers } from '../types/stylesheet'
+
 import * as unistyles from './services'
-import { assignSecrets, error, isServer, removeInlineStyles } from './utils'
+import { assignSecrets, isServer, removeInlineStyles } from './utils'
 
 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.')
-    }
-
+export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
     // For SSR
     if (!unistyles.services.state.isInitialized && !isServer()) {
         const config = window?.__UNISTYLES_STATE__?.config
@@ -17,21 +14,30 @@ export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>, id?: s
     }
 
     const computedStylesheet = unistyles.services.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,
-        __stylesheetVariants: variants
-    })
+    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,
+            __stylesheetVariants: variants,
+        })
 
     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, variants)
-                }]
+                return [
+                    key,
+                    (...args: Array<any>) => {
+                        const result = removeInlineStyles(value(...args))
+
+                        return addSecrets(result, key, args, variants)
+                    },
+                ]
             }
 
             return [key, addSecrets(removeInlineStyles(value), key, undefined, variants)]
@@ -40,9 +46,12 @@ export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>, id?: s
         return Object.fromEntries(stylesEntries.concat([useVariants]))
     }
 
-    const useVariants = ['useVariants', (variants: Variants) => {
-        return createStyleSheetStyles(variants)
-    }]
+    const useVariants = [
+        'useVariants',
+        (variants: Variants) => {
+            return createStyleSheetStyles(variants)
+        },
+    ]
 
     return createStyleSheetStyles()
 }

package/src/web/css/core.ts

@@ -1,6 +1,7 @@
+import type { CSSState } from './state'
+
 import { isPseudoClass } from '../convert/pseudo'
 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]) => {

package/src/web/css/state.ts

@@ -1,6 +1,7 @@
 import type { UnistylesValues } from '../../types'
-import { convertUnistyles } from '../convert'
 import type { UnistylesServices } from '../types'
+
+import { convertUnistyles } from '../convert'
 import { hyphenate, isServer } from '../utils'
 import { convertToCSS } from './core'
 
@@ -12,7 +13,7 @@ type SetProps = {
     propertyKey: string
     value: any
 }
-type HydrateState = Array<[ string, Array<[ string, Array<[ string, 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)
@@ -76,7 +77,9 @@ export class CSSState {
 
         const convertToCSS = (key: string, value: any, prev = '-') => {
             if (typeof value === 'object' && value !== null) {
-                Object.entries(value).forEach(([nestedKey, nestedValue]) => convertToCSS(nestedKey, nestedValue, `${prev}-${key}`))
+                Object.entries(value).forEach(([nestedKey, nestedValue]) =>
+                    convertToCSS(nestedKey, nestedValue, `${prev}-${key}`),
+                )
             }
 
             if (typeof value === 'string') {
@@ -94,10 +97,10 @@ export class CSSState {
     }
 
     remove = (hash: string) => {
-        this.mainMap.forEach(styles => {
+        this.mainMap.forEach((styles) => {
             styles.delete(hash)
         })
-        this.mqMap.forEach(styles => {
+        this.mqMap.forEach((styles) => {
             styles.delete(hash)
         })
         this.recreate()
@@ -153,9 +156,9 @@ export class CSSState {
                             className,
                             Array.from(style.entries()).map(([property, value]) => {
                                 return [property, value]
-                            })
+                            }),
                         ]
-                    })
+                    }),
                 ]
             }) as HydrateState
         }
@@ -177,7 +180,7 @@ export class CSSState {
                             propertyKey,
                             value,
                             mediaQuery,
-                            isMq
+                            isMq,
                         })
                     })
                 })

package/src/web/css/utils.ts

@@ -1,6 +1,7 @@
-import { hyphenate } from '../utils'
 import type { CSSState } from './state'
 
+import { hyphenate } from '../utils'
+
 export const safeGetMap = (map: Map<string, Map<string, any>>, key: string) => {
     const nextLevelMap = map.get(key)
 

package/src/web/index.ts

@@ -1,13 +1,16 @@
 import { StyleSheet as RNStyleSheet } from 'react-native'
+
 import type { UnistylesShadowRegistry as NativeUnistylesShadowRegistry } from '../specs/ShadowRegistry'
 import type { StyleSheet as NativeStyleSheet } from '../specs/StyleSheet'
 import type { Runtime as NativeUnistylesRuntime } from '../specs/UnistylesRuntime'
+
 import { create } from './create'
 import * as unistyles from './services'
 
 export const StyleSheet = {
     configure: unistyles.services.state.init,
     create: create,
+    addChangeListener: unistyles.services.listener.addChangeListener,
     absoluteFill: {
         position: 'absolute',
         left: 0,
@@ -20,15 +23,15 @@ export const StyleSheet = {
         left: 0,
         top: 0,
         right: 0,
-        bottom: 0
+        bottom: 0,
     },
     compose: (a: object, b: object) => RNStyleSheet.compose(a, b),
     flatten: (...styles: Array<object>) => RNStyleSheet.flatten(...styles),
-    hairlineWidth: 1
+    hairlineWidth: 1,
 } as unknown as typeof NativeStyleSheet
 
 export const UnistylesRuntime = unistyles.services.runtime as unknown as typeof NativeUnistylesRuntime
-export const UnistylesShadowRegistry = unistyles.services.shadowRegistry as unknown as typeof NativeUnistylesShadowRegistry
+export const UnistylesShadowRegistry = unistyles.services
+    .shadowRegistry as unknown as typeof NativeUnistylesShadowRegistry
 
 export * from './mock'
-

package/src/web/listener.ts

@@ -1,18 +1,51 @@
-import { UnistyleDependency } from '../specs/NativePlatform'
 import type { UnistylesServices } from './types'
 
+import { UnistyleDependency } from '../specs/NativePlatform'
+
 type Listener = (dependency: UnistyleDependency) => void
+type PublicListener = (dependencies: Array<UnistyleDependency>) => void
 
 export class UnistylesListener {
     private isInitialized = false
     private listeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<Listener>())
-    private stylesheetListeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<Listener>())
+    private stylesheetListeners = Array.from(
+        { length: Object.keys(UnistyleDependency).length / 2 },
+        () => new Set<Listener>(),
+    )
+    private changeListeners = new Set<PublicListener>()
 
     constructor(private services: UnistylesServices) {}
 
+    emitChanges = (dependencies: Array<UnistyleDependency>) => {
+        for (const dependency of dependencies) {
+            const stylesheetListeners = this.stylesheetListeners[dependency] ?? []
+
+            for (const listener of stylesheetListeners) {
+                listener(dependency)
+            }
+
+            const listeners = this.listeners[dependency] ?? []
+
+            for (const listener of listeners) {
+                listener(dependency)
+            }
+        }
+
+        for (const listener of this.changeListeners) {
+            listener(dependencies.slice())
+        }
+    }
+
     emitChange = (dependency: UnistyleDependency) => {
-        this.stylesheetListeners[dependency]?.forEach(listener => listener(dependency))
-        this.listeners[dependency]?.forEach(listener => listener(dependency))
+        this.emitChanges([dependency])
+    }
+
+    addChangeListener = (listener: PublicListener) => {
+        this.changeListeners.add(listener)
+
+        return () => {
+            this.changeListeners.delete(listener)
+        }
     }
 
     initListeners = () => {
@@ -22,29 +55,39 @@ export class UnistylesListener {
 
         this.isInitialized = true
 
-        this.services.runtime.darkMedia?.addEventListener('change', event => {
+        this.services.runtime.darkMedia?.addEventListener('change', (event) => {
             if (!event.matches) {
                 return
             }
 
-            this.emitChange(UnistyleDependency.ColorScheme)
-
             if (this.services.runtime.hasAdaptiveThemes) {
-                this.emitChange(UnistyleDependency.Theme)
-                this.emitChange(UnistyleDependency.ThemeName)
+                this.emitChanges([
+                    UnistyleDependency.ColorScheme,
+                    UnistyleDependency.Theme,
+                    UnistyleDependency.ThemeName,
+                ])
+
+                return
             }
+
+            this.emitChange(UnistyleDependency.ColorScheme)
         })
-        this.services.runtime.lightMedia?.addEventListener('change', event => {
+        this.services.runtime.lightMedia?.addEventListener('change', (event) => {
             if (!event.matches) {
                 return
             }
 
-            this.emitChange(UnistyleDependency.ColorScheme)
-
             if (this.services.runtime.hasAdaptiveThemes) {
-                this.emitChange(UnistyleDependency.Theme)
-                this.emitChange(UnistyleDependency.ThemeName)
+                this.emitChanges([
+                    UnistyleDependency.ColorScheme,
+                    UnistyleDependency.Theme,
+                    UnistyleDependency.ThemeName,
+                ])
+
+                return
             }
+
+            this.emitChange(UnistyleDependency.ColorScheme)
         })
 
         window.addEventListener('orientationchange', () => this.emitChange(UnistyleDependency.Orientation))
@@ -52,18 +95,18 @@ export class UnistylesListener {
     }
 
     addListeners = (dependencies: Array<UnistyleDependency>, listener: Listener) => {
-        dependencies.forEach(dependency => this.listeners[dependency]?.add(listener))
+        dependencies.forEach((dependency) => this.listeners[dependency]?.add(listener))
 
         return () => {
-            dependencies.forEach(dependency => this.listeners[dependency]?.delete(listener))
+            dependencies.forEach((dependency) => this.listeners[dependency]?.delete(listener))
         }
     }
 
     addStylesheetListeners = (dependencies: Array<UnistyleDependency>, listener: Listener) => {
-        dependencies.forEach(dependency => this.stylesheetListeners[dependency]?.add(listener))
+        dependencies.forEach((dependency) => this.stylesheetListeners[dependency]?.add(listener))
 
         return () => {
-            dependencies.forEach(dependency => this.stylesheetListeners[dependency]?.delete(listener))
+            dependencies.forEach((dependency) => this.stylesheetListeners[dependency]?.delete(listener))
         }
     }
 }

package/src/web/mock.ts

@@ -9,7 +9,7 @@ export const StatusBar: StatusBarSpec = {
     equals: () => true,
     toString: () => 'StatusBar',
     __type: 'web',
-    name: 'StatusBar'
+    name: 'StatusBar',
 }
 
 export const NavigationBar: NavigationBarSpec = {
@@ -20,5 +20,5 @@ export const NavigationBar: NavigationBarSpec = {
     dispose: () => {},
     toString: () => 'NavigationBar',
     __type: 'web',
-    name: 'NavigationBar'
+    name: 'NavigationBar',
 }

package/src/web/registry.ts

@@ -1,8 +1,9 @@
 import type { UnistyleDependency, UnistylesMiniRuntime } from '../specs'
 import type { UnistylesTheme, UnistylesValues } from '../types'
 import type { StyleSheet, StyleSheetWithSuperPowers } from '../types/stylesheet'
-import { CSSState } from './css'
 import type { UnistylesServices } from './types'
+
+import { CSSState } from './css'
 import { error, extractUnistyleDependencies, generateHash } from './utils'
 
 export class UnistylesRegistry {
@@ -26,7 +27,9 @@ export class UnistylesRegistry {
             const scopedTheme = this.services.runtime.getTheme(scopedThemeName)
 
             if (!scopedTheme) {
-                throw error(`Unistyles: You're trying to use scoped theme '${scopedThemeName}' but it wasn't registered.`)
+                throw error(
+                    `Unistyles: You're trying to use scoped theme '${scopedThemeName}' but it wasn't registered.`,
+                )
             }
 
             return stylesheet(scopedTheme, this.services.runtime.miniRuntime)
@@ -38,9 +41,12 @@ export class UnistylesRegistry {
             return computedStylesheet
         }
 
-        const currentTheme = this.services.runtime.getTheme(this.services.runtime.themeName, this.services.state.CSSVars)
+        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))
+        const dependencies = Object.values(createdStylesheet).flatMap((value) => extractUnistyleDependencies(value))
 
         this.addDependenciesToStylesheet(stylesheet, dependencies)
         this.stylesheets.set(stylesheet, createdStylesheet)
@@ -48,17 +54,20 @@ export class UnistylesRegistry {
         return createdStylesheet
     }
 
-    addDependenciesToStylesheet = (stylesheet: (theme: UnistylesTheme, miniRuntime: UnistylesMiniRuntime) => StyleSheet, dependencies: Array<UnistyleDependency>) => {
+    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))
+        dependencies.forEach((dependency) => dependenciesMap.add(dependency))
 
         const dispose = this.services.listener.addStylesheetListeners(Array.from(dependenciesMap), () => {
             const newComputedStylesheet = stylesheet(
                 this.services.runtime.getTheme(this.services.runtime.themeName, this.services.state.CSSVars),
-                this.services.runtime.miniRuntime
+                this.services.runtime.miniRuntime,
             )
 
             this.stylesheets.set(stylesheet, newComputedStylesheet)
@@ -100,9 +109,7 @@ export class UnistylesRegistry {
 
     add = (value: UnistylesValues, forChild?: boolean) => {
         const generatedHash = generateHash(value)
-        const hash = forChild
-            ? `${generatedHash} > *`
-            : generatedHash
+        const hash = forChild ? `${generatedHash} > *` : generatedHash
 
         if (!this.stylesCache.has(hash)) {
             this.applyStyles(hash, value)