react-native-unistyles 1.2.0 → 1.3.0

package/src/utils/cssMediaQuery.ts

@@ -0,0 +1,268 @@
+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

@@ -0,0 +1,10 @@
+// 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

@@ -0,0 +1,53 @@
+/*
+    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,13 +1,7 @@
-export { normalizeStyles } from './normalizeStyles'
-export * from './normalizer'
-export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints'
-export { proxifyFunction, parseStyle } from './styles'
-export { isServer } from './common'
-export {
-    extractValues,
-    getKeyForCustomMediaQuery,
-    isMediaQuery,
-    isWithinTheHeight,
-    isWithinTheWidth,
-    isWithinTheWidthAndHeight
-} from './mediaQueries'
+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'

package/src/utils/mq.ts

@@ -0,0 +1,57 @@
+import type { Nullable } from '../types'
+import type { UnistylesBreakpoints } from '../global'
+import { unistyles } from '../core'
+
+type MQValue = keyof UnistylesBreakpoints | number
+
+type MQHandler = {
+    only: {
+        width(wMin?: Nullable<MQValue>, wMax?: MQValue): symbol,
+        height(hMin?: Nullable<MQValue>, hMax?: MQValue): symbol,
+    },
+    width(wMin?: Nullable<MQValue>, wMax?: MQValue): {
+        and: {
+            height(hMin?: Nullable<MQValue>, hMax?: MQValue): symbol
+        }
+    },
+    height(hMin?: Nullable<MQValue>, hMax?: MQValue): {
+        and: {
+            width(wMin?: Nullable<MQValue>, wMax?: MQValue): symbol
+        }
+    }
+}
+
+const getMQValue = (value: Nullable<MQValue>) => {
+    if (typeof value === 'number') {
+        return value
+    }
+
+    if (value === null) {
+        return 0
+    }
+
+    return unistyles.registry.breakpoints[value] ?? 0
+}
+
+/**
+ * Utility to create cross-platform media queries
+ * @returns - JavaScript symbol to be used in your stylesheet
+ */
+export const mq: MQHandler = {
+    only: {
+        width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]` as unknown as symbol),
+        height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) => (`:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
+    },
+    width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => ({
+        and: {
+            height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) =>
+                (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
+        }
+    }),
+    height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) => ({
+        and: {
+            width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) =>
+                (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
+        }
+    })
+}

package/src/utils/mqParser.ts

@@ -0,0 +1,99 @@
+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/styles.ts

@@ -1,36 +1,14 @@
-import type { Breakpoints, CustomNamedStyles, ScreenSize, SortedBreakpointEntries } from '../types'
+import type { Optional, RNStyle, RNValue } from '../types'
 import { getValueForBreakpoint } from './breakpoints'
-import { normalizeStyles } from './normalizeStyles'
-import { isAndroid, isIOS, isWeb } from './common'
+import { isAndroid, isIOS } from '../common'
+import { withPlugins } from './withPlugins'
 
-/**
- * Proxies a function to parse its return value for custom media queries or breakpoints.
- *
- * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
- *
- * @param {Function} fn - The function to be proxified.
- * @param {keyof B & string} breakpoint - The breakpoint name to check against.
- * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
- * @param breakpointPairs - sorted pairs of breakpoints
- *
- * @returns {Function} Returns the proxified function
- *
- * @example
- *
- * const myFunction = () => ({ ':w[200]': 'value1', sm: 'value2' })
- * const screenSize = { width: 250, height: 400 }
- * const breakpoints = { sm: 300, md: 600 }
- *
- * const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
- * proxifiedFunction() // parsed style based on screenSize and breakpoints
- */
-export const proxifyFunction = <B extends Breakpoints>(
-    fn: Function, breakpoint: keyof B & string,
-    screenSize: ScreenSize,
-    breakpointPairs: SortedBreakpointEntries<B>
+export const proxifyFunction = (
+    key: string,
+    fn: Function,
+    variant?: Record<string, Optional<string>>
 ): Function => new Proxy(fn, {
-    apply: (target, thisArg, argumentsList) =>
-        parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, breakpointPairs)
+    apply: (target, thisArg, argumentsList) => withPlugins(key, parseStyle(target.apply(thisArg, argumentsList), variant))
 })
 
 export const isPlatformColor = <T extends {}>(value: T): boolean => {
@@ -41,83 +19,57 @@ export const isPlatformColor = <T extends {}>(value: T): boolean => {
     return isAndroid && 'resource_paths' in value && typeof value.resource_paths === 'object'
 }
 
-/**
- * Parses a style object to resolve custom media queries or breakpoints based on the provided screen size and breakpoints.
- *
- * The function processes each key-value pair in the style object. If the value is a function or a valid style (not an object or a 'transform' key),
- * it is returned as-is. Otherwise, the function attempts to resolve the value based on the provided breakpoint, screen size, and defined breakpoints.
- *
- * @template T - The type of the style object.
- * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
- *
- * @param {CustomNamedStyles<T, B>} style - The style object to be parsed.
- * @param {keyof B & string} breakpoint - The breakpoint name to check against.
- * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
- * @param breakpointPairs - sorted pairs of breakpoints
- *
- * @returns {Record<string, string | number | Function>} Returns the parsed style object with resolved custom media queries or breakpoints.
- *
- * @example
- *
- * const style = { fontSize: { sm: '12px', md: '16px' } }
- * const screenSize = { width: 300, height: 400 }
- * const breakpoints = { xs: 0, sm: 300, md: 600 }
- *
- * const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
- * // { fontSize: '12px' }
- */
-export const parseStyle = <T, B extends Breakpoints>(
-    style: CustomNamedStyles<T, B>,
-    breakpoint: keyof B & string,
-    screenSize: ScreenSize,
-    breakpointPairs: SortedBreakpointEntries<B>
-): T => {
-    const entries = Object.entries(style || {}) as [[
-        keyof T,
-        CustomNamedStyles<T, B> | Record<keyof B & string, string | number | undefined>]
-    ]
+export const parseStyle = <T extends RNStyle>(
+    style: T,
+    variant: Record<string, Optional<string>> = {},
+    parseMediaQueries = true
+): T => Object
+    .entries(style || {})
+    .reduce((acc, [key, value]) => {
+        // nested objects
+        if (key === 'shadowOffset' || key  === 'textShadowOffset') {
+            acc[key] = parseStyle(value, variant)
 
-    const parsedStyles = Object
-        .fromEntries(entries
-            .map(([key, value]) => {
-                const hasNestedProperties = key === 'shadowOffset' || key === 'textShadowOffset'
+            return acc
+        }
 
-                if (hasNestedProperties) {
-                    return [
-                        key,
-                        parseStyle(value as CustomNamedStyles<T, B>, breakpoint, screenSize, breakpointPairs)
-                    ]
-                }
+        // transforms
+        if (key === 'transform' && Array.isArray(value)) {
+            acc[key] = value.map(value => parseStyle(value, variant))
 
-                const isTransform = key === 'transform'
+            return acc
+        }
 
-                if (isTransform && Array.isArray(value)) {
-                    return [
-                        key,
-                        value.map(value => parseStyle(value, breakpoint, screenSize, breakpointPairs))
-                    ]
-                }
+        // values or platform colors
+        if (typeof value !== 'object' || isPlatformColor(value)) {
+            acc[key as keyof T] = value
 
-                const isDynamicFunction = typeof value === 'function'
-                const isValidStyle = typeof value !== 'object' || isPlatformColor(value)
+            return acc
+        }
 
-                if (isDynamicFunction || isValidStyle) {
-                    return [key, value]
-                }
+        if (key === 'variants') {
+            return {
+                ...acc,
+                ...(Object
+                    .keys(value) as Array<keyof typeof value>)
+                    .reduce((acc, key) => ({
+                        ...acc,
+                        // this will parse the styles of the selected variant (or default if it is undefined), if selected variant has no styles then it will fallback to default styles
+                        ...parseStyle((value)[key][variant[key as keyof typeof variant] || 'default'] ?? (value)[key].default ?? {})
+                    }), {})
+            }
+        }
 
-                return [
-                    key,
-                    getValueForBreakpoint<B>(
-                        value as Record<keyof B & string, string | number | undefined>,
-                        breakpoint,
-                        screenSize,
-                        breakpointPairs
-                    )
-                ]
-            })
-        )
+        // don't parse media queries and breakpoints
+        if (!parseMediaQueries) {
+            return {
+                ...acc,
+                [key]: value
+            }
+        }
 
-    return isWeb
-        ? normalizeStyles(parsedStyles)
-        : parsedStyles
-}
+        return {
+            ...acc,
+            [key]: getValueForBreakpoint(value as Record<string, RNValue>)
+        }
+    }, {} as T)