@niibase/uniwind 1.1.10 → 1.4.0

package/dist/common/components/ScopedTheme/ScopedTheme.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScopedTheme = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _context = require("../../core/context");
+const ScopedTheme = ({
+  theme,
+  children
+}) => {
+  const value = (0, _react.useMemo)(() => ({
+    scopedTheme: theme
+  }), [theme]);
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_context.UniwindContext.Provider, {
+    value,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)("div", {
+      className: theme,
+      style: {
+        display: "contents"
+      },
+      children
+    })
+  });
+};
+exports.ScopedTheme = ScopedTheme;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScopedTheme = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _context = require("../../core/context");
+const ScopedTheme = ({
+  theme,
+  children
+}) => {
+  const value = (0, _react.useMemo)(() => ({
+    scopedTheme: theme
+  }), [theme]);
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_context.UniwindContext.Provider, {
+    value,
+    children
+  });
+};
+exports.ScopedTheme = ScopedTheme;

package/dist/common/components/ScopedTheme/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ScopedTheme = require("./ScopedTheme");
+Object.keys(_ScopedTheme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ScopedTheme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ScopedTheme[key];
+    }
+  });
+});

package/dist/common/components/native/TextInput.android.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.TextInput = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _reactNative = require("react-native");
+var _utils = require("../utils");
+var _useStyle = require("./useStyle");
+const TextInput = exports.TextInput = (0, _utils.copyComponentProperties)(_reactNative.TextInput, props => {
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const [isPressed, setIsPressed] = (0, _react.useState)(false);
+  const state = {
+    isDisabled: props.editable === false,
+    isFocused,
+    isPressed
+  };
+  const style = (0, _useStyle.useStyle)(props.className, props, state);
+  const cursorColor = (0, _useStyle.useStyle)(props.cursorColorClassName, props, state).accentColor;
+  const selectionColor = (0, _useStyle.useStyle)(props.selectionColorClassName, props, state).accentColor;
+  const placeholderTextColor = (0, _useStyle.useStyle)(props.placeholderTextColorClassName, props, state).accentColor;
+  const selectionHandleColor = (0, _useStyle.useStyle)(props.selectionHandleColorClassName, props, state).accentColor;
+  const underlineColorAndroid = (0, _useStyle.useStyle)(props.underlineColorAndroidClassName, props, state).accentColor;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+    ...props,
+    style: [style, props.style],
+    cursorColor: props.cursorColor ?? cursorColor,
+    selectionColor: props.selectionColor ?? selectionColor,
+    placeholderTextColor: props.placeholderTextColor ?? placeholderTextColor,
+    selectionHandleColor: props.selectionHandleColor ?? selectionHandleColor,
+    underlineColorAndroid: props.underlineColorAndroid ?? underlineColorAndroid,
+    onFocus: event => {
+      setIsFocused(true);
+      props.onFocus?.(event);
+    },
+    onBlur: event => {
+      setIsFocused(false);
+      props.onBlur?.(event);
+    },
+    onPressIn: event => {
+      setIsPressed(true);
+      props.onPressIn?.(event);
+    },
+    onPressOut: event => {
+      setIsPressed(false);
+      props.onPressOut?.(event);
+    }
+  });
+});
+module.exports = TextInput;

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

@@ -7,29 +7,26 @@ exports.animatedComponentFamily = void 0;
 exports.useStyle = useStyle;
 var _react = require("react");
 var _reactNativeReanimated = require("react-native-reanimated");
+var _context = require("../../core/context");
 var _listener = require("../../core/listener");
 var _native = require("../../core/native");
 var _weakMap = require("../../core/weak-map");
-const emptyState = {
-  styles: {},
-  component: void 0,
-  dependencies: []
-};
 function useStyle(componentOrClassName, classNameOrComponentProps, componentPropsOrState, state) {
   "use no memo";
 
+  const uniwindContext = (0, _context.useUniwindContext)();
   const [_, rerender] = (0, _react.useReducer)(() => ({}), {});
   const isComponentOverload = typeof componentOrClassName !== "string" && componentOrClassName !== void 0;
   const className = isComponentOverload ? classNameOrComponentProps : componentOrClassName;
   const componentProps = isComponentOverload ? componentPropsOrState : classNameOrComponentProps;
   const actualState = isComponentOverload ? state : componentPropsOrState;
-  const styleState = className ? _native.UniwindStore.getStyles(className, componentProps, actualState) : emptyState;
-  (0, _react.useEffect)(() => {
+  const styleState = _native.UniwindStore.getStyles(className, componentProps, actualState, uniwindContext);
+  (0, _react.useLayoutEffect)(() => {
     if (__DEV__ || styleState.dependencies.length > 0) {
       const dispose = _listener.UniwindListener.subscribe(rerender, styleState.dependencies);
       return dispose;
     }
-  }, [styleState.dependencies]);
+  }, [styleState.dependencySum]);
   if (!isComponentOverload) {
     return styleState.styles;
   }

package/dist/common/core/config/config.native.js

@@ -30,21 +30,12 @@ class UniwindConfigBuilder extends _config.UniwindConfigBuilder {
         }
         return varValue;
       };
-      const value = getValue();
-      const runtimeThemeVariables = _native.UniwindStore.runtimeThemeVariables.get(theme) ?? {};
-      if (theme === this.currentTheme) {
-        Object.defineProperty(_native.UniwindStore.vars, varName, {
-          configurable: true,
-          enumerable: true,
-          get: () => value
-        });
-      }
-      Object.defineProperty(runtimeThemeVariables, varName, {
+      _native.UniwindStore.vars[theme] ??= {};
+      Object.defineProperty(_native.UniwindStore.vars[theme], varName, {
         configurable: true,
         enumerable: true,
-        get: () => value
+        get: getValue
       });
-      _native.UniwindStore.runtimeThemeVariables.set(theme, runtimeThemeVariables);
     });
     if (theme === this.currentTheme) {
       _listener.UniwindListener.notify([_types.StyleDependency.Variables]);
@@ -59,11 +50,10 @@ class UniwindConfigBuilder extends _config.UniwindConfigBuilder {
   }
   __reinit(generateStyleSheetCallback, themes) {
     super.__reinit(generateStyleSheetCallback, themes);
-    _native.UniwindStore.reinit(generateStyleSheetCallback);
+    _native.UniwindStore.reinit(generateStyleSheetCallback, themes);
   }
   onThemeChange() {
     _native.UniwindStore.runtime.currentThemeName = this.currentTheme;
-    _native.UniwindStore.reinit();
   }
 }
 const Uniwind = exports.Uniwind = new UniwindConfigBuilder();

package/dist/common/core/context.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUniwindContext = exports.UniwindContext = void 0;
+var _react = require("react");
+const UniwindContext = exports.UniwindContext = (0, _react.createContext)({
+  scopedTheme: null
+});
+const useUniwindContext = () => (0, _react.useContext)(UniwindContext);
+exports.useUniwindContext = useUniwindContext;
+UniwindContext.displayName = "UniwindContext";

package/dist/common/core/native/store.js

@@ -18,66 +18,63 @@ const emptyState = {
 class UniwindStoreBuilder {
   runtime = _runtime.UniwindRuntime;
   vars = {};
-  runtimeThemeVariables = /* @__PURE__ */new Map();
   stylesheet = {};
   keyframes = {};
-  cache = /* @__PURE__ */new Map();
-  generateStyleSheetCallbackResult = null;
-  getStyles(className, componentProps, state) {
+  cache = {};
+  getStyles(className, componentProps, state, uniwindContext) {
     if (className === void 0 || className === "") {
       return emptyState;
     }
-    const stateFlags = (state?.isDisabled ? 4 : 0) | (state?.isFocused ? 2 : 0) | (state?.isPressed ? 1 : 0);
-    const cacheKey = `${className}:${stateFlags}`;
-    const cached = this.cache.get(cacheKey);
-    if (cached) return cached;
-    const result = this.resolveStyles(className, componentProps, state);
+    const isScopedTheme = uniwindContext.scopedTheme !== null;
+    const cacheKey = `${className}${state?.isDisabled ?? false}${state?.isFocused ?? false}${state?.isPressed ?? false}${isScopedTheme}`;
+    const cache = this.cache[uniwindContext.scopedTheme ?? this.runtime.currentThemeName];
+    if (!cache) return emptyState;
+    if (cache.has(cacheKey)) return cache.get(cacheKey);
+    const result = this.resolveStyles(className, componentProps, state, uniwindContext);
     if (!result.hasDataAttributes) {
-      this.cache.set(cacheKey, result);
-      _listener.UniwindListener.subscribe(() => this.cache.delete(cacheKey), result.dependencies, {
+      cache.set(cacheKey, result);
+      _listener.UniwindListener.subscribe(() => cache.delete(cacheKey), result.dependencies, {
         once: true
       });
     }
     return result;
   }
-  reinit = generateStyleSheetCallback => {
-    const config = generateStyleSheetCallback?.(this.runtime) ?? this.generateStyleSheetCallbackResult;
-    if (!config) {
-      return;
-    }
+  reinit = (generateStyleSheetCallback, themes) => {
     const {
       scopedVars,
       stylesheet,
       vars,
       keyframes
-    } = config;
-    this.generateStyleSheetCallbackResult = config;
-    this.stylesheet = stylesheet;
-    this.keyframes = keyframes;
-    this.vars = vars;
-    const themeVars = scopedVars[`__uniwind-theme-${this.runtime.currentThemeName}`];
+    } = generateStyleSheetCallback(this.runtime);
     const platformVars = scopedVars[`__uniwind-platform-${_reactNative.Platform.OS}`];
-    const runtimeThemeVars = this.runtimeThemeVariables.get(this.runtime.currentThemeName);
-    if (themeVars) {
-      Object.defineProperties(this.vars, Object.getOwnPropertyDescriptors(themeVars));
-    }
     if (platformVars) {
-      Object.defineProperties(this.vars, Object.getOwnPropertyDescriptors(platformVars));
-    }
-    if (runtimeThemeVars) {
-      Object.defineProperties(this.vars, Object.getOwnPropertyDescriptors(runtimeThemeVars));
+      Object.defineProperties(vars, Object.getOwnPropertyDescriptors(platformVars));
     }
-    if (__DEV__ && generateStyleSheetCallback) {
+    this.keyframes = keyframes;
+    this.stylesheet = stylesheet;
+    this.vars = Object.fromEntries(themes.map(theme => {
+      const clonedVars = (0, _nativeUtils.cloneWithAccessors)(vars);
+      const themeVars = scopedVars[`__uniwind-theme-${theme}`];
+      if (themeVars) {
+        Object.defineProperties(clonedVars, Object.getOwnPropertyDescriptors(themeVars));
+      }
+      return [theme, clonedVars];
+    }));
+    this.cache = Object.fromEntries(themes.map(theme => [theme, /* @__PURE__ */new Map()]));
+    if (__DEV__) {
       _listener.UniwindListener.notifyAll();
     }
   };
-  resolveStyles(classNames, componentProps, state) {
+  resolveStyles(classNames, componentProps, state, uniwindContext) {
     const result = {};
-    let vars = this.vars;
+    const theme = uniwindContext.scopedTheme ?? this.runtime.currentThemeName;
+    let vars = this.vars[theme];
+    const originalVars = vars;
     let hasDataAttributes = false;
     const dependencies = /* @__PURE__ */new Set();
     let dependencySum = 0;
     const bestBreakpoints = /* @__PURE__ */new Map();
+    const isScopedTheme = uniwindContext.scopedTheme !== null;
     for (const className of classNames.split(" ")) {
       if (!(className in this.stylesheet)) {
         continue;
@@ -85,6 +82,9 @@ class UniwindStoreBuilder {
       for (const style of this.stylesheet[className]) {
         if (style.dependencies) {
           style.dependencies.forEach(dep => {
+            if (dep === _types.StyleDependency.Theme && isScopedTheme) {
+              return;
+            }
             dependencies.add(dep);
             dependencySum |= 1 << dep;
           });
@@ -92,7 +92,7 @@ class UniwindStoreBuilder {
         if (style.dataAttributes !== null) {
           hasDataAttributes = true;
         }
-        if (style.minWidth > this.runtime.screen.width || style.maxWidth < this.runtime.screen.width || style.theme !== null && this.runtime.currentThemeName !== style.theme || style.orientation !== null && this.runtime.orientation !== style.orientation || style.rtl !== null && this.runtime.rtl !== style.rtl || style.active !== null && state?.isPressed !== style.active || style.focus !== null && state?.isFocused !== style.focus || style.disabled !== null && state?.isDisabled !== style.disabled || style.dataAttributes !== null && !this.validateDataAttributes(style.dataAttributes, componentProps)) {
+        if (style.minWidth > this.runtime.screen.width || style.maxWidth < this.runtime.screen.width || style.theme !== null && theme !== style.theme || style.orientation !== null && this.runtime.orientation !== style.orientation || style.rtl !== null && this.runtime.rtl !== style.rtl || style.active !== null && state?.isPressed !== style.active || style.focus !== null && state?.isFocused !== style.focus || style.disabled !== null && state?.isDisabled !== style.disabled || style.dataAttributes !== null && !this.validateDataAttributes(style.dataAttributes, componentProps)) {
           continue;
         }
         for (const [property, valueGetter] of style.entries) {
@@ -101,8 +101,8 @@ class UniwindStoreBuilder {
             continue;
           }
           if (property[0] === "-") {
-            if (vars === this.vars) {
-              vars = (0, _nativeUtils.cloneWithAccessors)(this.vars);
+            if (vars === originalVars) {
+              vars = (0, _nativeUtils.cloneWithAccessors)(originalVars);
             }
             Object.defineProperty(vars, property, {
               configurable: true,

package/dist/common/core/web/getWebStyles.js

@@ -3,13 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getWebStyles = void 0;
+exports.getWebVariable = exports.getWebStyles = void 0;
 var _parseCSSValue = require("./parseCSSValue");
-const dummy = typeof document !== "undefined" ? Object.assign(document.createElement("div"), {
+const dummyParent = typeof document !== "undefined" ? Object.assign(document.createElement("div"), {
   style: "display: none"
 }) : null;
-if (dummy) {
-  document.body.appendChild(dummy);
+const dummy = typeof document !== "undefined" ? document.createElement("div") : null;
+if (dummyParent && dummy) {
+  document.body.appendChild(dummyParent);
+  dummyParent.appendChild(dummy);
 }
 const getComputedStyles = () => {
   if (!dummy) {
@@ -34,13 +36,18 @@ const getObjectDifference = (obj1, obj2) => {
   });
   return diff;
 };
-const getWebStyles = className => {
+const getWebStyles = (className, uniwindContext) => {
   if (className === void 0) {
     return {};
   }
   if (!dummy) {
     return {};
   }
+  if (uniwindContext.scopedTheme !== null) {
+    dummyParent?.setAttribute("class", uniwindContext.scopedTheme);
+  } else {
+    dummyParent?.removeAttribute("class");
+  }
   dummy.className = className;
   const computedStyles = getObjectDifference(initialStyles, getComputedStyles());
   return Object.fromEntries(Object.entries(computedStyles).map(([key, value]) => {
@@ -48,4 +55,17 @@ const getWebStyles = className => {
     return [parsedKey, (0, _parseCSSValue.parseCSSValue)(value)];
   }));
 };
-exports.getWebStyles = getWebStyles;
+exports.getWebStyles = getWebStyles;
+const getWebVariable = (name, uniwindContext) => {
+  if (!dummyParent) {
+    return void 0;
+  }
+  if (uniwindContext.scopedTheme !== null) {
+    dummyParent.setAttribute("class", uniwindContext.scopedTheme);
+  } else {
+    dummyParent.removeAttribute("class");
+  }
+  const variable = window.getComputedStyle(dummyParent).getPropertyValue(name);
+  return (0, _parseCSSValue.parseCSSValue)(variable);
+};
+exports.getWebVariable = getWebVariable;

package/dist/common/{css/processFunctions.js → css-visitor/function-visitor.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.processFunctions = void 0;
+exports.FunctionVisitor = void 0;
 const ONE_PX = {
   type: "token",
   value: {
@@ -12,8 +12,8 @@ const ONE_PX = {
     value: 1
   }
 };
-const processFunctions = exports.processFunctions = {
-  pixelRatio: fn => {
+class FunctionVisitor {
+  pixelRatio(fn) {
     return {
       type: "function",
       value: {
@@ -27,8 +27,8 @@ const processFunctions = exports.processFunctions = {
         }, ONE_PX]
       }
     };
-  },
-  fontScale: fn => {
+  }
+  fontScale(fn) {
     return {
       type: "function",
       value: {
@@ -49,6 +49,9 @@ const processFunctions = exports.processFunctions = {
         }]
       }
     };
-  },
-  hairlineWidth: () => ONE_PX
-};
+  }
+  hairlineWidth() {
+    return ONE_PX;
+  }
+}
+exports.FunctionVisitor = FunctionVisitor;

package/dist/common/css-visitor/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _visitor = require("./visitor");
+Object.keys(_visitor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _visitor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _visitor[key];
+    }
+  });
+});

package/dist/common/css-visitor/rule-visitor.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RuleVisitor = void 0;
+class RuleVisitor {
+  constructor(themes) {
+    this.themes = themes;
+  }
+  processedClassNames = /* @__PURE__ */new Set();
+  processedVariables = /* @__PURE__ */new Set();
+  currentLayerName = "";
+  "layer-block" = layer => {
+    this.currentLayerName = layer.value.name?.join("") ?? "";
+  };
+  style = styleRule => {
+    const firstSelector = styleRule.value.selectors.at(0)?.at(0);
+    const secondSelector = styleRule.value.selectors.at(0)?.at(1);
+    if (this.currentLayerName === "theme" && firstSelector?.type === "nesting" && secondSelector?.type === "pseudo-class" && secondSelector.kind === "where") {
+      return this.processThemeStyle(styleRule, secondSelector);
+    }
+    if (firstSelector?.type === "class") {
+      return this.processClassStyle(styleRule, firstSelector);
+    }
+  };
+  cleanup() {
+    this.currentLayerName = "";
+    this.processedClassNames.clear();
+    this.processedVariables.clear();
+  }
+  processThemeStyle(styleRule, secondSelector) {
+    const whereSelector = secondSelector.selectors.at(0)?.at(0);
+    if (whereSelector?.type !== "class") {
+      return;
+    }
+    const selectedVariant = this.themes.find(theme => whereSelector.name === theme);
+    if (selectedVariant === void 0 || this.processedVariables.has(selectedVariant)) {
+      return;
+    }
+    this.processedVariables.add(selectedVariant);
+    return {
+      type: "style",
+      value: {
+        loc: styleRule.value.loc,
+        selectors: [[{
+          type: "class",
+          name: selectedVariant
+        }]],
+        declarations: styleRule.value.declarations,
+        rules: styleRule.value.rules
+      }
+    };
+  }
+  processClassStyle(styleRule, firstSelector) {
+    const selectedVariant = this.themes.find(theme => firstSelector.name.includes(`${theme}:`));
+    if (selectedVariant === void 0 || this.processedClassNames.has(firstSelector.name)) {
+      return;
+    }
+    this.processedClassNames.add(firstSelector.name);
+    return {
+      type: "scope",
+      value: {
+        loc: styleRule.value.loc,
+        rules: [styleRule],
+        scopeStart: [[{
+          type: "class",
+          name: selectedVariant
+        }]],
+        scopeEnd: this.themes.filter(theme => theme !== selectedVariant).map(theme => [{
+          type: "class",
+          name: theme
+        }])
+      }
+    };
+  }
+}
+exports.RuleVisitor = RuleVisitor;

package/dist/common/css-visitor/visitor.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UniwindCSSVisitor = void 0;
+var _functionVisitor = require("./function-visitor");
+var _ruleVisitor = require("./rule-visitor");
+class UniwindCSSVisitor {
+  constructor(themes) {
+    this.themes = themes;
+    const ruleVisitor = new _ruleVisitor.RuleVisitor(this.themes);
+    this.Function = new _functionVisitor.FunctionVisitor();
+    this.Rule = ruleVisitor;
+    this.StyleSheet = () => {
+      ruleVisitor.cleanup();
+    };
+  }
+  Function;
+  Rule;
+  StyleSheet;
+}
+exports.UniwindCSSVisitor = UniwindCSSVisitor;

package/dist/common/hoc/withUniwind.js

@@ -6,11 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.withUniwind = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
+var _context = require("../core/context");
 var _web = require("../core/web");
 var _withUniwindUtils = require("./withUniwindUtils");
 const withUniwind = (Component2, options) => options ? withManualUniwind(Component2, options) : withAutoUniwind(Component2);
 exports.withUniwind = withUniwind;
 const withAutoUniwind = Component2 => props => {
+  const uniwindContext = (0, _context.useUniwindContext)();
   const {
     classNames,
     generatedProps
@@ -21,7 +23,7 @@ const withAutoUniwind = Component2 => props => {
         return acc;
       }
       const className = propValue;
-      const color = (0, _web.getWebStyles)(className).accentColor;
+      const color = (0, _web.getWebStyles)(className, uniwindContext).accentColor;
       acc.generatedProps[colorProp] = color !== void 0 ? (0, _web.formatColor)(color) : void 0;
       acc.classNames += `${className} `;
       return acc;
@@ -46,7 +48,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]);
@@ -56,6 +58,7 @@ const withAutoUniwind = Component2 => props => {
   });
 };
 const withManualUniwind = (Component2, options) => props => {
+  const uniwindContext = (0, _context.useUniwindContext)();
   const {
     generatedProps,
     classNames
@@ -68,7 +71,7 @@ const withManualUniwind = (Component2, options) => props => {
       if (props[propName] !== void 0) {
         return acc;
       }
-      const value = (0, _web.getWebStyles)(className)[option.styleProperty];
+      const value = (0, _web.getWebStyles)(className, uniwindContext)[option.styleProperty];
       const transformedValue = value !== void 0 && option.styleProperty.toLowerCase().includes("color") ? (0, _web.formatColor)(value) : value;
       acc.classNames += `${className} `;
       acc.generatedProps[propName] = transformedValue;
@@ -84,7 +87,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]);