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

package/src/types/unistyles.ts

@@ -1,98 +0,0 @@
-import { UnistylesEventType, ScreenOrientation, IOSContentSizeCategory, AndroidContentSizeCategory } from '../common'
-import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
-import type { ScreenSize } from './core'
-import type { UnistylesPlugin } from './plugin'
-
-export type ColorSchemeName = 'light' | 'dark' | 'unspecified'
-
-export type ScreenInsets = {
-    top: number,
-    right: number,
-    bottom: number,
-    left: number
-}
-
-export type ScreenDimensions = {
-    height: number,
-    width: number
-}
-
-export interface StatusBar extends ScreenDimensions {
-    setColor(color?: string, alpha?: number): void,
-    setHidden(hidden: boolean): void
-}
-
-export interface NavigationBar extends ScreenDimensions {
-    setColor(color?: string, alpha?: number): void,
-    setHidden(hidden: boolean): void
-}
-
-export type UnistylesConfig = {
-    adaptiveThemes?: boolean,
-    initialTheme?: keyof UnistylesThemes,
-    plugins?: Array<UnistylesPlugin>,
-    experimentalCSSMediaQueries?: boolean,
-    windowResizeDebounceTimeMs?: number,
-    disableAnimatedInsets?: boolean
-}
-
-export type UnistylesBridge = {
-    // getters
-    screenWidth: number,
-    screenHeight: number,
-    enabledPlugins: Array<string>,
-    hasAdaptiveThemes: boolean,
-    themeName: keyof UnistylesThemes,
-    breakpoint: keyof UnistylesBreakpoints,
-    colorScheme: ColorSchemeName,
-    contentSizeCategory: IOSContentSizeCategory | AndroidContentSizeCategory,
-    sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>,
-    insets: ScreenInsets,
-    statusBar: StatusBar,
-    navigationBar: NavigationBar,
-    pixelRatio: number,
-    fontScale: number,
-    rtl: boolean
-
-    // setters
-    themes: Array<keyof UnistylesThemes>,
-    useBreakpoints(breakpoints: UnistylesBreakpoints): void,
-    useTheme(name: keyof UnistylesThemes): void,
-    updateTheme(name: keyof UnistylesThemes): void,
-    useAdaptiveThemes(enable: boolean): void,
-    addPlugin(pluginName: string, notify: boolean): void,
-    removePlugin(pluginName: string): void,
-    setRootViewBackgroundColor(color?: string, alpha?: number): void,
-    setImmersiveMode(isEnabled: boolean): void
-
-    // web only
-    setWindowResizeDebounceTimeMs(timeMs: number): void
-
-    // android only
-    disableAnimatedInsets(): void
-}
-
-export type UnistylesThemeEvent = {
-    type: UnistylesEventType.Theme,
-    payload: {
-        themeName: keyof UnistylesThemes
-    }
-}
-
-export type UnistylesMobileLayoutEvent = {
-    type: UnistylesEventType.Layout,
-    payload: {
-        screen: ScreenSize,
-        statusBar: ScreenDimensions,
-        navigationBar: ScreenDimensions,
-        insets: ScreenInsets,
-        breakpoint: keyof UnistylesBreakpoints,
-        orientation: typeof ScreenOrientation[keyof typeof ScreenOrientation]
-    }
-}
-
-export type UnistylesPluginEvent = {
-    type: UnistylesEventType.Plugin
-}
-
-export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent | UnistylesPluginEvent

package/src/useStyles.ts

@@ -1,60 +0,0 @@
-import { useMemo } from 'react'
-import { StyleSheet } from 'react-native'
-import { parseStyle, proxifyFunction, withPlugins } from './utils'
-import { useCSS, useUnistyles, useVariants } from './hooks'
-import type { UnistylesBreakpoints } from './global'
-import type { ExtractVariantNames, ReactNativeStyleSheet, StyleSheetWithSuperPowers, UnistylesTheme } from './types'
-import { unistyles } from './core'
-import { isWeb } from './common'
-
-type ParsedStylesheet<ST extends StyleSheetWithSuperPowers> = {
-    theme: UnistylesTheme,
-    breakpoint: keyof UnistylesBreakpoints,
-    styles: ReactNativeStyleSheet<ST>
-}
-
-/**
- * Hook that enables all the features of Unistyles
- * @param stylesheet - The stylesheet with superpowers to be used
- * @param variantsMap - The map of variants to be used
- * @returns - The theme, current breakpoint and RN compatible styles
- */
-export const useStyles = <ST extends StyleSheetWithSuperPowers>(
-    stylesheet?: ST,
-    variantsMap?: ExtractVariantNames<typeof stylesheet>
-): ParsedStylesheet<ST> => {
-    const { theme, layout, plugins } = useUnistyles()
-    const variants = useVariants(variantsMap)
-    const parsedStyles = useMemo(() => typeof stylesheet === 'function'
-        ? stylesheet(theme, unistyles.runtime.miniRuntime)
-        : stylesheet, [theme, stylesheet, layout])
-
-    const dynamicStyleSheet = useMemo(() => Object
-        .entries(parsedStyles || {})
-        .reduce((acc, [key, value]) => {
-            if (typeof value === 'function') {
-                return {
-                    ...acc,
-                    [key]: proxifyFunction(key, value, variants)
-                }
-            }
-
-            return StyleSheet.create({
-                ...acc,
-                [key]: withPlugins(key, parseStyle(
-                    value,
-                    variants,
-                    !isWeb || !unistyles.registry.config.experimentalCSSMediaQueries)
-                )
-            })
-        }, {}), [parsedStyles, variants, plugins, layout]
-    )
-
-    useCSS(dynamicStyleSheet as ReactNativeStyleSheet<ST>)
-
-    return {
-        theme,
-        breakpoint: layout.breakpoint,
-        styles: dynamicStyleSheet as ReactNativeStyleSheet<ST>
-    }
-}

package/src/utils/breakpoints.ts

@@ -1,44 +0,0 @@
-import { unistyles } from '../core'
-import type { Optional, RNValue } from '../types'
-import type { UnistylesBreakpoints } from '../global'
-import { ScreenOrientation, isMobile } from '../common'
-import { getKeyForUnistylesMediaQuery } from './mqParser'
-
-export const getValueForBreakpoint = (value: Record<string, RNValue>): Optional<RNValue> => {
-    const customMediaQueryKey = getKeyForUnistylesMediaQuery(
-        Object.entries(value),
-        unistyles.runtime.screen
-    ) as keyof typeof value
-
-    if (customMediaQueryKey) {
-        return value[customMediaQueryKey]
-    }
-
-    const hasBreakpoints = unistyles.registry.sortedBreakpointPairs.length > 0
-
-    if (!hasBreakpoints && isMobile && (ScreenOrientation.Landscape in value || ScreenOrientation.Portrait in value)) {
-        return value[unistyles.runtime.orientation]
-    }
-
-    const breakpoint = unistyles.runtime.breakpoint
-
-    if (!breakpoint) {
-        return undefined
-    }
-
-    const directBreakpoint = value[breakpoint]
-
-    if (directBreakpoint || (breakpoint in value)) {
-        return directBreakpoint
-    }
-
-    const breakpointPairs = unistyles.registry.sortedBreakpointPairs
-    const currentBreakpointIndex = breakpointPairs
-        .findIndex(([key]) => key === breakpoint)
-
-    const availableBreakpoints = breakpointPairs
-        .filter(([key], index) => index < currentBreakpointIndex && key in value)
-        .map(([key]) => key)
-
-    return value[availableBreakpoints[availableBreakpoints.length - 1] as keyof UnistylesBreakpoints & string]
-}

package/src/utils/cssMediaQuery.ts

@@ -1,268 +0,0 @@
-import { normalizeColor } from '../normalizer'
-import { isUnistylesMq, isValidMq, parseMq, type UnistylesParsedMq } from './mqParser'
-import type { RNStyle, RNValue } from '../types'
-import { generateReactNativeWebId } from './generateId'
-import type { UnistylesRuntime } from '../core'
-
-export const createMediaQueryForStyles = (styles: RNStyle, runtime: UnistylesRuntime): RNStyle => {
-    const withMediaQueries = Object
-        .entries(styles)
-        .filter(([, value]) => typeof value === 'object')
-        .reduce((acc, [prop, value]) => {
-            const objectKeys = Object.keys(value)
-            const mediaQueries = objectKeys.filter(key => isUnistylesMq(key))
-            const breakpoints = objectKeys.filter(key => runtime.breakpoints[key as keyof typeof runtime.breakpoints])
-
-            if (mediaQueries.length === 0 && breakpoints.length === 0) {
-                return acc
-            }
-
-            const className = generateReactNativeWebId(prop, '""')
-            const breakpointsStyles = getBreakpointsStyles(prop, value as Record<string, RNValue>, runtime, className)
-            const mediaQueriesStyles = getMediaQueriesFromMQ(prop, value as Record<string, RNValue>, className)
-
-            return {
-                ...acc,
-                [prop]: `
-                    ${breakpointsStyles} 
-                    ${mediaQueriesStyles}
-                `.trim()
-            }
-        }, {})
-
-    return {
-        ...styles,
-        ...withMediaQueries
-    }
-}
-
-const getMaxWidthMediaQuery = (width: UnistylesParsedMq['width']): string => {
-    if (!width) {
-        return ''
-    }
-
-    if (width.to === Infinity) {
-        return ''
-    }
-
-    return `and (max-width: ${width.to}px)`
-}
-
-const getMaxHeightMediaQuery = (height: UnistylesParsedMq['height']): string => {
-    if (!height) {
-        return ''
-    }
-
-    if (height.to === Infinity) {
-        return ''
-    }
-
-    return `and (max-height: ${height.to}px)`
-}
-
-const getMediaQueriesFromMQ = (prop: string, value: Record<string, RNValue>, className: string): string => Object
-    .entries(value)
-    .reduce((acc, [key, value]) => {
-        const result = parseMq(key)
-
-        if (!isValidMq(result)) {
-            return acc
-        }
-
-        if (result.width && result.height) {
-            return `${acc}
-
-                @media screen and (min-width: ${result.width.from}px) and (min-height: ${result.height.from}px) ${getMaxWidthMediaQuery(result.width)} ${getMaxHeightMediaQuery(result.height)} {
-                    .${className} {
-                        ${normalizePropName(prop)}: ${normalizeWebValue(prop, value)};
-                    }
-                }
-            `
-        }
-
-        if (result.width) {
-            return `${acc}
-
-                @media screen and (min-width: ${result.width.from}px) ${getMaxWidthMediaQuery(result.width)} {
-                    .${className} {
-                        ${normalizePropName(prop)}: ${normalizeWebValue(prop, value)};
-                    }
-                }
-            `
-        }
-
-        if (result.height) {
-            return `${acc}
-
-                @media screen and (min-height: ${result.height.from}px) ${getMaxHeightMediaQuery(result.height)} {
-                    .${className} {
-                        ${normalizePropName(prop)}: ${normalizeWebValue(prop, value)};
-                    }
-                }
-            `
-        }
-
-        return acc
-    }, '')
-
-const getBreakpointsStyles = (prop: string, value: Record<string, RNValue>, runtime: UnistylesRuntime, className: string): string => Object
-    .entries(value)
-    .reduce((acc, [key, value]) => {
-        const breakpoint = runtime.breakpoints[key as keyof typeof runtime.breakpoints]
-
-        if (breakpoint === undefined) {
-            return acc
-        }
-
-        return `${acc}
-
-            @media screen and (min-width: ${breakpoint}px) {
-                .${className} {
-                    ${normalizePropName(prop)}: ${normalizeWebValue(prop, value)};
-                }
-            }
-        `
-    }, '')
-
-const normalizePropName = (prop: string) => prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
-
-const normalizeWebValue = (prop: string, value: RNValue): string => {
-    if (value === undefined) {
-        return 'unset'
-    }
-
-    switch (prop) {
-        // colors
-        case 'color':
-        case 'backgroundColor':
-        case 'borderColor':
-        case 'borderBottomColor':
-        case 'borderLeftColor':
-        case 'borderRightColor':
-        case 'borderTopColor':
-        case 'borderBlockColor':
-        case 'borderBlockEndColor':
-        case 'borderBlockStartColor':
-        case 'textDecorationColor':
-            return normalizeColor(value as string)
-
-        // dimensions
-        case 'width':
-        case 'height':
-        case 'minWidth':
-        case 'minHeight':
-        case 'maxWidth':
-        case 'maxHeight':
-        case 'borderRadius':
-        case 'borderWidth':
-        case 'borderBottomLeftRadius':
-        case 'borderBottomRightRadius':
-        case 'borderEndEndRadius':
-        case 'borderEndStartRadius':
-        case 'borderStartEndRadius':
-        case 'borderStartStartRadius':
-        case 'borderTopLeftRadius':
-        case 'borderTopRightRadius':
-        case 'borderBottomWidth':
-        case 'borderLeftWidth':
-        case 'borderRightWidth':
-        case 'borderTopWidth':
-        case 'bottom':
-        case 'left':
-        case 'right':
-        case 'top':
-        case 'marginTop':
-        case 'marginBottom':
-        case 'marginLeft':
-        case 'marginRight':
-        case 'paddingTop':
-        case 'paddingBottom':
-        case 'paddingLeft':
-        case 'paddingRight':
-        case 'flexBasis':
-        case 'rowGap':
-        case 'columnGap':
-        case 'gap':
-        case 'margin':
-        case 'padding':
-        case 'fontSize':
-        case 'letterSpacing':
-            return `${value as string}px`
-
-        // without unit
-        case 'borderStyle':
-        case 'pointerEvents':
-        case 'backfaceVisibility':
-        case 'alignContent':
-        case 'alignItems':
-        case 'alignSelf':
-        case 'flexDirection':
-        case 'flexWrap':
-        case 'flex':
-        case 'aspectRatio':
-        case 'opacity':
-        case 'direction':
-        case 'zIndex':
-        case 'justifyContent':
-        case 'overflow':
-        case 'display':
-        case 'position':
-        case 'flexGrow':
-        case 'flexShrink':
-        case 'fontFamily':
-        case 'fontStyle':
-        case 'textDecorationLine':
-        case 'textAlign':
-        case 'textDecorationStyle':
-        case 'lineHeight':
-        case 'textTransform':
-        case 'fontVariant':
-        case 'verticalAlign':
-        case 'objectFit':
-            return value as string
-
-        // to be transformed for now
-        // not supported
-        case 'marginHorizontal':
-        case 'paddingHorizontal':
-        case 'marginVertical':
-        case 'paddingVertical':
-        case 'shadowColor':
-        case 'shadowOffset':
-        case 'shadowOpacity':
-        case 'shadowRadius':
-        case 'transform':
-        case 'transformMatrix':
-        case 'fontWeight':
-        case 'textShadowOffset':
-        case 'textShadowRadius':
-        case 'textShadowColor':
-            return ''
-
-        // unsupported
-        case 'borderStartColor':
-        case 'borderEndColor':
-        case 'borderEndWidth':
-        case 'borderBottomEndRadius':
-        case 'borderBottomStartRadius':
-        case 'borderCurve':
-        case 'elevation':
-        case 'borderTopEndRadius':
-        case 'borderTopStartRadius':
-        case 'borderStartWidth':
-        case 'start':
-        case 'end':
-        case 'margin-end':
-        case 'margin-start':
-        case 'padding-end':
-        case 'padding-start':
-        case 'writingDirection':
-        case 'textAlignVertical':
-        case 'includeFontPadding':
-        case 'resizeMode':
-        case 'overlayColor':
-        case 'tintColor':
-        default:
-            return ''
-    }
-}

package/src/utils/generateId.ts

@@ -1,10 +0,0 @@
-// eslint-disable-next-line camelcase
-import { murmurhash2_32_gc } from './hash32'
-
-export const generateReactNativeWebId = (key: string, value: string): string => {
-    const hashedString = murmurhash2_32_gc(key + value, 1).toString(36)
-
-    return process.env.NODE_ENV !== 'production'
-        ? `r-${key}-${hashedString}`
-        : `r-${hashedString}`
-}

package/src/utils/hash32.ts

@@ -1,53 +0,0 @@
-/*
-    Authors: Gary Court and Austin Appleby
-    Compatible with React Native Web
-    https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/compiler/hash.js#L65
-*/
-export const murmurhash2_32_gc = (str: string, seed: number) => {
-    let l = str.length
-    let h = seed ^ l
-    let i = 0
-    let k
-
-    while (l >= 4) {
-        k =
-        (str.charCodeAt(i) & 0xff) |
-        ((str.charCodeAt(++i) & 0xff) << 8) |
-        ((str.charCodeAt(++i) & 0xff) << 16) |
-        ((str.charCodeAt(++i) & 0xff) << 24)
-
-        k =
-        (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16)
-        k ^= k >>> 24
-        k =
-        (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16)
-
-        h =
-        ((h & 0xffff) * 0x5bd1e995 +
-          ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)) ^
-        k
-
-        l -= 4
-        ++i
-    }
-
-    switch (l) {
-        // @ts-ignore
-        case 3:
-            h ^= (str.charCodeAt(i + 2) & 0xff) << 16
-        // @ts-ignore
-        case 2:
-            h ^= (str.charCodeAt(i + 1) & 0xff) << 8
-        case 1:
-            h ^= str.charCodeAt(i) & 0xff
-            h =
-          (h & 0xffff) * 0x5bd1e995 +
-          ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)
-    }
-
-    h ^= h >>> 13
-    h = (h & 0xffff) * 0x5bd1e995 + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)
-    h ^= h >>> 15
-
-    return h >>> 0
-}

package/src/utils/index.ts

@@ -1,8 +0,0 @@
-export { mq } from './mq'
-export type { UnistylesParsedMq } from './mqParser'
-export { getKeyForUnistylesMediaQuery, isWithinTheWidthAndHeight, isValidMq, parseMq, isUnistylesMq } from './mqParser'
-export { getValueForBreakpoint } from './breakpoints'
-export { proxifyFunction, parseStyle, isPlatformColor } from './styles'
-export { withPlugins } from './withPlugins'
-export { generateReactNativeWebId } from './generateId'
-export { parseColor } from './parseColor'

package/src/utils/mqParser.ts

@@ -1,99 +0,0 @@
-import type { Optional, RNValue, ScreenSize } from '../types'
-
-const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/
-const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/
-const UNISTYLES_HEIGHT_REGEX = /:(h)\[(\d+)(?:,\s*(\d+|Infinity))?]/
-
-type ParsedMqDimension = {
-    from: number,
-    to: number
-}
-
-export type UnistylesParsedMq = {
-    width?: ParsedMqDimension,
-    height?: ParsedMqDimension
-}
-
-export const parseMq = (mq: string): UnistylesParsedMq => {
-    const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
-    const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
-
-    return {
-        width: width ? {
-            from: Number(fromW),
-            to: Number(toW)
-        } : undefined,
-        height: height ? {
-            from: Number(fromH),
-            to: Number(toH)
-        } : undefined
-    }
-}
-
-export const isUnistylesMq = (mq: string) => IS_UNISTYLES_REGEX.test(mq)
-
-export const isValidMq = (parsedMq: UnistylesParsedMq) => {
-    const { width, height } = parsedMq
-
-    if (width && height) {
-        return width.from <= width.to && height.from <= height.to
-    }
-
-    if (width) {
-        return width.from <= width.to
-    }
-
-    if (height) {
-        return height.from <= height.to
-    }
-
-    return false
-}
-
-export const isWithinTheWidthAndHeight = (parsedMq: UnistylesParsedMq, screenSize: ScreenSize): boolean => {
-    const { width, height } = parsedMq
-
-    if (width && height) {
-        return isWithinTheWidth(width, screenSize.width) && isWithinTheHeight(height, screenSize.height)
-    }
-
-    if (width) {
-        return isWithinTheWidth(width, screenSize.width)
-    }
-
-    if (height) {
-        return isWithinTheHeight(height, screenSize.height)
-    }
-
-    return false
-}
-
-const isWithinTheWidth = (width: UnistylesParsedMq['width'], screenWidth: number): boolean => {
-    const { from, to } = width as ParsedMqDimension
-
-    return screenWidth >= from && screenWidth <= to
-}
-
-const isWithinTheHeight = (height: UnistylesParsedMq['height'], screenHeight: number): boolean => {
-    const { from, to } = height as ParsedMqDimension
-
-    return screenHeight >= from && screenHeight <= to
-}
-
-export const getKeyForUnistylesMediaQuery = (mediaQueries: Array<[string, RNValue]>, screenSize: ScreenSize): Optional<string> => {
-    const mq = mediaQueries.find(([key]) => {
-        if (!isUnistylesMq(key as string)) {
-            return false
-        }
-
-        const parsedMq = parseMq(key as string)
-
-        if (!isValidMq(parsedMq)) {
-            return false
-        }
-
-        return isWithinTheWidthAndHeight(parsedMq, screenSize)
-    })
-
-    return mq?.at(0) as Optional<string>
-}

package/src/utils/parseColor.ts

@@ -1,33 +0,0 @@
-import type { Color } from '../types'
-import { isIOS } from '../common'
-
-const parseAlpha = (alpha: number) => {
-    if (alpha > 1 || alpha < 0) {
-        return 1
-    }
-
-    return alpha
-}
-
-export const parseColor = (color?: Color, alpha: number = 1): [string, number] => {
-    if (!color) {
-        return ['', 1]
-    }
-
-    // ignore alpha for 8 digit hex colors
-    if (color.startsWith('#') && color.length === 9) {
-        return [color, 1]
-    }
-
-    if (color.startsWith('#') && color.length === 7) {
-        return [color, parseAlpha(alpha)]
-    }
-
-    if (isIOS && color === 'transparent') {
-        return ['#000000', 0]
-    }
-
-    // todo remove this with Unistyles 3.0
-    // named colors
-    return [color, 1]
-}