react-native-unistyles 2.0.0-alpha.1 → 2.0.0-alpha.2

package/src/types/cxx.ts

@@ -0,0 +1,61 @@
+import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
+
+export type Nullable<T> = T | null
+export enum UnistylesColorScheme {
+    System = 'system',
+    Manual = 'manual'
+}
+
+export type UnistylesConfig = {
+    colorScheme?: UnistylesColorScheme,
+    featureFlags?: Array<string>
+}
+
+export type UnistylesBridge = {
+    // getters
+    theme: keyof UnistylesThemes
+    breakpoint: keyof UnistylesBreakpoints,
+    colorScheme: UnistylesColorScheme,
+    sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>
+
+    // setters
+    useBreakpoints(breakpoints: UnistylesBreakpoints): void,
+    useTheme(name: keyof UnistylesThemes): void,
+    useColorScheme(scheme: UnistylesColorScheme): void,
+    useFeatureFlags(flags: Array<string>): void
+}
+
+export enum CxxUnistylesEventTypes {
+    Theme = 'theme',
+    Size = 'size',
+    Breakpoint = 'breakpoint'
+}
+
+export type CxxUnistylesThemeEvent = {
+    type: CxxUnistylesEventTypes.Theme,
+    payload: {
+        currentTheme: keyof UnistylesThemes
+    }
+}
+
+export type CxxUnistylesSizeEvent = {
+    type: CxxUnistylesEventTypes.Size,
+    payload: {
+        width: number,
+        height: number
+    }
+}
+
+export type CxxUnistylesBreakpointEvent = {
+    type: CxxUnistylesEventTypes.Breakpoint,
+    payload: {
+        currentBreakpoint: keyof UnistylesBreakpoints
+    }
+}
+
+export type UnistylesEvents = CxxUnistylesThemeEvent | CxxUnistylesSizeEvent | CxxUnistylesBreakpointEvent
+
+export enum UnistylesError {
+    RuntimeUnavailable = 'UNISTYLES_ERROR_RUNTIME_UNAVAILABLE',
+    ThemeNotFound = 'UNISTYLES_ERROR_THEME_NOT_FOUND'
+}

package/src/types/index.ts

@@ -1,9 +1,10 @@
+export * from './normalizer'
+export * from './cxx'
 export type { CustomNamedStyles } from './core'
+export type { MediaQueries } from './mediaQueries'
 export type {
     ScreenSize,
-    Breakpoints,
     CreateStylesFactory,
     ExtractBreakpoints,
-    RemoveKeysWithPrefix,
-    SortedBreakpointEntries
+    RemoveKeysWithPrefix
 } from './breakpoints'

package/src/types/normalizer.ts

@@ -0,0 +1,29 @@
+import type { ShadowStyleIOS, TextStyle, TransformsStyle } from 'react-native'
+
+type TransformArrayElement<T> = T extends Array<infer U> ? U : never
+type BoxShadow = Required<ShadowStyleIOS>
+type TextShadow = Required<Pick<TextStyle, 'textShadowColor' | 'textShadowOffset' | 'textShadowRadius'>>
+type Transforms = Array<TransformArrayElement<TransformsStyle['transform']>>
+
+type NormalizedBoxShadow = {
+    shadowColor: undefined,
+    shadowOffset: undefined,
+    shadowOpacity: undefined,
+    shadowRadius: undefined,
+    boxShadow?: string
+}
+
+type NormalizedTextShadow = {
+    textShadowColor: undefined
+    textShadowOffset: undefined
+    textShadowRadius: undefined,
+    textShadow?: string
+}
+
+export type {
+    BoxShadow,
+    TextShadow,
+    Transforms,
+    NormalizedBoxShadow,
+    NormalizedTextShadow
+}

package/src/useInitialTheme.ts

@@ -0,0 +1,7 @@
+import { useRef } from 'react'
+import { unistyles } from './Unistyles'
+import type { UnistylesThemes } from './global'
+
+export const useInitialTheme = (forName: keyof UnistylesThemes) => {
+    useRef(unistyles.runtime.setTheme(forName))
+}

package/src/useStyles.ts

@@ -0,0 +1,49 @@
+import { useMemo } from 'react'
+import { StyleSheet } from 'react-native'
+import { parseStyle, proxifyFunction } from './utils'
+import type { CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types'
+import { useUnistyles } from './useUnistyles'
+import type { UnistylesThemes } from './global'
+
+// todo types
+type T = UnistylesThemes[keyof UnistylesThemes]
+
+export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
+    const { theme, breakpoint, screenSize } = useUnistyles()
+
+    if (!stylesheet) {
+        return {
+            theme,
+            breakpoint,
+            styles: {} as ExtractBreakpoints<RemoveKeysWithPrefix<ST>>
+        }
+    }
+
+    const parsedStyles = useMemo(() => typeof stylesheet === 'function'
+        ? stylesheet(theme!)
+        : stylesheet, [theme, stylesheet])
+
+    const dynamicStyleSheet = useMemo(() => Object
+        .entries(parsedStyles)
+        .reduce((acc, [key, value]) => {
+            const style = value as CustomNamedStyles<ST>
+
+            if (typeof value === 'function') {
+                return {
+                    ...acc,
+                    [key]: proxifyFunction(value, breakpoint!, screenSize)
+                }
+            }
+
+            return StyleSheet.create({
+                ...acc,
+                [key]: parseStyle<ST>(style, breakpoint!, screenSize)
+            })
+        }, {} as ST), [breakpoint, screenSize, parsedStyles])
+
+    return {
+        theme,
+        breakpoint,
+        styles: dynamicStyleSheet as ExtractBreakpoints<RemoveKeysWithPrefix<ST>>
+    }
+}

package/src/useUnistyles.ts

@@ -0,0 +1,67 @@
+import { NativeEventEmitter, NativeModules } from 'react-native'
+import { useEffect, useState } from 'react'
+import type {
+    CxxUnistylesBreakpointEvent,
+    CxxUnistylesSizeEvent,
+    CxxUnistylesThemeEvent,
+    UnistylesEvents
+} from './types'
+import { CxxUnistylesEventTypes } from './types'
+import { unistyles } from './Unistyles'
+
+const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
+
+export const useUnistyles = () => {
+    const [theme, setTheme] = useState(unistyles.runtime.getTheme(unistyles.runtime.theme))
+    const [breakpoint, setBreakpoint] = useState(unistyles.runtime.currentBreakpoint)
+    const [screenSize, setScreenSize] = useState({
+        width: 0,
+        height: 0
+    })
+
+    useEffect(() => {
+        const subscription = unistylesEvents.addListener(
+            'onChange',
+            (event: UnistylesEvents) => {
+                switch (event.type) {
+                    case CxxUnistylesEventTypes.Theme: {
+                        const themeEvent = event as CxxUnistylesThemeEvent
+
+                        setTheme(unistyles.runtime.getTheme(themeEvent.payload.currentTheme))
+
+                        return
+                    }
+                    case CxxUnistylesEventTypes.Size: {
+                        const sizeEvent = event as CxxUnistylesSizeEvent
+
+                        setScreenSize({
+                            width: sizeEvent.payload.width,
+                            height: sizeEvent.payload.height
+                        })
+                        // todo
+                        // setBreakpoint(unistyles.runtime.currentBreakpoint)
+
+                        return
+                    }
+                    case CxxUnistylesEventTypes.Breakpoint: {
+                        const breakpointEvent = event as CxxUnistylesBreakpointEvent
+
+                        setBreakpoint(breakpointEvent.payload.currentBreakpoint)
+
+                        return
+                    }
+                    default:
+                        return
+                }
+            }
+        )
+
+        return subscription.remove
+    }, [])
+
+    return {
+        theme,
+        breakpoint,
+        screenSize
+    }
+}

package/src/utils/breakpoints.ts

@@ -1,6 +1,8 @@
+import { unistyles } from '../Unistyles'
 import { throwError } from './common'
-import type { Breakpoints, ScreenSize, SortedBreakpointEntries } from '../types'
+import type { ScreenSize, MediaQueries } from '../types'
 import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
+import type { UnistylesBreakpoints } from '../global'
 
 /**
  * Sorts the breakpoints object based on its numeric values in ascending order and validates them.
@@ -21,17 +23,17 @@ import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
  * 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 => {
+export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): UnistylesBreakpoints => {
     const sortedPairs = Object
         .entries(breakpoints)
         .sort((breakpoint1, breakpoint2) => {
             const [, value1] = breakpoint1
             const [, value2] = breakpoint2
 
-            return value1 - value2
+            return (value1 as number) - (value2 as number)
         })
 
-    const sortedBreakpoints =  Object.freeze(Object.fromEntries(sortedPairs)) as B
+    const sortedBreakpoints =  Object.freeze(Object.fromEntries(sortedPairs)) as UnistylesBreakpoints
     const breakpointValues = Object.values(sortedBreakpoints)
     const [firstBreakpoint] = breakpointValues
 
@@ -61,7 +63,7 @@ export const sortAndValidateBreakpoints = <B extends Breakpoints>(breakpoints: B
  * 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 => {
+export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>): keyof UnistylesBreakpoints & string => {
     const [key] = breakpointEntries
         .find(([, value], index, otherBreakpoints) => {
             const minVal = value
@@ -72,7 +74,7 @@ export const getBreakpointFromScreenWidth = <B extends Breakpoints>(width: numbe
             }
 
             return width >= minVal && width < maxVal
-        }) as [keyof B & string, number]
+        }) as [keyof UnistylesBreakpoints & string, number]
 
     return key
 }
@@ -101,24 +103,23 @@ export const getBreakpointFromScreenWidth = <B extends Breakpoints>(width: numbe
  *
  * 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>
+export const getValueForBreakpoint = (
+    value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>,
+    breakpoint: keyof UnistylesBreakpoints,
+    screenSize: ScreenSize
 ): 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)
+    const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize) as keyof typeof value
 
     if (customMediaQueryKey && customMediaQueryKey in value) {
         return value[customMediaQueryKey]
     }
 
     // if no custom media query, or didn't match, proceed with defined breakpoints
-    const unifiedKey = breakpoint.toLowerCase()
+    const unifiedKey = breakpoint?.toLowerCase() as keyof typeof value
     const directBreakpoint = value[unifiedKey]
 
     // if there is a direct key like 'sm' or 'md', or value for this key exists but its undefined
@@ -127,6 +128,7 @@ export const getValueForBreakpoint = <B extends Breakpoints>(
     }
 
     // there is no direct hit for breakpoint nor media-query, so let's simulate CSS cascading
+    const breakpointPairs = unistyles.runtime.sortedBreakpoints
     const currentBreakpoint = breakpointPairs
         .findIndex(([key]) => key === unifiedKey)
 
@@ -135,6 +137,6 @@ export const getValueForBreakpoint = <B extends Breakpoints>(
         .map(([key]) => key)
 
     return breakpointPairs.length > 0
-        ? value[availableBreakpoints[availableBreakpoints.length - 1] as keyof B & string]
+        ? value[availableBreakpoints[availableBreakpoints.length - 1] as keyof UnistylesBreakpoints & string]
         : undefined
 }

package/src/utils/common.ts

@@ -8,4 +8,5 @@ export const warn = (message: string) => {
     console.warn(`🦄 [react-native-unistyles]: ${message}`)
 }
 
-export const isWeb = () => Platform.OS === 'web'
+export const isWeb = Platform.OS === 'web'
+export const isServer = typeof window === 'undefined'

package/src/utils/index.ts

@@ -1,6 +1,8 @@
 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,

package/src/utils/module.d.ts

@@ -0,0 +1,3 @@
+declare module '@react-native/normalize-colors' {
+    export default function normalizeColor(color: string): number | null
+}

package/src/utils/normalizeStyles.web.ts

@@ -1,29 +1,8 @@
 import { warn } from './common'
+import { preprocessor } from './normalizer'
+import type { NormalizedBoxShadow, NormalizedTextShadow, BoxShadow, TextShadow, Transforms } from '../types'
 
-const preprocessor: Preprocessor = require('react-native-web/src/exports/StyleSheet/preprocess.js')
-
-type Preprocessor = {
-    createTextShadowValue<T>(styles: any): T,
-    createBoxShadowValue<T>(styles: any): T,
-    createTransformValue<T>(transforms: any): T,
-}
-
-type NormalizedBoxShadow = {
-    shadowColor: undefined,
-    shadowOffset: undefined,
-    shadowOpacity: undefined,
-    shadowRadius: undefined,
-    boxShadow?: string
-}
-
-type NormalizedTextShadow = {
-    textShadowColor: undefined
-    textShadowOffset: undefined
-    textShadowRadius: undefined,
-    textShadow?: string
-}
-
-const normalizeBoxShadow = <T extends {}>(styles: T): NormalizedBoxShadow => {
+const normalizeBoxShadow = <T extends BoxShadow>(style: T): NormalizedBoxShadow => {
     const requiredBoxShadowProperties = [
         'shadowColor',
         'shadowOffset',
@@ -31,7 +10,7 @@ const normalizeBoxShadow = <T extends {}>(styles: T): NormalizedBoxShadow => {
         'shadowRadius'
     ]
 
-    if (!requiredBoxShadowProperties.every(prop => prop in styles)) {
+    if (!requiredBoxShadowProperties.every(prop => prop in style)) {
         warn(`can't apply box shadow as you miss at least one of these properties: ${requiredBoxShadowProperties.join(', ')}`)
 
         return {
@@ -43,7 +22,7 @@ const normalizeBoxShadow = <T extends {}>(styles: T): NormalizedBoxShadow => {
     }
 
     return {
-        boxShadow: preprocessor.createBoxShadowValue(styles),
+        boxShadow: preprocessor.createBoxShadowValue(style),
         shadowColor: undefined,
         shadowOffset: undefined,
         shadowOpacity: undefined,
@@ -51,14 +30,14 @@ const normalizeBoxShadow = <T extends {}>(styles: T): NormalizedBoxShadow => {
     }
 }
 
-const normalizeTextShadow = <T extends {}>(styles: T): NormalizedTextShadow => {
+const normalizeTextShadow = <T extends TextShadow>(style: T): NormalizedTextShadow => {
     const requiredTextShadowProperties = [
         'textShadowColor',
         'textShadowOffset',
         'textShadowRadius'
     ]
 
-    if (!requiredTextShadowProperties.every(prop => prop in styles)) {
+    if (!requiredTextShadowProperties.every(prop => prop in style)) {
         warn(`can't apply text shadow as you miss at least one of these properties: ${requiredTextShadowProperties.join(', ')}`)
 
         return {
@@ -69,33 +48,33 @@ const normalizeTextShadow = <T extends {}>(styles: T): NormalizedTextShadow => {
     }
 
     return {
-        textShadow: preprocessor.createTextShadowValue(styles),
+        textShadow: preprocessor.createTextShadowValue(style),
         textShadowColor: undefined,
         textShadowOffset: undefined,
         textShadowRadius: undefined
     }
 }
 
-export const normalizeStyles = <T extends {}>(styles: T): T => {
-    const normalizedTransform = ('transform' in styles && Array.isArray(styles.transform))
-        ? { transform: preprocessor.createTransformValue(styles.transform) }
+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) }
         : {}
 
     const normalizedBoxShadow = (
-        'shadowColor' in styles ||
-        'shadowOffset' in styles ||
-        'shadowOpacity' in styles ||
-        'shadowRadius' in styles
-    ) ? normalizeBoxShadow(styles) : {}
+        'shadowColor' in style ||
+        'shadowOffset' in style ||
+        'shadowOpacity' in style ||
+        'shadowRadius' in style
+    ) ? normalizeBoxShadow(style as BoxShadow) : {}
 
     const normalizedTextShadow = (
-        'textShadowColor' in styles ||
-        'textShadowOffset' in styles ||
-        'textShadowRadius' in styles
-    ) ? normalizeTextShadow(styles) : {}
+        'textShadowColor' in style ||
+        'textShadowOffset' in style ||
+        'textShadowRadius' in style
+    ) ? normalizeTextShadow(style as TextShadow) : {}
 
     return {
-        ...styles,
+        ...style,
         ...normalizedTransform,
         ...normalizedBoxShadow,
         ...normalizedTextShadow

package/src/utils/normalizer.ts

@@ -0,0 +1,99 @@
+// 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 } from '../types'
+
+type Preprocessor = {
+    createTextShadowValue(style: TextShadow): string,
+    createBoxShadowValue(style: Required<BoxShadow>): string,
+    createTransformValue(transforms: Required<Transforms>): string,
+}
+
+export const normalizeColor = (color: string, opacity: number = 1) => {
+    // If the opacity is 1 there's no need to normalize the color
+    if (opacity === 1) {
+        return color
+    }
+
+    const integer = normalizeColors(color) as number | null
+
+    // If the colour is an unknown format, the return value is null
+    if (integer === null) {
+        return color
+    }
+
+    const hex = integer.toString(16).padStart(8, '0')
+
+    if (hex.length === 8) {
+        const [r = 0, g = 0, b = 0, a = 1] = hex
+            .split(/(?=(?:..)*$)/)
+            .map(x => parseInt(x, 16))
+            .filter(num => !isNaN(num))
+
+        return `rgba(${r},${g},${b},${((a as number) / 255) * opacity})`
+    }
+
+    return color
+}
+
+export const normalizeNumericValue = (value: number) => value ? `${value}px` : value
+const normalizeTransform = (key: string, value: number | string) => {
+    if (key.includes('scale')) {
+        return value
+    }
+
+    if (typeof value === 'number') {
+        return normalizeNumericValue(value)
+    }
+
+    return value
+}
+
+const createTextShadowValue = (style: TextShadow) => {
+    // at this point every prop is present
+    const { textShadowColor, textShadowOffset, textShadowRadius } = style
+    const offsetX = normalizeNumericValue(textShadowOffset.width)
+    const offsetY = normalizeNumericValue(textShadowOffset.height)
+    const radius = normalizeNumericValue(textShadowRadius)
+    const color = normalizeColor(textShadowColor as string)
+
+    return `${offsetX} ${offsetY} ${radius} ${color}`
+}
+
+const createBoxShadowValue = (style: BoxShadow) => {
+    // at this point every prop is present
+    const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style
+    const offsetX = normalizeNumericValue(shadowOffset.width)
+    const offsetY = normalizeNumericValue(shadowOffset.height)
+    const radius = normalizeNumericValue(shadowRadius)
+    const color = normalizeColor(shadowColor as string, shadowOpacity as number)
+
+    return `${offsetX} ${offsetY} ${radius} ${color}`
+}
+
+const createTransformValue = (transforms: Transforms) => transforms
+    .map(transform => {
+        const [key] = Object.keys(transform)
+
+        if (!key) {
+            return undefined
+        }
+
+        const value = transform[key as keyof typeof transform]
+
+        switch(key) {
+            case 'matrix':
+            case 'matrix3d':
+                return `${key}(${(value as Array<number>).join(',')})`
+            default:
+                return `${key}(${normalizeTransform(key, value)})`
+        }
+    })
+    .filter(Boolean)
+    .join(' ')
+
+export const preprocessor: Preprocessor = {
+    createTextShadowValue,
+    createBoxShadowValue,
+    createTransformValue
+}

package/src/utils/styles.ts

@@ -1,7 +1,8 @@
-import type { Breakpoints, CustomNamedStyles, ScreenSize, SortedBreakpointEntries } from '../types'
+import type { CustomNamedStyles, ScreenSize } from '../types'
 import { getValueForBreakpoint } from './breakpoints'
 import { normalizeStyles } from './normalizeStyles'
 import { isWeb } from './common'
+import type { UnistylesBreakpoints } from '../global'
 
 /**
  * Proxies a function to parse its return value for custom media queries or breakpoints.
@@ -24,13 +25,12 @@ import { isWeb } from './common'
  * 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 = (
+    fn: Function, breakpoint: keyof UnistylesBreakpoints & string,
+    screenSize: ScreenSize
 ): Function => new Proxy(fn, {
     apply: (target, thisArg, argumentsList) =>
-        parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, breakpointPairs)
+        parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize)
 })
 
 /**
@@ -58,15 +58,14 @@ export const proxifyFunction = <B extends Breakpoints>(
  * 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>
+export const parseStyle = <T>(
+    style: CustomNamedStyles<T>,
+    breakpoint: keyof UnistylesBreakpoints & string,
+    screenSize: ScreenSize
 ): T => {
     const entries = Object.entries(style) as [[
         keyof T,
-        CustomNamedStyles<T, B> | Record<keyof B & string, string | number | undefined>]
+        CustomNamedStyles<T> | Record<keyof UnistylesBreakpoints & string, string | number | undefined>]
     ]
 
     const parsedStyles = Object
@@ -77,7 +76,7 @@ export const parseStyle = <T, B extends Breakpoints>(
                 if (hasNestedProperties) {
                     return [
                         key,
-                        parseStyle(value as CustomNamedStyles<T, B>, breakpoint, screenSize, breakpointPairs)
+                        parseStyle(value as CustomNamedStyles<T>, breakpoint, screenSize)
                     ]
                 }
 
@@ -86,7 +85,7 @@ export const parseStyle = <T, B extends Breakpoints>(
                 if (isTransform && Array.isArray(value)) {
                     return [
                         key,
-                        value.map(value => parseStyle(value, breakpoint, screenSize, breakpointPairs))
+                        value.map(value => parseStyle(value, breakpoint, screenSize))
                     ]
                 }
 
@@ -99,17 +98,16 @@ export const parseStyle = <T, B extends Breakpoints>(
 
                 return [
                     key,
-                    getValueForBreakpoint<B>(
-                        value as Record<keyof B & string, string | number | undefined>,
+                    getValueForBreakpoint(
+                        value as Record<keyof UnistylesBreakpoints & string, string | number | undefined>,
                         breakpoint,
-                        screenSize,
-                        breakpointPairs
+                        screenSize
                     )
                 ]
             })
         )
 
-    return isWeb()
+    return isWeb
         ? normalizeStyles(parsedStyles)
         : parsedStyles
 }

package/lib/commonjs/UnistylesTheme.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.UnistylesTheme = exports.UnistylesContext = void 0;
-var _react = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const UnistylesContext = exports.UnistylesContext = /*#__PURE__*/(0, _react.createContext)({});
-const UnistylesTheme = _ref => {
-  let {
-    theme,
-    children
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(UnistylesContext.Provider, {
-    value: theme
-  }, children);
-};
-exports.UnistylesTheme = UnistylesTheme;
-//# sourceMappingURL=UnistylesTheme.js.map