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

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,23 +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>]]
+    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, breakpoint, screenSize, breakpoints)
+                        parseStyle(value as CustomNamedStyles<T, B>, breakpoint, screenSize, breakpointPairs)
                     ]
                 }
 
@@ -81,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))
                     ]
                 }
 
@@ -92,9 +97,19 @@ export const parseStyle = <T, B extends Record<string, number>>(
                     return [key, value]
                 }
 
-                const valueWithBreakpoint = value as Record<keyof B & string, string | number>
-
-                return [key, getValueForBreakpoint<B>(valueWithBreakpoint, breakpoint, screenSize, breakpoints)]
+                return [
+                    key,
+                    getValueForBreakpoint<B>(
+                        value as Record<keyof B & string, string | number | undefined>,
+                        breakpoint,
+                        screenSize,
+                        breakpointPairs
+                    )
+                ]
             })
         )
+
+    return isWeb()
+        ? normalizeStyles(parsedStyles)
+        : parsedStyles
 }