react-native-unistyles 3.0.0-beta.7 → 3.0.0-experimental-2025051401

package/src/web/registry.ts

@@ -11,9 +11,11 @@ export class UnistylesRegistry {
     private readonly stylesCounter = new Map<string, Set<HTMLElement>>()
     private readonly disposeListenersMap = new Map<object, VoidFunction>()
     private readonly dependenciesMap = new Map<StyleSheetWithSuperPowers<StyleSheet>, Set<UnistyleDependency>>()
-    readonly css = new CSSState()
+    readonly css: CSSState
 
-    constructor(private services: UnistylesServices) {}
+    constructor(private services: UnistylesServices) {
+        this.css = new CSSState(services)
+    }
 
     getComputedStylesheet = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>, scopedThemeName?: UnistylesTheme) => {
         if (typeof stylesheet !== 'function') {
@@ -21,7 +23,7 @@ export class UnistylesRegistry {
         }
 
         if (scopedThemeName) {
-            const scopedTheme = this.services.runtime.getTheme(scopedThemeName, this.services.state.CSSVars)
+            const scopedTheme = this.services.runtime.getTheme(scopedThemeName)
 
             if (!scopedTheme) {
                 throw error(`Unistyles: You're trying to use scoped theme '${scopedThemeName}' but it wasn't registered.`)
@@ -54,7 +56,10 @@ export class UnistylesRegistry {
         dependencies.forEach(dependency => dependenciesMap.add(dependency))
 
         const dispose = this.services.listener.addStylesheetListeners(Array.from(dependenciesMap), () => {
-            const newComputedStylesheet = stylesheet(this.services.runtime.theme, this.services.runtime.miniRuntime)
+            const newComputedStylesheet = stylesheet(
+                this.services.runtime.getTheme(this.services.runtime.themeName, this.services.state.CSSVars),
+                this.services.runtime.miniRuntime
+            )
 
             this.stylesheets.set(stylesheet, newComputedStylesheet)
         })
@@ -77,23 +82,27 @@ export class UnistylesRegistry {
 
         if (stylesCounter.size === 0) {
             // Move this to the end of the event loop so the element is removed from the DOM
-            Promise.resolve().then(() => {
+            return Promise.resolve().then(() => {
+                // Check if element is still in the DOM
                 if (document.querySelector(`.${hash}`)) {
-                    return
+                    return false
                 }
 
                 this.css.remove(hash)
                 this.stylesCache.delete(hash)
-            })
 
-            return true
+                return true
+            })
         }
 
-        return false
+        return Promise.resolve(false)
     }
 
-    add = (value: UnistylesValues) => {
-        const hash = generateHash(value)
+    add = (value: UnistylesValues, forChild?: boolean) => {
+        const generatedHash = generateHash(value)
+        const hash = forChild
+            ? `${generatedHash} > *`
+            : generatedHash
 
         if (!this.stylesCache.has(hash)) {
             this.applyStyles(hash, value)

package/src/web/runtime.ts

@@ -1,7 +1,7 @@
 import { UnistyleDependency } from '../specs/NativePlatform'
 import type { UnistylesMiniRuntime } from '../specs/UnistylesRuntime'
 import { type AppTheme, type AppThemeName, ColorScheme, Orientation } from '../specs/types'
-import { WebContentSizeCategory } from '../types'
+import { type UnistylesTheme, WebContentSizeCategory } from '../types'
 import { NavigationBar, StatusBar } from './mock'
 import type { UnistylesServices } from './types'
 import { error, isServer, schemeToTheme } from './utils'
@@ -213,7 +213,11 @@ export class UnistylesRuntime {
             : this.services.state.themes.get(themeName ?? '')
 
         if (!themeName || !theme) {
-            throw error(`You're trying to get theme "${themeName}" but it wasn't registered.`)
+            return new Proxy({} as UnistylesTheme, {
+                get: () => {
+                    throw error(`You're trying to get theme "${themeName}" but it wasn't registered.`)
+                }
+            })
         }
 
         return theme

package/src/web/services.ts

@@ -3,8 +3,9 @@ import { UnistylesRegistry } from './registry'
 import { UnistylesRuntime } from './runtime'
 import { UnistylesShadowRegistry } from './shadowRegistry'
 import { UnistylesState } from './state'
+import { isServer } from './utils'
 
-export class UnistylesServices {
+class UnistylesServices {
     runtime: UnistylesRuntime
     registry: UnistylesRegistry
     shadowRegistry: UnistylesShadowRegistry
@@ -26,3 +27,15 @@ export class UnistylesServices {
         this.services.listener = this.listener
     }
 }
+
+declare global {
+    // @ts-ignore
+    var __unistyles__: UnistylesServices
+}
+
+if (isServer() && !globalThis.__unistyles__) {
+    // @ts-ignore
+    globalThis.__unistyles__ = new UnistylesServices()
+}
+
+export const services = isServer() ? globalThis.__unistyles__ : new UnistylesServices()

package/src/web/shadowRegistry.ts

@@ -1,8 +1,8 @@
-import { UnistyleDependency } from '../specs'
+import { UnistyleDependency } from '../specs/NativePlatform/NativePlatform.nitro'
 import type { UnistylesTheme, UnistylesValues } from '../types'
 import { deepMergeObjects } from '../utils'
-import type { UnistylesServices } from './types'
-import { extractSecrets, extractUnistyleDependencies } from './utils'
+import type { UniGeneratedStyle, UnistylesServices } from './types'
+import { extractSecrets, extractUnistyleDependencies, isGeneratedUnistyle, isServer } from './utils'
 import { getVariants } from './variants'
 
 export class UnistylesShadowRegistry {
@@ -27,7 +27,14 @@ export class UnistylesShadowRegistry {
         this.services.registry.connect(ref, hash)
     }
 
-    addStyles = (unistyles: Array<UnistylesValues>) => {
+    addStyles = (unistyles: Array<UnistylesValues>, forChild?: boolean) => {
+        const [firstStyle] = unistyles
+
+        // If it is already a generated style, return it
+        if (firstStyle && isGeneratedUnistyle(firstStyle)) {
+            return firstStyle as UniGeneratedStyle
+        }
+
         const getParsedStyles = () => {
             const allStyles = unistyles.map(unistyle => {
                 const secrets = extractSecrets(unistyle)
@@ -37,6 +44,11 @@ export class UnistylesShadowRegistry {
                     return unistyle
                 }
 
+                // Animated styles - shouldn't be processed
+                if (Object.keys(secrets).length === 0) {
+                    return {}
+                }
+
                 const { __uni__key, __uni__stylesheet, __uni__args = [], __uni_variants: variants } = secrets
                 const newComputedStylesheet = this.services.registry.getComputedStylesheet(__uni__stylesheet, scopedTheme)
                 const style = newComputedStylesheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues))
@@ -52,7 +64,10 @@ export class UnistylesShadowRegistry {
                     this.services.registry.addDependenciesToStylesheet(__uni__stylesheet, dependencies)
                 }
 
-                return resultWithVariants as UnistylesValues
+                return {
+                    ...resultWithVariants,
+                    ...resultWithVariants._web
+                } as UnistylesValues
             })
 
             return deepMergeObjects(...allStyles)
@@ -61,7 +76,7 @@ export class UnistylesShadowRegistry {
         // Copy scoped theme to not use referenced value
         const scopedTheme = this.scopedTheme
         const parsedStyles = getParsedStyles()
-        const { hash, existingHash } = this.services.registry.add(parsedStyles)
+        const { hash, existingHash } = this.services.registry.add(parsedStyles, forChild)
         const injectedClassNames = parsedStyles?._web?._classNames ?? []
         const injectedClassName = Array.isArray(injectedClassNames) ? injectedClassNames.join(' ') : injectedClassNames
         const dependencies = extractUnistyleDependencies(parsedStyles)
@@ -75,7 +90,11 @@ export class UnistylesShadowRegistry {
             }))
         }
 
-        return { injectedClassName, hash }
+        const hashClassname = forChild
+            ? hash.replace(' > *', '')
+            : hash
+
+        return { injectedClassName, hash: hashClassname }
     }
 
     setScopedTheme = (theme?: UnistylesTheme) => {
@@ -85,15 +104,18 @@ export class UnistylesShadowRegistry {
     getScopedTheme = () => this.scopedTheme
 
     remove = (ref: any, hash?: string) => {
-        if (!(ref instanceof HTMLElement) || !hash) {
+        if (isServer() || !(ref instanceof HTMLElement) || !hash) {
             return
         }
 
-        const removed = this.services.registry.remove(ref, hash)
+        this.services.registry.remove(ref, hash)
+            .then(removed => {
+                if (!removed) {
+                    return
+                }
 
-        if (removed) {
-            this.disposeMap.get(hash)?.()
-            this.disposeMap.delete(hash)
-        }
+                this.disposeMap.get(hash)?.()
+                this.disposeMap.delete(hash)
+            })
     }
 }

package/src/web/state.ts

@@ -17,6 +17,7 @@ export class UnistylesState {
     CSSVars = true
 
     private matchingBreakpoints = new Map<string, boolean>()
+    private _config: UnistylesConfig = {}
 
     get breakpoint() {
         const [currentBreakpoint] = Array.from(this.matchingBreakpoints)
@@ -37,6 +38,7 @@ export class UnistylesState {
             return
         }
 
+        this._config = config
         this.isInitialized = true
         this.initThemes(config.themes, config.settings?.CSSVars)
         this.initBreakpoints(config.breakpoints)
@@ -58,7 +60,11 @@ export class UnistylesState {
         this.services.listener.initListeners()
     }
 
-    private initThemes = (themes = {} as UnistylesThemes, CSSVars = true) => {
+    private initThemes = (themes?: UnistylesThemes, CSSVars = true) => {
+        if (!themes) {
+            return
+        }
+
         this.CSSVars = CSSVars
 
         Object.entries(themes).forEach(([themeName, theme]) => {
@@ -117,7 +123,11 @@ export class UnistylesState {
         }
     }
 
-    private initBreakpoints = (breakpoints = {} as UnistylesBreakpoints) => {
+    private initBreakpoints = (breakpoints?: UnistylesBreakpoints) => {
+        if (!breakpoints) {
+            return
+        }
+
         this.breakpoints = breakpoints
         const breakpointsEntries = Object.entries(breakpoints)
 
@@ -145,4 +155,6 @@ export class UnistylesState {
                 })
             })
     }
+
+    getConfig = () => this._config
 }

package/src/web/types.ts

@@ -1,8 +1,8 @@
 import type { UnistylesListener } from './listener'
-import type{ UnistylesRegistry } from './registry'
-import type{ UnistylesRuntime } from './runtime'
-import type{ UnistylesShadowRegistry } from './shadowRegistry'
-import type{ UnistylesState } from './state'
+import type { UnistylesRegistry } from './registry'
+import type { UnistylesRuntime } from './runtime'
+import type { UnistylesShadowRegistry } from './shadowRegistry'
+import type { UnistylesState } from './state'
 
 export type UnistylesServices = {
     runtime: UnistylesRuntime,
@@ -11,3 +11,8 @@ export type UnistylesServices = {
     state: UnistylesState,
     listener: UnistylesListener
 }
+
+export const UNI_GENERATED_KEYS = ['$$css', 'hash', 'injectedClassName'] as const
+export type UniGeneratedKey = typeof UNI_GENERATED_KEYS[number]
+
+export type UniGeneratedStyle = Record<UniGeneratedKey, string>

package/src/web/utils/createUnistylesRef.ts

@@ -0,0 +1,33 @@
+import type React from 'react'
+import type { Nullable, UnistylesValues } from '../../types'
+import * as unistyles from '../services'
+import { isServer } from './common'
+
+type Styles = readonly [
+    {
+        hash: string
+    },
+    Array<UnistylesValues>
+]
+
+export const createUnistylesRef = <T>(styles?: Styles, forwardedRef?: React.ForwardedRef<T>) => {
+    const storedRef = { current: null as Nullable<T> }
+    const [classNames] = styles ?? []
+
+    return isServer() ? undefined : (ref: Nullable<T>) => {
+        if (!ref) {
+            unistyles.services.shadowRegistry.remove(storedRef, classNames?.hash)
+        }
+
+        storedRef.current = ref
+        unistyles.services.shadowRegistry.add(ref, classNames?.hash)
+
+        if (typeof forwardedRef === 'function') {
+            return forwardedRef(ref)
+        }
+
+        if (forwardedRef) {
+            forwardedRef.current = ref
+        }
+    }
+}

package/src/web/utils/unistyle.ts

@@ -1,9 +1,11 @@
+import { Animated } from 'react-native'
 import type { UnistylesBreakpoints } from '../../global'
-import { isUnistylesMq, parseMq } from '../../mq'
-import type { UnistyleDependency } from '../../specs/NativePlatform'
+import type { UnistyleDependency } from '../../specs/NativePlatform/NativePlatform.nitro'
 import { ColorScheme, Orientation } from '../../specs/types'
 import type { StyleSheet, StyleSheetWithSuperPowers, UnistylesValues } from '../../types/stylesheet'
-import { UnistylesWeb } from '../index'
+import { isUnistylesMq, parseMq } from '../../utils'
+import * as unistyles from '../services'
+import { UNI_GENERATED_KEYS, type UniGeneratedKey, type UniGeneratedStyle } from '../types'
 import { keyInObject, reduceObject } from './common'
 
 export const schemeToTheme = (scheme: ColorScheme) => {
@@ -49,13 +51,7 @@ export const extractSecrets = (object: any) => {
         return undefined
     }
 
-    const hiddenSecrets = Object.getOwnPropertyDescriptors(secrets)
-
-    if (Object.keys(hiddenSecrets).length === 0) {
-        return undefined
-    }
-
-    return reduceObject(hiddenSecrets, secret => secret.value)
+    return reduceObject(Object.getOwnPropertyDescriptors(secrets), secret => secret.value)
 }
 
 export const removeInlineStyles = (values: UnistylesValues) => {
@@ -70,8 +66,6 @@ export const removeInlineStyles = (values: UnistylesValues) => {
     return returnValue
 }
 
-export const isInDocument = (element: HTMLElement) => document.body.contains(element)
-
 export const getMediaQuery = (query: string, allBreakpoints: Array<string>) => {
     if (Object.values(Orientation).includes(query as Orientation)) {
         return `@media (orientation: ${query})`
@@ -89,18 +83,18 @@ export const getMediaQuery = (query: string, allBreakpoints: Array<string>) => {
         return `@media ${queries}`
     }
 
-    const breakpointValue = UnistylesWeb.runtime.breakpoints[query as keyof UnistylesBreakpoints] ?? 0
+    const breakpointValue = unistyles.services.runtime.breakpoints[query as keyof UnistylesBreakpoints] ?? 0
     const nextBreakpoint = allBreakpoints
-            .filter((b): b is keyof UnistylesBreakpoints => b in UnistylesWeb.runtime.breakpoints)
-            .map(b => UnistylesWeb.runtime.breakpoints[b] as number)
-            .sort((a, b) => a - b)
-            .find(b => b > breakpointValue)
-        const queries = [
-            `(min-width: ${breakpointValue}px)`,
-            nextBreakpoint ? `(max-width: ${nextBreakpoint - 1}px)` : undefined,
-        ].filter(Boolean).join(' and ')
-
-        return `@media ${queries}`
+        .filter((b): b is keyof UnistylesBreakpoints => b in unistyles.services.runtime.breakpoints)
+        .map(b => unistyles.services.runtime.breakpoints[b] as number)
+        .sort((a, b) => a - b)
+        .find(b => b > breakpointValue)
+    const queries = [
+        `(min-width: ${breakpointValue}px)`,
+        nextBreakpoint ? `(max-width: ${nextBreakpoint - 1}px)` : undefined,
+    ].filter(Boolean).join(' and ')
+
+    return `@media ${queries}`
 }
 
 export const extractUnistyleDependencies = (value: any) => {
@@ -112,3 +106,41 @@ export const extractUnistyleDependencies = (value: any) => {
 
     return Array.isArray(dependencies) ? dependencies : []
 }
+
+export const checkForProp = (value: any, prop: string): boolean => {
+    if (Array.isArray(value)) {
+        return value.some(nestedValue => checkForProp(nestedValue, prop))
+    }
+
+    if (typeof value === 'object' && value !== null) {
+        return keyInObject(value, prop)
+            ? true
+            : keyInObject(value, '_web')
+                ? checkForProp(value._web, prop)
+                : false
+    }
+
+    return false
+}
+
+export const checkForAnimated = (value: any): boolean => {
+    if (Array.isArray(value)) {
+        return value.some(checkForAnimated)
+    }
+
+    if (typeof value === 'object' && value !== null) {
+        const objectValues = Object.values(value)
+        const secrets = extractSecrets(value)
+
+        // @ts-expect-error React Native Web exports Animated.AnimatedNode as Animated.Node
+        return value instanceof Animated.Node ||
+            objectValues.length > 0 && objectValues.some(checkForAnimated) ||
+            secrets && Object.keys(secrets).length === 0
+    }
+
+    return false
+}
+
+export const isGeneratedUnistyle = (value: Record<string, any>): value is UniGeneratedStyle => {
+    return Object.keys(value).every(key => UNI_GENERATED_KEYS.includes(key as UniGeneratedKey))
+}

package/src/web-only/getWebProps.ts

@@ -0,0 +1,18 @@
+import type { StyleProp } from 'react-native'
+import { getClassName } from '../core'
+import type { RNStyle, UnistylesValues } from '../types'
+import { createUnistylesRef } from '../web/utils/createUnistylesRef'
+
+export const getWebProps = <T>(style: StyleProp<RNStyle>) => {
+    const styles = getClassName(style as UnistylesValues)
+    const ref = createUnistylesRef<T>(styles)
+    const [generatedStyles] = styles ?? []
+
+    return {
+        className: [
+            generatedStyles?.hash,
+            generatedStyles?.injectedClassName,
+        ].filter(Boolean).join(' '),
+        ref
+    }
+}

package/src/web-only/index.ts

@@ -0,0 +1,2 @@
+
+export { getWebProps } from './getWebProps'

package/web/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "../lib/commonjs/web-only/index",
+    "module": "../lib/module/web-only/index",
+    "react-native": "../src/web-only/index",
+    "types": "../lib/typescript/src/web-only/index"
+}

package/cxx/core/UnistylesCommitHook.cpp

@@ -1,49 +0,0 @@
-#include "UnistylesCommitHook.h"
-
-using namespace margelo::nitro::unistyles;
-using namespace facebook::react;
-
-core::UnistylesCommitHook::~UnistylesCommitHook() noexcept {
-    _uiManager->unregisterCommitHook(*this);
-}
-
-void core::UnistylesCommitHook::commitHookWasRegistered(const UIManager &uiManager) noexcept {}
-void core::UnistylesCommitHook::commitHookWasUnregistered(const UIManager &uiManager) noexcept {}
-
-RootShadowNode::Unshared core::UnistylesCommitHook::shadowTreeWillCommit(
-    const ShadowTree &shadowTree,
-    const RootShadowNode::Shared &oldRootShadowNode,
-    const RootShadowNode::Unshared &newRootShadowNode
-) noexcept {
-    RootShadowNode::Unshared rootNode = newRootShadowNode;
-    auto unistylesRootNode = std::reinterpret_pointer_cast<core::UnistylesCommitShadowNode>(newRootShadowNode);
-
-    // this is Unistyles commit, we don't need to override it
-    if (unistylesRootNode->hasUnistylesCommitTrait()) {
-        unistylesRootNode->removeUnistylesCommitTrait();
-        unistylesRootNode->addUnistylesMountTrait();
-
-        return newRootShadowNode;
-    }
-
-    // this is React Native / Reanimated commit
-    // merge Unistyles updates before it completes
-    auto& registry = core::UnistylesRegistry::get();
-    auto& shadowLeafUpdates = registry.trafficController.getUpdates();
-
-    // oops, no updates from Unistyles yet, skip it!
-    if (shadowLeafUpdates.size() == 0) {
-        return newRootShadowNode;
-    }
-
-    auto affectedNodes = shadow::ShadowTreeManager::findAffectedNodes(*rootNode, shadowLeafUpdates);
-
-    registry.trafficController.stopUnistylesTraffic();
-
-    // we have few updates, so merge it
-    return std::static_pointer_cast<RootShadowNode>(shadow::ShadowTreeManager::cloneShadowTree(
-        *rootNode,
-        shadowLeafUpdates,
-        affectedNodes
-    ));
-}

package/cxx/core/UnistylesCommitHook.h

@@ -1,27 +0,0 @@
-#pragma once
-
-#include <react/renderer/uimanager/UIManager.h>
-#include <react/renderer/uimanager/UIManagerCommitHook.h>
-#include "ShadowTreeManager.h"
-#include "ShadowTrafficController.h"
-
-namespace margelo::nitro::unistyles::core {
-
-using namespace facebook::react;
-
-struct UnistylesCommitHook : public UIManagerCommitHook {
-    UnistylesCommitHook(std::shared_ptr<UIManager> uiManager) : _uiManager{uiManager} {
-        _uiManager->registerCommitHook(*this);
-    }
-
-    ~UnistylesCommitHook() noexcept override;
-
-    void commitHookWasRegistered(const UIManager &uiManager) noexcept override;
-    void commitHookWasUnregistered(const UIManager &uiManager) noexcept override;
-    RootShadowNode::Unshared shadowTreeWillCommit(const ShadowTree &shadowTree, const RootShadowNode::Shared &oldRootShadowNode, const RootShadowNode::Unshared &newRootShadowNode) noexcept override;
-
-private:
-    std::shared_ptr<UIManager> _uiManager;
-};
-
-}

package/cxx/core/UnistylesMountHook.cpp

@@ -1,28 +0,0 @@
-#include "UnistylesMountHook.h"
-
-using namespace margelo::nitro::unistyles;
-using namespace facebook::react;
-
-core::UnistylesMountHook::~UnistylesMountHook() noexcept {
-    _uiManager->unregisterMountHook(*this);
-}
-
-void core::UnistylesMountHook::shadowTreeDidMount(RootShadowNode::Shared const &rootShadowNode, double mountTime) noexcept {
-    auto rootNode = std::const_pointer_cast<RootShadowNode>(rootShadowNode);
-    auto unistylesRootNode = std::reinterpret_pointer_cast<core::UnistylesCommitShadowNode>(rootNode);
-
-    // if this is Unistyles commit, do nothing
-    if (unistylesRootNode->hasUnistylesMountTrait()) {
-        unistylesRootNode->removeUnistylesMountTrait();
-
-        return;
-    }
-
-    // this is React Native or Reanimated commit
-    // one more time merge Unistyles changes
-    auto& registry = core::UnistylesRegistry::get();
-
-    if (!registry.trafficController.shouldStop()) {
-        shadow::ShadowTreeManager::updateShadowTree(this->_uiManager->getShadowTreeRegistry());
-    }
-}

package/cxx/core/UnistylesMountHook.h

@@ -1,27 +0,0 @@
-#pragma once
-
-#include <react/renderer/uimanager/UIManager.h>
-#include <react/renderer/uimanager/UIManagerMountHook.h>
-#include "ShadowTreeManager.h"
-#include "HybridUnistylesRuntime.h"
-
-namespace margelo::nitro::unistyles::core {
-
-using namespace facebook::react;
-
-struct UnistylesMountHook : public UIManagerMountHook {
-    UnistylesMountHook(std::shared_ptr<UIManager> uiManager, std::shared_ptr<HybridUnistylesRuntime> unistylesRuntime)
-        : _uiManager{uiManager}, _unistylesRuntime{unistylesRuntime} {
-        _uiManager->registerMountHook(*this);
-    }
-
-    ~UnistylesMountHook() noexcept override;
-
-    void shadowTreeDidMount(RootShadowNode::Shared const &rootShadowNode, double mountTime) noexcept override;
-
-private:
-    std::shared_ptr<UIManager> _uiManager;
-    std::shared_ptr<HybridUnistylesRuntime> _unistylesRuntime;
-};
-
-}

package/lib/module/package.json

@@ -1 +0,0 @@
-{"type":"module"}

package/plugin/consts.js

@@ -1,63 +0,0 @@
-const REACT_NATIVE_COMPONENT_NAMES = [
-    'ActivityIndicator',
-    'View',
-    'Text',
-    'Image',
-    'ImageBackground',
-    'KeyboardAvoidingView',
-    'Pressable',
-    'ScrollView',
-    'FlatList',
-    'SectionList',
-    'Switch',
-    'TextInput',
-    'RefreshControl',
-    'TouchableHighlight',
-    'TouchableOpacity',
-    'VirtualizedList',
-    'Animated'
-    // Modal - there is no exposed native handle
-    // TouchableWithoutFeedback - can't accept a ref
-]
-
-// auto replace RN imports to Unistyles imports under these paths
-// our implementation simply borrows 'ref' to register it in ShadowRegistry
-// so we won't affect anyone's implementation
-const REPLACE_WITH_UNISTYLES_PATHS = [
-    'react-native-reanimated/src/component',
-    'react-native-gesture-handler/src/components'
-]
-
-// this is more powerful API as it allows to convert unmatched imports to Unistyles
-// { path: string, imports: Array<{ name: string, isDefault: boolean, path: string, mapTo: string }> }
-// path => node_modules path
-// imports:
-// name? <- target import name if isDefault is false
-// isDefault <- is the import default?
-// path <- path to the target import
-// mapTo <- name of the Unistyles component
-const REPLACE_WITH_UNISTYLES_EXOTIC_PATHS = []
-
-// this list will additionally detect React Native direct imports
-const NATIVE_COMPONENTS_PATHS = {
-    imports: [
-        {
-            name: 'NativeText',
-            isDefault: false,
-            path: 'react-native/Libraries/Text/TextNativeComponent',
-            mapTo: 'NativeText'
-        },
-        {
-            isDefault: true,
-            path: 'react-native/Libraries/Components/View/ViewNativeComponent',
-            mapTo: 'NativeView'
-        }
-    ]
-}
-
-module.exports = {
-    NATIVE_COMPONENTS_PATHS,
-    REACT_NATIVE_COMPONENT_NAMES,
-    REPLACE_WITH_UNISTYLES_PATHS,
-    REPLACE_WITH_UNISTYLES_EXOTIC_PATHS
-}