react-native-unistyles 1.3.0 → 1.4.0

package/src/hooks/useUnistyles.ts

@@ -1,64 +0,0 @@
-import { NativeEventEmitter, NativeModules } from 'react-native'
-import { useEffect, useState } from 'react'
-import { unistyles } from '../core'
-import { UnistylesEventType } from '../common'
-import type { UnistylesDynamicTypeSizeEvent, UnistylesEvents, UnistylesMobileLayoutEvent, UnistylesThemeEvent } from '../types'
-
-const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
-
-export const useUnistyles = () => {
-    const [plugins, setPlugins] = useState(unistyles.runtime.enabledPlugins)
-    const [theme, setTheme] = useState(unistyles.registry.getTheme(unistyles.runtime.themeName))
-    const [contentSizeCategory, setContentSizeCategory] = useState(unistyles.runtime.contentSizeCategory)
-    const [layout, setLayout] = useState({
-        breakpoint: unistyles.runtime.breakpoint,
-        orientation: unistyles.runtime.orientation,
-        screenSize: {
-            width: unistyles.runtime.screen.width,
-            height: unistyles.runtime.screen.height
-        }
-    })
-
-    useEffect(() => {
-        const subscription = unistylesEvents.addListener(
-            '__unistylesOnChange',
-            (event: UnistylesEvents) => {
-                switch (event.type) {
-                    case UnistylesEventType.Theme: {
-                        const themeEvent = event as UnistylesThemeEvent
-
-                        return setTheme(unistyles.registry.getTheme(themeEvent.payload.themeName))
-                    }
-                    case UnistylesEventType.Layout: {
-                        const layoutEvent = event as UnistylesMobileLayoutEvent
-
-                        return setLayout({
-                            breakpoint: layoutEvent.payload.breakpoint,
-                            orientation: layoutEvent.payload.orientation,
-                            screenSize: layoutEvent.payload.screen
-                        })
-                    }
-                    case UnistylesEventType.Plugin: {
-                        return setPlugins(unistyles.runtime.enabledPlugins)
-                    }
-                    case UnistylesEventType.DynamicTypeSize: {
-                        const dynamicTypeSizeEvent = event as UnistylesDynamicTypeSizeEvent
-
-                        return setContentSizeCategory(dynamicTypeSizeEvent.payload.contentSizeCategory)
-                    }
-                    default:
-                        return
-                }
-            }
-        )
-
-        return subscription.remove
-    }, [])
-
-    return {
-        plugins,
-        theme,
-        layout,
-        contentSizeCategory
-    }
-}

package/src/hooks/useVariants.ts

@@ -1,10 +0,0 @@
-import { useRef } from 'react'
-import type { Optional } from '../types'
-
-export const useVariants = (variantsMap?: Record<string, Optional<string>>) => {
-    const variantsRef = useRef<Optional<Record<string, Optional<string>>>>(variantsMap)
-
-    variantsRef.current = variantsMap
-
-    return variantsRef.current
-}

package/src/normalizer/index.ts

@@ -1,2 +0,0 @@
-export { normalizeStyle } from './normalizeStyle'
-export { preprocessor, normalizeNumericValue, normalizeColor } from './normalizer'

package/src/normalizer/normalizer.macos.ts

@@ -1 +0,0 @@
-// keep it empty for macOS

package/src/plugins/cssMediaQueriesPlugin.ts

@@ -1,8 +0,0 @@
-// prevent recursive import
-import { createMediaQueryForStyles } from '../utils/cssMediaQuery'
-import type { UnistylesPlugin } from '../types'
-
-export const cssMediaQueriesPlugin: UnistylesPlugin = {
-    name: '__unistylesCSSMediaQueries',
-    onParsedStyle: (_key, styles, runtime) => createMediaQueryForStyles(styles, runtime)
-}

package/src/plugins/index.ts

@@ -1,2 +0,0 @@
-export { normalizeWebStylesPlugin } from './normalizeWebStylesPlugin'
-export { cssMediaQueriesPlugin } from './cssMediaQueriesPlugin'

package/src/plugins/normalizeWebStylesPlugin.ts

@@ -1,7 +0,0 @@
-import type { UnistylesPlugin } from '../types'
-import { normalizeStyle } from '../normalizer'
-
-export const normalizeWebStylesPlugin: UnistylesPlugin = {
-    name: '__unistylesNormalizeWebStyles',
-    onParsedStyle: (_key, styles) => normalizeStyle(styles)
-}

package/src/types/common.ts

@@ -1,2 +0,0 @@
-export type Optional<T> = T | undefined
-export type Nullable<T> = T | null

package/src/types/plugin.ts

@@ -1,7 +0,0 @@
-import type { RNStyle } from './core'
-import type { UnistylesRuntime } from '../core'
-
-export type UnistylesPlugin = {
-    name: string,
-    onParsedStyle?: (styleKey: string, style: RNStyle, runtime: UnistylesRuntime) => RNStyle
-}

package/src/types/stylesheet.ts

@@ -1,49 +0,0 @@
-import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
-import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
-import type { UnistylesBreakpoints } from '../global'
-
-// these props are treated differently to nest breakpoints and media queries
-type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset'
-
-type UnistyleView = Omit<ViewStyle, NestedKeys>
-type UnistyleText = Omit<TextStyle, NestedKeys>
-type UnistyleImage = Omit<ImageStyle, NestedKeys>
-
-type UnistyleNestedStyles = {
-    shadowOffset?: ToDeepUnistyles<ShadowOffset>,
-    textShadowOffset?: ToDeepUnistyles<ShadowOffset>,
-    transform?: Array<ToDeepUnistyles<TransformStyles>>
-}
-
-type Variants = {
-    variants?: {
-        [variantName: string]: {
-            [variant: string]: Omit<UnistylesValues, 'variants'>
-        }
-    }
-}
-
-export type ToDeepUnistyles<T> = {
-    [K in keyof T]?: T[K] | {
-        [key in BreakpointsOrMediaQueries]?: T[K]
-    }
-}
-
-type AllAvailableStyles = UnistyleView & UnistyleText & UnistyleImage & UnistyleNestedStyles
-
-export type AllAvailableKeys = keyof (UnistyleView & UnistyleText & UnistyleImage)
-export type BreakpointsOrMediaQueries = keyof UnistylesBreakpoints | symbol
-
-export type UnistylesValues = {
-    [propName in AllAvailableKeys]?: AllAvailableStyles[propName] | {
-        [key in BreakpointsOrMediaQueries]?: AllAvailableStyles[propName]
-    }
-} & Variants & {
-    [propName in NestedKeys]?: UnistyleNestedStyles[propName]
-}
-
-export type StyleSheet = {
-    [styleName: string]: UnistylesValues | ((...args: any) => UnistylesValues)
-}
-
-export type StyleSheetWithSuperPowers = ((theme: UnistylesTheme) => StyleSheet) | StyleSheet

package/src/types/unistyles.ts

@@ -1,63 +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 UnistylesConfig = {
-    adaptiveThemes?: boolean,
-    initialTheme?: keyof UnistylesThemes,
-    plugins?: Array<UnistylesPlugin>,
-    experimentalCSSMediaQueries?: 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]]>,
-
-    // setters
-    themes: Array<keyof UnistylesThemes>,
-    useBreakpoints(breakpoints: UnistylesBreakpoints): void,
-    useTheme(name: keyof UnistylesThemes): void,
-    useAdaptiveThemes(enable: boolean): void,
-    addPlugin(pluginName: string, notify: boolean): void,
-    removePlugin(pluginName: string): void
-}
-
-export type UnistylesThemeEvent = {
-    type: UnistylesEventType.Theme,
-    payload: {
-        themeName: keyof UnistylesThemes
-    }
-}
-
-export type UnistylesMobileLayoutEvent = {
-    type: UnistylesEventType.Layout,
-    payload: {
-        screen: ScreenSize,
-        breakpoint: keyof UnistylesBreakpoints,
-        orientation: typeof ScreenOrientation[keyof typeof ScreenOrientation]
-    }
-}
-
-export type UnistylesPluginEvent = {
-    type: UnistylesEventType.Plugin
-}
-
-export type UnistylesDynamicTypeSizeEvent = {
-    type: UnistylesEventType.DynamicTypeSize,
-    payload: {
-        contentSizeCategory: IOSContentSizeCategory | AndroidContentSizeCategory
-    }
-}
-
-export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent | UnistylesPluginEvent | UnistylesDynamicTypeSizeEvent

package/src/types/variants.ts

@@ -1,19 +0,0 @@
-export type ExtractVariantNames<T> = T extends (...args: any) => infer R
-    ? ExtractVariantKeys<R>
-    : ExtractVariantKeys<T>
-
-type ExtractVariantKeys<T> = T extends object
-    ? ExtractVariant<T[keyof T]>
-    : never
-
-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

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)
-        : 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]
-    )
-
-    useCSS(dynamicStyleSheet as ReactNativeStyleSheet<ST>)
-
-    return {
-        theme,
-        breakpoint: layout.breakpoint,
-        styles: dynamicStyleSheet as ReactNativeStyleSheet<ST>
-    }
-}

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