react-native-unistyles 3.0.0-alpha.8 → 3.0.0-beta.1

package/src/web/convert/object/transform.ts

@@ -0,0 +1,24 @@
+import { getObjectStyle } from './objectStyle'
+import { normalizeNumericValue } from '../utils'
+import type { TransformStyles } from '../../../types/core'
+
+const normalizeTransform = (key: string, value: any) => {
+    if (key.includes('scale')) {
+        return value
+    }
+
+    if (typeof value === 'number') {
+        return normalizeNumericValue(value)
+    }
+
+    return value
+}
+
+export const getTransformStyle = (transforms: Array<TransformStyles>) => getObjectStyle(transforms, 'transform', (key, value) => {
+    switch(key) {
+        case 'matrix':
+            return `${key}(${(value as Array<number>).join(',')})`
+        default:
+            return `${key}(${normalizeTransform(key, value)})`
+    }
+})

package/src/web/convert/pseudo.ts

@@ -0,0 +1,137 @@
+export const pseudos = [
+    '_-moz-broken',
+    '_-moz-drag-over',
+    '_-moz-first-node',
+    '_-moz-handler-blocked',
+    '_-moz-handler-crashed',
+    '_-moz-handler-disabled',
+    '_-moz-last-node',
+    '_-moz-loading',
+    '_-moz-locale-dir(ltr)',
+    '_-moz-locale-dir(rtl)',
+    '_-moz-only-whitespace',
+    '_-moz-submit-invalid',
+    '_-moz-suppressed',
+    '_-moz-user-disabled',
+    '_-moz-window-inactive',
+    '_active',
+    '_any-link',
+    '_autofill',
+    '_blank',
+    '_buffering',
+    '_checked',
+    '_current',
+    '_default',
+    '_defined',
+    '_dir(',
+    '_disabled',
+    '_empty',
+    '_enabled',
+    '_first',
+    '_first-child',
+    '_first-of-type',
+    '_focus',
+    '_focus-visible',
+    '_focus-within',
+    '_fullscreen',
+    '_future',
+    '_has(',
+    '_host',
+    '_host-context(',
+    '_host(',
+    '_hover',
+    '_in-range',
+    '_indeterminate',
+    '_invalid',
+    '_is(',
+    '_lang(',
+    '_last-child',
+    '_last-of-type',
+    '_left',
+    '_link',
+    '_local-link',
+    '_modal',
+    '_muted',
+    '_not(',
+    '_nth-child(',
+    '_nth-last-child(',
+    '_nth-last-of-type(',
+    '_nth-of-type(',
+    '_only-child',
+    '_only-of-type',
+    '_optional',
+    '_out-of-range',
+    '_past',
+    '_paused',
+    '_picture-in-picture',
+    '_placeholder-shown',
+    '_playing',
+    '_popover-open',
+    '_read-only',
+    '_read-write',
+    '_required',
+    '_right',
+    '_scope',
+    '_seeking',
+    '_stalled',
+    '_state(',
+    '_target',
+    '_target-within',
+    '_user-invalid',
+    '_user-valid',
+    '_valid',
+    '_visited',
+    '_volume-locked',
+    '_where(',
+    '_-moz-color-swatch',
+    '_-moz-focus-inner',
+    '_-moz-list-bullet',
+    '_-moz-list-number',
+    '_-moz-meter-bar',
+    '_-moz-progress-bar',
+    '_-moz-range-progress',
+    '_-moz-range-thumb',
+    '_-moz-range-track',
+    '_-webkit-inner-spin-button',
+    '_-webkit-meter-barDeprecated',
+    '_-webkit-meter-even-less-good-value',
+    '_-webkit-meter-inner-element',
+    '_-webkit-meter-optimum-value',
+    '_-webkit-meter-suboptimum-value',
+    '_-webkit-progress-bar',
+    '_-webkit-progress-inner-element',
+    '_-webkit-progress-value',
+    '_-webkit-scrollbar',
+    '_-webkit-search-cancel-button',
+    '_-webkit-search-results-button',
+    '_-webkit-slider-runnable-track',
+    '_-webkit-slider-thumb',
+    '_after',
+    '_backdrop',
+    '_before',
+    '_cue',
+    '_file-selector-button',
+    '_first-letter',
+    '_first-line',
+    '_grammar-error',
+    '_highlight(',
+    '_marker',
+    '_part(',
+    '_placeholder',
+    '_selection',
+    '_slotted(',
+    '_spelling-error',
+    '_target-text',
+    '_view-transition',
+    '_view-transition-group',
+    '_view-transition-image-pair',
+    '_view-transition-new',
+    '_view-transition-old',
+] as const
+
+export const isPseudo = (selector: string) => pseudos.some(pseudo => selector.startsWith(pseudo))
+
+type AddDynamicSelector<T extends string> = T extends `${infer U}(` ? `${U}(${string})` : T
+
+export type Pseudo = AddDynamicSelector<typeof pseudos[number]>
+

package/src/web/convert/shadow/boxShadow.ts

@@ -0,0 +1,50 @@
+import { deepMergeObjects } from '../../../utils'
+import { BOX_SHADOW_STYLES, type BoxShadow } from '../types'
+import { extractShadowValue, normalizeColor, normalizeNumericValue } from '../utils'
+import { getShadowBreakpoints } from './getShadowBreakpoints'
+
+const createBoxShadowValue = (style: BoxShadow) => {
+    const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style
+    const offsetX = normalizeNumericValue(shadowOffset?.width ?? 0)
+    const offsetY = normalizeNumericValue(shadowOffset?.height ?? 0)
+    const radius = normalizeNumericValue(shadowRadius ?? 0)
+    const color = normalizeColor((shadowColor ?? '#000000') as string, (shadowOpacity ?? 1) as number)
+
+    return `${offsetX} ${offsetY} ${radius} ${color}`
+}
+
+export const getBoxShadowStyle = (styles: Record<string, any>) => {
+    const breakpoints = getShadowBreakpoints(BOX_SHADOW_STYLES, styles)
+
+    // If no breakpoints were used return styles without media queries
+    if (breakpoints.length === 0) {
+        return {
+            boxShadow: createBoxShadowValue(styles as BoxShadow)
+        }
+    }
+
+    // Create boxShadow for each breakpoint
+    const breakpointStyles = breakpoints.map(breakpoint => {
+        const color = extractShadowValue('shadowColor', breakpoint, styles)
+        const { width, height } = extractShadowValue('shadowOffset', breakpoint, styles)
+        const radius = extractShadowValue('shadowRadius', breakpoint, styles)
+        const opacity = extractShadowValue('shadowOpacity', breakpoint, styles)
+
+        return {
+            [breakpoint]: {
+                boxShadow: createBoxShadowValue({
+                    shadowColor: color,
+                    shadowOffset: {
+                        width,
+                        height
+                    },
+                    shadowRadius: radius,
+                    shadowOpacity: opacity
+                })
+            }
+        }
+    })
+
+    // Merge all breakpoints styles into one
+    return deepMergeObjects(...breakpointStyles)
+}

package/src/web/convert/shadow/getShadowBreakpoints.ts

@@ -0,0 +1,34 @@
+import type { ShadowOffset } from '../types'
+
+export const getShadowBreakpoints = (shadowProperties: ReadonlyArray<string>, styles: Record<string, any>) => {
+    const breakpoints = new Set<string>()
+
+    shadowProperties.forEach(key => {
+        const value = styles[key]
+
+        if (typeof value !== 'object') {
+            return
+        }
+
+        if (key === 'shadowOffset' || key === 'textShadowOffset') {
+            const { width, height } = value as ShadowOffset
+
+            // If shadowOffset.width has breakpoints
+            if (typeof width === 'object') {
+                Object.keys(width).forEach(breakpoint => breakpoints.add(breakpoint))
+            }
+
+            // If shadowOffset.height has breakpoints
+            if (typeof height === 'object') {
+                Object.keys(height).forEach(breakpoint => breakpoints.add(breakpoint))
+            }
+
+            return
+        }
+
+        // Collect regular breakpoints
+        Object.keys(value).forEach(breakpoint => breakpoints.add(breakpoint))
+    })
+
+    return Array.from(breakpoints)
+}

package/src/web/convert/shadow/index.ts

@@ -0,0 +1,2 @@
+export * from './boxShadow'
+export * from './textShadow'

package/src/web/convert/shadow/textShadow.ts

@@ -0,0 +1,48 @@
+import { deepMergeObjects } from '../../../utils'
+import { TEXT_SHADOW_STYLES, type TextShadow } from '../types'
+import { extractShadowValue, normalizeColor, normalizeNumericValue } from '../utils'
+import { getShadowBreakpoints } from './getShadowBreakpoints'
+
+const createTextShadowValue = (style: TextShadow) => {
+    const { textShadowColor, textShadowOffset, textShadowRadius } = style
+    const offsetX = normalizeNumericValue(textShadowOffset?.width ?? 0)
+    const offsetY = normalizeNumericValue(textShadowOffset?.height ?? 0)
+    const radius = normalizeNumericValue(textShadowRadius ?? 0)
+    const color = normalizeColor((textShadowColor ?? '#000000') as string)
+
+    return `${offsetX} ${offsetY} ${radius} ${color}`
+}
+
+export const getTextShadowStyle = (styles: Record<string, any>) => {
+    const breakpoints = getShadowBreakpoints(TEXT_SHADOW_STYLES, styles)
+
+    // If no breakpoints were used return styles without media queries
+    if (breakpoints.length === 0) {
+        return {
+            textShadow: createTextShadowValue(styles as TextShadow)
+        }
+    }
+
+    // Create textShadow for each breakpoint
+    const breakpointStyles = breakpoints.map(breakpoint => {
+        const color = extractShadowValue('textShadowColor', breakpoint, styles)
+        const { width, height } = extractShadowValue('textShadowOffset', breakpoint, styles)
+        const radius = extractShadowValue('textShadowRadius', breakpoint, styles)
+
+        return {
+            [breakpoint]: {
+                textShadow: createTextShadowValue({
+                    textShadowColor: color,
+                    textShadowOffset: {
+                        width,
+                        height
+                    },
+                    textShadowRadius: radius
+                })
+            }
+        }
+    })
+
+    // Merge all breakpoints styles into one
+    return deepMergeObjects(...breakpointStyles)
+}

package/src/web/convert/style.ts

@@ -1,7 +1,6 @@
 import { keyInObject } from '../utils'
-import type { NestedCSSProperties } from 'typestyle/lib/types'
 
-const stylesToSkip = [
+const SKIP_STYLES = [
     'borderCurve',
     'elevation',
     'textAlignVertical',
@@ -10,6 +9,53 @@ const stylesToSkip = [
     'tintColor'
 ]
 
+const CSS_NUMBER_KEYS = [
+    'animationIterationCount',
+    'borderImageOutset',
+    'borderImageSlice',
+    'borderImageWidth',
+    'boxFlex',
+    'boxFlexGroup',
+    'boxOrdinalGroup',
+    'columnCount',
+    'columns',
+    'counterIncrement',
+    'counterReset',
+    'flex',
+    'flexGrow',
+    'flexPositive',
+    'flexShrink',
+    'flexNegative',
+    'flexOrder',
+    'fontWeight',
+    'gridArea',
+    'gridColumn',
+    'gridColumnEnd',
+    'gridColumnSpan',
+    'gridColumnStart',
+    'gridRow',
+    'gridRowEnd',
+    'gridRowSpan',
+    'gridRowStart',
+    'line-clamp',
+    'line-height',
+    'opacity',
+    'order',
+    'orphans',
+    'tabSize',
+    'widows',
+    'zIndex',
+    'zoom',
+    'fillOpacity',
+    'floodOpacity',
+    'stopOpacity',
+    'strokeDasharray',
+    'strokeDashoffset',
+    'strokeMiterlimit',
+    'strokeOpacity',
+    'strokeWidth'
+]
+
 const convertMap = {
     marginHorizontal: (value: number) => ({
         marginInline: value
@@ -73,22 +119,27 @@ const convertMap = {
     }),
     resizeMode: (value: string) => ({
         backgroundSize: value
-    }),
-    lineHeight: (value: number) => ({
-        lineHeight: `${value}px`
-    }),
-} as Record<PropertyKey, (value: any) => NestedCSSProperties>
+    })
+} as Record<PropertyKey, (value: any) => Record<string, any>>
+
+const convertNumber = (key: string, value: any) => {
+    if (typeof value === 'number') {
+        return CSS_NUMBER_KEYS.includes(key, value) ? value : `${value}px`
+    }
+
+    return value
+}
 
 export const getStyle = (key: string, value: any) => {
-    if (stylesToSkip.includes(key)) {
+    if (SKIP_STYLES.includes(key)) {
         return {}
     }
 
     if (keyInObject(convertMap, key)) {
-        return convertMap[key]?.(value) ?? {}
+        return convertMap[key]?.(convertNumber(key, value)) ?? {}
     }
 
     return {
-        [key]: value
+        [key]: convertNumber(key, value)
     }
 }

package/src/web/convert/types.ts

@@ -1,5 +1,6 @@
-import type { TextStyle, ViewStyle } from 'react-native'
+import type { FilterFunction, TextStyle, ViewStyle } from 'react-native'
 import type { ToDeepUnistyles } from '../../types/stylesheet'
+import type { UnionToIntersection } from '../../types'
 
 export type ShadowOffset = ToDeepUnistyles<{ width: number, height: number }>
 
@@ -14,3 +15,9 @@ export type BoxShadow = Required<Pick<ViewStyle, typeof BOX_SHADOW_STYLES[number
 export type AllShadow = TextShadow & BoxShadow
 
 export type AllShadowKeys = keyof AllShadow
+
+type FilterKeys = keyof UnionToIntersection<FilterFunction>
+
+export type Filters = {
+    [K in FilterKeys]: UnionToIntersection<FilterFunction>[K]
+}

package/src/web/convert/utils.ts

@@ -1,17 +1,23 @@
 // based on react-native-web normalizer
 // https://github.com/necolas/react-native-web
 import normalizeColors from '@react-native/normalize-colors'
-import { BOX_SHADOW_STYLES, TEXT_SHADOW_STYLES, type AllShadow, type AllShadowKeys } from './types'
+import { BOX_SHADOW_STYLES, TEXT_SHADOW_STYLES, type AllShadow, type AllShadowKeys, type Filters } from './types'
+import type { TransformStyles } from '../../types/core'
+import type { BoxShadowValue } from 'react-native'
 
-export const isTransform = (key: string, value: any): value is Array<Record<string, any>> => key === 'transform' && Array.isArray(value)
+export const isTransform = (key: string, value: any): value is Array<TransformStyles> => key === 'transform' && Array.isArray(value)
 
 export const isTextShadow = (key: string) => TEXT_SHADOW_STYLES.includes(key as typeof TEXT_SHADOW_STYLES[number])
 
-export const isBoxShadow = (key: string) => BOX_SHADOW_STYLES.includes(key as typeof BOX_SHADOW_STYLES[number])
+export const isShadow = (key: string) => BOX_SHADOW_STYLES.includes(key as typeof BOX_SHADOW_STYLES[number])
 
-export const normalizeNumericValue = (value: number) => value ? `${value}px` : value
+export const isFilter = (key: string, value: any): value is Array<Filters> => key === 'filter' && Array.isArray(value)
 
-export const normalizeColor = (color: string, opacity: number = 1) => {
+export const isBoxShadow = (key: string, value: any): value is Array<BoxShadowValue> => key === 'boxShadow' && Array.isArray(value)
+
+export const normalizeNumericValue = (value: number | string) => value && typeof value === 'number' ? `${value}px` : value
+
+export const normalizeColor = (color: string, opacity = 1) => {
     // If the opacity is 1 there's no need to normalize the color
     if (opacity === 1) {
         return color
@@ -29,8 +35,8 @@ export const normalizeColor = (color: string, opacity: number = 1) => {
     if (hex.length === 8) {
         const [r = 0, g = 0, b = 0, a = 1] = hex
             .split(/(?=(?:..)*$)/)
-            .map(x => parseInt(x, 16))
-            .filter(num => !isNaN(num))
+            .map(x => Number.parseInt(x, 16))
+            .filter(num => !Number.isNaN(num))
 
         return `rgba(${r},${g},${b},${(a / 255) * opacity})`
     }

package/src/web/create.ts

@@ -1,104 +1,56 @@
-import type { TypeStyle } from 'typestyle'
 import type { ReactNativeStyleSheet } from '../types'
 import type { StyleSheetWithSuperPowers, StyleSheet } from '../types/stylesheet'
-import { UnistylesRegistry } from './registry'
-import { keyInObject, reduceObject, toReactNativeClassName } from './utils'
+import { assignSecrets, reduceObject, getStyles, error } from './utils'
+import { deepMergeObjects } from '../utils'
 import { UnistylesRuntime } from './runtime'
-import { createUseVariants, getVariants } from './variants'
-import { UnistylesListener } from './listener'
-import type { UnistyleDependency } from '../specs/NativePlatform'
+import { getVariants } from './variants'
 
-type ListenToDependenciesProps = {
-    value: StyleSheet[keyof StyleSheet],
-    key: PropertyKey,
-    unistyles: TypeStyle,
-    className: string,
-    args?: Array<any>
-}
-
-type WebUnistyle = ReturnType<typeof UnistylesRegistry.createStyles>
+export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>, id?: string) => {
+    if (!id) {
+        throw error('Unistyles is not initialized correctly. Please add babel plugin to your babel config.')
+    }
 
-export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
     const computedStylesheet = typeof stylesheet === 'function'
         ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
         : stylesheet
-    let lastlySelectedVariants: Record<string, any> = {}
-
-    const listenToDependencies = ({ key, className, unistyles, value, args = [] } : ListenToDependenciesProps) => {
-        const dependencies = ('uni__dependencies' in value ? value['uni__dependencies'] : []) as Array<UnistyleDependency>
-
-        if (dependencies.length === 0) {
-            return
-        }
-
-        return UnistylesListener.addListeners(dependencies, () => {
-            const newComputedStylesheet = typeof stylesheet === 'function'
-                ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
-                : stylesheet
-
-            if (!keyInObject(newComputedStylesheet, key)) {
-                return
-            }
+    const selectedVariants = new Map<string, any>()
+
+    const copyVariants = () => Object.fromEntries(selectedVariants.entries())
+    const addSecrets = (value: any, key: string, args?: Array<any>) => assignSecrets(value, {
+        __uni__key: key,
+        __uni__refs: new Set(),
+        __uni__stylesheet: stylesheet,
+        __uni__args: args,
+        __uni__variants: copyVariants()
+    })
 
-            const value = newComputedStylesheet[key]!
-            const result = typeof value === 'function'
-                ? value(...args)
-                : value
+    const styles = reduceObject(computedStylesheet, (value, _key) => {
+        const key = String(_key)
 
-            UnistylesRegistry.updateStyles(unistyles, result, className)
-        })
-    }
-
-    const styles = reduceObject(computedStylesheet, (value, key) => {
         if (typeof value === 'function') {
-            const webUnistyleByRef = new Map<HTMLElement, WebUnistyle>()
-            const disposeByRef = new Map<HTMLElement, VoidFunction | undefined>()
-
-            return (...args: Array<any>) => {
-                const [ref] = args.slice(-1)
+            const dynamicStyle = (...args: Array<any>) => {
                 const result = value(...args)
-                const variants = Object.fromEntries(getVariants({ [key]: result } as ReactNativeStyleSheet<StyleSheet>, lastlySelectedVariants))
-                const resultWithVariants = {
-                    ...result,
-                    ...variants[key]
-                }
-
-                if (ref instanceof HTMLElement) {
-                    const storedWebUnistyle = webUnistyleByRef.get(ref)
-                    const webUnistyle = storedWebUnistyle ?? UnistylesRegistry.createStyles(resultWithVariants, key)
-
-                    webUnistyleByRef.set(ref, webUnistyle)
-                    disposeByRef.get(ref)?.()
-                    disposeByRef.set(ref, listenToDependencies({
-                        key,
-                        value,
-                        unistyles: webUnistyle.unistyles,
-                        className: webUnistyle.className,
-                        args
-                    }))
-                    ref.classList.add(webUnistyle.className)
-
-                    if (storedWebUnistyle) {
-                        UnistylesRegistry.updateStyles(webUnistyle.unistyles, resultWithVariants, webUnistyle.className)
-                    }
+                const variants = Object.fromEntries(getVariants({ [key]: result } as ReactNativeStyleSheet<StyleSheet>, copyVariants()))
+                const resultWithVariants = deepMergeObjects(result, variants[key] ?? {})
 
-
-                    return
-                }
-
-                return toReactNativeClassName(null, resultWithVariants)
+                // Add secrets to result of dynamic styles function
+                return addSecrets(getStyles(resultWithVariants), key, args)
             }
-        }
 
-        const { className, unistyles } = UnistylesRegistry.createStyles(value, key)
-
-        listenToDependencies({ key, value, unistyles, className })
+            // Add secrets to dynamic styles function
+            return addSecrets(dynamicStyle, key)
+        }
 
-        return toReactNativeClassName(className, value)
+        // Add secrets to static styles
+        return addSecrets(getStyles(value), key)
     }) as ReactNativeStyleSheet<StyleSheet>
 
-    createUseVariants(styles, newVariants => {
-        lastlySelectedVariants = newVariants
+    // Inject useVariants hook to styles
+    Object.defineProperty(styles, 'useVariants', {
+        value: (variants: Record<string, string | boolean>) => {
+            Object.entries(variants).forEach(([key, value]) => selectedVariants.set(key, value))
+        },
+        configurable: false,
     })
 
     return styles

package/src/web/index.ts

@@ -1,7 +1,6 @@
 import { create } from './create'
-import { UnistylesRuntime } from './runtime'
 import { UnistylesState } from './state'
-import { deepMergeObjects } from './utils'
+import { deepMergeObjects } from '../utils'
 
 export const StyleSheet = {
     configure: UnistylesState.init,
@@ -13,12 +12,18 @@ export const StyleSheet = {
         right: 0,
         bottom: 0,
     },
+    absoluteFillObject: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0
+    },
     compose: (a: object, b: object) => deepMergeObjects(a, b),
     flatten: (...styles: Array<object>) => deepMergeObjects(...styles),
     hairlineWidth: 1
 }
 
 export { UnistylesRuntime } from './runtime'
+export { UnistylesShadowRegistry } from './shadowRegistry'
 export * from './mock'
-
-export const getSSRUnistyles = () => UnistylesRuntime.getSSRUnistyles()