react-native-unistyles 1.3.0 → 1.4.0

package/src/utils/breakpoints.ts

@@ -1,44 +1,140 @@
-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]
-    }
+import { throwError } from './common'
+import type { Breakpoints, ScreenSize, SortedBreakpointEntries } from '../types'
+import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
+
+/**
+ * Sorts the breakpoints object based on its numeric values in ascending order and validates them.
+ *
+ * This function takes an object where keys represent breakpoint names and values are numeric.
+ * It returns a new object with the same keys but sorted based on their corresponding numeric values.
+ * Additionally, it validates that:
+ * 1. The first breakpoint starts with a value of 0.
+ * 2. No duplicate breakpoint values exist.
+ *
+ * If the validation fails, appropriate error messages are logged to the console.
+ *
+ * @template B - An object type where keys are strings and values are numbers.
+ * @param {B} breakpoints - The breakpoints object to be sorted and validated.
+ * @returns {B} A new object with sorted and validated breakpoints.
+ *
+ * @example
+ * const input = { md: 768, lg: 1024, sm: 0 }
+ * sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
+ */
+export const sortAndValidateBreakpoints = <B extends Breakpoints>(breakpoints: B): B => {
+    const sortedPairs = Object
+        .entries(breakpoints)
+        .sort((breakpoint1, breakpoint2) => {
+            const [, value1] = breakpoint1
+            const [, value2] = breakpoint2
+
+            return value1 - value2
+        })
 
-    const hasBreakpoints = unistyles.registry.sortedBreakpointPairs.length > 0
+    const sortedBreakpoints =  Object.freeze(Object.fromEntries(sortedPairs)) as B
+    const breakpointValues = Object.values(sortedBreakpoints)
+    const [firstBreakpoint] = breakpointValues
 
-    if (!hasBreakpoints && isMobile && (ScreenOrientation.Landscape in value || ScreenOrientation.Portrait in value)) {
-        return value[unistyles.runtime.orientation]
+    if (firstBreakpoint !== 0) {
+        throwError('first breakpoint must start with 0')
     }
 
-    const breakpoint = unistyles.runtime.breakpoint
+    if (breakpointValues.length !== new Set(breakpointValues).size) {
+        throwError('breakpoint values are duplicated')
+    }
+
+    return sortedBreakpoints
+}
+
+/**
+ * Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
+ *
+ * This function takes a screen width and an object of breakpoints. It returns the key of the breakpoint
+ * that the screen width falls into. The breakpoints are assumed to be sorted in ascending order.
+ *
+ * @template B - An object type where keys are strings and values are numbers representing screen widths.
+ * @param {number} width - The screen width to determine the breakpoint for.
+ * @param breakpointEntries - sorted pairs of breakpoints
+ * @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
+ *
+ * @example
+ * const breakpoints = { sm: 0, md: 768, lg: 1024 }
+ * getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
+ */
+export const getBreakpointFromScreenWidth = <B extends Breakpoints>(width: number, breakpointEntries: SortedBreakpointEntries<B>): keyof B & string => {
+    const [key] = breakpointEntries
+        .find(([, value], index, otherBreakpoints) => {
+            const minVal = value
+            const maxVal = otherBreakpoints[index + 1]?.[1]
+
+            if (!maxVal) {
+                return true
+            }
 
-    if (!breakpoint) {
-        return undefined
+            return width >= minVal && width < maxVal
+        }) as [keyof B & string, number]
+
+    return key
+}
+
+/**
+ * Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
+ *
+ * The function first checks for custom media queries. If a matching custom media query is found, its associated value is returned.
+ * If no custom media query matches, the function then checks for a direct breakpoint match.
+ * If there's no direct breakpoint match, the function simulates CSS cascading to find the closest matching breakpoint.
+ *
+ * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
+ *
+ * @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
+ * @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 {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
+ *
+ * @example
+ *
+ * const values = { ':w[200]': 'value1', sm: 'value2', md: 'value3' }
+ * const screenSize = { width: 250, height: 400 }
+ * const breakpoints = { sm: 300, md: 600, lg: 900 }
+ *
+ * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
+ */
+export const getValueForBreakpoint = <B extends Breakpoints>(
+    value: Record<keyof B & string, string | number | undefined>,
+    breakpoint: keyof B & string,
+    screenSize: ScreenSize,
+    breakpointPairs: SortedBreakpointEntries<B>
+): string | number | undefined => {
+    // the highest priority is for custom media queries
+    const customMediaQueries = Object
+        .entries(value)
+        .filter(([key]) => isMediaQuery(key))
+    const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize)
+
+    if (customMediaQueryKey && customMediaQueryKey in value) {
+        return value[customMediaQueryKey]
     }
 
-    const directBreakpoint = value[breakpoint]
+    // if no custom media query, or didn't match, proceed with defined breakpoints
+    const unifiedKey = breakpoint
+    const directBreakpoint = value[unifiedKey]
 
-    if (directBreakpoint || (breakpoint in value)) {
+    // if there is a direct key like 'sm' or 'md', or value for this key exists but its undefined
+    if (directBreakpoint || (unifiedKey in value)) {
         return directBreakpoint
     }
 
-    const breakpointPairs = unistyles.registry.sortedBreakpointPairs
-    const currentBreakpointIndex = breakpointPairs
-        .findIndex(([key]) => key === breakpoint)
+    // there is no direct hit for breakpoint nor media-query, so let's simulate CSS cascading
+    const currentBreakpoint = breakpointPairs
+        .findIndex(([key]) => key === unifiedKey)
 
     const availableBreakpoints = breakpointPairs
-        .filter(([key], index) => index < currentBreakpointIndex && key in value)
+        .filter(([key], index) => index < currentBreakpoint && key && key in value)
         .map(([key]) => key)
 
-    return value[availableBreakpoints[availableBreakpoints.length - 1] as keyof UnistylesBreakpoints & string]
+    return breakpointPairs.length > 0
+        ? value[availableBreakpoints[availableBreakpoints.length - 1] as keyof B & string]
+        : undefined
 }

package/src/utils/common.ts

@@ -0,0 +1,14 @@
+import { Platform } from 'react-native'
+
+export const throwError = (message: string) => {
+    throw new Error(`🦄 [react-native-unistyles]: ${message}`)
+}
+
+export const warn = (message: string) => {
+    console.warn(`🦄 [react-native-unistyles]: ${message}`)
+}
+
+export const isWeb = Platform.OS === 'web'
+export const isIOS = Platform.OS === 'ios'
+export const isAndroid = Platform.OS === 'android'
+export const isServer = typeof window === 'undefined'

package/src/utils/index.ts

@@ -1,7 +1,13 @@
-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 { 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'

package/src/utils/mediaQueries.ts

@@ -0,0 +1,201 @@
+import type { ScreenSize } from '../types'
+
+/**
+ * Extracts numeric values from a coded string.
+ *
+ * The function is designed to process strings that have a format like "w[100,200]" or "h[300]".
+ * It removes characters 'w', 'h', '[', and ']' from the input string and then extracts the numbers.
+ *
+ * @param {string} codedValue - The input string to extract values from.
+ * @returns {Array<number>} An array of extracted numbers. Can contain one or two numbers based on the input format.
+ *
+ * @example
+ * extractValues("w[100,200]") // returns [100, 200]
+ * extractValues("h[300]")     // returns [300]
+ * extractValues("h[,300]")    // returns [0,300]
+ * extractValues("h[100,]")    // returns [100]
+ */
+export const extractValues = (codedValue: string): Array<number> => {
+    const [lh, rh] = codedValue
+        .replace(/[wh[\]]/g, '')
+        .split(',')
+
+    return rh
+        ? [Number(lh), Number(rh)]
+        : [Number(lh)]
+}
+
+/**
+ * Determines if the given screen size matches the specified breakpoint query.
+ *
+ * The function checks if the screen size (width and/or height) falls within the range
+ * specified by the breakpoint query. The query can specify width (using 'w'), height (using 'h'),
+ * or both.
+ *
+ * @param {string} query - The breakpoint query string. Examples: 'w[100,200]', 'h[300]', 'w[100,200]h[300,400]'.
+ * @param {ScreenSize} screenSize - The screen size to check against the breakpoint query.
+ * @returns {boolean} True if the screen size matches the breakpoint query, false otherwise.
+ *
+ * @example
+ * const screenSize = { width: 150, height: 350 }
+ * isWithinBreakpoint('w[100,200]', screenSize) // returns true
+ * isWithinBreakpoint('h[400]', screenSize)     // returns false
+ */
+export const isWithinBreakpoint = (query: string, screenSize: ScreenSize): boolean => {
+    if (query.includes('w') && query.includes('h')) {
+        return isWithinTheWidthAndHeight(query, screenSize)
+    }
+
+    if (query.charAt(0) === 'w') {
+        return isWithinTheWidth(query, screenSize.width)
+    }
+
+    if (query.charAt(0) === 'h') {
+        return isWithinTheHeight(query, screenSize.height)
+    }
+
+    return false
+}
+
+/**
+ * Determines if the given width matches the specified width range in the query.
+ *
+ * The function checks if the provided width falls within the range specified by the query.
+ * The query specifies a width range using a format like 'w[100,200]'. If only one value is provided,
+ * it's treated as a minimum width.
+ *
+ * @param {string} query - The width query string. Examples: 'w[100,200]' or 'w[100]'.
+ * @param {number} width - The width to check against the query.
+ * @returns {boolean} True if the width matches the query range, false otherwise.
+ *
+ * @example
+ * isWithinTheWidth('w[100,200]', 150) // returns true
+ * isWithinTheWidth('w[100]', 50)      // returns false
+ * isWithinTheWidth('w[100]', 150)     // returns true
+ */
+export const isWithinTheWidth = (query: string, width: number): boolean => {
+    const [minWidth, maxWidth] = extractValues(query) as [number, number | undefined]
+
+    if (maxWidth && width >= minWidth && width <= maxWidth) {
+        return true
+    }
+
+    return !maxWidth && width >= minWidth
+}
+
+/**
+ * Determines if the given height matches the specified height range in the query.
+ *
+ * The function checks if the provided height falls within the range specified by the query.
+ * The query specifies a height range using a format like 'h[100,200]'. If only one value is provided,
+ * it's treated as a minimum height.
+ *
+ * @param {string} query - The height query string. Examples: 'h[100,200]' or 'h[100]'.
+ * @param {number} height - The height to check against the query.
+ * @returns {boolean} True if the height matches the query range, false otherwise.
+ *
+ * @example
+ * isWithinTheHeight('h[100,200]', 150) // returns true
+ * isWithinTheHeight('h[100]', 50)      // returns false
+ * isWithinTheHeight('h[100]', 150)     // returns true
+ */
+export const isWithinTheHeight = (query: string, height: number): boolean => {
+    const [minHeight, maxHeight] = extractValues(query) as [number, number | undefined]
+
+    if (maxHeight && height >= minHeight && height <= maxHeight) {
+        return true
+    }
+
+    return !maxHeight && height >= minHeight
+}
+
+/**
+ * Determines if the given screen size matches both the specified width and height ranges in the query.
+ *
+ * The function checks if the provided screen size (both width and height) falls within the ranges
+ * specified by the query. The query can specify both width and height using a format like 'w[100,200]:h[300,400]'.
+ *
+ * @param {string} query - The combined width and height query string. Example: 'w[100,200]:h[300,400]'.
+ * @param {ScreenSize} screenSize - The screen size to check against the query.
+ * @returns {boolean} True if the screen size matches both the width and height ranges in the query, false otherwise.
+ *
+ * @example
+ * const screenSize = { width: 150, height: 350 }
+ * isWithinTheWidthAndHeight('w[100,200]:h[300,400]', screenSize) // returns true
+ * isWithinTheWidthAndHeight('w[100,200]:h[400,500]', screenSize) // returns false
+ */
+export const isWithinTheWidthAndHeight = (query: string, screenSize: ScreenSize): boolean => {
+    const result = query
+        .split(':')
+        .filter(Boolean)
+        .map(q => isWithinBreakpoint(q, screenSize))
+        .filter(Boolean)
+
+    return result.length === 2
+}
+
+/**
+ * Checks if the given query string is a valid custom media query.
+ *
+ * The valid custom media query formats include:
+ * - :w[200]
+ * - :w[0, 200]
+ * - :w[, 300]
+ * - :h[200]
+ * - :h[0, 500]
+ * - :h[,200]
+ * - :w[100, 300]:h[200,500]
+ * - :h[200,500]:w[100, 300]
+ *
+ * @param {string} query - The query string to be checked.
+ * @returns {boolean} Returns `true` if the query is a valid custom media query, otherwise `false`.
+ * @example
+ *
+ * isMediaQuery(':w[200]') // true
+ * isMediaQuery(':w100]')  // false
+ */
+export const isMediaQuery = (query: string): boolean => {
+    const regex = /^(?:(:w\[\d*(?:,\s?\d+)?])?(:h\[\d*(?:,\s?\d+)?])?|(:h\[\d*(?:,\s?\d+)?])?(:w\[\d*(?:,\s?\d+)?])?)$/
+
+    return query.length > 0 && regex.test(query)
+}
+
+/**
+ * Retrieves the first matching custom media query key based on the provided screen size.
+ *
+ * The function processes an array of media queries and returns the first query that matches
+ * the given screen size. The media queries can be in formats like:
+ * - w[200]
+ * - w[0, 200]
+ * - w[, 300]
+ * - h[200]
+ * - h[0, 500]
+ * - h[,200]
+ * - w[100, 300]:h[200,500]
+ * - h[200,500]:w[100, 300]
+ *
+ * @param {Array<[string, string | number]>} mediaQueries - An array of tuples containing media query keys and associated values.
+ * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
+ * @returns {string | undefined} Returns the first matching media query key or `undefined` if no match is found.
+ * @example
+ *
+ * const queries = [[':w[200]', 'value1'], [':h[300,500]', 'value2']]
+ * const size = { width: 250, height: 400 }
+ * getKeyForCustomMediaQuery(queries, size) // ':w[200]
+ */
+export const getKeyForCustomMediaQuery = (mediaQueries: Array<[string, string | number | undefined]>, screenSize: ScreenSize): string | undefined => {
+    const [matchedQuery] = mediaQueries
+        .flatMap(([key]) => {
+            if (key.includes('w') && key.includes('h')) {
+                return isWithinBreakpoint(key, screenSize) ? key : undefined
+            }
+
+            return key
+                .split(':')
+                .filter(Boolean)
+                .map(query => isWithinBreakpoint(query, screenSize) ? key : undefined)
+        })
+        .filter(Boolean)
+
+    return matchedQuery
+}

package/src/utils/normalizeStyles.ts

@@ -0,0 +1,2 @@
+// nothing to do here
+export const normalizeStyles = <T>(styles: T) => styles as T

package/src/{normalizer/normalizeStyle.ts → utils/normalizeStyles.web.ts}

@@ -1,6 +1,6 @@
+import { warn } from './common'
 import { preprocessor } from './normalizer'
-import { warn } from '../common'
-import type { NormalizedBoxShadow, NormalizedTextShadow, BoxShadow, TextShadow, RNStyle } from '../types'
+import type { NormalizedBoxShadow, NormalizedTextShadow, BoxShadow, TextShadow, Transforms } from '../types'
 
 const normalizeBoxShadow = <T extends BoxShadow>(style: T): NormalizedBoxShadow => {
     const requiredBoxShadowProperties = [
@@ -55,7 +55,7 @@ const normalizeTextShadow = <T extends TextShadow>(style: T): NormalizedTextShad
     }
 }
 
-export const normalizeStyle = <T extends RNStyle>(style: T): T => {
+export const normalizeStyles = <T extends BoxShadow | TextShadow | { transform: Transforms }>(style: T): T => {
     const normalizedTransform = ('transform' in style && Array.isArray(style.transform))
         ? { transform: preprocessor.createTransformValue(style.transform) }
         : {}

package/src/{normalizer → utils}/normalizer.ts

@@ -1,7 +1,7 @@
 // based on react-native-web normalizer
 // https://github.com/necolas/react-native-web
 import normalizeColors from '@react-native/normalize-colors'
-import type { TextShadow, Transforms, BoxShadow, Nullable } from '../types'
+import type { TextShadow, Transforms, BoxShadow } from '../types'
 
 type Preprocessor = {
     createTextShadowValue(style: TextShadow): string,
@@ -15,9 +15,9 @@ export const normalizeColor = (color: string, opacity: number = 1) => {
         return color
     }
 
-    const integer = normalizeColors(color) as Nullable<number>
+    const integer = normalizeColors(color) as number | null
 
-    // If the color is an unknown format, the return value is null
+    // If the colour is an unknown format, the return value is null
     if (integer === null) {
         return color
     }
@@ -37,8 +37,7 @@ export const normalizeColor = (color: string, opacity: number = 1) => {
 }
 
 export const normalizeNumericValue = (value: number) => value ? `${value}px` : value
-
-const normalizeTransform = <T>(key: string, value: T) => {
+const normalizeTransform = (key: string, value: number | string) => {
     if (key.includes('scale')) {
         return value
     }

package/src/utils/styles.ts

@@ -1,14 +1,36 @@
-import type { Optional, RNStyle, RNValue } from '../types'
+import type { Breakpoints, CustomNamedStyles, ScreenSize, SortedBreakpointEntries } from '../types'
 import { getValueForBreakpoint } from './breakpoints'
-import { isAndroid, isIOS } from '../common'
-import { withPlugins } from './withPlugins'
+import { normalizeStyles } from './normalizeStyles'
+import { isAndroid, isIOS, isWeb } from './common'
 
-export const proxifyFunction = (
-    key: string,
-    fn: Function,
-    variant?: Record<string, Optional<string>>
+/**
+ * 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>
 ): Function => new Proxy(fn, {
-    apply: (target, thisArg, argumentsList) => withPlugins(key, parseStyle(target.apply(thisArg, argumentsList), variant))
+    apply: (target, thisArg, argumentsList) =>
+        parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, breakpointPairs)
 })
 
 export const isPlatformColor = <T extends {}>(value: T): boolean => {
@@ -19,57 +41,83 @@ export const isPlatformColor = <T extends {}>(value: T): boolean => {
     return isAndroid && 'resource_paths' in value && typeof value.resource_paths === 'object'
 }
 
-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)
+/**
+ * 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>]
+    ]
 
-            return acc
-        }
+    const parsedStyles = Object
+        .fromEntries(entries
+            .map(([key, value]) => {
+                const hasNestedProperties = key === 'shadowOffset' || key === 'textShadowOffset'
 
-        // transforms
-        if (key === 'transform' && Array.isArray(value)) {
-            acc[key] = value.map(value => parseStyle(value, variant))
+                if (hasNestedProperties) {
+                    return [
+                        key,
+                        parseStyle(value as CustomNamedStyles<T, B>, breakpoint, screenSize, breakpointPairs)
+                    ]
+                }
 
-            return acc
-        }
+                const isTransform = key === 'transform'
 
-        // values or platform colors
-        if (typeof value !== 'object' || isPlatformColor(value)) {
-            acc[key as keyof T] = value
+                if (isTransform && Array.isArray(value)) {
+                    return [
+                        key,
+                        value.map(value => parseStyle(value, breakpoint, screenSize, breakpointPairs))
+                    ]
+                }
 
-            return acc
-        }
+                const isDynamicFunction = typeof value === 'function'
+                const isValidStyle = typeof value !== 'object' || isPlatformColor(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 ?? {})
-                    }), {})
-            }
-        }
+                if (isDynamicFunction || isValidStyle) {
+                    return [key, value]
+                }
 
-        // don't parse media queries and breakpoints
-        if (!parseMediaQueries) {
-            return {
-                ...acc,
-                [key]: value
-            }
-        }
+                return [
+                    key,
+                    getValueForBreakpoint<B>(
+                        value as Record<keyof B & string, string | number | undefined>,
+                        breakpoint,
+                        screenSize,
+                        breakpointPairs
+                    )
+                ]
+            })
+        )
 
-        return {
-            ...acc,
-            [key]: getValueForBreakpoint(value as Record<string, RNValue>)
-        }
-    }, {} as T)
+    return isWeb
+        ? normalizeStyles(parsedStyles)
+        : parsedStyles
+}

package/android/CMakeLists.txt

@@ -1,27 +0,0 @@
-cmake_minimum_required(VERSION 3.9.0)
-
-project(unistyles)
-
-add_library(unistyles
-    SHARED
-    ../cxx/UnistylesRuntime.cpp
-    ./src/main/cxx/cpp-adapter.cpp
-)
-
-include_directories(
-    ../cxx
-)
-
-set_target_properties(unistyles PROPERTIES
-    CXX_STANDARD 17
-    CXX_STANDARD_REQUIRED ON
-    CXX_EXTENSIONS OFF
-    POSITION_INDEPENDENT_CODE ON
-)
-
-find_package(ReactAndroid REQUIRED CONFIG)
-
-target_link_libraries(unistyles
-    ReactAndroid::jsi
-    android
-)