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

package/src/index.ts

@@ -1,2 +1,30 @@
-export { UnistylesTheme } from './UnistylesTheme'
-export { createUnistyles } from './createUnistyles'
+import { unistyles } from './Unistyles'
+import type { UnistylesThemes, UnistylesBreakpoints } from './global'
+import { ScreenOrientation } from './types'
+
+export { useInitialTheme } from './useInitialTheme'
+
+export { useStyles } from './useStyles'
+export { createStyleSheet } from './createStyleSheet'
+
+const { addThemes, addBreakpoints, addConfig  } = unistyles.registry
+const UnistylesRuntime = unistyles.runtime
+const UnistylesRegistry = {
+    addThemes,
+    addBreakpoints,
+    addConfig
+}
+
+export {
+    UnistylesRuntime,
+    UnistylesRegistry
+}
+
+export {
+    ScreenOrientation
+}
+
+export type {
+    UnistylesThemes,
+    UnistylesBreakpoints
+}

package/src/types/breakpoints.ts

@@ -1,8 +1,6 @@
+import type { UnistylesBreakpoints } from '../global'
 import type { MediaQueries } from './mediaQueries'
 
-export type Breakpoints = Record<string, number>
-export type SortedBreakpointEntries<B extends Breakpoints> = [[keyof B & string, number]]
-
 export type ScreenSize = {
     width: number,
     height: number
@@ -12,22 +10,22 @@ export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST
 
 type WithEmptyObject<V> = keyof V extends never ? {} : V
 
-export type ExtractBreakpoints<T, B extends Breakpoints> = T extends Partial<Record<keyof B & string, infer V>>
+export type ExtractBreakpoints<T> = T extends Partial<Record<keyof UnistylesBreakpoints & string, infer V>>
     ? WithEmptyObject<V>
     : T extends (...args: infer A) => infer R
-        ? (...args: A) => ExtractBreakpoints<R, B>
+        ? (...args: A) => ExtractBreakpoints<R>
         : {
             [K in keyof T]: T[K] extends (...args: infer A) => infer R
-                ? (...args: A) => ExtractBreakpoints<R, B>
+                ? (...args: A) => ExtractBreakpoints<R>
                 : T[K] extends object
-                    ? ExtractBreakpoints<T[K], B>
+                    ? ExtractBreakpoints<T[K]>
                     : T[K]
         }
 
-export type RemoveKeysWithPrefix<T, B extends Breakpoints> = T extends (...args: Array<any>) => infer R
-    ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B>
+export type RemoveKeysWithPrefix<T> = T extends (...args: Array<any>) => infer R
+    ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R>
     : T extends object
         ? T extends Record<string, infer _V>
-            ? { [K in keyof T as K extends MediaQueries ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B> }
-            : { [K in keyof T]: RemoveKeysWithPrefix<T[K], B> }
+            ? { [K in keyof T as K extends MediaQueries ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
+            : { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
         : T

package/src/types/core.ts

@@ -14,8 +14,8 @@ import type {
     TranslateYTransform
 } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
-import type { Breakpoints } from './breakpoints'
 import type { MediaQueries } from './mediaQueries'
+import type { UnistylesBreakpoints } from '../global'
 
 type ShadowOffset = {
     width: number,
@@ -60,14 +60,14 @@ type UnistyleView<B> = DeepUniStyle<Omit<ViewStyle, NestedTypes>, B>
 type UnistyleText<B> = DeepUniStyle<Omit<TextStyle, NestedTypes>, B>
 type UnistyleImage<B> = DeepUniStyle<Omit<ImageStyle, NestedTypes>, B>
 
-export type StaticStyles<B extends Breakpoints> =
+export type StaticStyles<B> =
     | UnistyleView<B>
     | UnistyleText<B>
     | UnistyleImage<B>
     & UnistyleNested<B>
 
-export type CustomNamedStyles<T, B extends Breakpoints> = {
-    [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles<B>
-        ? (...args: A) => StaticStyles<B>
-        : StaticStyles<B>
+export type CustomNamedStyles<T> = {
+    [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles<UnistylesBreakpoints>
+        ? (...args: A) => StaticStyles<UnistylesBreakpoints>
+        : StaticStyles<UnistylesBreakpoints>
 }

package/src/types/cxx.ts

@@ -0,0 +1,65 @@
+import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
+
+export type Nullable<T> = T | null
+export type ColorSchemeName = 'light' | 'dark' | undefined
+
+export type UnistylesConfig = {
+    adaptiveThemes?: boolean
+}
+
+export enum ScreenOrientation {
+    Portrait = 1,
+    Landscape = 2
+}
+
+export type UnistylesBridge = {
+    // getters
+    screenWidth: number,
+    screenHeight: number,
+    hasAdaptiveThemes: boolean,
+    theme: keyof UnistylesThemes,
+    breakpoint: keyof UnistylesBreakpoints,
+    colorScheme: ColorSchemeName,
+    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,
+}
+
+export enum CxxUnistylesEventTypes {
+    Theme = 'theme',
+    Size = 'size',
+    Breakpoint = 'breakpoint'
+}
+
+export type CxxUnistylesThemeEvent = {
+    type: CxxUnistylesEventTypes.Theme,
+    payload: {
+        themeName: keyof UnistylesThemes
+    }
+}
+
+export type CxxUnistylesSizeEvent = {
+    type: CxxUnistylesEventTypes.Size,
+    payload: {
+        width: number,
+        height: number
+    }
+}
+
+export type CxxUnistylesBreakpointEvent = {
+    type: CxxUnistylesEventTypes.Breakpoint,
+    payload: {
+        breakpoint: 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,66 @@
+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.themeName))
+    const [breakpoint, setBreakpoint] = useState(unistyles.runtime.breakpoint)
+    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.themeName))
+
+                        return
+                    }
+                    // this event is not available on mobile
+                    case CxxUnistylesEventTypes.Size: {
+                        const sizeEvent = event as CxxUnistylesSizeEvent
+
+                        setScreenSize({
+                            width: sizeEvent.payload.width,
+                            height: sizeEvent.payload.height
+                        })
+
+                        return
+                    }
+                    case CxxUnistylesEventTypes.Breakpoint: {
+                        const breakpointEvent = event as CxxUnistylesBreakpointEvent
+
+                        setBreakpoint(breakpointEvent.payload.breakpoint)
+
+                        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
+}