react-native-unistyles 3.0.23 → 3.1.0

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

@@ -4,24 +4,29 @@ import { keyInObject } from '../../utils'
 type Styles = Record<string, any>
 type Normalize<TStyles extends Styles> = (key: keyof TStyles, value: TStyles[keyof TStyles]) => any
 
-const createStylesValue = <TStyles extends Styles>(styles: Array<TStyles>, normalize: Normalize<TStyles>) => styles
-    .map(style => {
-        const [key] = Object.keys(style)
+const createStylesValue = <TStyles extends Styles>(styles: Array<TStyles>, normalize: Normalize<TStyles>) =>
+    styles
+        .map((style) => {
+            const [key] = Object.keys(style)
 
-        if (!key) {
-            return undefined
-        }
+            if (!key) {
+                return undefined
+            }
 
-        return normalize(key, style[key])
-    })
-    .filter(Boolean)
-    .join(' ')
+            return normalize(key, style[key])
+        })
+        .filter(Boolean)
+        .join(' ')
 
-export const getObjectStyle = <TStyles extends Styles>(styles: Array<TStyles>, styleKey: string, normalize: Normalize<TStyles>) => {
+export const getObjectStyle = <TStyles extends Styles>(
+    styles: Array<TStyles>,
+    styleKey: string,
+    normalize: Normalize<TStyles>,
+) => {
     const breakpoints = new Set<string>()
     const normalStyles: Array<TStyles> = []
 
-    styles.forEach(style => {
+    styles.forEach((style) => {
         const [property] = Object.keys(style)
 
         if (!property) {
@@ -31,7 +36,7 @@ export const getObjectStyle = <TStyles extends Styles>(styles: Array<TStyles>, s
         const value = style[property]
 
         if (typeof value === 'object' && !Array.isArray(value)) {
-            Object.keys(value ?? {}).forEach(breakpoint => breakpoints.add(breakpoint))
+            Object.keys(value ?? {}).forEach((breakpoint) => breakpoints.add(breakpoint))
 
             return
         }
@@ -39,8 +44,8 @@ export const getObjectStyle = <TStyles extends Styles>(styles: Array<TStyles>, s
         normalStyles.push(style)
     })
 
-    const breakpointStyles = Array.from(breakpoints).flatMap(breakpoint => {
-        const stylesPerBreakpoint = styles.flatMap(style => {
+    const breakpointStyles = Array.from(breakpoints).flatMap((breakpoint) => {
+        const stylesPerBreakpoint = styles.flatMap((style) => {
             const [property] = Object.keys(style)
 
             if (!property) {
@@ -56,14 +61,19 @@ export const getObjectStyle = <TStyles extends Styles>(styles: Array<TStyles>, s
             return []
         }) as Array<TStyles>
 
-        return [{
-            [breakpoint]: {
-                [styleKey]: createStylesValue(stylesPerBreakpoint, normalize)
-            }
-        }]
+        return [
+            {
+                [breakpoint]: {
+                    [styleKey]: createStylesValue(stylesPerBreakpoint, normalize),
+                },
+            },
+        ]
     })
 
-    return deepMergeObjects<Record<string, any>>({
-        [styleKey]: createStylesValue(normalStyles, normalize)
-    }, ...breakpointStyles)
+    return deepMergeObjects<Record<string, any>>(
+        {
+            [styleKey]: createStylesValue(normalStyles, normalize),
+        },
+        ...breakpointStyles,
+    )
 }

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

@@ -1,4 +1,5 @@
 import type { TransformStyles } from '../../../types/core'
+
 import { normalizeNumericValue } from '../utils'
 import { getObjectStyle } from './objectStyle'
 
@@ -14,11 +15,12 @@ const normalizeTransform = (key: string, value: any) => {
     return value
 }
 
-export const getTransformStyle = (transforms: Array<TransformStyles>) => getObjectStyle(transforms, 'transform', (key, value) => {
-    switch(key) {
-        case 'matrix':
-            return `${key}(${(value as Array<number>).join(',')})`
-        default:
-            return `${key}(${normalizeTransform(key, value)})`
-    }
-})
+export const getTransformStyle = (transforms: Array<TransformStyles>) =>
+    getObjectStyle(transforms, 'transform', (key, value) => {
+        switch (key) {
+            case 'matrix':
+                return `${key}(${(value as Array<number>).join(',')})`
+            default:
+                return `${key}(${normalizeTransform(key, value)})`
+        }
+    })

package/src/web/convert/pseudo.ts

@@ -101,8 +101,8 @@ type AddDynamicSelector<T extends string> = T extends `${infer U}(` ? `${U}(${st
 
 export type Pseudo = AddDynamicSelector<(typeof pseudoClasses)[number] | (typeof pseudoElements)[number]>
 
-export const isPseudoClass = (selector: string) => pseudoClasses.some(pseudo => selector.startsWith(pseudo))
+export const isPseudoClass = (selector: string) => pseudoClasses.some((pseudo) => selector.startsWith(pseudo))
 
-export const isPseudoElement = (selector: string) => pseudoElements.some(pseudo => selector.startsWith(pseudo))
+export const isPseudoElement = (selector: string) => pseudoElements.some((pseudo) => selector.startsWith(pseudo))
 
 export const isPseudo = (selector: string) => isPseudoClass(selector) || isPseudoElement(selector)

package/src/web/convert/shadow/boxShadow.ts

@@ -19,12 +19,12 @@ export const getBoxShadowStyle = (styles: Record<string, any>) => {
     // If no breakpoints were used return styles without media queries
     if (breakpoints.length === 0) {
         return {
-            boxShadow: createBoxShadowValue(styles as BoxShadow)
+            boxShadow: createBoxShadowValue(styles as BoxShadow),
         }
     }
 
     // Create boxShadow for each breakpoint
-    const breakpointStyles = breakpoints.map(breakpoint => {
+    const breakpointStyles = breakpoints.map((breakpoint) => {
         const color = extractShadowValue('shadowColor', breakpoint, styles)
         const { width, height } = extractShadowValue('shadowOffset', breakpoint, styles)
         const radius = extractShadowValue('shadowRadius', breakpoint, styles)
@@ -36,12 +36,12 @@ export const getBoxShadowStyle = (styles: Record<string, any>) => {
                     shadowColor: color,
                     shadowOffset: {
                         width,
-                        height
+                        height,
                     },
                     shadowRadius: radius,
-                    shadowOpacity: opacity
-                })
-            }
+                    shadowOpacity: opacity,
+                }),
+            },
         }
     })
 

package/src/web/convert/shadow/getShadowBreakpoints.ts

@@ -3,7 +3,7 @@ import type { ShadowOffset } from '../types'
 export const getShadowBreakpoints = (shadowProperties: ReadonlyArray<string>, styles: Record<string, any>) => {
     const breakpoints = new Set<string>()
 
-    shadowProperties.forEach(key => {
+    shadowProperties.forEach((key) => {
         const value = styles[key]
 
         if (typeof value !== 'object') {
@@ -15,19 +15,19 @@ export const getShadowBreakpoints = (shadowProperties: ReadonlyArray<string>, st
 
             // If shadowOffset.width has breakpoints
             if (typeof width === 'object') {
-                Object.keys(width).forEach(breakpoint => breakpoints.add(breakpoint))
+                Object.keys(width).forEach((breakpoint) => breakpoints.add(breakpoint))
             }
 
             // If shadowOffset.height has breakpoints
             if (typeof height === 'object') {
-                Object.keys(height).forEach(breakpoint => breakpoints.add(breakpoint))
+                Object.keys(height).forEach((breakpoint) => breakpoints.add(breakpoint))
             }
 
             return
         }
 
         // Collect regular breakpoints
-        Object.keys(value).forEach(breakpoint => breakpoints.add(breakpoint))
+        Object.keys(value).forEach((breakpoint) => breakpoints.add(breakpoint))
     })
 
     return Array.from(breakpoints)

package/src/web/convert/shadow/textShadow.ts

@@ -19,12 +19,12 @@ export const getTextShadowStyle = (styles: Record<string, any>) => {
     // If no breakpoints were used return styles without media queries
     if (breakpoints.length === 0) {
         return {
-            textShadow: createTextShadowValue(styles as TextShadow)
+            textShadow: createTextShadowValue(styles as TextShadow),
         }
     }
 
     // Create textShadow for each breakpoint
-    const breakpointStyles = breakpoints.map(breakpoint => {
+    const breakpointStyles = breakpoints.map((breakpoint) => {
         const color = extractShadowValue('textShadowColor', breakpoint, styles)
         const { width, height } = extractShadowValue('textShadowOffset', breakpoint, styles)
         const radius = extractShadowValue('textShadowRadius', breakpoint, styles)
@@ -35,11 +35,11 @@ export const getTextShadowStyle = (styles: Record<string, any>) => {
                     textShadowColor: color,
                     textShadowOffset: {
                         width,
-                        height
+                        height,
                     },
-                    textShadowRadius: radius
-                })
-            }
+                    textShadowRadius: radius,
+                }),
+            },
         }
     })
 

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'
-