react-native-unistyles 3.0.0-nightly-20250428 → 3.0.0-nightly-20250503

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

@@ -1 +1 @@
-{"version":3,"file":"unistyle.d.ts","sourceRoot":"","sources":["../../../../../src/web/utils/unistyle.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AACpE,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAIpG,eAAO,MAAM,aAAa,WAAY,WAAW,qBAQhD,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC1B,iBAAiB,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAC;IACzD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAA;CAC/D,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,CAAC,UAAU,CAAC,WAAW,eAAe,MAanE,CAAA;AAED,eAAO,MAAM,cAAc,WAAY,GAAG;;aAYzC,CAAA;AAED,eAAO,MAAM,kBAAkB,WAAY,eAAe,OAUzD,CAAA;AAED,eAAO,MAAM,aAAa,UAAW,MAAM,kBAAkB,KAAK,CAAC,MAAM,CAAC,WA6BzE,CAAA;AAED,eAAO,MAAM,2BAA2B,UAAW,GAAG,yBAQrD,CAAA;AAED,eAAO,MAAM,YAAY,UAAW,GAAG,QAAQ,MAAM,KAAG,OAcvD,CAAA;AAED,eAAO,MAAM,gBAAgB,UAAW,GAAG,KAAG,OAgB7C,CAAA"}
+{"version":3,"file":"unistyle.d.ts","sourceRoot":"","sources":["../../../../../src/web/utils/unistyle.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAA;AACzF,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAKpG,eAAO,MAAM,aAAa,WAAY,WAAW,qBAQhD,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC1B,iBAAiB,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAC;IACzD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAA;CAC/D,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,CAAC,UAAU,CAAC,WAAW,eAAe,MAanE,CAAA;AAED,eAAO,MAAM,cAAc,WAAY,GAAG;;aAYzC,CAAA;AAED,eAAO,MAAM,kBAAkB,WAAY,eAAe,OAUzD,CAAA;AAED,eAAO,MAAM,aAAa,UAAW,MAAM,kBAAkB,KAAK,CAAC,MAAM,CAAC,WA6BzE,CAAA;AAED,eAAO,MAAM,2BAA2B,UAAW,GAAG,yBAQrD,CAAA;AAED,eAAO,MAAM,YAAY,UAAW,GAAG,QAAQ,MAAM,KAAG,OAcvD,CAAA;AAED,eAAO,MAAM,gBAAgB,UAAW,GAAG,KAAG,OAgB7C,CAAA"}

package/package.json

@@ -1,32 +1,43 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-nightly-20250428",
+  "version": "3.0.0-nightly-20250503",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
-    "test": "jest",
-    "test:coverage": "jest --passWithNoTests --coverage",
+    "test": "NODE_ENV=babel-test jest ./plugin",
+    "test:coverage": "NODE_ENV=babel-test jest --passWithNoTests --coverage",
     "tsc": "node_modules/typescript/bin/tsc --noEmit",
     "lint": "biome lint",
     "check": "biome check --write",
     "check:ci": "biome check",
     "prepare": "husky && bob build && yarn plugin:build",
-    "precommit": "concurrently 'yarn tsc' 'yarn lint' 'yarn check' 'yarn test'",
+    "precommit": "concurrently 'yarn tsc' 'yarn lint' 'yarn check' 'yarn test' 'yarn circular:check'",
     "release": "release-it",
-    "plugin:build": "node plugin/esbuild.js"
+    "plugin:build": "node plugin/esbuild.js",
+    "circular:check": "dpdm --no-warning --no-tree -T --exit-code circular:1 src/**/*.ts",
+    "components:build": "node build-components.js"
   },
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
+  "browser": "lib/module/index.js",
   "types": "lib/typescript/src/index.d.ts",
   "source": "src/index",
   "exports": {
     ".": {
       "types": "./lib/typescript/src/index.d.ts",
       "import": "./lib/module/index.js",
+      "browser": "./lib/module/index.js",
       "react-native": "./src/index.ts",
       "default": "./lib/commonjs/index.js"
     },
+    "./mocks": {
+      "import": "./lib/module/mocks.js",
+      "browser": "./lib/module/mocks.js",
+      "react-native": "./src/mocks.ts",
+      "default": "./lib/commonjs/mocks.js"
+    },
     "./components/native/*": {
       "import": "./lib/module/components/native/*",
+      "browser": "./lib/module/components/native/*",
       "react-native": "./src/components/native/*",
       "default": "./lib/commonjs/components/native/*"
     },
@@ -39,6 +50,7 @@
     "./server": {
       "types": "./lib/typescript/src/server/index.d.ts",
       "import": "./lib/module/server/index.js",
+      "browser": "./lib/module/server/index.js",
       "react-native": "./src/server.ts",
       "default": "./lib/commonjs/server/index.js"
     }
@@ -102,6 +114,7 @@
     "babel-plugin-tester": "11.0.4",
     "commitlint": "19.7.1",
     "concurrently": "9.1.2",
+    "dpdm": "3.14.0",
     "esbuild": "0.25.0",
     "husky": "9.1.7",
     "jest": "29.7.0",

package/plugin/index.js

@@ -715,6 +715,12 @@ function extractVariants(path2, state) {
 
 // plugin/src/index.ts
 function index_default() {
+  if (process.env.NODE_ENV === "test") {
+    return {
+      name: "babel-react-native-unistyles",
+      visitor: {}
+    };
+  }
   return {
     name: "babel-react-native-unistyles",
     visitor: {

package/src/components/native/Image.tsx

@@ -4,7 +4,8 @@ import { getClassName } from '../../core'
 import { maybeWarnAboutMultipleUnistyles } from '../../core/warn'
 import type { UnistylesValues } from '../../types'
 import { copyComponentProperties } from '../../utils'
-import { checkForProp, createUnistylesRef } from '../../web/utils'
+import { checkForProp } from '../../web/utils'
+import { createUnistylesRef } from '../../web/utils/createUnistylesRef'
 
 type Props = ComponentProps<typeof NativeImage> & {
     style?: UnistylesValues

package/src/components/native/ImageBackground.tsx

@@ -5,7 +5,8 @@ import { getClassName } from '../../core'
 import { maybeWarnAboutMultipleUnistyles } from '../../core/warn'
 import type { UnistylesValues } from '../../types'
 import { copyComponentProperties } from '../../utils'
-import { createUnistylesRef, keyInObject } from '../../web/utils'
+import { keyInObject } from '../../web/utils'
+import { createUnistylesRef } from '../../web/utils/createUnistylesRef'
 
 type Props = {
     style?: UnistylesValues

package/src/components/native/ScrollView.tsx

@@ -1,37 +1,4 @@
-import React from 'react'
-import { forwardRef } from 'react'
-import { ScrollView as NativeScrollView, type StyleProp, type ViewStyle } from 'react-native'
-import { getClassName } from '../../core'
-import { maybeWarnAboutMultipleUnistyles } from '../../core/warn'
-import type { UnistylesValues } from '../../types'
-import { copyComponentProperties } from '../../utils'
-import { createUnistylesRef, isServer } from '../../web/utils'
+import { ScrollView as NativeScrollView } from 'react-native'
+import { createUnistylesElement } from '../../core'
 
-type Props = {
-    style?: UnistylesValues
-    contentContainerStyle?: UnistylesValues
-}
-
-const UnistylesScrollView = forwardRef<unknown, Props>((props, forwardedRef) => {
-    const styleClassNames = getClassName(props.style)
-    const contentContainerStyleClassNames = getClassName(props.contentContainerStyle)
-    const ref = createUnistylesRef(styleClassNames, forwardedRef)
-    const contentContainerRef = createUnistylesRef(contentContainerStyleClassNames)
-
-    maybeWarnAboutMultipleUnistyles(props.style as ViewStyle, 'ScrollView')
-    maybeWarnAboutMultipleUnistyles(props.contentContainerStyle as ViewStyle, 'ScrollView')
-
-    return (
-        <NativeScrollView
-            {...props}
-            style={styleClassNames as StyleProp<ViewStyle>}
-            contentContainerStyle={contentContainerStyleClassNames as StyleProp<ViewStyle>}
-            ref={isServer() ? undefined : scrollRef => {
-                ref?.(scrollRef)
-                contentContainerRef?.(scrollRef)
-            }}
-        />
-    )
-})
-
-export const ScrollView = copyComponentProperties(NativeScrollView, UnistylesScrollView)
+export const ScrollView = createUnistylesElement(NativeScrollView)

package/src/core/createUnistylesElement.tsx

@@ -2,26 +2,43 @@ import React from 'react'
 import type { ViewStyle } from 'react-native'
 import type { UnistylesValues } from '../types'
 import { copyComponentProperties } from '../utils'
-import { createUnistylesRef } from '../web/utils'
+import { isServer } from '../web/utils'
+import { createUnistylesRef } from '../web/utils/createUnistylesRef'
 import { getClassName } from './getClassname'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
+const STYLE_PROPS = ['style', 'contentContainerStyle', 'columnWrapperStyle'] as const
+
 type ComponentProps = {
-    style?: UnistylesValues | Array<UnistylesValues>
+    [K in typeof STYLE_PROPS[number]]?: UnistylesValues
 }
 
-export const createUnistylesElement = (Component: any) => {
-    const UnistylesComponent = React.forwardRef<unknown, ComponentProps>((props, forwardedRef) => {
-        const classNames = getClassName(props.style)
-        const ref = createUnistylesRef(classNames, forwardedRef)
+const buildUnistylesProps = (Component: any, props: ComponentProps, forwardedRef: React.ForwardedRef<unknown>) => {
+    const componentStyleProps = STYLE_PROPS.filter(styleProp => styleProp in props)
+    const classNames = Object.fromEntries(componentStyleProps.map(styleProp => [styleProp, getClassName(props[styleProp])]))
+    const refs = componentStyleProps.map(styleProp => {
+        return createUnistylesRef(
+            classNames[styleProp],
+            styleProp === 'style' ? forwardedRef : undefined
+        )
+    })
 
-        maybeWarnAboutMultipleUnistyles(props.style as ViewStyle, Component.displayName)
+    componentStyleProps.forEach(styleProp => {
+        maybeWarnAboutMultipleUnistyles(props[styleProp] as ViewStyle, Component.displayName)
+    })
+
+    return {
+        ...classNames,
+        ref: isServer() ? undefined : (componentRef: any) => refs.forEach(ref => ref?.(componentRef))
+    }
+}
 
+export const createUnistylesElement = (Component: any) => {
+    const UnistylesComponent = React.forwardRef<unknown, ComponentProps>((props, forwardedRef) => {
         return (
             <Component
                 {...props}
-                style={classNames}
-                ref={ref}
+                {...buildUnistylesProps(Component, props, forwardedRef)}
             />
         )
     })

package/src/hooks/useMedia.native.ts

@@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useState } from 'react'
-import { isUnistylesMq, isValidMq, parseMq } from '../mq'
 import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
+import { isUnistylesMq, isValidMq, parseMq } from '../utils'
 
 export const useMedia = (config: { mq: symbol }) => {
     const computeIsVisible = (): boolean => {

package/src/hooks/useMedia.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { isUnistylesMq, isValidMq, parseMq } from '../mq'
+import { isUnistylesMq, isValidMq, parseMq } from '../utils'
 
 export const useMedia = (config: { mq: symbol }) => {
     const disposeRef = useRef(() => {})

package/src/mocks.ts

@@ -0,0 +1,191 @@
+import type { UnistylesBreakpoints, UnistylesThemes } from './global'
+import type { UnistylesNavigationBar } from './specs/NavigtionBar'
+import type { UnistylesStatusBar } from './specs/StatusBar'
+import type { UnistylesConfig, UnistylesStyleSheet } from './specs/StyleSheet'
+import type { UnistylesRuntimePrivate } from './specs/UnistylesRuntime'
+import type { ColorScheme, Orientation } from './specs/types'
+import type { IOSContentSizeCategory, UnistylesTheme } from './types'
+
+type Registry = {
+    themes: UnistylesThemes
+    breakpoints: UnistylesBreakpoints
+}
+
+jest.mock('react-native', () => ({
+    TurboModuleRegistry: {
+        get: () => ({})
+    },
+    StyleSheet: {},
+    Platform: {
+        OS: 'headless'
+    }
+}))
+
+jest.mock('react-native-nitro-modules', () => ({
+    NitroModules: {
+        createHybridObject: () => ({
+            add: () => {},
+            init: () => {},
+            createHybridStatusBar: () => ({
+                setStyle: () => {},
+            }),
+            createHybridNavigationBar: () => {},
+        })
+    }
+}))
+
+jest.mock('react-native-unistyles', () => {
+    const _REGISTRY: Registry = {
+        themes: {},
+        breakpoints: {}
+    }
+    const miniRuntime = {
+        themeName: undefined,
+        breakpoint: undefined,
+        hasAdaptiveThemes: false,
+        colorScheme: 'unspecified' as ColorScheme,
+        contentSizeCategory: 'Medium' as IOSContentSizeCategory,
+        insets: {
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            ime: 0
+        },
+        pixelRatio: 1,
+        fontScale: 1,
+        rtl: false,
+        isLandscape: false,
+        isPortrait: true,
+        navigationBar: {
+            width: 0,
+            height: 0
+        },
+        screen: {
+            width: 0,
+            height: 0
+        },
+        statusBar: {
+            width: 0,
+            height: 0
+        }
+    }
+
+    return {
+        StyleSheet: {
+            absoluteFillObject: {
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0
+            },
+            absoluteFill: {
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0
+            } as unknown as UnistylesStyleSheet['absoluteFill'],
+            compose: (styles: any) => {
+                return styles
+            },
+            flatten: (styles: any) => {
+                return styles
+            },
+            create: (styles: any) => {
+                if (typeof styles === 'function') {
+                    const firstTheme = Object.values(_REGISTRY.themes).at(0) ?? {}
+
+                    return {
+                        ...styles(firstTheme, miniRuntime),
+                        useVariants: () => {}
+                    }
+                }
+
+                return {
+                    ...styles,
+                    useVariants: () => {}
+                }
+            },
+            configure: (config: UnistylesConfig) => {
+                if (config.breakpoints) {
+                    _REGISTRY.breakpoints = config.breakpoints
+                }
+
+                if (config.themes) {
+                    _REGISTRY.themes = config.themes
+                }
+            },
+            jsMethods: {
+                processColor: () => null
+            },
+            hairlineWidth: 1,
+            unid: -1,
+            addChangeListener: () => () => {},
+            init: () => {},
+            name: 'StyleSheetMock',
+            dispose: () => {},
+            equals: () => false
+        } satisfies UnistylesStyleSheet,
+        UnistylesRuntime: {
+            colorScheme: 'unspecified' as ColorScheme,
+            contentSizeCategory: 'Medium' as IOSContentSizeCategory,
+            orientation: 'portrait' as Orientation,
+            breakpoints: {},
+            dispose: () => { },
+            equals: () => false,
+            name: 'UnistylesRuntimeMock',
+            miniRuntime: miniRuntime,
+            statusBar: {
+                height: 0,
+                width: 0,
+                name: 'StatusBarMock',
+                equals: () => false,
+                setHidden: () => { },
+                setStyle: () => { }
+            },
+            navigationBar: {
+                height: 0,
+                width: 0,
+                name: 'NavigationBarMock',
+                equals: () => false,
+                setHidden: () => { },
+                dispose: () => { }
+            },
+            fontScale: 1,
+            hasAdaptiveThemes: false,
+            pixelRatio: 0,
+            rtl: false,
+            getTheme: () => {
+                return {} as UnistylesTheme
+            },
+            setTheme: () => {},
+            updateTheme: () => {},
+            setRootViewBackgroundColor: () => {},
+            _setRootViewBackgroundColor: () => {},
+            createHybridStatusBar: () => {
+                return {} as UnistylesStatusBar
+            },
+            createHybridNavigationBar: () => {
+                return {} as UnistylesNavigationBar
+            },
+            setAdaptiveThemes: () => {},
+            setImmersiveMode: () => {},
+            insets: {
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                ime: 0
+            },
+            screen: {
+                width: 0,
+                height: 0
+            },
+            breakpoint: undefined
+        } satisfies UnistylesRuntimePrivate
+    }
+})
+
+

package/src/mq.ts

@@ -1,10 +1,6 @@
 import type { UnistylesBreakpoints } from './global'
-import { UnistylesRuntime } from './specs'
 import type { Nullable } from './types'
-
-const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/
-const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/
-const UNISTYLES_HEIGHT_REGEX = /:(h)\[(\d+)(?:,\s*(\d+|Infinity))?]/
+import { UnistylesRuntime } from './web'
 
 type MQValue = keyof UnistylesBreakpoints | number
 
@@ -62,23 +58,3 @@ export const mq: MQHandler = {
     })
 }
 
-export const parseMq = (mq: string) => {
-    const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
-    const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
-
-    return {
-        minWidth: !width || fromW === 'Infinity' ? undefined : Number(fromW),
-        maxWidth: !width || toW === 'Infinity' ? undefined : Number(toW),
-        minHeight: !height || fromH === 'Infinity' ? undefined : Number(fromH),
-        maxHeight: !height || toH === 'Infinity' ? undefined : Number(toH),
-    }
-}
-
-export const isUnistylesMq = (mq: string) => IS_UNISTYLES_REGEX.test(mq)
-
-export const isValidMq = (parsedMQ: ReturnType<typeof parseMq>) => {
-    const isWidthValid = parsedMQ.minWidth === undefined || parsedMQ.maxWidth === undefined || parsedMQ.minWidth <= parsedMQ.maxWidth
-    const isHeightValid = parsedMQ.minHeight === undefined || parsedMQ.maxHeight === undefined || parsedMQ.minHeight <= parsedMQ.maxHeight
-
-    return isWidthValid && isHeightValid
-}

package/src/utils.ts

@@ -41,3 +41,28 @@ export const copyComponentProperties = (Component: any, UnistylesComponent: any)
 
     return UnistylesComponent
 }
+
+const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/
+const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/
+const UNISTYLES_HEIGHT_REGEX = /:(h)\[(\d+)(?:,\s*(\d+|Infinity))?]/
+
+export const isUnistylesMq = (mq: string) => IS_UNISTYLES_REGEX.test(mq)
+
+export const parseMq = (mq: string) => {
+    const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
+    const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
+
+    return {
+        minWidth: !width || fromW === 'Infinity' ? undefined : Number(fromW),
+        maxWidth: !width || toW === 'Infinity' ? undefined : Number(toW),
+        minHeight: !height || fromH === 'Infinity' ? undefined : Number(fromH),
+        maxHeight: !height || toH === 'Infinity' ? undefined : Number(toH),
+    }
+}
+
+export const isValidMq = (parsedMQ: ReturnType<typeof parseMq>) => {
+    const isWidthValid = parsedMQ.minWidth === undefined || parsedMQ.maxWidth === undefined || parsedMQ.minWidth <= parsedMQ.maxWidth
+    const isHeightValid = parsedMQ.minHeight === undefined || parsedMQ.maxHeight === undefined || parsedMQ.minHeight <= parsedMQ.maxHeight
+
+    return isWidthValid && isHeightValid
+}

package/src/web/convert/index.ts

@@ -1,12 +1,13 @@
 import type { UnistylesValues } from '../../types'
 import { deepMergeObjects } from '../../utils'
+import type { UnistylesRuntime } from '../runtime'
 import { getBoxShadow, getFilterStyle, getTransformStyle } from './object'
 import { isPseudo } from './pseudo'
 import { getBoxShadowStyle, getTextShadowStyle } from './shadow'
 import { getStyle } from './style'
 import { isBoxShadow, isFilter, isShadow, isTextShadow, isTransform } from './utils'
 
-export const convertUnistyles = (value: UnistylesValues) => {
+export const convertUnistyles = (value: UnistylesValues, runtime: UnistylesRuntime) => {
     // Flag to mark if textShadow is already created
     let hasTextShadow = false
     // Flag to mark if boxShadow is already created
@@ -20,7 +21,7 @@ export const convertUnistyles = (value: UnistylesValues) => {
 
         // Pseudo classes :hover, :before etc.
         if (isPseudo(unistylesKey)) {
-            const flattenValues = convertUnistyles(unistylesValue as UnistylesValues)
+            const flattenValues = convertUnistyles(unistylesValue as UnistylesValues, runtime)
 
             return { [unistylesKey]: flattenValues }
         }
@@ -48,7 +49,7 @@ export const convertUnistyles = (value: UnistylesValues) => {
         }
 
         if (isFilter(unistylesKey, unistylesValue)) {
-            return getFilterStyle(unistylesValue)
+            return getFilterStyle(unistylesValue, runtime)
         }
 
         if (isBoxShadow(unistylesKey, unistylesValue)) {

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

@@ -1,6 +1,6 @@
 import type { DropShadowValue } from 'react-native'
-import { isUnistylesMq } from '../../../mq'
-import * as unistyles from '../../services'
+import { isUnistylesMq } from '../../../utils'
+import type { UnistylesRuntime } from '../../runtime'
 import { hyphenate } from '../../utils'
 import type { Filters } from '../types'
 import { normalizeColor, normalizeNumericValue } from '../utils'
@@ -12,7 +12,7 @@ const getDropShadowStyle = (dropShadow: DropShadowValue) => {
     return `${normalizeColor(String(color))} ${normalizeNumericValue(offsetX)} ${normalizeNumericValue(offsetY)} ${normalizeNumericValue(standardDeviation)}`
 }
 
-export const getFilterStyle = (filters: Array<Filters>) => {
+export const getFilterStyle = (filters: Array<Filters>, runtime: UnistylesRuntime) => {
     const restFilters = filters.filter(filter => Object.keys(filter)[0] !== 'dropShadow')
     const dropShadow = (() => {
         const dropShadowValue = filters.find(filter => Object.keys(filter)[0] === 'dropShadow')?.dropShadow as Record<string, any>
@@ -21,7 +21,7 @@ export const getFilterStyle = (filters: Array<Filters>) => {
             return []
         }
 
-        const breakpoints = Object.keys(dropShadowValue).filter(key => Object.keys(unistyles.services.runtime.breakpoints).includes(key) || isUnistylesMq(key))
+        const breakpoints = Object.keys(dropShadowValue).filter(key => Object.keys(runtime.breakpoints).includes(key) || isUnistylesMq(key))
         const breakpointsDropShadow = Object.fromEntries(breakpoints.map(breakpoint => [breakpoint, getDropShadowStyle(dropShadowValue[breakpoint])]))
 
         if (breakpoints.length === 0) {

package/src/web/css/state.ts

@@ -61,7 +61,7 @@ export class CSSState {
     }
 
     add = (hash: string, values: UnistylesValues) => {
-        convertToCSS(hash, convertUnistyles(values), this)
+        convertToCSS(hash, convertUnistyles(values, this.services.runtime), this)
 
         if (this.styleTag) {
             this.styleTag.innerText = this.getStyles()

package/src/web/shadowRegistry.ts

@@ -1,4 +1,4 @@
-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'

package/src/web/utils/index.ts

@@ -1,3 +1,2 @@
 export * from './common'
 export * from './unistyle'
-export * from './createUnistylesRef'

package/src/web/utils/unistyle.ts

@@ -1,9 +1,9 @@
 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 { isUnistylesMq, parseMq } from '../../utils'
 import * as unistyles from '../services'
 import { keyInObject, reduceObject } from './common'
 

package/lib/commonjs/components/native/ScrollView.native.js

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ScrollView = void 0;
-var _reactNative = require("react-native");
-var _core = require("../../core");
-const ScrollView = exports.ScrollView = (0, _core.createUnistylesElement)(_reactNative.ScrollView);
-//# sourceMappingURL=ScrollView.native.js.map

package/lib/commonjs/components/native/ScrollView.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","_core","ScrollView","exports","createUnistylesElement","NativeScrollView"],"sourceRoot":"../../../../src","sources":["components/native/ScrollView.native.tsx"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEO,MAAME,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,IAAAE,4BAAsB,EAACC,uBAAgB,CAAC","ignoreList":[]}

package/lib/module/components/native/ScrollView.native.js

@@ -1,6 +0,0 @@
-"use strict";
-
-import { ScrollView as NativeScrollView } from 'react-native';
-import { createUnistylesElement } from '../../core';
-export const ScrollView = createUnistylesElement(NativeScrollView);
-//# sourceMappingURL=ScrollView.native.js.map

package/lib/module/components/native/ScrollView.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ScrollView","NativeScrollView","createUnistylesElement"],"sourceRoot":"../../../../src","sources":["components/native/ScrollView.native.tsx"],"mappings":";;AAAA,SAASA,UAAU,IAAIC,gBAAgB,QAAQ,cAAc;AAC7D,SAASC,sBAAsB,QAAQ,YAAY;AAEnD,OAAO,MAAMF,UAAU,GAAGE,sBAAsB,CAACD,gBAAgB,CAAC","ignoreList":[]}

package/lib/typescript/src/components/native/ScrollView.native.d.ts

@@ -1,2 +0,0 @@
-export declare const ScrollView: any;
-//# sourceMappingURL=ScrollView.native.d.ts.map

package/lib/typescript/src/components/native/ScrollView.native.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrollView.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/native/ScrollView.native.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU,KAA2C,CAAA"}

package/src/components/native/ScrollView.native.tsx

@@ -1,4 +0,0 @@
-import { ScrollView as NativeScrollView } from 'react-native'
-import { createUnistylesElement } from '../../core'
-
-export const ScrollView = createUnistylesElement(NativeScrollView)