react-native-unistyles 2.10.0 → 3.0.0-alpha.1

package/web/convert/boxShadow.ts

@@ -0,0 +1,72 @@
+import { media } from 'typestyle'
+import type { NestedCSSProperties } from 'typestyle/lib/types'
+import { deepMergeObjects, warn } from '../utils'
+import { validateShadow } from './shadow'
+import { convertBreakpoint } from './breakpoint'
+import { BOX_SHADOW_STYLES, type BoxShadow } from './types'
+import { extractShadowValue, normalizeColor, normalizeNumericValue } from './utils'
+
+const createBoxShadowValue = (style: BoxShadow) => {
+    // at this point every prop is present
+    const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style
+    const offsetX = normalizeNumericValue(shadowOffset.width)
+    const offsetY = normalizeNumericValue(shadowOffset.height)
+    const radius = normalizeNumericValue(shadowRadius)
+    const color = normalizeColor(shadowColor as string, shadowOpacity as number)
+
+    return `${offsetX} ${offsetY} ${radius} ${color}`
+}
+
+export const getBoxShadowStyle = (styles: Record<string, any>): NestedCSSProperties => {
+    const missingStyles = BOX_SHADOW_STYLES.filter(key => !(key in styles))
+
+    if (missingStyles.length) {
+        warn(`can't apply box shadow as you miss these properties: ${missingStyles.join(', ')}`)
+
+        return {}
+    }
+
+    const breakpointsSet = new Set<string>()
+
+    try {
+        validateShadow(BOX_SHADOW_STYLES, styles, breakpointsSet)
+    } catch (error) {
+        if (typeof error === 'string') {
+            warn(error)
+        }
+
+        return {}
+    }
+
+    const breakpoints = Array.from(breakpointsSet)
+
+    // If no breakpoints were used return styles without media queries
+    if (breakpoints.length === 0) {
+        return {
+            boxShadow: createBoxShadowValue(styles as BoxShadow)
+        }
+    }
+
+    // Create boxShadow for each 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)
+        const opacity = extractShadowValue('shadowOpacity', breakpoint, styles)
+
+        return media(convertBreakpoint(breakpoint), {
+            boxShadow: createBoxShadowValue({
+                shadowColor: color,
+                shadowOffset: {
+                    width,
+                    height
+                },
+                shadowRadius: radius,
+                shadowOpacity: opacity
+            })
+        })
+    })
+
+    // Merge all breakpoints styles into one
+    return deepMergeObjects(...breakpointStyles)
+}

package/web/convert/breakpoint.ts

@@ -0,0 +1,21 @@
+import type { MediaQuery } from 'typestyle/lib/types'
+import { UnistylesState } from '../state'
+import { keyInObject } from '../utils'
+import { isUnistylesMq, parseMq } from '../mq'
+import { Orientation } from '../../src/specs/types'
+
+export const convertBreakpoint = (breakpoint: string): MediaQuery => {
+    if (Object.values(Orientation).includes(breakpoint as Orientation)) {
+        return {
+            orientation: breakpoint as Orientation
+        }
+    }
+
+    if (isUnistylesMq(breakpoint)) {
+        return parseMq(breakpoint)
+    }
+
+    return {
+        minWidth: UnistylesState.breakpoints && keyInObject(UnistylesState.breakpoints, breakpoint) ? UnistylesState.breakpoints[breakpoint] : undefined,
+    }
+}

package/web/convert/index.ts

@@ -0,0 +1,78 @@
+import type { NestedCSSProperties } from 'typestyle/lib/types'
+import type { UnistylesValues } from '../../src/types'
+import { media } from 'typestyle'
+import { isPseudo } from '../pseudo'
+import { convertBreakpoint } from './breakpoint'
+import { getStyle } from './style'
+import { deepMergeObjects } from '../utils'
+import { getTransformStyle } from './transform'
+import { isBoxShadow, isTextShadow, isTransform } from './utils'
+import { getTextShadowStyle } from './textShadow'
+import { getBoxShadowStyle } from './boxShadow'
+
+export const convertToTypeStyle = (value: UnistylesValues) => {
+    // Flag to mark if textShadow is already created
+    let hasTextShadow = false
+    // Flag to mark if boxShadow is already created
+    let hasBoxShadow = false
+
+    const stylesArray = Object.entries({
+        ...value,
+        ...value._web
+    }).flatMap(([unistylesKey, unistylesValue]) => {
+        // Keys to omit
+        if (['_css', '_web', 'variants', 'compoundVariants', 'uni__dependencies'].includes(unistylesKey)) {
+            return []
+        }
+
+        // Pseudo classes :hover, :before etc.
+        if (isPseudo(unistylesKey)) {
+            const typestyleValues = convertToTypeStyle(unistylesValue as UnistylesValues)
+
+            return {
+                $nest: {
+                    [unistylesKey.replace('_', '&:')]: typestyleValues
+                }
+            }
+        }
+
+        // Text shadow
+        if (isTextShadow(unistylesKey)) {
+            if (hasTextShadow) {
+                return []
+            }
+
+            hasTextShadow = true
+
+            return getTextShadowStyle(value)
+        }
+
+        // Box shadow
+        if (isBoxShadow(unistylesKey)) {
+            if (hasBoxShadow) {
+                return []
+            }
+
+            hasBoxShadow = true
+
+            return getBoxShadowStyle(value)
+        }
+
+        // Transforms
+        if (isTransform(unistylesKey, unistylesValue)) {
+            return getTransformStyle(unistylesValue)
+        }
+
+        // Breakpoints
+        if (typeof unistylesValue === 'object' && unistylesValue !== null) {
+            return Object.entries(unistylesValue).map(([breakpointKey, breakpointValue]) => {
+                return media(convertBreakpoint(breakpointKey), getStyle(unistylesKey, breakpointValue))
+            })
+        }
+
+        // Regular styles
+        return getStyle(unistylesKey, unistylesValue)
+    }) as Array<NestedCSSProperties>
+
+    return deepMergeObjects(...stylesArray)
+}

package/web/convert/shadow.ts

@@ -0,0 +1,68 @@
+import type { ShadowOffset } from './types'
+
+export const validateShadow = (shadowProperties: ReadonlyArray<string>, styles: Record<string, any>, breakpoints: Set<string>) => {
+    // Collect breakpoints
+    shadowProperties.forEach(key => {
+        const value = styles[key]
+
+        if (typeof value !== 'object') {
+            return
+        }
+
+        if (key === 'shadowOffset' || key === 'textShadowOffset') {
+            const { width, height } = value as ShadowOffset
+
+            // If shadowOffset.width has breakpoints
+            if (typeof width === 'object') {
+                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))
+            }
+
+            return
+        }
+
+        // Collect regular breakpoints
+        Object.keys(value).forEach(breakpoint => breakpoints.add(breakpoint))
+    })
+
+    // Validate if all breakpoints are present
+    shadowProperties.forEach(key => {
+        const value = styles[key]
+
+        if (typeof value !== 'object') {
+            return
+        }
+
+        if (key === 'shadowOffset' || key === 'textShadowOffset') {
+            const { width, height } = value as ShadowOffset
+
+            if (typeof width === 'object') {
+                const missingBreakpoints = Array.from(breakpoints).filter(breakpoint => !(breakpoint in width))
+
+                if (missingBreakpoints.length) {
+                    throw `missing breakpoints in ${key}.width: ${missingBreakpoints.join(', ')}`
+                }
+            }
+
+            if (typeof height === 'object') {
+                const missingBreakpoints = Array.from(breakpoints).filter(breakpoint => !(breakpoint in height))
+
+                if (missingBreakpoints.length) {
+                    throw `missing breakpoints in ${key}.height: ${missingBreakpoints.join(', ')}`
+                }
+            }
+
+            return
+        }
+
+        const missingBreakpoints = Array.from(breakpoints).filter(breakpoint => !(breakpoint in value))
+
+        if (missingBreakpoints.length) {
+            throw `missing breakpoints in ${key}: ${missingBreakpoints.join(', ')}`
+        }
+    })
+}

package/web/convert/style.ts

@@ -0,0 +1,94 @@
+import { keyInObject } from '../utils'
+import type { NestedCSSProperties } from 'typestyle/lib/types'
+
+const stylesToSkip = [
+    'borderCurve',
+    'elevation',
+    'textAlignVertical',
+    'includeFontPadding',
+    'overlayColor',
+    'tintColor'
+]
+
+const convertMap = {
+    marginHorizontal: (value: number) => ({
+        marginInline: value
+    }),
+    marginVertical: (value: number) => ({
+        marginBlock: value
+    }),
+    paddingHorizontal: (value: number) => ({
+        paddingInline: value
+    }),
+    paddingVertical: (value: number) => ({
+        paddingBlock: value
+    }),
+    writingDirection: (value: string) => ({
+        direction: value
+    }),
+    borderBottomEndRadius: (value: number) => ({
+        borderBottomRightRadius: value
+    }),
+    borderBottomStartRadius: (value: number) => ({
+        borderBottomLeftRadius: value
+    }),
+    borderEndColor: (value: string) => ({
+        borderInlineEndColor: value
+    }),
+    borderStartColor: (value: string) => ({
+        borderInlineStartColor: value
+    }),
+    borderTopEndRadius: (value: number) => ({
+        borderTopRightRadius: value
+    }),
+    borderTopStartRadius: (value: number) => ({
+        borderTopLeftRadius: value
+    }),
+    borderEndWidth: (value: number) => ({
+        borderInlineEndWidth: value
+    }),
+    borderStartWidth: (value: number) => ({
+        borderInlineStartWidth: value
+    }),
+    end: (value: number) => ({
+        right: value
+    }),
+    start: (value: number) => ({
+        left: value
+    }),
+    marginEnd: (value: number) => ({
+        marginRight: value
+    }),
+    marginStart: (value: number) => ({
+        marginLeft: value
+    }),
+    paddingEnd: (value: number) => ({
+        paddingRight: value
+    }),
+    paddingStart: (value: number) => ({
+        paddingLeft: value
+    }),
+    transformMatrix: (value: Array<number>) => ({
+        transform: `matrix(${value.join(', ')})`
+    }),
+    resizeMode: (value: string) => ({
+        backgroundSize: value
+    }),
+    lineHeight: (value: number) => ({
+        lineHeight: `${value}px`
+    }),
+} as Record<PropertyKey, (value: any) => NestedCSSProperties>
+
+export const getStyle = (key: string, value: any) => {
+    if (stylesToSkip.includes(key)) {
+        return {}
+    }
+
+    if (keyInObject(convertMap, key)) {
+        return convertMap[key]?.(value) ?? {}
+    }
+
+    return {
+        [key]: value
+    }
+}

package/web/convert/textShadow.ts

@@ -0,0 +1,69 @@
+import { media } from 'typestyle'
+import type { NestedCSSProperties } from 'typestyle/lib/types'
+import { deepMergeObjects, warn } from '../utils'
+import { validateShadow } from './shadow'
+import { convertBreakpoint } from './breakpoint'
+import { TEXT_SHADOW_STYLES, type TextShadow } from './types'
+import { extractShadowValue, normalizeColor, normalizeNumericValue } from './utils'
+
+const createTextShadowValue = (style: TextShadow) => {
+    const { textShadowColor, textShadowOffset, textShadowRadius } = style
+    const offsetX = normalizeNumericValue(textShadowOffset.width)
+    const offsetY = normalizeNumericValue(textShadowOffset.height)
+    const radius = normalizeNumericValue(textShadowRadius)
+    const color = normalizeColor(textShadowColor as string)
+
+    return `${offsetX} ${offsetY} ${radius} ${color}`
+}
+
+export const getTextShadowStyle = (styles: Record<string, any>): NestedCSSProperties => {
+    const missingStyles = TEXT_SHADOW_STYLES.filter(key => !(key in styles))
+
+    if (missingStyles.length) {
+        warn(`can't apply text shadow as you miss these properties: ${missingStyles.join(', ')}`)
+
+        return {}
+    }
+
+    const breakpointsSet = new Set<string>()
+
+    try {
+        validateShadow(TEXT_SHADOW_STYLES, styles, breakpointsSet)
+    } catch (error) {
+        if (typeof error === 'string') {
+            warn(error)
+        }
+
+        return {}
+    }
+
+    const breakpoints = Array.from(breakpointsSet)
+
+    // If no breakpoints were used return styles without media queries
+    if (breakpoints.length === 0) {
+        return {
+            textShadow: createTextShadowValue(styles as TextShadow)
+        }
+    }
+
+    // Create textShadow for each 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)
+
+        return media(convertBreakpoint(breakpoint), {
+            textShadow: createTextShadowValue({
+                textShadowColor: color,
+                textShadowOffset: {
+                    width,
+                    height
+                },
+                textShadowRadius: radius
+            })
+        })
+    })
+
+    // Merge all breakpoints styles into one
+    return deepMergeObjects(...breakpointStyles)
+}

package/web/convert/transform.ts

@@ -0,0 +1,89 @@
+import { media } from 'typestyle'
+import type { NestedCSSProperties } from 'typestyle/lib/types'
+import { deepMergeObjects, keyInObject } from '../utils'
+import { normalizeNumericValue } from './utils'
+import { convertBreakpoint } from './breakpoint'
+
+type Transforms = Array<Record<string, any>>
+
+const normalizeTransform = (key: string, value: any) => {
+    if (key.includes('scale')) {
+        return value
+    }
+
+    if (typeof value === 'number') {
+        return normalizeNumericValue(value)
+    }
+
+    return value
+}
+
+const createTransformValue = (transforms: Transforms) => transforms
+    .map(transform => {
+        const [key] = Object.keys(transform)
+
+        if (!key) {
+            return undefined
+        }
+
+        const value = transform[key]
+
+        switch(key) {
+            case 'matrix':
+            case 'matrix3d':
+                return `${key}(${(value as Array<number>).join(',')})`
+            default:
+                return `${key}(${normalizeTransform(key, value)})`
+        }
+    })
+    .filter(Boolean)
+    .join(' ')
+
+export const getTransformStyle = (transforms: Transforms): NestedCSSProperties => {
+    const breakpoints = new Set<string>()
+    const normalTransforms: Transforms = []
+
+    transforms.forEach(transform => {
+        const [property] = Object.keys(transform)
+
+        if (!property) {
+            return
+        }
+
+        const value = transform[property]
+
+        if (typeof value === 'object' && !Array.isArray(value)) {
+            Object.keys(value).forEach(breakpoint => breakpoints.add(breakpoint))
+
+            return
+        }
+
+        normalTransforms.push(transform)
+    })
+
+    const breakpointTransforms = Array.from(breakpoints).flatMap(breakpoint => {
+        const transformsPerBreakpoint = transforms.flatMap(transform => {
+            const [property] = Object.keys(transform)
+
+            if (!property) {
+                return []
+            }
+
+            const value = transform[property]
+
+            if (typeof value === 'object' && !Array.isArray(value)) {
+                return keyInObject(value, breakpoint) ? [{ [property]: value[breakpoint] }] : []
+            }
+
+            return []
+        })
+
+        return media(convertBreakpoint(breakpoint), {
+            transform: createTransformValue(transformsPerBreakpoint)
+        })
+    })
+
+    return deepMergeObjects({
+        transform: createTransformValue(normalTransforms)
+    }, ...breakpointTransforms)
+}

package/web/convert/types.ts

@@ -0,0 +1,16 @@
+import type { TextStyle, ViewStyle } from 'react-native'
+import type { ToDeepUnistyles } from '../../src/types/stylesheet'
+
+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 const BOX_SHADOW_STYLES = ['shadowColor', 'shadowRadius', 'shadowOpacity', 'shadowOffset'] as const
+
+export type BoxShadow = Required<Pick<ViewStyle, typeof BOX_SHADOW_STYLES[number]>>
+
+export type AllShadow = TextShadow & BoxShadow
+
+export type AllShadowKeys = keyof AllShadow

package/web/convert/utils.ts

@@ -0,0 +1,54 @@
+// based on react-native-web normalizer
+// https://github.com/necolas/react-native-web
+import normalizeColors from '@react-native/normalize-colors'
+import { BOX_SHADOW_STYLES, TEXT_SHADOW_STYLES, type AllShadow, type AllShadowKeys } from './types'
+
+export const isTransform = (key: string, value: any): value is Array<Record<string, any>> => key === 'transform' && Array.isArray(value)
+
+export const isTextShadow = (key: string) => TEXT_SHADOW_STYLES.includes(key as typeof TEXT_SHADOW_STYLES[number])
+
+export const isBoxShadow = (key: string) => BOX_SHADOW_STYLES.includes(key as typeof BOX_SHADOW_STYLES[number])
+
+export const normalizeNumericValue = (value: number) => value ? `${value}px` : value
+
+export const normalizeColor = (color: string, opacity: number = 1) => {
+    // If the opacity is 1 there's no need to normalize the color
+    if (opacity === 1) {
+        return color
+    }
+
+    const integer = normalizeColors(color)
+
+    // If the color is an unknown format, the return value is null
+    if (integer === null) {
+        return color
+    }
+
+    const hex = integer.toString(16).padStart(8, '0')
+
+    if (hex.length === 8) {
+        const [r = 0, g = 0, b = 0, a = 1] = hex
+            .split(/(?=(?:..)*$)/)
+            .map(x => parseInt(x, 16))
+            .filter(num => !isNaN(num))
+
+        return `rgba(${r},${g},${b},${(a / 255) * opacity})`
+    }
+
+    return color
+}
+
+export const extractShadowValue = <TKey extends AllShadowKeys>(key: TKey, breakpoint: string, styles: any): AllShadow[TKey] => {
+    const value = styles[key]
+
+    if (key === 'textShadowOffset' || key === 'shadowOffset') {
+        const { width, height } = value
+
+        return {
+            width: typeof width === 'object' ? width[breakpoint] : width,
+            height: typeof height === 'object' ? height[breakpoint] : height
+        } as AllShadow[TKey]
+    }
+
+    return typeof value === 'object' ? value[breakpoint] : value
+}

package/web/create.ts

@@ -0,0 +1,102 @@
+import type { TypeStyle } from 'typestyle'
+import type { ReactNativeStyleSheet } from '../src/types'
+import type { StyleSheetWithSuperPowers, StyleSheet } from '../src/types/stylesheet'
+import { UnistylesRegistry } from './registry'
+import { keyInObject, reduceObject, toReactNativeClassName } from './utils'
+import { UnistylesRuntime } from './runtime'
+import { createUseVariants } from './useVariants'
+import { UnistylesListener } from './listener'
+import type { UnistyleDependency } from '../src/specs/NativePlatform'
+
+type ListenToDependenciesProps = {
+    value: StyleSheet[keyof StyleSheet],
+    key: PropertyKey,
+    unistyles: TypeStyle,
+    className: string,
+    args?: Array<any>
+}
+
+export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
+    const computedStylesheet = typeof stylesheet === 'function'
+        ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
+        : stylesheet
+
+    const listenToDependencies = ({ key, className, unistyles, value, args = [] } : ListenToDependenciesProps) => {
+        const dependencies = ('uni__dependencies' in value ? value['uni__dependencies'] : []) as Array<UnistyleDependency>
+
+        if (dependencies.length === 0) {
+            return
+        }
+
+        return UnistylesListener.addListeners(dependencies, () => {
+            const newComputedStylesheet = typeof stylesheet === 'function'
+                ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
+                : stylesheet
+
+            if (!keyInObject(newComputedStylesheet, key)) {
+                return
+            }
+
+            const value = newComputedStylesheet[key]!
+            const result = typeof value === 'function'
+                ? value(...args)
+                : value
+
+            UnistylesRegistry.updateStyles(unistyles, result, className)
+        })
+    }
+
+    const styles = reduceObject(computedStylesheet, (value, key) => {
+        if (typeof value === 'function') {
+            const classNameMap = new Map<number, string>()
+            const unistylesMap = new Map<number, TypeStyle>()
+            const disposeMap = new Map<number, VoidFunction | undefined>()
+
+            return (...args: Array<any>) => {
+                const [id] = args.slice(-1)
+                const result = value(...args.slice(0, -1))
+                const dispose = disposeMap.get(id)
+                const unistyles = unistylesMap.get(id)
+                const className = classNameMap.get(id)
+
+                if (unistyles && className && dispose) {
+                    dispose()
+                    UnistylesRegistry.updateStyles(unistyles, result, className)
+                    disposeMap.set(id, listenToDependencies({
+                        key,
+                        value,
+                        unistyles,
+                        className,
+                        args
+                    }))
+
+                    return toReactNativeClassName(className, result)
+                }
+
+                const entry = UnistylesRegistry.createStyles(result, key)
+
+                classNameMap.set(id, entry.className)
+                unistylesMap.set(id, entry.unistyles)
+                disposeMap.set(id, listenToDependencies({
+                    key,
+                    value,
+                    unistyles: entry.unistyles,
+                    className: entry.className,
+                    args
+                }))
+
+                return toReactNativeClassName(entry.className, result)
+            }
+        }
+
+        const { className, unistyles } = UnistylesRegistry.createStyles(value, key)
+
+        listenToDependencies({ key, value, unistyles, className })
+
+        return toReactNativeClassName(className, value)
+    }) as ReactNativeStyleSheet<StyleSheet>
+
+    createUseVariants(styles)
+
+    return styles
+}

package/web/index.ts

@@ -0,0 +1,24 @@
+import { create } from './create'
+import { UnistylesRuntime } from './runtime'
+import { UnistylesState } from './state'
+import { deepMergeObjects } from './utils'
+
+export const StyleSheet = {
+    configure: UnistylesState.init,
+    create,
+    absoluteFill: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+    },
+    compose: (a: object, b: object) => deepMergeObjects(a, b),
+    flatten: (...styles: Array<object>) => deepMergeObjects(...styles),
+    hairlineWidth: 1
+}
+
+export { UnistylesRuntime } from './runtime'
+export * from './mock'
+
+export const getSSRUnistyles = () => UnistylesRuntime.getSSRUnistyles()