react-native-unistyles 3.0.0-alpha.12 → 3.0.0-alpha.14

package/nitrogen/generated/ios/swift/HybridNativePlatformSpecCxx.swift

@@ -17,7 +17,7 @@ import NitroModules
  * - Other HybridObjects need to be wrapped/unwrapped from the Swift TCxx wrapper
  * - Throwing methods need to be wrapped with a Result<T, Error> type, as exceptions cannot be propagated to C++
  */
-public final class HybridNativePlatformSpecCxx {
+public class HybridNativePlatformSpecCxx {
   /**
    * The Swift <> C++ bridge's namespace (`margelo::nitro::unistyles::bridge::swift`)
    * from `Unistyles-Swift-Cxx-Bridge.hpp`.
@@ -28,7 +28,15 @@ public final class HybridNativePlatformSpecCxx {
   /**
    * Holds an instance of the `HybridNativePlatformSpec` Swift protocol.
    */
-  private(set) var implementation: HybridNativePlatformSpec
+  private var implementation: HybridNativePlatformSpec
+
+  /**
+   * Get the actual `HybridNativePlatformSpec` instance this class wraps.
+   */
+  @inline(__always)
+  public func getHybridNativePlatformSpec() -> HybridNativePlatformSpec {
+    return implementation
+  }
 
   /**
    * Create a new `HybridNativePlatformSpecCxx` that wraps the given `HybridNativePlatformSpec`.
@@ -36,15 +44,18 @@ public final class HybridNativePlatformSpecCxx {
    */
   public init(_ implementation: HybridNativePlatformSpec) {
     self.implementation = implementation
+    /* no base class */
   }
 
   /**
    * Contains a (weak) reference to the C++ HybridObject to cache it.
    */
   public var hybridContext: margelo.nitro.HybridContext {
+    @inline(__always)
     get {
       return self.implementation.hybridContext
     }
+    @inline(__always)
     set {
       self.implementation.hybridContext = newValue
     }
@@ -54,6 +65,7 @@ public final class HybridNativePlatformSpecCxx {
    * Get the memory size of the Swift class (plus size of any other allocations)
    * so the JS VM can properly track it and garbage-collect the JS object if needed.
    */
+  @inline(__always)
   public var memorySize: Int {
     return self.implementation.memorySize
   }

package/nitrogen/generated/shared/c++/HybridNativePlatformSpec.hpp

@@ -43,9 +43,12 @@ namespace margelo::nitro::unistyles {
   /**
    * An abstract base class for `NativePlatform`
    * Inherit this class to create instances of `HybridNativePlatformSpec` in C++.
+   * You must explicitly call `HybridObject`'s constructor yourself, because it is virtual.
    * @example
    * ```cpp
    * class HybridNativePlatform: public HybridNativePlatformSpec {
+   * public:
+   *   HybridNativePlatform(...): HybridObject(TAG) { ... }
    *   // ...
    * };
    * ```

package/nitrogen/generated/shared/c++/HybridUnistylesNavigationBarSpec.hpp

@@ -24,9 +24,12 @@ namespace margelo::nitro::unistyles {
   /**
    * An abstract base class for `UnistylesNavigationBar`
    * Inherit this class to create instances of `HybridUnistylesNavigationBarSpec` in C++.
+   * You must explicitly call `HybridObject`'s constructor yourself, because it is virtual.
    * @example
    * ```cpp
    * class HybridUnistylesNavigationBar: public HybridUnistylesNavigationBarSpec {
+   * public:
+   *   HybridUnistylesNavigationBar(...): HybridObject(TAG) { ... }
    *   // ...
    * };
    * ```

package/nitrogen/generated/shared/c++/HybridUnistylesRuntimeSpec.hpp

@@ -39,9 +39,12 @@ namespace margelo::nitro::unistyles {
   /**
    * An abstract base class for `UnistylesRuntime`
    * Inherit this class to create instances of `HybridUnistylesRuntimeSpec` in C++.
+   * You must explicitly call `HybridObject`'s constructor yourself, because it is virtual.
    * @example
    * ```cpp
    * class HybridUnistylesRuntime: public HybridUnistylesRuntimeSpec {
+   * public:
+   *   HybridUnistylesRuntime(...): HybridObject(TAG) { ... }
    *   // ...
    * };
    * ```

package/nitrogen/generated/shared/c++/HybridUnistylesShadowRegistrySpec.hpp

@@ -24,9 +24,12 @@ namespace margelo::nitro::unistyles {
   /**
    * An abstract base class for `UnistylesShadowRegistry`
    * Inherit this class to create instances of `HybridUnistylesShadowRegistrySpec` in C++.
+   * You must explicitly call `HybridObject`'s constructor yourself, because it is virtual.
    * @example
    * ```cpp
    * class HybridUnistylesShadowRegistry: public HybridUnistylesShadowRegistrySpec {
+   * public:
+   *   HybridUnistylesShadowRegistry(...): HybridObject(TAG) { ... }
    *   // ...
    * };
    * ```

package/nitrogen/generated/shared/c++/HybridUnistylesStatusBarSpec.hpp

@@ -24,9 +24,12 @@ namespace margelo::nitro::unistyles {
   /**
    * An abstract base class for `UnistylesStatusBar`
    * Inherit this class to create instances of `HybridUnistylesStatusBarSpec` in C++.
+   * You must explicitly call `HybridObject`'s constructor yourself, because it is virtual.
    * @example
    * ```cpp
    * class HybridUnistylesStatusBar: public HybridUnistylesStatusBarSpec {
+   * public:
+   *   HybridUnistylesStatusBar(...): HybridObject(TAG) { ... }
    *   // ...
    * };
    * ```

package/nitrogen/generated/shared/c++/HybridUnistylesStyleSheetSpec.cpp

@@ -15,7 +15,7 @@ namespace margelo::nitro::unistyles {
     // load custom methods/properties
     registerHybrids(this, [](Prototype& prototype) {
       prototype.registerHybridGetter("hairlineWidth", &HybridUnistylesStyleSheetSpec::getHairlineWidth);
-      prototype.registerHybridGetter("___unid", &HybridUnistylesStyleSheetSpec::get___unid);
+      prototype.registerHybridGetter("__unid", &HybridUnistylesStyleSheetSpec::get__unid);
     });
   }
 

package/nitrogen/generated/shared/c++/HybridUnistylesStyleSheetSpec.hpp

@@ -24,9 +24,12 @@ namespace margelo::nitro::unistyles {
   /**
    * An abstract base class for `UnistylesStyleSheet`
    * Inherit this class to create instances of `HybridUnistylesStyleSheetSpec` in C++.
+   * You must explicitly call `HybridObject`'s constructor yourself, because it is virtual.
    * @example
    * ```cpp
    * class HybridUnistylesStyleSheet: public HybridUnistylesStyleSheetSpec {
+   * public:
+   *   HybridUnistylesStyleSheet(...): HybridObject(TAG) { ... }
    *   // ...
    * };
    * ```
@@ -42,7 +45,7 @@ namespace margelo::nitro::unistyles {
     public:
       // Properties
       virtual double getHairlineWidth() = 0;
-      virtual double get___unid() = 0;
+      virtual double get__unid() = 0;
 
     public:
       // Methods

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-alpha.12",
+  "version": "3.0.0-alpha.14",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
@@ -74,11 +74,11 @@
     "husky": "9.1.5",
     "jest": "29.7.0",
     "metro-react-native-babel-preset": "0.77.0",
-    "nitro-codegen": "0.10.0",
+    "nitro-codegen": "0.11.0",
     "react": "18.3.1",
     "react-native": "0.75.2",
     "react-native-builder-bob": "0.30.0",
-    "react-native-nitro-modules": "0.10.0",
+    "react-native-nitro-modules": "0.11.0",
     "react-native-web": "0.19.12",
     "react-test-renderer": "18.3.1",
     "release-it": "17.6.0",

package/src/index.ts

@@ -3,6 +3,9 @@ import React from 'react'
 export * from './specs'
 export { mq } from './mq'
 export type { UnistylesThemes, UnistylesBreakpoints } from './global'
+// TODO: export Native createUnistylesComponent
+// can't import it this way, it will break native build
+// export { createUnistylesComponent } from './web/createUnistylesComponent'
 
 // todo verify true min version
 const minReactVersionRequiredByUnistyles = '18.3.1'

package/src/specs/ShadowRegistry/index.ts

@@ -27,7 +27,13 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
 }
 
 HybridShadowRegistry.add = (handle, style, variants, args) => {
-    if (!handle) {
+    // virtualized nodes can be null
+    if (!handle || !style) {
+        return
+    }
+
+    // at this point unistyle can be only object or dynamic function
+    if (typeof style !== 'object' && typeof style !== 'function') {
         return
     }
 

package/src/web/convert/index.ts

@@ -21,7 +21,7 @@ export const convertToTypeStyle = (value: UnistylesValues) => {
         ...value._web
     }).flatMap(([unistylesKey, unistylesValue]) => {
         // Keys to omit
-        if (['_css', '_web', 'variants', 'compoundVariants', 'uni__dependencies'].includes(unistylesKey)) {
+        if (['_css', '_web', 'variants', 'compoundVariants', 'uni__dependencies', '__unistyles-secrets__'].includes(unistylesKey) || unistylesKey.startsWith('variant-')) {
             return []
         }
 

package/src/web/create.ts

@@ -1,105 +1,50 @@
-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 } from './utils'
 import { UnistylesRuntime } from './runtime'
 import { createUseVariants, getVariants } from './variants'
-import { UnistylesListener } from './listener'
-import type { UnistyleDependency } from '../specs/NativePlatform'
-
-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>) => {
     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 value = newComputedStylesheet[key]!
-            const result = typeof value === 'function'
-                ? value(...args)
-                : value
+    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()
+    })
 
-            UnistylesRegistry.updateStyles(unistyles, result, className)
-        })
-    }
+    const styles = reduceObject(computedStylesheet, (value, _key) => {
+        const key = String(_key)
 
-    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 variants = Object.fromEntries(getVariants({ [key]: result } as ReactNativeStyleSheet<StyleSheet>, copyVariants()))
                 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)
-                    }
-
-
-                    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
+    createUseVariants(styles, newVariants => Object.entries(newVariants).forEach(([key, value]) => selectedVariants.set(key, value)))
 
     return styles
 }

package/src/web/createUnistylesComponent.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react'
+import { extractHiddenProperties, extractSecrets } from './utils'
+import { UnistylesRuntime } from './runtime'
+import { getVariants } from './variants'
+import { UnistylesListener } from './listener'
+
+const getStyles = (value: Record<string, any>) => {
+    const secrets = extractSecrets(value)
+
+    if (secrets.length === 0) {
+        return undefined
+    }
+
+    return secrets.reduce((acc, { __uni__stylesheet, __uni__key, __uni__args = [], __uni__variants }) => {
+        const newComputedStylesheet = typeof __uni__stylesheet === 'function'
+            ? __uni__stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
+            : __uni__stylesheet
+        const style = newComputedStylesheet[__uni__key]
+        const resultHidden = typeof style === 'function'
+            ? style(...__uni__args)
+            : style
+        const result = extractHiddenProperties(resultHidden)
+        const { variants } = Object.fromEntries(getVariants({ variants: result }, __uni__variants ))
+        const resultWithVariants = {
+            ...result,
+            ...variants
+        }
+
+        return {
+            ...acc,
+            ...resultWithVariants
+        }
+    }, {} as Record<string, any>)
+}
+
+export const createUnistylesComponent = <TProps extends object>(Component: React.ComponentType<TProps>) => (props: TProps) => {
+    const passedStyles = (props as TProps & { style: Record<string, any> }).style ?? {}
+    const [style, setStyle] = useState(getStyles(passedStyles))
+
+    useEffect(() => {
+        const newStyles = getStyles(passedStyles)
+        const dependencies = newStyles?.['uni__dependencies'] ?? []
+        const dispose = UnistylesListener.addListeners(dependencies, () => setStyle(getStyles(passedStyles)))
+
+        setStyle(newStyles)
+
+        return dispose
+    }, [passedStyles])
+
+    return (
+        <Component
+            {...props}
+            style={style}
+        />
+    )
+}

package/src/web/index.ts

@@ -1,5 +1,4 @@
 import { create } from './create'
-import { UnistylesRuntime } from './runtime'
 import { UnistylesState } from './state'
 import { deepMergeObjects } from './utils'
 
@@ -19,6 +18,8 @@ export const StyleSheet = {
 }
 
 export { UnistylesRuntime } from './runtime'
+export { UnistylesShadowRegistry } from './shadowRegistry'
 export * from './mock'
 
-export const getSSRUnistyles = () => UnistylesRuntime.getSSRUnistyles()
+// TODO: Work on SSR
+export const getSSRUnistyles = () => []

package/src/web/listener/index.ts

@@ -1 +1,2 @@
 export { UnistylesListener } from './listener'
+export { listenToDependencies } from './listenToDependencies'

package/src/web/listener/listenToDependencies.ts

@@ -0,0 +1,50 @@
+import type { TypeStyle } from 'typestyle'
+import type { StyleSheet, StyleSheetWithSuperPowers } from '../../types/stylesheet'
+import type { UnistyleDependency } from '../../specs/NativePlatform'
+import { UnistylesListener } from './listener'
+import { UnistylesRuntime } from '../runtime'
+import { keyInObject } from '../utils'
+import { UnistylesRegistry } from '../registry'
+
+type ListenToDependenciesProps = {
+    key: PropertyKey,
+    unistyles: TypeStyle,
+    className: string,
+    stylesheet: StyleSheetWithSuperPowers<StyleSheet>
+    args?: Array<any>
+}
+
+export const listenToDependencies = ({ key, className, unistyles, args = [], stylesheet }: ListenToDependenciesProps) => {
+    const newComputedStylesheet = typeof stylesheet === 'function'
+        ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
+        : stylesheet
+    const _value = keyInObject(newComputedStylesheet, key) ? newComputedStylesheet[key] : undefined
+
+    if (!_value) {
+        return
+    }
+
+    const value = typeof _value === 'function' ? _value(...args) : _value
+    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 value = newComputedStylesheet[key]!
+        const result = typeof value === 'function'
+            ? value(...args)
+            : value
+
+        UnistylesRegistry.updateStyles(unistyles, result, className)
+    })
+}

package/src/web/listener/listener.ts

@@ -1,7 +1,7 @@
 import { UnistyleDependency } from '../../specs/NativePlatform'
 import { UnistylesRuntime } from '../runtime'
 
-export class UnistylesListenerBuilder {
+class UnistylesListenerBuilder {
     private isInitialized = false
     private listeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<VoidFunction>())
 

package/src/web/mock.ts

@@ -23,13 +23,3 @@ export const NavigationBar: NavigationBarSpec = {
     __type: 'web',
     name: 'NavigationBar'
 }
-
-export const UnistylesShadowRegistry = {
-    name: 'UnistylesShadowRegistry',
-    __type: 'web',
-    equals: () => true,
-    toString: () => 'UnistylesShadowRegistry',
-    dispose: () => {},
-    add: () => {},
-    remove: () => {},
-}

package/src/web/pseudo.ts

@@ -1,11 +1,137 @@
-// TODO: Add complete list of pseudo selectors
 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',
-    '_css',
+    '_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',
-    '_after'
+    '_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.includes(selector as Pseudo)
+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]>
 
-export type Pseudo = typeof pseudos[number]

package/src/web/registry.ts

@@ -1,16 +1,14 @@
 import { createTypeStyle, TypeStyle } from 'typestyle'
 import type { UnistylesValues } from '../types'
 import { convertToTypeStyle } from './convert'
-import { UnistylesState } from './state'
 
 class UnistylesRegistryBuilder {
-    createStyles = (stylesheet: UnistylesValues, key: string | number) => {
-        const stylesTag = UnistylesState.createTag()
-        const unistyles = createTypeStyle(stylesTag)
+    createStyles = (stylesheet: UnistylesValues, key: string) => {
+        const unistyles = createTypeStyle()
         const typestyleStylesheet = convertToTypeStyle(stylesheet)
 
         const className = unistyles.style({
-            $debugName: String(key),
+            $debugName: `${key}-${Math.random().toString(16).slice(10)}`,
         }, typestyleStylesheet)
 
         if (stylesheet._web?._css) {