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

package/src/types/breakpoints.ts

@@ -1,8 +1,7 @@
 import type { ColorValue, OpaqueColorValue } from 'react-native'
-import type { UnistylesTheme } from '../types'
 import type { BreakpointsOrMediaQueries, ToDeepUnistyles } from './stylesheet'
 import type { TransformStyles } from './core'
-import type { UnistylesMiniRuntime } from '../core'
+import type { SafeReturnType } from './common'
 
 type ExtractTransformArray<T> = T extends object
     ? { [K in keyof T]: ExtractBreakpoints<T[K]> }
@@ -21,15 +20,19 @@ type ExtractBreakpoints<T> = T extends object
 type ParseNestedObject<T> = T extends (...args: infer A) => infer R
     ? (...args: A) => ParseNestedObject<R>
     : T extends object
-        ? T extends { variants: infer R }
-            ? ParseVariants<FlattenVariants<R>> & ParseNestedObject<Omit<T, 'variants'>>
-            : {
-                [K in keyof T]: T[K] extends object
-                    ? T[K] extends OpaqueColorValue
-                        ? ColorValue
-                        : ExtractBreakpoints<T[K]>
-                    : T[K]
-            }
+        ? T extends { variants: infer R, compoundVariants: infer C }
+            ? ParseVariants<FlattenVariants<R>> & FlattenCompoundVariants<C> & ParseNestedObject<Omit<T, 'variants' | 'compoundVariants'>>
+            : T extends { variants: infer R }
+                ? ParseVariants<FlattenVariants<R>> & ParseNestedObject<Omit<T, 'variants'>>
+                : T extends { compoundVariants: object }
+                    ? ParseNestedObject<Omit<T, 'compoundVariants'>>
+                    : {
+                        [K in keyof T as K extends '_web' ? never : K]: T[K] extends object
+                            ? T[K] extends OpaqueColorValue
+                                ? ColorValue
+                                : ExtractBreakpoints<T[K]>
+                            : T[K]
+                    }
         : T
 
 type FlattenVariants<T> = T extends object
@@ -44,6 +47,12 @@ type FlattenVariants<T> = T extends object
     }
     : never
 
+type FlattenCompoundVariants<T> = T extends Array<infer _>
+    ? FlattenCompoundVariants<T[number]>
+    : T extends { styles: infer S }
+        ? ParseNestedObject<S>
+        : never
+
 type ParseVariants<T> = T extends object
     ? T[keyof T] extends object
         ? UnionToIntersection<ParseVariants<T[keyof T]>>
@@ -57,6 +66,4 @@ type ParseStyleKeys<T> = T extends object
     ? { [K in keyof T]: ParseNestedObject<T[K]> }
     : never
 
-export type ReactNativeStyleSheet<T> = T extends (theme: UnistylesTheme, runtime: UnistylesMiniRuntime) => infer R
-    ? ParseStyleKeys<R>
-    : ParseStyleKeys<T>
+export type ReactNativeStyleSheet<T> = ParseStyleKeys<SafeReturnType<T>>

package/src/types/common.ts

@@ -1,2 +1,3 @@
 export type Optional<T> = T | undefined
 export type Nullable<T> = T | null
+export type SafeReturnType<T> = T extends (...args: any) => infer R ? R : T

package/src/types/index.ts

@@ -1,6 +1,3 @@
-export * from './normalizer'
-export * from './unistyles'
-export * from './color'
 export type { Optional, Nullable } from './common'
 export type {
     NestedStylePairs,
@@ -11,7 +8,7 @@ export type {
     RNStyle
 } from './core'
 export type {
-    StyleSheetWithSuperPowers,
+    CreateUnistylesStyleSheet,
     StyleSheet,
     AllAvailableKeys,
     UnistylesValues,
@@ -21,4 +18,4 @@ export type {
 } from './stylesheet'
 export type { ReactNativeStyleSheet } from './breakpoints'
 export type { ExtractVariantNames } from './variants'
-export type { UnistylesPlugin } from './plugin'
+export { AndroidContentSizeCategory, IOSContentSizeCategory, WebContentSizeCategory } from './accessibility'

package/src/types/stylesheet.ts

@@ -1,7 +1,11 @@
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
 import type { UnistylesBreakpoints } from '../global'
-import type { UnistylesMiniRuntime } from '../core'
+import type { UnistylesMiniRuntime } from '../specs'
+import type { ReactNativeStyleSheet } from './breakpoints'
+import type { ExtractVariantNames } from './variants'
+import type { CSSProperties } from 'react'
+import type { Pseudo } from '../web/pseudo'
 
 // these props are treated differently to nest breakpoints and media queries
 type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset'
@@ -16,14 +20,25 @@ type UnistyleNestedStyles = {
     transform?: Array<ToDeepUnistyles<TransformStyles>>
 }
 
-type Variants = {
-    variants?: {
-        [variantName: string]: {
-            [variant: string]: Omit<UnistylesValues, 'variants'>
-        }
+type VariantsObject = {
+    [variantName: string]: {
+        [variant: string]: Omit<UnistylesValues, 'variants' | 'compoundVariants'>
     }
 }
 
+type CustomClassName = {
+    _css?: string | Array<string>
+}
+
+type CompoundVariant = {
+    styles: Omit<UnistylesValues, 'variants' | 'compoundVariants'>
+}
+
+type VariantsAndCompoundVariants = {
+    variants?: VariantsObject,
+    compoundVariants?: Array<CompoundVariant>
+}
+
 export type ToDeepUnistyles<T> = {
     [K in keyof T]?: T[K] | {
         [key in BreakpointsOrMediaQueries]?: T[K]
@@ -35,16 +50,33 @@ type AllAvailableStyles = UnistyleView & UnistyleText & UnistyleImage & Unistyle
 export type AllAvailableKeys = keyof (UnistyleView & UnistyleText & UnistyleImage)
 export type BreakpointsOrMediaQueries = keyof UnistylesBreakpoints | symbol
 
-export type UnistylesValues = {
+type FlatUnistylesValues = {
     [propName in AllAvailableKeys]?: AllAvailableStyles[propName] | {
         [key in BreakpointsOrMediaQueries]?: AllAvailableStyles[propName]
     }
-} & Variants & {
+}
+
+export type UnistylesValues = FlatUnistylesValues & {
+} & VariantsAndCompoundVariants & {
     [propName in NestedKeys]?: UnistyleNestedStyles[propName]
+} & {
+    _web?: CSSProperties & CustomClassName & {
+        [propName in Pseudo]?: ToDeepUnistyles<CSSProperties>
+    }
 }
 
 export type StyleSheet = {
     [styleName: string]: UnistylesValues | ((...args: any) => UnistylesValues)
 }
 
-export type StyleSheetWithSuperPowers = ((theme: UnistylesTheme, miniRuntime: UnistylesMiniRuntime) => StyleSheet) | StyleSheet
+export type StyleSheetWithSuperPowers<S extends StyleSheet> =
+    | ((theme: UnistylesTheme, miniRuntime: UnistylesMiniRuntime) => S)
+    | S
+
+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>)
+
+export type CreateUnistylesStyleSheet = typeof create

package/src/types/variants.ts

@@ -1,9 +1,9 @@
-export type ExtractVariantNames<T> = T extends (...args: any) => infer R
-    ? ExtractVariantKeys<R>
-    : ExtractVariantKeys<T>
+import type { SafeReturnType } from './common'
+
+export type ExtractVariantNames<T> = ExtractVariantKeys<SafeReturnType<T>>
 
 type ExtractVariantKeys<T> = T extends object
-    ? ExtractVariant<T[keyof T]>
+    ? ExtractVariant<SafeReturnType<T[keyof T]>>
     : never
 
 type HasBooleanVariants<T> = T extends Record<'true', any>
@@ -18,10 +18,6 @@ type ExtractSubVariantKeys<T> = T extends object
         : keyof Omit<T, 'default'> | undefined
     : never
 
-type ExtractVariant<T> = T extends (...args: any) => infer R
-    ? R extends { variants: infer V }
-        ? { [key in keyof V]?: ExtractSubVariantKeys<V[key]> }
-        : never
-    : 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]> }
+    : T

package/src/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/src/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 '../../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/src/web/convert/index.ts

@@ -0,0 +1,78 @@
+import type { NestedCSSProperties } from 'typestyle/lib/types'
+import type { UnistylesValues } from '../../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/src/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/src/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/src/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)
+}