react-native-unistyles 3.0.0-alpha.1 → 3.0.0-alpha.11

package/{web → src/web}/utils.ts

@@ -1,16 +1,16 @@
-import { ColorScheme, type AppThemeName} from '../src/specs/types'
-import type { UnistylesValues } from '../src/types'
+import { ColorScheme, type AppThemeName} from '../specs/types'
+import type { UnistylesValues } from '../types'
 
 export const reduceObject = <TObj extends Record<string, any>, TReducer>(
     obj: TObj,
     reducer: (value: TObj[keyof TObj], key: keyof TObj) => TReducer,
 ) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, reducer(value as TObj[keyof TObj], key)])) as { [K in keyof TObj]: TReducer }
 
-export const toReactNativeClassName = (className: string, values: UnistylesValues) => {
-    const returnValue = {
+export const toReactNativeClassName = (className: string | null, values: UnistylesValues) => {
+    const returnValue = className ? {
         $$css: true,
         [className]: className
-    }
+    } : {}
 
     Object.defineProperties(returnValue, reduceObject(values, value => ({
         value,

package/src/web/variants/getVariants.ts

@@ -0,0 +1,42 @@
+import type { ReactNativeStyleSheet, StyleSheet } from '../../types'
+import { deepMergeObjects } from '../utils'
+
+type StylesWithVariants = {
+    variants: Record<string, any>,
+    compoundVariants?: Array<Record<string, any> & {
+        styles: Record<string, any>
+    }>
+}
+const hasVariants = <T extends object>(value: [string, T]): value is [string, T & StylesWithVariants] => 'variants' in value[1]
+
+export const getVariants = (styles: ReactNativeStyleSheet<StyleSheet>, selectedVariants: Record<string, any>) => {
+    return Object.entries(styles)
+        .filter(hasVariants)
+        .filter(([_key, { variants }]) => Object.keys(variants).some(variant => variant in variants))
+        .map(([key, { variants, compoundVariants = [] }]) => {
+            const variantStyles = Object.entries(variants).flatMap(([variant, styles]) => {
+                const selectedVariant = selectedVariants[variant]
+                const selectedVariantStyles = styles[selectedVariant] ?? styles['default']
+
+                if (!selectedVariantStyles) {
+                    return []
+                }
+
+                return selectedVariantStyles
+            })
+
+            const compoundVariantStyles = compoundVariants.flatMap(compoundVariant => {
+                const { styles, ...conditions } = compoundVariant
+
+                if (Object.entries(conditions).some(([variant, value]) => String(selectedVariants[variant]) !== String(value))) {
+                    return []
+                }
+
+                return styles
+            })
+
+            const mergedVariantStyles = deepMergeObjects(...variantStyles, ...compoundVariantStyles)
+
+            return [key, mergedVariantStyles] as const
+        })
+}

package/src/web/variants/index.ts

@@ -0,0 +1,2 @@
+export * from './useVariants'
+export * from './getVariants'

package/{web → src/web/variants}/useVariants.ts

@@ -1,19 +1,11 @@
 import { useMemo, useRef, useState } from 'react'
 import type { TypeStyle } from 'typestyle'
-import type { ReactNativeStyleSheet, StyleSheet } from '../src/types'
-import { deepMergeObjects, equal, reduceObject } from './utils'
-import { UnistylesRegistry } from './registry'
+import type { ReactNativeStyleSheet, StyleSheet } from '../../types'
+import { equal, reduceObject } from '../utils'
+import { UnistylesRegistry } from '../registry'
+import { getVariants } from './getVariants'
 
-type StylesWithVariants = {
-    variants: Record<string, any>,
-    compoundVariants?: Array<Record<string, any> & {
-        styles: Record<string, any>
-    }>
-}
-
-const hasVariants = <T extends object>(value: [string, T]): value is [string, T & StylesWithVariants] => 'variants' in value[1]
-
-export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>) => {
+export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>, setSelectedVariants: (variants: Record<string, any>) => void) => {
     const useVariants = (selectedVariants: Record<string, any>) => {
         const [unistylesMap] = useState(() => new Map<string, TypeStyle>())
         const [classNameMap] = useState(() => new Map<string, string>())
@@ -24,40 +16,17 @@ export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>) =>
 
         if (variantsChanged) {
             lastSelectedVariantsRef.current = selectedVariants
+            setSelectedVariants(selectedVariants)
         }
 
         const combinedVariantStyles = useMemo(() => {
-            return Object.entries(styles)
-                .filter(hasVariants)
-                .filter(([_key, { variants }]) => Object.keys(variants).some(variant => variant in variants))
-                .map(([key, { variants, compoundVariants = [] }]) => {
-                    const variantStyles = Object.entries(variants).flatMap(([variant, styles]) => {
-                        const selectedVariant = selectedVariants[variant]
-                        const selectedVariantStyles = styles[selectedVariant] ?? styles['default']
-
-                        if (!selectedVariantStyles) {
-                            return []
-                        }
-
-                        return selectedVariantStyles
-                    })
-
-                    const compoundVariantStyles = compoundVariants.flatMap(compoundVariant => {
-                        const { styles, ...conditions } = compoundVariant
-
-                        if (Object.entries(conditions).some(([variant, value]) => String(selectedVariants[variant]) !== String(value))) {
-                            return []
-                        }
-
-                        return styles
-                    })
+            const result = getVariants(styles, selectedVariants)
 
-                    const mergedVariantStyles = deepMergeObjects(...variantStyles, ...compoundVariantStyles)
-
-                    selectedVariantStylesMap.set(key, mergedVariantStyles)
+            result.forEach(([key, value]) => {
+                selectedVariantStylesMap.set(key, value)
+            })
 
-                    return [key, mergedVariantStyles] as const
-                })
+            return result
         }, [lastSelectedVariantsRef.current])
 
         if (unistylesMap.size === 0 && combinedVariantStyles.length > 0) {
@@ -88,8 +57,19 @@ export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>) =>
                 enumerable: false,
                 configurable: true
             })))
-            // @ts-expect-error - apply variant className
-            styleEntry[className] = className
+
+            if (styleEntry) {
+                Object.keys(styleEntry ?? {}).forEach(key => {
+                    if (!key.startsWith('variant-')) {
+                        return
+                    }
+
+                    // @ts-expect-error - remove old variants
+                    delete styleEntry[key]
+                })
+                // @ts-expect-error - apply variant className
+                styleEntry[className] = className
+            }
         })
     }
 

package/lib/typescript/web/convert/boxShadow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"boxShadow.d.ts","sourceRoot":"","sources":["../../../../web/convert/boxShadow.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAkB9D,eAAO,MAAM,iBAAiB,WAAY,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAG,mBAoD/D,CAAA"}

package/lib/typescript/web/convert/breakpoint.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"breakpoint.d.ts","sourceRoot":"","sources":["../../../../web/convert/breakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAMrD,eAAO,MAAM,iBAAiB,eAAgB,MAAM,KAAG,UActD,CAAA"}

package/lib/typescript/web/convert/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../web/convert/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAWtD,eAAO,MAAM,kBAAkB,UAAW,eAAe,wBAiExD,CAAA"}

package/lib/typescript/web/convert/shadow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../../../web/convert/shadow.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,qBAAsB,aAAa,CAAC,MAAM,CAAC,UAAU,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAAe,GAAG,CAAC,MAAM,CAAC,SAiE5H,CAAA"}

package/lib/typescript/web/convert/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../web/convert/style.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAgF9D,eAAO,MAAM,QAAQ,QAAS,MAAM,SAAS,GAAG,wBAY/C,CAAA"}

package/lib/typescript/web/convert/textShadow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"textShadow.d.ts","sourceRoot":"","sources":["../../../../web/convert/textShadow.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAiB9D,eAAO,MAAM,kBAAkB,WAAY,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAG,mBAkDhE,CAAA"}

package/lib/typescript/web/convert/transform.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../../../web/convert/transform.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAK9D,KAAK,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAA;AAmC5C,eAAO,MAAM,iBAAiB,eAAgB,UAAU,KAAG,mBA+C1D,CAAA"}

package/lib/typescript/web/convert/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../web/convert/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAEjE,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA;AAE7E,eAAO,MAAM,kBAAkB,sEAAuE,CAAA;AAEtG,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;AAErF,eAAO,MAAM,iBAAiB,2EAA4E,CAAA;AAE1G,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;AAEnF,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,SAAS,CAAA;AAE9C,MAAM,MAAM,aAAa,GAAG,MAAM,SAAS,CAAA"}

package/lib/typescript/web/convert/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../web/convert/utils.ts"],"names":[],"mappings":"AAGA,OAAO,EAAyC,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAA;AAEnG,eAAO,MAAM,WAAW,QAAS,MAAM,SAAS,GAAG,KAAG,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAgD,CAAA;AAExI,eAAO,MAAM,YAAY,QAAS,MAAM,YAA0E,CAAA;AAElH,eAAO,MAAM,WAAW,QAAS,MAAM,YAAwE,CAAA;AAE/G,eAAO,MAAM,qBAAqB,UAAW,MAAM,oBAAiC,CAAA;AAEpF,eAAO,MAAM,cAAc,UAAW,MAAM,YAAW,MAAM,WAyB5D,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,IAAI,SAAS,aAAa,OAAO,IAAI,cAAc,MAAM,UAAU,GAAG,KAAG,SAAS,CAAC,IAAI,CAazH,CAAA"}

package/lib/typescript/web/listener/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../web/listener/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA"}

package/lib/typescript/web/listener/listener.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"listener.d.ts","sourceRoot":"","sources":["../../../../web/listener/listener.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAGnE,qBAAa,wBAAwB;IACjC,OAAO,CAAC,aAAa,CAAQ;IAC7B,OAAO,CAAC,SAAS,CAAoG;IAErH,UAAU,eAAgB,kBAAkB,UAE3C;IAED,aAAa,aAUZ;IAED,YAAY,iBAAkB,KAAK,CAAC,kBAAkB,CAAC,YAAY,YAAY,gBAM9E;CACJ;AAED,eAAO,MAAM,iBAAiB,0BAAiC,CAAA"}

package/lib/typescript/web/mock.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"mock.d.ts","sourceRoot":"","sources":["../../../web/mock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC5F,OAAO,KAAK,EAAE,kBAAkB,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAEjF,eAAO,MAAM,SAAS,EAAE,aAUvB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,iBAS3B,CAAA;AAED,eAAO,MAAM,uBAAuB;;;;;;;;CAQnC,CAAA"}

package/lib/typescript/web/mq.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"mq.d.ts","sourceRoot":"","sources":["../../../web/mq.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAMrD,eAAO,MAAM,OAAO,OAAQ,MAAM,KAAG,UAUpC,CAAA;AAED,eAAO,MAAM,aAAa,OAAQ,MAAM,YAAgC,CAAA"}

package/lib/typescript/web/pseudo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pseudo.d.ts","sourceRoot":"","sources":["../../../web/pseudo.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,OAAO,kDAKV,CAAA;AAEV,eAAO,MAAM,QAAQ,aAAc,MAAM,YAAyC,CAAA;AAElF,MAAM,MAAM,MAAM,GAAG,OAAO,OAAO,CAAC,MAAM,CAAC,CAAA"}

package/lib/typescript/web/registry.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../web/registry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,SAAS,EAAE,MAAM,WAAW,CAAA;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAInD,cAAM,wBAAwB;IAC1B,YAAY,eAAgB,eAAe,OAAO,MAAM,GAAG,MAAM;;;MAwBhE;IAED,YAAY,cAAe,SAAS,cAAc,eAAe,aAAa,MAAM,UAKnF;CACJ;AAED,eAAO,MAAM,iBAAiB,0BAAiC,CAAA"}

package/lib/typescript/web/runtime.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../../web/runtime.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAC/F,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAMrD,cAAM,uBAAuB;IACzB,UAAU,wBAAuB;IACjC,SAAS,wBAAsB;IAE/B,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,YAAY;IAYpB,IAAI,WAAW,gBASd;IAED,IAAI,SAAS,uEAEZ;IAED,IAAI,mBAAmB,2BAEtB;IAED,IAAI,UAAU,4EAEb;IAED,IAAI,WAAW,gBAMd;IAED,IAAI,KAAK,0CAYR;IAED,IAAI,UAAU,WAEb;IAED,IAAI,MAAM;;;MAYT;IAED,IAAI,SAAS,WAEZ;IAED,IAAI,MAAM;;;;;;MAQT;IAED,IAAI,SAAS,wDAEZ;IAED,IAAI,GAAG,YAEN;IAED,IAAI,iBAAiB,YAEpB;IAED,IAAI,aAAa,+DAEhB;IAED,IAAI,WAAW,IAAI,oBAAoB,CAsBtC;IAED,QAAQ,cAAe,YAAY,UAQlC;IAED,iBAAiB,cAAe,OAAO,UAQtC;IAED,0BAA0B,QAAS,MAAM,UAAU,MAAM,UAMxD;IAED,gBAAgB,aAAW;IAE3B,WAAW,cAAe,YAAY,WAAW,CAAC,YAAY,EAAE,QAAQ,KAAK,QAAQ,UAQpF;IAED,eAAe,iGAA4B;CAC9C;AAED,eAAO,MAAM,gBAAgB,yBAAgC,CAAA"}

package/lib/typescript/web/state.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../web/state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAA4B,MAAM,OAAO,CAAA;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACrE,OAAO,KAAK,EAAE,oBAAoB,EAAmB,MAAM,eAAe,CAAA;AAM1E,cAAM,qBAAqB;IACvB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAa;IACnC,QAAQ,CAAC,IAAI,EAAS,KAAK,CAAC,YAAY,CAAC,CAAA;IAEzC,MAAM,8BAAoC;IAC1C,SAAS,CAAC,EAAE,YAAY,CAAA;IAExB,UAAU,CAAC,EAAE,aAAa,CAAA;IAC1B,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAElC,iBAAiB,UAAQ;IAEzB,IAAI,WAAY,eAAe,UAU9B;IAED,OAAO,CAAC,UAAU,CAIjB;IAED,OAAO,CAAC,YAAY,CAyBnB;IAED,OAAO,CAAC,eAAe,CAmCtB;IAED,SAAS;;;CAyCZ;AAED,eAAO,MAAM,cAAc,uBAA8B,CAAA"}

package/lib/typescript/web/useVariants.d.ts

@@ -1,3 +0,0 @@
-import type { ReactNativeStyleSheet, StyleSheet } from '../src/types';
-export declare const createUseVariants: (styles: ReactNativeStyleSheet<StyleSheet>) => void;
-//# sourceMappingURL=useVariants.d.ts.map

package/lib/typescript/web/useVariants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useVariants.d.ts","sourceRoot":"","sources":["../../../web/useVariants.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAarE,eAAO,MAAM,iBAAiB,WAAY,qBAAqB,CAAC,UAAU,CAAC,SAmF1E,CAAA"}

package/lib/typescript/web/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../web/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,YAAY,EAAC,MAAM,oBAAoB,CAAA;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,eAAO,MAAM,YAAY,GAAI,IAAI,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,QAAQ,OAC9D,IAAI,WACA,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,CAAC,EAAE,GAAG,EAAE,MAAM,IAAI,KAAK,QAAQ,KACmD,GAAG,CAAe,IAAV,MAAM,IAAI,GAAG,QAAQ,GAAE,CAAA;AAErJ,eAAO,MAAM,sBAAsB,cAAe,MAAM,UAAU,eAAe;;;CAahF,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC,OAAO,WAAW,KAAG,GAAG,IAAI,MAAM,CAAe,CAAA;AAElH,eAAO,MAAM,aAAa,WAAY,WAAW,KAAG,YAQnD,CAAA;AAED,eAAO,MAAM,SAAS,QAAS,MAAM,WAAW,MAAM,WAM5B,CAAA;AAE1B,eAAO,MAAM,QAAQ,eAAsC,CAAA;AAE3D;;EAEE;AACF,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,MAAM,CAAC,WAAW,EAAE,GAAG,CAAC,cAAc,KAAK,CAAC,CAAC,CAAC,MAqBxF,CAAA;AAED,eAAO,MAAM,IAAI,YAAa,MAAM,SAA2D,CAAA;AAE/F,eAAO,MAAM,KAAK,GAAI,CAAC,KAAK,CAAC,KAAK,CAAC,YAqBlC,CAAA"}