react-native-unistyles 3.0.24 → 3.1.0

package/src/types/stylesheet.ts

@@ -1,5 +1,6 @@
 import type { CSSProperties } from 'react'
 import type { BoxShadowValue, FilterFunction, ImageStyle, TextStyle, ViewStyle } from 'react-native'
+
 import type { UnistylesBreakpoints } from '../global'
 import type { UnistylesMiniRuntime } from '../specs'
 import type { Pseudo } from '../web/convert/pseudo'
@@ -15,10 +16,10 @@ export type UnistyleText = Omit<TextStyle, NestedKeys>
 export type UnistyleImage = Omit<ImageStyle, NestedKeys>
 
 type UnistyleNestedStyles = {
-    shadowOffset?: ToDeepUnistyles<ShadowOffset>,
-    textShadowOffset?: ToDeepUnistyles<ShadowOffset>,
-    transform?: Array<ToDeepUnistyles<TransformStyles>>,
-    boxShadow?: Array<ToDeepUnistyles<BoxShadowValue>> | string,
+    shadowOffset?: ToDeepUnistyles<ShadowOffset>
+    textShadowOffset?: ToDeepUnistyles<ShadowOffset>
+    transform?: Array<ToDeepUnistyles<TransformStyles>>
+    boxShadow?: Array<ToDeepUnistyles<BoxShadowValue>> | string
     filter?: Array<ToDeepUnistyles<FilterFunction>> | string
 }
 
@@ -37,14 +38,16 @@ type CompoundVariant = {
 }
 
 type VariantsAndCompoundVariants = {
-    variants?: VariantsObject,
+    variants?: VariantsObject
     compoundVariants?: Array<CompoundVariant>
 }
 
 export type ToDeepUnistyles<T> = {
-    [K in keyof T]?: T[K] | {
-        [key in BreakpointsOrMediaQueries]?: T[K]
-    }
+    [K in keyof T]?:
+        | T[K]
+        | {
+              [key in BreakpointsOrMediaQueries]?: T[K]
+          }
 }
 
 type AllAvailableStyles = UnistyleView & UnistyleText & UnistyleImage & UnistyleNestedStyles
@@ -53,19 +56,21 @@ export type AllAvailableKeys = keyof (UnistyleView & UnistyleText & UnistyleImag
 export type BreakpointsOrMediaQueries = keyof UnistylesBreakpoints | symbol
 
 type FlatUnistylesValues = {
-    [propName in AllAvailableKeys]?: AllAvailableStyles[propName] | {
-        [key in BreakpointsOrMediaQueries]?: AllAvailableStyles[propName]
-    }
+    [propName in AllAvailableKeys]?:
+        | AllAvailableStyles[propName]
+        | {
+              [key in BreakpointsOrMediaQueries]?: AllAvailableStyles[propName]
+          }
 }
 
-export type UnistylesValues = FlatUnistylesValues & {
-} & VariantsAndCompoundVariants & {
-    [propName in NestedKeys]?: UnistyleNestedStyles[propName]
-} & {
-    _web?: ToDeepUnistyles<CSSProperties> & CustomClassName & {
-        [propName in Pseudo]?: ToDeepUnistyles<CSSProperties>
+export type UnistylesValues = FlatUnistylesValues & {} & VariantsAndCompoundVariants & {
+        [propName in NestedKeys]?: UnistyleNestedStyles[propName]
+    } & {
+        _web?: ToDeepUnistyles<CSSProperties> &
+            CustomClassName & {
+                [propName in Pseudo]?: ToDeepUnistyles<CSSProperties>
+            }
     }
-}
 
 export type StyleSheet = {
     [styleName: string]: UnistylesValues | ((...args: any) => UnistylesValues)
@@ -79,6 +84,9 @@ type UseVariantsFn<T> = {
     useVariants: (variants: ExtractVariantNames<T>) => void
 }
 
-const create = <S extends StyleSheet>(stylesheet: StyleSheetWithSuperPowers<S>): (ReactNativeStyleSheet<S> & UseVariantsFn<typeof stylesheet>) => stylesheet as (ReactNativeStyleSheet<S> & UseVariantsFn<typeof stylesheet>)
+const create = <S extends StyleSheet>(
+    stylesheet: StyleSheetWithSuperPowers<S>,
+): ReactNativeStyleSheet<S> & UseVariantsFn<typeof stylesheet> =>
+    stylesheet as ReactNativeStyleSheet<S> & UseVariantsFn<typeof stylesheet>
 
 export type CreateUnistylesStyleSheet = typeof create

package/src/types/variants.ts

@@ -2,15 +2,9 @@ import type { SafeReturnType } from './common'
 
 export type ExtractVariantNames<T> = ExtractVariantKeys<SafeReturnType<T>>
 
-type ExtractVariantKeys<T> = T extends object
-    ? ExtractVariant<SafeReturnType<T[keyof T]>>
-    : never
+type ExtractVariantKeys<T> = T extends object ? ExtractVariant<SafeReturnType<T[keyof T]>> : never
 
-type HasBooleanVariants<T> = T extends Record<'true', any>
-    ? true
-    : T extends Record<'false', any>
-        ? true
-        : false
+type HasBooleanVariants<T> = T extends Record<'true', any> ? true : T extends Record<'false', any> ? true : false
 
 type ExtractSubVariantKeys<T> = T extends object
     ? HasBooleanVariants<T> extends true
@@ -18,9 +12,7 @@ type ExtractSubVariantKeys<T> = T extends object
         : keyof Omit<T, 'default'> | undefined
     : never
 
-type ExtractVariant<T> = T extends { variants: infer V }
-    ? { [key in keyof V]?: ExtractSubVariantKeys<V[key]> }
-    : never
+type ExtractVariant<T> = T extends { variants: infer V } ? { [key in keyof V]?: ExtractSubVariantKeys<V[key]> } : never
 
 export type UnistylesVariants<ST> = ST extends { useVariants: infer V }
     ? V extends (variants: infer T) => void

package/src/utils.ts

@@ -3,22 +3,20 @@ export const isDefined = <T>(value: T): value is NonNullable<T> => value !== und
 export const deepMergeObjects = <T extends Record<PropertyKey, any>>(...sources: Array<T>) => {
     const target = {} as T
 
-    sources
-        .filter(isDefined)
-        .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
         })
     })
 
@@ -36,7 +34,7 @@ export const copyComponentProperties = (Component: any, UnistylesComponent: any)
     })
 
     UnistylesComponent.displayName = Component.displayName
-    
+
     return UnistylesComponent
 }
 
@@ -59,8 +57,10 @@ export const parseMq = (mq: string) => {
 }
 
 export const isValidMq = (parsedMQ: ReturnType<typeof parseMq>) => {
-    const isWidthValid = parsedMQ.minWidth === undefined || parsedMQ.maxWidth === undefined || parsedMQ.minWidth <= parsedMQ.maxWidth
-    const isHeightValid = parsedMQ.minHeight === undefined || parsedMQ.maxHeight === undefined || parsedMQ.minHeight <= parsedMQ.maxHeight
+    const isWidthValid =
+        parsedMQ.minWidth === undefined || parsedMQ.maxWidth === undefined || parsedMQ.minWidth <= parsedMQ.maxWidth
+    const isHeightValid =
+        parsedMQ.minHeight === undefined || parsedMQ.maxHeight === undefined || parsedMQ.minHeight <= parsedMQ.maxHeight
 
     return isWidthValid && isHeightValid
 }

package/src/web/convert/index.ts

@@ -1,6 +1,7 @@
 import type { UnistylesValues } from '../../types'
-import { deepMergeObjects } from '../../utils'
 import type { UnistylesRuntime } from '../runtime'
+
+import { deepMergeObjects } from '../../utils'
 import { getBoxShadow, getFilterStyle, getTransformStyle } from './object'
 import { isPseudo } from './pseudo'
 import { getBoxShadowStyle, getTextShadowStyle } from './shadow'
@@ -15,7 +16,10 @@ export const convertUnistyles = (value: UnistylesValues, runtime: UnistylesRunti
 
     const stylesArray = Object.entries(value).flatMap(([unistylesKey, unistylesValue]) => {
         // Keys to omit
-        if (['_classNames', '_web', 'variants', 'compoundVariants', 'uni__dependencies'].includes(unistylesKey) || unistylesKey.startsWith('unistyles_')) {
+        if (
+            ['_classNames', '_web', 'variants', 'compoundVariants', 'uni__dependencies'].includes(unistylesKey) ||
+            unistylesKey.startsWith('unistyles_')
+        ) {
             return []
         }
 

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

@@ -1,4 +1,5 @@
 import type { BoxShadowValue } from 'react-native'
+
 import { deepMergeObjects } from '../../../utils'
 import { keyInObject } from '../../utils'
 import { normalizeNumericValue } from '../utils'
@@ -11,43 +12,47 @@ const createBoxShadowValue = (style: BoxShadowValue) => {
 
 export const getBoxShadow = (boxShadow: Array<BoxShadowValue>) => {
     const breakpoints = new Set<string>()
-    boxShadow.forEach(shadow => {
+    boxShadow.forEach((shadow) => {
         const [key] = Object.keys(shadow)
         const value = shadow[key as keyof BoxShadowValue]
 
         // Breakpoints
         if (typeof value === 'object') {
-            Object.keys(value).forEach(breakpoint => breakpoints.add(breakpoint))
+            Object.keys(value).forEach((breakpoint) => breakpoints.add(breakpoint))
         }
     })
 
     if (breakpoints.size === 0) {
-        const boxShadowStyle = Object.fromEntries(boxShadow.map(shadow => {
-            const [key] = Object.keys(shadow)
-            return [key, shadow[key as keyof BoxShadowValue]]
-        })) as BoxShadowValue
+        const boxShadowStyle = Object.fromEntries(
+            boxShadow.map((shadow) => {
+                const [key] = Object.keys(shadow)
+                return [key, shadow[key as keyof BoxShadowValue]]
+            }),
+        ) as BoxShadowValue
 
         return {
-            boxShadow: createBoxShadowValue(boxShadowStyle)
+            boxShadow: createBoxShadowValue(boxShadowStyle),
         }
     }
 
-    const breakpointStyles = Array.from(breakpoints).map(breakpoint => {
-        const styles = Object.fromEntries(boxShadow.map(shadow => {
-            const [key] = Object.keys(shadow)
-            const value = shadow[key as keyof BoxShadowValue]
+    const breakpointStyles = Array.from(breakpoints).map((breakpoint) => {
+        const styles = Object.fromEntries(
+            boxShadow.map((shadow) => {
+                const [key] = Object.keys(shadow)
+                const value = shadow[key as keyof BoxShadowValue]
 
-            if (typeof value === 'object' && keyInObject(value, breakpoint)) {
-                return [key, value[breakpoint]]
-            }
+                if (typeof value === 'object' && keyInObject(value, breakpoint)) {
+                    return [key, value[breakpoint]]
+                }
 
-            return [key, value]
-        })) as BoxShadowValue
+                return [key, value]
+            }),
+        ) as BoxShadowValue
 
         return {
             [breakpoint]: {
-                boxShadow: createBoxShadowValue(styles)
-            }
+                boxShadow: createBoxShadowValue(styles),
+            },
         }
     })
 

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

@@ -1,8 +1,10 @@
 import type { DropShadowValue } from 'react-native'
-import { isUnistylesMq } from '../../../utils'
+
 import type { UnistylesRuntime } from '../../runtime'
-import { hyphenate } from '../../utils'
 import type { Filters } from '../types'
+
+import { isUnistylesMq } from '../../../utils'
+import { hyphenate } from '../../utils'
 import { normalizeColor, normalizeNumericValue } from '../utils'
 import { getObjectStyle } from './objectStyle'
 
@@ -13,27 +15,42 @@ const getDropShadowStyle = (dropShadow: DropShadowValue) => {
 }
 
 export const getFilterStyle = (filters: Array<Filters>, runtime: UnistylesRuntime) => {
-    const restFilters = filters.filter(filter => Object.keys(filter)[0] !== 'dropShadow')
+    const restFilters = filters.filter((filter) => Object.keys(filter)[0] !== 'dropShadow')
     const dropShadow = (() => {
-        const dropShadowValue = filters.find(filter => Object.keys(filter)[0] === 'dropShadow')?.dropShadow as Record<string, any>
+        const dropShadowValue = filters.find((filter) => Object.keys(filter)[0] === 'dropShadow')?.dropShadow as Record<
+            string,
+            any
+        >
 
         if (typeof dropShadowValue !== 'object') {
             return []
         }
 
-        const breakpoints = Object.keys(dropShadowValue).filter(key => Object.keys(runtime.breakpoints).includes(key) || isUnistylesMq(key))
-        const breakpointsDropShadow = Object.fromEntries(breakpoints.map(breakpoint => [breakpoint, getDropShadowStyle(dropShadowValue[breakpoint])]))
+        const breakpoints = Object.keys(dropShadowValue).filter(
+            (key) => Object.keys(runtime.breakpoints).includes(key) || isUnistylesMq(key),
+        )
+        const breakpointsDropShadow = Object.fromEntries(
+            breakpoints.map((breakpoint) => [breakpoint, getDropShadowStyle(dropShadowValue[breakpoint])]),
+        )
 
         if (breakpoints.length === 0) {
-            return [{
-                dropShadow: getDropShadowStyle(dropShadowValue as DropShadowValue)
-            }]
+            return [
+                {
+                    dropShadow: getDropShadowStyle(dropShadowValue as DropShadowValue),
+                },
+            ]
         }
 
-        return [{
-            dropShadow: breakpointsDropShadow
-        }]
+        return [
+            {
+                dropShadow: breakpointsDropShadow,
+            },
+        ]
     })()
 
-    return getObjectStyle([...restFilters, ...dropShadow], 'filter', (key, value) => `${hyphenate(key)}(${normalizeNumericValue(value as number | string)})`)
+    return getObjectStyle(
+        [...restFilters, ...dropShadow],
+        'filter',
+        (key, value) => `${hyphenate(key)}(${normalizeNumericValue(value as number | string)})`,
+    )
 }

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,
+                }),
+            },
         }
     })