react-native-unistyles 1.0.0-rc.2 → 1.1.0

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,105 @@
+// based on react-native-web normalizer
+// https://github.com/necolas/react-native-web
+import type { TextShadow, Transforms, BoxShadow } from '../types'
+
+type Preprocessor = {
+    createTextShadowValue(style: TextShadow): string,
+    createBoxShadowValue(style: Required<BoxShadow>): string,
+    createTransformValue(transforms: Required<Transforms>): string,
+}
+
+// for now supports
+// hex colors (3, 6, 8) chars
+// colors like orange red etc.
+export const normalizeColor = (color: string, opacity: number = 1) => {
+    if (!color.startsWith('#')) {
+        return color
+    }
+
+    if (color.length === 9) {
+        const [r, g, b, a] = color
+            .slice(1)
+            .split(/(?=(?:..)*$)/)
+            .map(x => parseInt(x, 16))
+            .filter(num => !isNaN(num))
+
+        return `rgba(${r},${g},${b},${(a as number) / 255})`
+    }
+
+    const sanitizedHex = color.length === 4
+        ? color
+            .slice(1)
+            .split('')
+            .map(char => `${char}${char}`)
+            .join('')
+        : color.slice(1)
+
+    return sanitizedHex
+        .split(/(?=(?:..)*$)/)
+        .map(x => parseInt(x, 16))
+        .filter(num => !isNaN(num))
+        .reduce((acc, color) => `${acc}${color},`, 'rgba(')
+        .concat(`${opacity})`)
+}
+
+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

@@ -109,7 +109,7 @@ export const parseStyle = <T, B extends Breakpoints>(
             })
         )
 
-    return isWeb()
+    return isWeb
         ? normalizeStyles(parsedStyles)
         : parsedStyles
 }