fix: withUniwind merge with inline

package.json

@@ -34,11 +34,11 @@
     },
     "devDependencies": {
         "typescript": "catalog:",
-        "dprint": "0.50.2",
+        "dprint": "0.51.1",
         "eslint": "9.39.1",
         "eslint-config-codemask": "2.2.1",
         "husky": "9.1.7",
-        "turbo": "2.7.6"
+        "turbo": "2.8.7"
     },
     "packageManager": "bun@1.3.2",
     "trustedDependencies": [

packages/uniwind/jest.config.js → packages/uniwind/jest.config.native.js

@@ -1,6 +1,8 @@
 export default {
     preset: 'react-native',
-    setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect', './tests/setup.ts'],
+    displayName: 'native',
+    testMatch: ['<rootDir>/tests/native/**/*.test.{ts,tsx}'],
+    setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect', '<rootDir>/tests/setup.native.ts'],
     transformIgnorePatterns: [
         'node_modules/(?!((jest-)?react-native|@react-native(-community)?)/)',
     ],

packages/uniwind/jest.config.web.js

@@ -0,0 +1,26 @@
+export default {
+    displayName: 'web',
+    testEnvironment: 'jsdom',
+    testMatch: ['<rootDir>/tests/web/**/*.test.{ts,tsx}'],
+    setupFilesAfterEnv: [
+        '@testing-library/jest-dom',
+        '<rootDir>/tests/setup.web.ts',
+    ],
+    preset: 'ts-jest',
+    moduleNameMapper: {
+        '^react-native$': 'react-native-web',
+        '\\.css$': '<rootDir>/tests/__mocks__/styleMock.js',
+    },
+    transformIgnorePatterns: [
+        'node_modules/(?!(react-native-web)/)',
+    ],
+    transform: {
+        '^.+\\.tsx?$': ['ts-jest', {
+            tsconfig: {
+                jsx: 'react-jsx',
+                esModuleInterop: true,
+                allowSyntheticDefaultImports: true,
+            },
+        }],
+    },
+}

packages/uniwind/package.json

@@ -18,7 +18,8 @@
         "prepublishOnly": "bun run build",
         "circular:check": "dpdm --no-warning --no-tree -T --exit-code circular:1 'src/**/*.ts' 'src/**/*.tsx'",
         "build:css": "bun run src/css/index.ts",
-        "test": "jest"
+        "test:native": "jest --config jest.config.native.js",
+        "test:web": "jest --config jest.config.web.js"
     },
     "keywords": [
         "unistyles",
@@ -88,20 +89,25 @@
         "tailwindcss": ">=4"
     },
     "devDependencies": {
+        "@react-native/babel-preset": "0.83.0",
+        "@testing-library/jest-dom": "6.9.1",
+        "@testing-library/jest-native": "5.4.3",
+        "@testing-library/react": "16.3.2",
+        "@testing-library/react-native": "13.3.3",
         "@types/bun": "catalog:",
         "@types/culori": "4.0.1",
+        "@types/jest": "30.0.0",
         "@types/react": "catalog:",
-        "typescript": "catalog:",
-        "metro": "0.83.3",
         "dpdm": "3.14.0",
-        "unbuild": "3.6.1",
-        "vite": "7.2.7",
         "jest": "30.2.0",
-        "react-test-renderer": "19.1.0",
-        "@react-native/babel-preset": "0.83.0",
-        "@testing-library/jest-native": "5.4.3",
-        "@testing-library/react-native": "13.3.3",
+        "jest-environment-jsdom": "30.2.0",
+        "metro": "0.83.3",
         "prettier": "3.7.4",
-        "@types/jest": "30.0.0"
+        "react-native-web": "catalog:",
+        "react-test-renderer": "19.1.0",
+        "ts-jest": "29.4.6",
+        "typescript": "catalog:",
+        "unbuild": "3.6.1",
+        "vite": "7.2.7"
     }
 }

packages/uniwind/src/hoc/withUniwind.native.tsx

@@ -93,9 +93,24 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
         }
 
         const { styles, dependencies } = UniwindStore.getStyles(className)
+        acc.dependencies.push(...dependencies)
+
+        if (!isStyleProperty(propName)) {
+            acc.generatedProps[propName] = styles
+
+            return acc
+        }
+
+        const existingStyle = props[propName]
+
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        if (existingStyle) {
+            acc.generatedProps[propName] = [styles, existingStyle]
+
+            return acc
+        }
 
         acc.generatedProps[propName] = styles
-        acc.dependencies.push(...dependencies)
 
         return acc
     }, { generatedProps: {} as AnyObject, dependencies: [] as Array<StyleDependency> })

packages/uniwind/tests/components/activity-indicator.test.tsx → packages/uniwind/tests/native/components/activity-indicator.test.tsx

@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react-native'
 import * as React from 'react'
 import { StyleSheet } from 'react-native'
-import ActivityIndicator from '../../src/components/native/ActivityIndicator'
-import { TW_RED_500 } from '../consts'
+import ActivityIndicator from '../../../src/components/native/ActivityIndicator'
+import { TW_RED_500 } from '../../consts'
 
 describe('ActivityIndicator', () => {
     test('Basic rendering with colorClassName', () => {

packages/uniwind/tests/components/button.test.tsx → packages/uniwind/tests/native/components/button.test.tsx

@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react-native'
 import * as React from 'react'
 import { StyleSheet } from 'react-native'
-import Button from '../../src/components/native/Button'
-import { TW_RED_500 } from '../consts'
+import Button from '../../../src/components/native/Button'
+import { TW_RED_500 } from '../../consts'
 
 describe('Button', () => {
     test('Basic rendering', () => {

packages/uniwind/tests/components/flat-list.test.tsx → packages/uniwind/tests/native/components/flat-list.test.tsx

@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react-native'
 import * as React from 'react'
 import { StyleSheet } from 'react-native'
-import FlatList from '../../src/components/native/FlatList'
-import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../consts'
+import FlatList from '../../../src/components/native/FlatList'
+import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../../consts'
 
 describe('FlatList', () => {
     test('Basic rendering with classNames and colors', () => {

packages/uniwind/tests/components/image-background.test.tsx → packages/uniwind/tests/native/components/image-background.test.tsx

@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react-native'
 import * as React from 'react'
 import { StyleSheet, View } from 'react-native'
-import ImageBackground from '../../src/components/native/ImageBackground'
-import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../consts'
+import ImageBackground from '../../../src/components/native/ImageBackground'
+import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../../consts'
 
 describe('ImageBackground', () => {
     test('Basic rendering with className, imageClassName and tintColorClassName', () => {

packages/uniwind/tests/components/image.test.tsx → packages/uniwind/tests/native/components/image.test.tsx

@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react-native'
 import * as React from 'react'
 import { StyleSheet } from 'react-native'
-import Image from '../../src/components/native/Image'
-import { TW_BLUE_500, TW_RED_500 } from '../consts'
+import Image from '../../../src/components/native/Image'
+import { TW_BLUE_500, TW_RED_500 } from '../../consts'
 
 describe('Image', () => {
     test('Basic rendering with className and tintColorClassName', () => {

packages/uniwind/tests/components/input-accessory-view.test.tsx → packages/uniwind/tests/native/components/input-accessory-view.test.tsx

@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react-native'
 import * as React from 'react'
 import { InputAccessoryView as RNInputAccessoryView, Platform, StyleSheet } from 'react-native'
-import InputAccessoryView from '../../src/components/native/InputAccessoryView'
-import { TW_BLUE_500, TW_RED_500 } from '../consts'
+import InputAccessoryView from '../../../src/components/native/InputAccessoryView'
+import { TW_BLUE_500, TW_RED_500 } from '../../consts'
 
 describe('InputAccessoryView', () => {
     beforeAll(() => {

packages/uniwind/tests/components/keyboard-avoiding-view.test.tsx → packages/uniwind/tests/native/components/keyboard-avoiding-view.test.tsx

@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react-native'
 import * as React from 'react'
 import { KeyboardAvoidingView as RNKeyboardAvoidingView, StyleSheet } from 'react-native'
-import KeyboardAvoidingView from '../../src/components/native/KeyboardAvoidingView'
-import { TW_BLUE_500, TW_RED_500 } from '../consts'
+import KeyboardAvoidingView from '../../../src/components/native/KeyboardAvoidingView'
+import { TW_BLUE_500, TW_RED_500 } from '../../consts'
 
 describe('KeyboardAvoidingView', () => {
     test('Basic rendering with className and contentContainerClassName', () => {

packages/uniwind/tests/components/modal.test.tsx → packages/uniwind/tests/native/components/modal.test.tsx

@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react-native'
 import * as React from 'react'
 import { Modal as RNModal, StyleSheet } from 'react-native'
-import Modal from '../../src/components/native/Modal'
-import { TW_BLUE_500, TW_RED_500 } from '../consts'
+import Modal from '../../../src/components/native/Modal'
+import { TW_BLUE_500, TW_RED_500 } from '../../consts'
 
 describe('Modal', () => {
     test('Basic rendering with className and backdropColorClassName', () => {

packages/uniwind/tests/components/pressable.test.tsx → packages/uniwind/tests/native/components/pressable.test.tsx

@@ -1,8 +1,8 @@
 import { fireEvent, render } from '@testing-library/react-native'
 import * as React from 'react'
 import { StyleSheet } from 'react-native'
-import Pressable from '../../src/components/native/Pressable'
-import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../consts'
+import Pressable from '../../../src/components/native/Pressable'
+import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../../consts'
 
 describe('Pressable', () => {
     test('Basic rendering with className', () => {

packages/uniwind/tests/components/refresh-control.test.tsx → packages/uniwind/tests/native/components/refresh-control.test.tsx

@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react-native'
 import * as React from 'react'
 import { RefreshControl as RNRefreshControl, StyleSheet } from 'react-native'
-import RefreshControl from '../../src/components/native/RefreshControl'
-import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../consts'
+import RefreshControl from '../../../src/components/native/RefreshControl'
+import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../../consts'
 
 describe('RefreshControl', () => {
     test('Basic rendering with className and color props', () => {

packages/uniwind/tests/components/safe-area-view.test.tsx → packages/uniwind/tests/native/components/safe-area-view.test.tsx

@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react-native'
 import * as React from 'react'
 import { SafeAreaView as RNSafeAreaView, StyleSheet } from 'react-native'
-import SafeAreaView from '../../src/components/native/SafeAreaView'
-import { TW_RED_500 } from '../consts'
+import SafeAreaView from '../../../src/components/native/SafeAreaView'
+import { TW_RED_500 } from '../../consts'
 
 describe('SafeAreaView', () => {
     test('Basic rendering with className', () => {

packages/uniwind/tests/components/scroll-view.test.tsx → packages/uniwind/tests/native/components/scroll-view.test.tsx

@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react-native'
 import * as React from 'react'
 import { ScrollView as RNScrollView, StyleSheet } from 'react-native'
-import ScrollView from '../../src/components/native/ScrollView'
-import { TW_BLUE_500, TW_RED_500 } from '../consts'
+import ScrollView from '../../../src/components/native/ScrollView'
+import { TW_BLUE_500, TW_RED_500 } from '../../consts'
 
 describe('ScrollView', () => {
     test('Basic rendering with className, contentContainerClassName and endFillColorClassName', () => {

packages/uniwind/tests/components/section-list.test.tsx → packages/uniwind/tests/native/components/section-list.test.tsx

@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react-native'
 import * as React from 'react'
 import { SectionList as RNSectionList, StyleSheet } from 'react-native'
-import SectionList from '../../src/components/native/SectionList'
-import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../consts'
+import SectionList from '../../../src/components/native/SectionList'
+import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../../consts'
 
 describe('SectionList', () => {
     test('Basic rendering with classNames and colors', () => {

packages/uniwind/tests/components/switch.test.tsx → packages/uniwind/tests/native/components/switch.test.tsx

@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react-native'
 import * as React from 'react'
 import { Switch as RNSwitch } from 'react-native'
-import Switch from '../../src/components/native/Switch'
-import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../consts'
+import Switch from '../../../src/components/native/Switch'
+import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../../consts'
 
 describe('Switch', () => {
     test('Basic rendering with className and color props', () => {

packages/uniwind/tests/components/text-input.test.tsx → packages/uniwind/tests/native/components/text-input.test.tsx

@@ -1,8 +1,8 @@
 import { fireEvent, render } from '@testing-library/react-native'
 import * as React from 'react'
 import { StyleSheet } from 'react-native'
-import TextInput from '../../src/components/native/TextInput'
-import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../consts'
+import TextInput from '../../../src/components/native/TextInput'
+import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../../consts'
 
 describe('TextInput', () => {
     test('Basic rendering with className and color props', () => {

packages/uniwind/tests/components/text.test.tsx → packages/uniwind/tests/native/components/text.test.tsx

@@ -1,8 +1,8 @@
 import { fireEvent, render } from '@testing-library/react-native'
 import * as React from 'react'
 import { StyleSheet } from 'react-native'
-import Text from '../../src/components/native/Text'
-import { TW_BLUE_500, TW_RED_500 } from '../consts'
+import Text from '../../../src/components/native/Text'
+import { TW_BLUE_500, TW_RED_500 } from '../../consts'
 
 describe('Text', () => {
     test('Basic rendering with className and selectionColorClassName', () => {

packages/uniwind/tests/components/touchable-highlight.test.tsx → packages/uniwind/tests/native/components/touchable-highlight.test.tsx

@@ -1,8 +1,8 @@
 import { fireEvent, render } from '@testing-library/react-native'
 import * as React from 'react'
 import { StyleSheet, TouchableHighlight as RNTouchableHighlight, View } from 'react-native'
-import TouchableHighlight from '../../src/components/native/TouchableHighlight'
-import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../consts'
+import TouchableHighlight from '../../../src/components/native/TouchableHighlight'
+import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../../consts'
 
 describe('TouchableHighlight', () => {
     test('Basic rendering with className and underlayColorClassName', () => {

packages/uniwind/tests/components/touchable-native-feedback.test.tsx → packages/uniwind/tests/native/components/touchable-native-feedback.test.tsx

@@ -1,8 +1,8 @@
 import { fireEvent, render } from '@testing-library/react-native'
 import * as React from 'react'
 import { Platform, StyleSheet, TouchableNativeFeedback as RNTouchableNativeFeedback, View } from 'react-native'
-import TouchableNativeFeedback from '../../src/components/native/TouchableNativeFeedback'
-import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../consts'
+import TouchableNativeFeedback from '../../../src/components/native/TouchableNativeFeedback'
+import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../../consts'
 
 describe('TouchableNativeFeedback', () => {
     beforeAll(() => {

packages/uniwind/tests/components/touchable-opacity.test.tsx → packages/uniwind/tests/native/components/touchable-opacity.test.tsx

@@ -1,8 +1,8 @@
 import { fireEvent, render } from '@testing-library/react-native'
 import * as React from 'react'
 import { StyleSheet, TouchableOpacity as RNTouchableOpacity, View } from 'react-native'
-import TouchableOpacity from '../../src/components/native/TouchableOpacity'
-import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../consts'
+import TouchableOpacity from '../../../src/components/native/TouchableOpacity'
+import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../../consts'
 
 describe('TouchableOpacity', () => {
     test('Basic rendering with className', () => {

packages/uniwind/tests/components/touchable-without-feedback.test.tsx → packages/uniwind/tests/native/components/touchable-without-feedback.test.tsx

@@ -1,8 +1,8 @@
 import { fireEvent, render } from '@testing-library/react-native'
 import * as React from 'react'
 import { StyleSheet, TouchableWithoutFeedback as RNTouchableWithoutFeedback, View } from 'react-native'
-import TouchableWithoutFeedback from '../../src/components/native/TouchableWithoutFeedback'
-import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../consts'
+import TouchableWithoutFeedback from '../../../src/components/native/TouchableWithoutFeedback'
+import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../../consts'
 
 describe('TouchableWithoutFeedback', () => {
     test('Basic rendering with className', () => {

packages/uniwind/tests/components/view.test.tsx → packages/uniwind/tests/native/components/view.test.tsx

@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react-native'
 import * as React from 'react'
 import { StyleSheet } from 'react-native'
-import View from '../../src/components/native/View'
-import { TW_RED_500 } from '../consts'
+import View from '../../../src/components/native/View'
+import { TW_RED_500 } from '../../consts'
 
 describe('View', () => {
     test('Basic rendering', () => {

packages/uniwind/tests/components/virtualized-list.test.tsx → packages/uniwind/tests/native/components/virtualized-list.test.tsx

@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react-native'
 import * as React from 'react'
 import { StyleSheet, Text, VirtualizedList as RNVirtualizedList } from 'react-native'
-import VirtualizedList from '../../src/components/native/VirtualizedList'
-import { TW_BLUE_500, TW_GREEN_500, TW_RED_500, TW_YELLOW_500 } from '../consts'
+import VirtualizedList from '../../../src/components/native/VirtualizedList'
+import { TW_BLUE_500, TW_GREEN_500, TW_RED_500, TW_YELLOW_500 } from '../../consts'
 
 describe('VirtualizedList', () => {
     const data = ['Item 1', 'Item 2']