react-native-unistyles 1.0.0-beta.4 → 1.0.0-beta.5

package/src/types.ts

@@ -14,6 +14,11 @@ import type {
     TranslateXTransform,
     TranslateYTransform
 } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
+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,
@@ -22,26 +27,45 @@ export type ScreenSize = {
 
 export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST
 
-type StyleProperty<T, B extends Record<string, number>> = {
+type StyleProperty<T, B extends Breakpoints> = {
     [K in keyof T]: {
         [innerKey in keyof B]?: T[K]
     } | {
-        [innerKey in string]?: T[K]
+        [innerKey in MediaQueries]?: T[K]
     } | T[K]
 }
 
-type ShadowOffsetProps<B extends Record<string, number>> = {
+type ShadowOffsetProps<B> = {
     shadowOffset: {
         width: number | {
             [innerKey in keyof B]?: number
+        } | {
+            [innerKey in MediaQueries]: number
         },
         height: number | {
             [innerKey in keyof B]?: number
+        } | {
+            [innerKey in MediaQueries]: number
         }
     }
 }
 
-type TransformStyles<B extends Record<string, number>> =
+type TextShadowOffsetProps<B> = {
+    textShadowOffset: {
+        width: number | {
+            [innerKey in keyof B]?: number
+        } | {
+            [innerKey in MediaQueries]: number
+        },
+        height: number | {
+            [innerKey in keyof B]?: number
+        } | {
+            [innerKey in MediaQueries]: number
+        }
+    }
+}
+
+type TransformStyles<B extends Breakpoints> =
     PerpectiveTransform | StyleProperty<PerpectiveTransform, B>
     | RotateTransform | StyleProperty<RotateTransform, B>
     | RotateXTransform | StyleProperty<RotateXTransform, B>
@@ -56,27 +80,30 @@ type TransformStyles<B extends Record<string, number>> =
     | SkewYTransform | StyleProperty<SkewYTransform, B>
     | MatrixTransform | StyleProperty<MatrixTransform, B>
 
-type TransformProps<B extends Record<string, number>> = {
+type TransformProps<B extends Breakpoints> = {
     transform: Array<TransformStyles<B>>
 }
 
-type UnistyleView = Omit<Omit<ViewStyle, 'shadowOffset'>, 'transform'>
-type UnistyleText = Omit<Omit<TextStyle, 'shadowOffset'>, 'transform'>
-type UnistyleImage = Omit<Omit<ImageStyle, 'shadowOffset'>, 'transform'>
+type UnistyleView = Omit<Omit<Omit<ViewStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>
+type UnistyleText = Omit<Omit<Omit<TextStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>
+type UnistyleImage = Omit<Omit<Omit<ImageStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>
 
-export type StaticStyles<B extends Record<string, number>> =
+export type StaticStyles<B extends Breakpoints> =
     | (UnistyleView | StyleProperty<UnistyleView, B>)
     | (UnistyleText | StyleProperty<UnistyleText, B>)
     | (UnistyleImage | StyleProperty<UnistyleImage, B>)
-    & TransformProps<B> & ShadowOffsetProps<B>
+    & TransformProps<B> & ShadowOffsetProps<B> & TextShadowOffsetProps<B>
 
-export type CustomNamedStyles<T, B extends Record<string, number>> = {
+export type CustomNamedStyles<T, B extends Breakpoints> = {
     [K in keyof T]: T[K] extends (...args: infer A) => unknown
         ? (...args: A) => StaticStyles<B>
         : StaticStyles<B>
 }
-export type ExtractBreakpoints<T, B extends Record<string, number>> = T extends Partial<Record<keyof B & string, infer V>>
-    ? V
+
+type WithEmptyObject<V> = keyof V extends never ? {} : V
+
+export type ExtractBreakpoints<T, B extends Breakpoints> = T extends Partial<Record<keyof B & string, infer V>>
+    ? WithEmptyObject<V>
     : T extends (...args: infer A) => infer R
         ? (...args: A) => ExtractBreakpoints<R, B>
         : {
@@ -87,10 +114,10 @@ export type ExtractBreakpoints<T, B extends Record<string, number>> = T extends
                     : T[K]
         }
 
-export type RemoveKeysWithPrefix<T, B extends Record<string, number>> = T extends (...args: Array<any>) => infer R
+export type RemoveKeysWithPrefix<T, B extends Breakpoints> = T extends (...args: Array<any>) => infer R
     ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B>
     : T extends object
         ? T extends Record<string, infer _V>
-            ? { [K in keyof T as K extends `:w${string}` | `:h${string}` ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B> }
+            ? { [K in keyof T as K extends MediaQueries ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B> }
             : { [K in keyof T]: RemoveKeysWithPrefix<T[K], B> }
         : T

package/src/utils/breakpoints.ts

@@ -1,5 +1,5 @@
 import { throwError } from './common'
-import type { ScreenSize } from '../types'
+import type { Breakpoints, ScreenSize, SortedBreakpointEntries } from '../types'
 import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
 
 /**
@@ -21,7 +21,7 @@ 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 Record<string, number>>(breakpoints: B): B => {
+export const sortAndValidateBreakpoints = <B extends Breakpoints>(breakpoints: B): B => {
     const sortedPairs = Object
         .entries(breakpoints)
         .sort((breakpoint1, breakpoint2) => {
@@ -54,16 +54,15 @@ export const sortAndValidateBreakpoints = <B extends Record<string, number>>(bre
  *
  * @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 {B} breakpoints - The breakpoints object to use for determination.
+ * @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 Record<string, number>>(width: number, breakpoints: B): keyof B & string => {
-    const [key] = Object
-        .entries(breakpoints)
+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]
@@ -90,7 +89,7 @@ export const getBreakpointFromScreenWidth = <B extends Record<string, number>>(w
  * @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 {B} breakpoints - An object representing the defined breakpoints.
+ * @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.
  *
@@ -102,7 +101,12 @@ export const getBreakpointFromScreenWidth = <B extends Record<string, number>>(w
  *
  * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
  */
-export const getValueForBreakpoint = <B extends Record<string, number>>(value: Record<keyof B & string, string | number | undefined>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpoints: B) => {
+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)
@@ -123,18 +127,14 @@ export const getValueForBreakpoint = <B extends Record<string, number>>(value: R
     }
 
     // there is no direct hit for breakpoint nor media-query, so let's simulate CSS cascading
-    const allBreakpoints = Object
-        .entries(breakpoints)
-        .map(([key, bpValue]) => [key.toLowerCase(), bpValue])
-
-    const currentBreakpoint = allBreakpoints
+    const currentBreakpoint = breakpointPairs
         .findIndex(([key]) => key === unifiedKey)
 
-    const availableBreakpoints = allBreakpoints
+    const availableBreakpoints = breakpointPairs
         .filter(([key], index) => index < currentBreakpoint && key && key in value)
         .map(([key]) => key)
 
-    return allBreakpoints.length > 0
+    return breakpointPairs.length > 0
         ? value[availableBreakpoints[availableBreakpoints.length - 1] as keyof B & string]
         : undefined
 }

package/src/utils/common.ts

@@ -1,3 +1,11 @@
+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'

package/src/utils/index.ts

@@ -1,2 +1,3 @@
+export { normalizeStyles } from './normalizeStyles'
 export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints } from './breakpoints'
 export { proxifyFunction, parseStyle } from './styles'

package/src/utils/normalizeStyles.ts

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

package/src/utils/normalizeStyles.web.ts

@@ -0,0 +1,103 @@
+import { warn } from './common'
+
+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 requiredBoxShadowProperties = [
+        'shadowColor',
+        'shadowOffset',
+        'shadowOpacity',
+        'shadowRadius'
+    ]
+
+    if (!requiredBoxShadowProperties.every(prop => prop in styles)) {
+        warn(`can't apply box shadow as you miss at least one of these properties: ${requiredBoxShadowProperties.join(', ')}`)
+
+        return {
+            shadowColor: undefined,
+            shadowOffset: undefined,
+            shadowOpacity: undefined,
+            shadowRadius: undefined
+        }
+    }
+
+    return {
+        boxShadow: preprocessor.createBoxShadowValue(styles),
+        shadowColor: undefined,
+        shadowOffset: undefined,
+        shadowOpacity: undefined,
+        shadowRadius: undefined
+    }
+}
+
+const normalizeTextShadow = <T extends {}>(styles: T): NormalizedTextShadow => {
+    const requiredTextShadowProperties = [
+        'textShadowColor',
+        'textShadowOffset',
+        'textShadowRadius'
+    ]
+
+    if (!requiredTextShadowProperties.every(prop => prop in styles)) {
+        warn(`can't apply text shadow as you miss at least one of these properties: ${requiredTextShadowProperties.join(', ')}`)
+
+        return {
+            textShadowColor: undefined,
+            textShadowOffset: undefined,
+            textShadowRadius: undefined
+        }
+    }
+
+    return {
+        textShadow: preprocessor.createTextShadowValue(styles),
+        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) }
+        : {}
+
+    const normalizedBoxShadow = (
+        'shadowColor' in styles ||
+        'shadowOffset' in styles ||
+        'shadowOpacity' in styles ||
+        'shadowRadius' in styles
+    ) ? normalizeBoxShadow(styles) : {}
+
+    const normalizedTextShadow = (
+        'textShadowColor' in styles ||
+        'textShadowOffset' in styles ||
+        'textShadowRadius' in styles
+    ) ? normalizeTextShadow(styles) : {}
+
+    return {
+        ...styles,
+        ...normalizedTransform,
+        ...normalizedBoxShadow,
+        ...normalizedTextShadow
+    }
+}

package/src/utils/styles.ts

@@ -1,5 +1,7 @@
-import type { CustomNamedStyles, ScreenSize } from '../types'
+import type { Breakpoints, CustomNamedStyles, ScreenSize, SortedBreakpointEntries } from '../types'
 import { getValueForBreakpoint } from './breakpoints'
+import { normalizeStyles } from './normalizeStyles'
+import { isWeb } from './common'
 
 /**
  * Proxies a function to parse its return value for custom media queries or breakpoints.
@@ -9,7 +11,7 @@ import { getValueForBreakpoint } from './breakpoints'
  * @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 {B} breakpoints - An object representing the defined breakpoints.
+ * @param breakpointPairs - sorted pairs of breakpoints
  *
  * @returns {Function} Returns the proxified function
  *
@@ -22,13 +24,13 @@ import { getValueForBreakpoint } from './breakpoints'
  * const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
  * proxifiedFunction() // parsed style based on screenSize and breakpoints
  */
-export const proxifyFunction = <B extends Record<string, number>>(
+export const proxifyFunction = <B extends Breakpoints>(
     fn: Function, breakpoint: keyof B & string,
     screenSize: ScreenSize,
-    breakpoints: B
+    breakpointPairs: SortedBreakpointEntries<B>
 ): Function => new Proxy(fn, {
     apply: (target, thisArg, argumentsList) =>
-        parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, breakpoints)
+        parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, breakpointPairs)
 })
 
 /**
@@ -43,7 +45,7 @@ export const proxifyFunction = <B extends Record<string, number>>(
  * @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 {B} breakpoints - An object representing the defined breakpoints.
+ * @param breakpointPairs - sorted pairs of breakpoints
  *
  * @returns {Record<string, string | number | Function>} Returns the parsed style object with resolved custom media queries or breakpoints.
  *
@@ -56,26 +58,26 @@ export const proxifyFunction = <B extends Record<string, number>>(
  * const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
  * // { fontSize: '12px' }
  */
-export const parseStyle = <T, B extends Record<string, number>>(
+export const parseStyle = <T, B extends Breakpoints>(
     style: CustomNamedStyles<T, B>,
     breakpoint: keyof B & string,
     screenSize: ScreenSize,
-    breakpoints: B
+    breakpointPairs: SortedBreakpointEntries<B>
 ): T => {
     const entries = Object.entries(style) as [[
         keyof T,
         CustomNamedStyles<T, B> | Record<keyof B & string, string | number | undefined>]
     ]
 
-    return Object
+    const parsedStyles = Object
         .fromEntries(entries
             .map(([key, value]) => {
-                const isNestedStyle = key === 'shadowOffset'
+                const hasNestedProperties = key === 'shadowOffset' || key === 'textShadowOffset'
 
-                if (isNestedStyle) {
+                if (hasNestedProperties) {
                     return [
                         key,
-                        parseStyle(value as CustomNamedStyles<T, B>, breakpoint, screenSize, breakpoints)
+                        parseStyle(value as CustomNamedStyles<T, B>, breakpoint, screenSize, breakpointPairs)
                     ]
                 }
 
@@ -84,7 +86,7 @@ export const parseStyle = <T, B extends Record<string, number>>(
                 if (isTransform && Array.isArray(value)) {
                     return [
                         key,
-                        value.map(value => parseStyle(value, breakpoint, screenSize, breakpoints))
+                        value.map(value => parseStyle(value, breakpoint, screenSize, breakpointPairs))
                     ]
                 }
 
@@ -101,9 +103,13 @@ export const parseStyle = <T, B extends Record<string, number>>(
                         value as Record<keyof B & string, string | number | undefined>,
                         breakpoint,
                         screenSize,
-                        breakpoints
+                        breakpointPairs
                     )
                 ]
             })
         )
+
+    return isWeb()
+        ? normalizeStyles(parsedStyles)
+        : parsedStyles
 }