@niibase/uniwind 1.1.10 → 1.1.11

package/dist/common/components/native/useStyle.js

@@ -24,7 +24,7 @@ function useStyle(componentOrClassName, classNameOrComponentProps, componentProp
   const componentProps = isComponentOverload ? componentPropsOrState : classNameOrComponentProps;
   const actualState = isComponentOverload ? state : componentPropsOrState;
   const styleState = className ? _native.UniwindStore.getStyles(className, componentProps, actualState) : emptyState;
-  (0, _react.useEffect)(() => {
+  (0, _react.useLayoutEffect)(() => {
     if (__DEV__ || styleState.dependencies.length > 0) {
       const dispose = _listener.UniwindListener.subscribe(rerender, styleState.dependencies);
       return dispose;

package/dist/common/hoc/withUniwind.js

@@ -46,7 +46,7 @@ const withAutoUniwind = Component2 => props => {
     classNames: ""
   });
   const [, rerender] = (0, _react.useReducer)(() => ({}), {});
-  (0, _react.useEffect)(() => {
+  (0, _react.useLayoutEffect)(() => {
     const dispose = _web.CSSListener.subscribeToClassName(classNames, rerender);
     return dispose;
   }, [classNames]);
@@ -84,7 +84,7 @@ const withManualUniwind = (Component2, options) => props => {
     classNames: ""
   });
   const [, rerender] = (0, _react.useReducer)(() => ({}), {});
-  (0, _react.useEffect)(() => {
+  (0, _react.useLayoutEffect)(() => {
     const dispose = _web.CSSListener.subscribeToClassName(classNames, rerender);
     return dispose;
   }, [classNames]);

package/dist/common/hoc/withUniwind.native.js

@@ -50,12 +50,15 @@ const withAutoUniwind = Component2 => props => {
     generatedProps: {},
     dependencies: []
   });
-  const deps = Array.from(new Set(dependencies));
+  const dependencySum = dependencies.reduce((acc, dependency) => {
+    acc |= 1 << dependency;
+    return acc;
+  }, 0);
   const [, rerender] = (0, _react.useReducer)(() => ({}), {});
-  (0, _react.useEffect)(() => {
-    const dispose = _listener.UniwindListener.subscribe(rerender, deps);
+  (0, _react.useLayoutEffect)(() => {
+    const dispose = _listener.UniwindListener.subscribe(rerender, Array.from(new Set(dependencies)));
     return dispose;
-  }, [deps]);
+  }, [dependencySum]);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component2, {
     ...props,
     ...generatedProps
@@ -86,19 +89,31 @@ const withManualUniwind = (Component2, options) => props => {
       styles,
       dependencies: dependencies2
     } = _native.UniwindStore.getStyles(className);
-    acc.generatedProps[propName] = styles;
     acc.dependencies.push(...dependencies2);
+    if (!(0, _withUniwindUtils.isStyleProperty)(propName)) {
+      acc.generatedProps[propName] = styles;
+      return acc;
+    }
+    const existingStyle = props[propName];
+    if (existingStyle) {
+      acc.generatedProps[propName] = [styles, existingStyle];
+      return acc;
+    }
+    acc.generatedProps[propName] = styles;
     return acc;
   }, {
     generatedProps: {},
     dependencies: []
   });
-  const deps = Array.from(new Set(dependencies));
+  const dependencySum = dependencies.reduce((acc, dependency) => {
+    acc |= 1 << dependency;
+    return acc;
+  }, 0);
   const [, rerender] = (0, _react.useReducer)(() => ({}), {});
-  (0, _react.useEffect)(() => {
-    const dispose = _listener.UniwindListener.subscribe(rerender, deps);
+  (0, _react.useLayoutEffect)(() => {
+    const dispose = _listener.UniwindListener.subscribe(rerender, Array.from(new Set(dependencies)));
     return dispose;
-  }, [deps]);
+  }, [dependencySum]);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component2, {
     ...props,
     ...generatedProps

package/dist/common/hooks/useCSSVariable/useCSSVariable.js

@@ -24,7 +24,7 @@ const logDevError = name => {
 const useCSSVariable = name => {
   const [value, setValue] = (0, _react.useState)(getValue(name));
   const nameRef = (0, _react.useRef)(name);
-  (0, _react.useEffect)(() => {
+  (0, _react.useLayoutEffect)(() => {
     if (Array.isArray(name) && Array.isArray(nameRef.current)) {
       if (arrayEquals(name, nameRef.current)) {
         return;
@@ -38,7 +38,7 @@ const useCSSVariable = name => {
       nameRef.current = name;
     }
   }, [name]);
-  (0, _react.useEffect)(() => {
+  (0, _react.useLayoutEffect)(() => {
     const updateValue = () => setValue(getValue(nameRef.current));
     const dispose = _listener.UniwindListener.subscribe(updateValue, [_types.StyleDependency.Theme, _types.StyleDependency.Variables]);
     return dispose;

package/dist/common/hooks/useResolveClassNames.js

@@ -9,7 +9,7 @@ var _web = require("../core/web");
 const emptyState = {};
 const useResolveClassNames = className => {
   const [styles, recreate] = (0, _react.useReducer)(() => className !== "" ? (0, _web.getWebStyles)(className) : emptyState, className !== "" ? (0, _web.getWebStyles)(className) : emptyState);
-  (0, _react.useEffect)(() => {
+  (0, _react.useLayoutEffect)(() => {
     if (className === "") {
       return;
     }

package/dist/common/hooks/useResolveClassNames.native.js

@@ -9,17 +9,17 @@ var _listener = require("../core/listener");
 var _native = require("../core/native");
 const useResolveClassNames = className => {
   const [uniwindState, recreate] = (0, _react.useReducer)(() => _native.UniwindStore.getStyles(className), _native.UniwindStore.getStyles(className));
-  (0, _react.useEffect)(() => {
+  (0, _react.useLayoutEffect)(() => {
     if (className !== "") {
       recreate();
     }
   }, [className]);
-  (0, _react.useEffect)(() => {
+  (0, _react.useLayoutEffect)(() => {
     if (uniwindState.dependencies.length > 0) {
       const dispose = _listener.UniwindListener.subscribe(recreate, uniwindState.dependencies);
       return dispose;
     }
-  }, [uniwindState.dependencies, className]);
+  }, [uniwindState.dependencySum, className]);
   return uniwindState.styles;
 };
 exports.useResolveClassNames = useResolveClassNames;

package/dist/common/hooks/useUniwind.js

@@ -11,7 +11,7 @@ var _types = require("../types");
 const useUniwind = () => {
   const [theme, setTheme] = (0, _react.useState)(_core.Uniwind.currentTheme);
   const [hasAdaptiveThemes, setHasAdaptiveThemes] = (0, _react.useState)(_core.Uniwind.hasAdaptiveThemes);
-  (0, _react.useEffect)(() => {
+  (0, _react.useLayoutEffect)(() => {
     const dispose = _listener.UniwindListener.subscribe(() => {
       setTheme(_core.Uniwind.currentTheme);
       setHasAdaptiveThemes(_core.Uniwind.hasAdaptiveThemes);

package/dist/common/vite/vite.js

@@ -25,6 +25,14 @@ const uniwind = ({
   const stringifiedThemes = (0, _stringifyThemes.stringifyThemes)(themes);
   return {
     name: "uniwind",
+    enforce: "pre",
+    resolveId: (source, importer) => {
+      const normalizedSource = (0, _node.normalizePath)(source);
+      const isTarget = source === "./createOrderedCSSStyleSheet" || normalizedSource.endsWith("react-native-web/dist/exports/StyleSheet/dom/createOrderedCSSStyleSheet.js");
+      if (isTarget && importer !== void 0 && (0, _node.normalizePath)(importer).includes("react-native-web/dist/exports/StyleSheet")) {
+        return styleSheetPath;
+      }
+    },
     config: () => ({
       css: {
         transformer: "lightningcss",

package/dist/module/components/native/useStyle.js

@@ -1,4 +1,4 @@
-import { useEffect, useReducer } from "react";
+import { useLayoutEffect, useReducer } from "react";
 import { createAnimatedComponent } from "react-native-reanimated";
 import { UniwindListener } from "../../core/listener.js";
 import { UniwindStore } from "../../core/native/index.js";
@@ -16,7 +16,7 @@ export function useStyle(componentOrClassName, classNameOrComponentProps, compon
   const componentProps = isComponentOverload ? componentPropsOrState : classNameOrComponentProps;
   const actualState = isComponentOverload ? state : componentPropsOrState;
   const styleState = className ? UniwindStore.getStyles(className, componentProps, actualState) : emptyState;
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (__DEV__ || styleState.dependencies.length > 0) {
       const dispose = UniwindListener.subscribe(rerender, styleState.dependencies);
       return dispose;

package/dist/module/hoc/withUniwind.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useReducer } from "react";
+import { useLayoutEffect, useReducer } from "react";
 import { CSSListener, formatColor, getWebStyles } from "../core/web/index.js";
 import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from "./withUniwindUtils.js";
 export const withUniwind = (Component2, options) => options ? withManualUniwind(Component2, options) : withAutoUniwind(Component2);
@@ -30,7 +30,7 @@ const withAutoUniwind = (Component2) => (props) => {
     return acc;
   }, { generatedProps: {}, classNames: "" });
   const [, rerender] = useReducer(() => ({}), {});
-  useEffect(() => {
+  useLayoutEffect(() => {
     const dispose = CSSListener.subscribeToClassName(classNames, rerender);
     return dispose;
   }, [classNames]);
@@ -62,7 +62,7 @@ const withManualUniwind = (Component2, options) => (props) => {
     return acc;
   }, { generatedProps: {}, classNames: "" });
   const [, rerender] = useReducer(() => ({}), {});
-  useEffect(() => {
+  useLayoutEffect(() => {
     const dispose = CSSListener.subscribeToClassName(classNames, rerender);
     return dispose;
   }, [classNames]);

package/dist/module/hoc/withUniwind.native.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useReducer } from "react";
+import { useLayoutEffect, useReducer } from "react";
 import { UniwindListener } from "../core/listener.js";
 import { UniwindStore } from "../core/native/index.js";
 import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from "./withUniwindUtils.js";
@@ -31,12 +31,15 @@ const withAutoUniwind = (Component2) => (props) => {
     }
     return acc;
   }, { generatedProps: {}, dependencies: [] });
-  const deps = Array.from(new Set(dependencies));
+  const dependencySum = dependencies.reduce((acc, dependency) => {
+    acc |= 1 << dependency;
+    return acc;
+  }, 0);
   const [, rerender] = useReducer(() => ({}), {});
-  useEffect(() => {
-    const dispose = UniwindListener.subscribe(rerender, deps);
+  useLayoutEffect(() => {
+    const dispose = UniwindListener.subscribe(rerender, Array.from(new Set(dependencies)));
     return dispose;
-  }, [deps]);
+  }, [dependencySum]);
   return /* @__PURE__ */ jsx(
     Component2,
     {
@@ -61,16 +64,28 @@ const withManualUniwind = (Component2, options) => (props) => {
       return acc;
     }
     const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(className);
-    acc.generatedProps[propName] = styles;
     acc.dependencies.push(...dependencies2);
+    if (!isStyleProperty(propName)) {
+      acc.generatedProps[propName] = styles;
+      return acc;
+    }
+    const existingStyle = props[propName];
+    if (existingStyle) {
+      acc.generatedProps[propName] = [styles, existingStyle];
+      return acc;
+    }
+    acc.generatedProps[propName] = styles;
     return acc;
   }, { generatedProps: {}, dependencies: [] });
-  const deps = Array.from(new Set(dependencies));
+  const dependencySum = dependencies.reduce((acc, dependency) => {
+    acc |= 1 << dependency;
+    return acc;
+  }, 0);
   const [, rerender] = useReducer(() => ({}), {});
-  useEffect(() => {
-    const dispose = UniwindListener.subscribe(rerender, deps);
+  useLayoutEffect(() => {
+    const dispose = UniwindListener.subscribe(rerender, Array.from(new Set(dependencies)));
     return dispose;
-  }, [deps]);
+  }, [dependencySum]);
   return /* @__PURE__ */ jsx(
     Component2,
     {

package/dist/module/hooks/useCSSVariable/useCSSVariable.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 import { UniwindListener } from "../../core/listener.js";
 import { Logger } from "../../core/logger.js";
 import { StyleDependency } from "../../types.js";
@@ -20,7 +20,7 @@ const logDevError = (name) => {
 export const useCSSVariable = (name) => {
   const [value, setValue] = useState(getValue(name));
   const nameRef = useRef(name);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (Array.isArray(name) && Array.isArray(nameRef.current)) {
       if (arrayEquals(name, nameRef.current)) {
         return;
@@ -34,7 +34,7 @@ export const useCSSVariable = (name) => {
       nameRef.current = name;
     }
   }, [name]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     const updateValue = () => setValue(getValue(nameRef.current));
     const dispose = UniwindListener.subscribe(
       updateValue,

package/dist/module/hooks/useResolveClassNames.js

@@ -1,4 +1,4 @@
-import { useEffect, useReducer } from "react";
+import { useLayoutEffect, useReducer } from "react";
 import { CSSListener, getWebStyles } from "../core/web/index.js";
 const emptyState = {};
 export const useResolveClassNames = (className) => {
@@ -6,7 +6,7 @@ export const useResolveClassNames = (className) => {
     () => className !== "" ? getWebStyles(className) : emptyState,
     className !== "" ? getWebStyles(className) : emptyState
   );
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (className === "") {
       return;
     }

package/dist/module/hooks/useResolveClassNames.native.js

@@ -1,4 +1,4 @@
-import { useEffect, useReducer } from "react";
+import { useLayoutEffect, useReducer } from "react";
 import { UniwindListener } from "../core/listener.js";
 import { UniwindStore } from "../core/native/index.js";
 export const useResolveClassNames = (className) => {
@@ -6,16 +6,16 @@ export const useResolveClassNames = (className) => {
     () => UniwindStore.getStyles(className),
     UniwindStore.getStyles(className)
   );
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (className !== "") {
       recreate();
     }
   }, [className]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (uniwindState.dependencies.length > 0) {
       const dispose = UniwindListener.subscribe(recreate, uniwindState.dependencies);
       return dispose;
     }
-  }, [uniwindState.dependencies, className]);
+  }, [uniwindState.dependencySum, className]);
   return uniwindState.styles;
 };

package/dist/module/hooks/useUniwind.js

@@ -1,11 +1,11 @@
-import { useEffect, useState } from "react";
+import { useLayoutEffect, useState } from "react";
 import { Uniwind } from "../core/index.js";
 import { UniwindListener } from "../core/listener.js";
 import { StyleDependency } from "../types.js";
 export const useUniwind = () => {
   const [theme, setTheme] = useState(Uniwind.currentTheme);
   const [hasAdaptiveThemes, setHasAdaptiveThemes] = useState(Uniwind.hasAdaptiveThemes);
-  useEffect(() => {
+  useLayoutEffect(() => {
     const dispose = UniwindListener.subscribe(() => {
       setTheme(Uniwind.currentTheme);
       setHasAdaptiveThemes(Uniwind.hasAdaptiveThemes);

package/dist/module/vite/vite.js

@@ -28,6 +28,14 @@ export const uniwind = ({
   const stringifiedThemes = stringifyThemes(themes);
   return {
     name: "uniwind",
+    enforce: "pre",
+    resolveId: (source, importer) => {
+      const normalizedSource = normalizePath(source);
+      const isTarget = source === "./createOrderedCSSStyleSheet" || normalizedSource.endsWith("react-native-web/dist/exports/StyleSheet/dom/createOrderedCSSStyleSheet.js");
+      if (isTarget && importer !== void 0 && normalizePath(importer).includes("react-native-web/dist/exports/StyleSheet")) {
+        return styleSheetPath;
+      }
+    },
     config: () => ({
       css: {
         transformer: "lightningcss",

package/dist/vite/index.cjs

@@ -33,6 +33,14 @@ const uniwind = ({
   const stringifiedThemes = stringifyThemes.stringifyThemes(themes);
   return {
     name: "uniwind",
+    enforce: "pre",
+    resolveId: (source, importer) => {
+      const normalizedSource = node.normalizePath(source);
+      const isTarget = source === "./createOrderedCSSStyleSheet" || normalizedSource.endsWith("react-native-web/dist/exports/StyleSheet/dom/createOrderedCSSStyleSheet.js");
+      if (isTarget && importer !== void 0 && node.normalizePath(importer).includes("react-native-web/dist/exports/StyleSheet")) {
+        return styleSheetPath;
+      }
+    },
     config: () => ({
       css: {
         transformer: "lightningcss",

package/dist/vite/index.mjs

@@ -27,6 +27,14 @@ const uniwind = ({
   const stringifiedThemes = stringifyThemes(themes);
   return {
     name: "uniwind",
+    enforce: "pre",
+    resolveId: (source, importer) => {
+      const normalizedSource = normalizePath(source);
+      const isTarget = source === "./createOrderedCSSStyleSheet" || normalizedSource.endsWith("react-native-web/dist/exports/StyleSheet/dom/createOrderedCSSStyleSheet.js");
+      if (isTarget && importer !== void 0 && normalizePath(importer).includes("react-native-web/dist/exports/StyleSheet")) {
+        return styleSheetPath;
+      }
+    },
     config: () => ({
       css: {
         transformer: "lightningcss",

package/package.json

@@ -1,7 +1,7 @@
 {
     "private": false,
     "name": "@niibase/uniwind",
-    "version": "1.1.10",
+    "version": "1.1.11",
     "description": "The fastest Tailwind bindings for React Native with Reanimated 4 support",
     "homepage": "https://uniwind.dev",
     "author": "Unistack",
@@ -19,7 +19,8 @@
         "circular:check": "dpdm --no-warning --no-tree -T --exit-code circular:1 'src/**/*.ts' 'src/**/*.tsx'",
         "build:css": "bun run src/css/index.ts",
         "postinstall": "node scripts/postinstall.mjs",
-        "test": "jest"
+        "test:native": "jest --config jest.config.native.js",
+        "test:web": "jest --config jest.config.web.js"
     },
     "keywords": [
         "unistyles",
@@ -55,7 +56,6 @@
         },
         "./metro": {
             "types": "./dist/metro/index.d.ts",
-            "import": "./dist/metro/index.mjs",
             "default": "./dist/metro/index.cjs"
         },
         "./vite": {
@@ -92,23 +92,28 @@
         "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:",
-        "react-native-reanimated": "catalog:",
-        "typescript": "catalog:",
         "metro": "0.83.3",
         "dpdm": "3.14.0",
-        "unbuild": "3.6.1",
-        "vite": "7.2.7",
         "jest": "30.2.0",
+        "jest-environment-jsdom": "30.2.0",
+        "prettier": "3.7.4",
         "react-native-gesture-handler": "2.28.0",
+        "react-native-reanimated": "catalog:",
         "react-native-safe-area-context": "5.6.0",
+        "react-native-web": "catalog:",
         "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",
-        "prettier": "3.7.4",
-        "@types/jest": "30.0.0"
+        "ts-jest": "29.4.6",
+        "typescript": "catalog:",
+        "unbuild": "3.6.1",
+        "vite": "7.2.7"
     }
 }

package/src/components/native/useStyle.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
-import { ComponentType, useEffect, useReducer } from 'react'
+import { ComponentType, useLayoutEffect, useReducer } from 'react'
 import { createAnimatedComponent } from 'react-native-reanimated'
 import { UniwindListener } from '../../core/listener'
 import { UniwindStore } from '../../core/native'
@@ -47,7 +47,7 @@ export function useStyle<T extends React.ComponentType<any>>(
         ? UniwindStore.getStyles(className, componentProps, actualState)
         : emptyState
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (__DEV__ || styleState.dependencies.length > 0) {
             const dispose = UniwindListener.subscribe(rerender, styleState.dependencies)
 

package/src/hoc/withUniwind.native.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, useEffect, useReducer } from 'react'
+import { ComponentProps, useLayoutEffect, useReducer } from 'react'
 import { UniwindListener } from '../core/listener'
 import { UniwindStore } from '../core/native'
 import { StyleDependency } from '../types'
@@ -53,14 +53,17 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
         return acc
     }, { generatedProps: {} as AnyObject, dependencies: [] as Array<StyleDependency> })
 
-    const deps = Array.from(new Set(dependencies))
+    const dependencySum = dependencies.reduce((acc, dependency) => {
+        acc |= 1 << dependency
+        return acc
+    }, 0)
     const [, rerender] = useReducer(() => ({}), {})
 
-    useEffect(() => {
-        const dispose = UniwindListener.subscribe(rerender, deps)
+    useLayoutEffect(() => {
+        const dispose = UniwindListener.subscribe(rerender, Array.from(new Set(dependencies)))
 
         return dispose
-    }, [deps])
+    }, [dependencySum])
 
     return (
         <Component
@@ -93,21 +96,39 @@ 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> })
 
-    const deps = Array.from(new Set(dependencies))
+    const dependencySum = dependencies.reduce((acc, dependency) => {
+        acc |= 1 << dependency
+        return acc
+    }, 0)
     const [, rerender] = useReducer(() => ({}), {})
 
-    useEffect(() => {
-        const dispose = UniwindListener.subscribe(rerender, deps)
+    useLayoutEffect(() => {
+        const dispose = UniwindListener.subscribe(rerender, Array.from(new Set(dependencies)))
 
         return dispose
-    }, [deps])
+    }, [dependencySum])
 
     return (
         <Component

package/src/hoc/withUniwind.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, useEffect, useReducer } from 'react'
+import { ComponentProps, useLayoutEffect, useReducer } from 'react'
 import { CSSListener, formatColor, getWebStyles } from '../core/web'
 import { AnyObject, Component, OptionMapping, WithUniwind } from './types'
 import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from './withUniwindUtils'
@@ -54,7 +54,7 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
 
     const [, rerender] = useReducer(() => ({}), {})
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         const dispose = CSSListener.subscribeToClassName(classNames, rerender)
 
         return dispose
@@ -100,7 +100,7 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
 
     const [, rerender] = useReducer(() => ({}), {})
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         const dispose = CSSListener.subscribeToClassName(classNames, rerender)
 
         return dispose

package/src/hooks/useCSSVariable/useCSSVariable.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useLayoutEffect, useRef, useState } from 'react'
 import { UniwindListener } from '../../core/listener'
 import { Logger } from '../../core/logger'
 import { StyleDependency } from '../../types'
@@ -45,7 +45,7 @@ export const useCSSVariable: UseCSSVariable = (name: string | Array<string>) =>
     const [value, setValue] = useState(getValue(name))
     const nameRef = useRef(name)
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (Array.isArray(name) && Array.isArray(nameRef.current)) {
             if (arrayEquals(name, nameRef.current)) {
                 return
@@ -63,7 +63,7 @@ export const useCSSVariable: UseCSSVariable = (name: string | Array<string>) =>
         }
     }, [name])
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         const updateValue = () => setValue(getValue(nameRef.current))
         const dispose = UniwindListener.subscribe(
             updateValue,

package/src/hooks/useResolveClassNames.native.ts

@@ -1,4 +1,4 @@
-import { useEffect, useReducer } from 'react'
+import { useLayoutEffect, useReducer } from 'react'
 import { UniwindListener } from '../core/listener'
 import { UniwindStore } from '../core/native'
 
@@ -8,19 +8,19 @@ export const useResolveClassNames = (className: string) => {
         UniwindStore.getStyles(className),
     )
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (className !== '') {
             recreate()
         }
     }, [className])
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (uniwindState.dependencies.length > 0) {
             const dispose = UniwindListener.subscribe(recreate, uniwindState.dependencies)
 
             return dispose
         }
-    }, [uniwindState.dependencies, className])
+    }, [uniwindState.dependencySum, className])
 
     return uniwindState.styles
 }

package/src/hooks/useResolveClassNames.ts

@@ -1,4 +1,4 @@
-import { useEffect, useReducer } from 'react'
+import { useLayoutEffect, useReducer } from 'react'
 import { RNStyle } from '../core/types'
 import { CSSListener, getWebStyles } from '../core/web'
 
@@ -10,7 +10,7 @@ export const useResolveClassNames = (className: string) => {
         className !== '' ? getWebStyles(className) : emptyState,
     )
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (className === '') {
             return
         }

package/src/hooks/useUniwind.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useLayoutEffect, useState } from 'react'
 import { Uniwind } from '../core'
 import { UniwindListener } from '../core/listener'
 import { ThemeName } from '../core/types'
@@ -8,7 +8,7 @@ export const useUniwind = () => {
     const [theme, setTheme] = useState(Uniwind.currentTheme)
     const [hasAdaptiveThemes, setHasAdaptiveThemes] = useState(Uniwind.hasAdaptiveThemes)
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         const dispose = UniwindListener.subscribe(() => {
             setTheme(Uniwind.currentTheme)
             setHasAdaptiveThemes(Uniwind.hasAdaptiveThemes)

package/src/vite/vite.ts

@@ -38,6 +38,16 @@ export const uniwind = ({
 
     return {
         name: 'uniwind',
+        enforce: 'pre',
+        resolveId: (source, importer) => {
+            const normalizedSource = normalizePath(source)
+            const isTarget = source === './createOrderedCSSStyleSheet'
+                || normalizedSource.endsWith('react-native-web/dist/exports/StyleSheet/dom/createOrderedCSSStyleSheet.js')
+
+            if (isTarget && importer !== undefined && normalizePath(importer).includes('react-native-web/dist/exports/StyleSheet')) {
+                return styleSheetPath
+            }
+        },
         config: () => ({
             css: {
                 transformer: 'lightningcss',