@niibase/uniwind 1.1.11 → 1.4.1

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

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

package/dist/module/core/context.d.ts

@@ -0,0 +1,7 @@
+import type { ThemeName } from './types';
+export declare const UniwindContext: import("react").Context<{
+    scopedTheme: ThemeName | null;
+}>;
+export declare const useUniwindContext: () => {
+    scopedTheme: ThemeName | null;
+};

package/dist/module/core/context.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from "react";
+export const UniwindContext = createContext({
+  scopedTheme: null
+});
+export const useUniwindContext = () => useContext(UniwindContext);
+UniwindContext.displayName = "UniwindContext";

package/dist/module/core/native/runtime.js

@@ -1,4 +1,4 @@
-import { Appearance, Dimensions, I18nManager, PixelRatio, StyleSheet } from "react-native";
+import { Appearance, Dimensions, I18nManager, PixelRatio, Platform, StyleSheet } from "react-native";
 import { cubicBezier, linear, steps } from "react-native-reanimated";
 import { initialWindowMetrics } from "react-native-safe-area-context";
 import { ColorScheme, Orientation } from "../../types.js";
@@ -23,6 +23,9 @@ export const UniwindRuntime = {
   steps,
   linear,
   lightDark: () => "",
-  parseColor
+  parseColor,
+  platformSelect: (android, ios, other) => {
+    return Platform.select(Boolean(other) ? { android, ios, default: other } : { android, default: ios });
+  }
 };
 UniwindRuntime.lightDark = lightDark.bind(UniwindRuntime);

package/dist/module/core/native/store.d.ts

@@ -1,5 +1,5 @@
 import { StyleDependency } from '../../types';
-import { ComponentState, CSSVariables, GenerateStyleSheetsCallback, RNStyle } from '../types';
+import { ComponentState, GenerateStyleSheetsCallback, RNStyle, ThemeName, UniwindContextType } from '../types';
 type StylesResult = {
     styles: RNStyle;
     dependencies: Array<StyleDependency>;
@@ -7,14 +7,12 @@ type StylesResult = {
 };
 declare class UniwindStoreBuilder {
     runtime: import("../types").UniwindRuntime;
-    vars: Record<string, unknown>;
-    runtimeThemeVariables: Map<string, CSSVariables>;
+    vars: Record<ThemeName, Record<string, unknown>>;
     private stylesheet;
     private keyframes;
     private cache;
-    private generateStyleSheetCallbackResult;
-    getStyles(className: string | undefined, componentProps?: Record<string, any>, state?: ComponentState): StylesResult;
-    reinit: (generateStyleSheetCallback?: GenerateStyleSheetsCallback) => void;
+    getStyles(className: string | undefined, componentProps: Record<string, any> | undefined, state: ComponentState | undefined, uniwindContext: UniwindContextType): StylesResult;
+    reinit: (generateStyleSheetCallback: GenerateStyleSheetsCallback, themes: Array<string>) => void;
     private resolveStyles;
     private validateDataAttributes;
 }

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

@@ -15,63 +15,60 @@ const emptyState = { styles: {}, dependencies: [], dependencySum: 0 };
 class UniwindStoreBuilder {
   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);
+      cache.set(cacheKey, result);
       UniwindListener.subscribe(
-        () => this.cache.delete(cacheKey),
+        () => cache.delete(cacheKey),
         result.dependencies,
         { once: true }
       );
     }
     return result;
   }
-  reinit = (generateStyleSheetCallback) => {
-    const config = generateStyleSheetCallback?.(this.runtime) ?? this.generateStyleSheetCallbackResult;
-    if (!config) {
-      return;
-    }
-    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}`];
+  reinit = (generateStyleSheetCallback, themes) => {
+    const { scopedVars, stylesheet, vars, keyframes } = generateStyleSheetCallback(this.runtime);
     const platformVars = scopedVars[`__uniwind-platform-${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 = 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__) {
       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;
@@ -79,6 +76,9 @@ class UniwindStoreBuilder {
       for (const style of this.stylesheet[className]) {
         if (style.dependencies) {
           style.dependencies.forEach((dep) => {
+            if (dep === StyleDependency.Theme && isScopedTheme) {
+              return;
+            }
             dependencies.add(dep);
             dependencySum |= 1 << dep;
           });
@@ -86,7 +86,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) {
@@ -95,8 +95,8 @@ class UniwindStoreBuilder {
             continue;
           }
           if (property[0] === "-") {
-            if (vars === this.vars) {
-              vars = cloneWithAccessors(this.vars);
+            if (vars === originalVars) {
+              vars = cloneWithAccessors(originalVars);
             }
             Object.defineProperty(vars, property, {
               configurable: true,

package/dist/module/core/types.d.ts

@@ -1,7 +1,9 @@
+import React from 'react';
 import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { CSSAnimationKeyframes } from 'react-native-reanimated';
 import { ControlPoint, CubicBezierEasing, LinearEasing, StepsEasing, StepsModifier } from 'react-native-reanimated/lib/typescript/css/easing';
 import { ColorScheme, Orientation, StyleDependency, UniwindConfig } from '../types';
+import type { UniwindContext } from './context';
 export type Style = {
     entries: Array<[string, () => unknown]>;
     minWidth: number;
@@ -55,6 +57,7 @@ export type UniwindRuntime = {
     linear: (...points: ControlPoint[]) => LinearEasing;
     lightDark: (light: string, dark: string) => string;
     parseColor: (type: string, color: string) => string;
+    platformSelect: (android: string, ios: string, other?: string) => string;
 };
 export type RNStyle = ViewStyle & TextStyle & ImageStyle & {
     accentColor?: string;
@@ -77,4 +80,5 @@ export type ComponentState = {
     isFocused?: boolean;
 };
 export type CSSVariables = Record<string, string | number>;
+export type UniwindContextType = React.ContextType<typeof UniwindContext>;
 export {};

package/dist/module/core/web/getWebStyles.d.ts

@@ -1,2 +1,3 @@
-import { RNStyle } from '../types';
-export declare const getWebStyles: (className?: string) => RNStyle;
+import { RNStyle, UniwindContextType } from '../types';
+export declare const getWebStyles: (className: string | undefined, uniwindContext: UniwindContextType) => RNStyle;
+export declare const getWebVariable: (name: string, uniwindContext: UniwindContextType) => string | undefined;

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

@@ -1,9 +1,11 @@
 import { parseCSSValue } from "./parseCSSValue.js";
-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) {
@@ -28,13 +30,18 @@ const getObjectDifference = (obj1, obj2) => {
   });
   return diff;
 };
-export const getWebStyles = (className) => {
+export 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(
@@ -47,3 +54,15 @@ export const getWebStyles = (className) => {
     })
   );
 };
+export 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 parseCSSValue(variable);
+};

package/dist/module/css-visitor/function-visitor.d.ts

@@ -0,0 +1,8 @@
+import { Function as LightningCSSFunction, TokenOrValue } from 'lightningcss';
+export declare class FunctionVisitor {
+    [name: string]: (fn: LightningCSSFunction) => TokenOrValue;
+    platformSelect(fn: LightningCSSFunction): TokenOrValue;
+    pixelRatio(fn: LightningCSSFunction): TokenOrValue;
+    fontScale(fn: LightningCSSFunction): TokenOrValue;
+    hairlineWidth(): TokenOrValue;
+}

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

@@ -2,8 +2,11 @@ const ONE_PX = {
   type: "token",
   value: { type: "dimension", unit: "px", value: 1 }
 };
-export const processFunctions = {
-  pixelRatio: (fn) => {
+export class FunctionVisitor {
+  platformSelect(fn) {
+    return fn.arguments.at(0) ?? { type: "token", value: { type: "ident", value: "initial" } };
+  }
+  pixelRatio(fn) {
     return {
       type: "function",
       value: {
@@ -15,8 +18,8 @@ export const processFunctions = {
         ]
       }
     };
-  },
-  fontScale: (fn) => {
+  }
+  fontScale(fn) {
     return {
       type: "function",
       value: {
@@ -31,6 +34,8 @@ export const processFunctions = {
         ]
       }
     };
-  },
-  hairlineWidth: () => ONE_PX
-};
+  }
+  hairlineWidth() {
+    return ONE_PX;
+  }
+}

package/dist/module/css-visitor/index.d.ts

@@ -0,0 +1 @@
+export * from './visitor';

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

@@ -0,0 +1 @@
+export * from "./visitor.js";

package/dist/module/css-visitor/rule-visitor.d.ts

@@ -0,0 +1,26 @@
+import { ReturnedDeclaration, ReturnedMediaQuery, ReturnedRule, Rule } from 'lightningcss';
+type LightningRuleVisitor = Rule<ReturnedDeclaration, ReturnedMediaQuery>;
+type LightningRuleVisitors = Partial<{
+    [K in LightningRuleVisitor['type']]: (rule: Extract<LightningRuleVisitor, {
+        type: K;
+    }>) => ReturnedRule | Array<ReturnedRule> | void;
+}>;
+export declare class RuleVisitor implements LightningRuleVisitors {
+    private readonly themes;
+    processedClassNames: Set<string>;
+    processedVariables: Set<string>;
+    currentLayerName: string;
+    constructor(themes: Array<string>);
+    'layer-block': (layer: Extract<LightningRuleVisitor, {
+        type: "layer-block";
+    }>) => void;
+    style: (styleRule: Extract<LightningRuleVisitor, {
+        type: "style";
+    }>) => void | ReturnedRule | ReturnedRule[];
+    cleanup(): void;
+    private processThemeRoot;
+    private processThemeStyle;
+    private processClassStyle;
+    private removeNulls;
+}
+export {};

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

@@ -0,0 +1,111 @@
+export 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);
+    if (this.currentLayerName === "theme" && firstSelector?.type === "pseudo-class" && firstSelector.kind === "root") {
+      return this.removeNulls(this.processThemeRoot(styleRule));
+    }
+    if (firstSelector?.type === "class") {
+      return this.processClassStyle(styleRule, firstSelector);
+    }
+  };
+  cleanup() {
+    this.currentLayerName = "";
+    this.processedClassNames.clear();
+    this.processedVariables.clear();
+  }
+  processThemeRoot(styleRule) {
+    const themeScopedRules = styleRule.value.rules?.filter((rule) => {
+      if (rule.type !== "style") {
+        return false;
+      }
+      const firstSelector = rule.value.selectors.at(0)?.at(0);
+      const secondSelector = rule.value.selectors.at(0)?.at(1);
+      return firstSelector?.type === "nesting" && secondSelector?.type === "pseudo-class" && secondSelector.kind === "where";
+    }) ?? [];
+    const nonThemeRules = styleRule.value.rules?.filter((rule) => !themeScopedRules.includes(rule));
+    const processedThemeScopedRules = themeScopedRules.map((rule) => {
+      if (rule.type !== "style") {
+        return rule;
+      }
+      const secondSelector = rule.value.selectors.at(0)?.at(1);
+      if (secondSelector?.type === "pseudo-class" && secondSelector.kind === "where") {
+        return this.processThemeStyle(rule, secondSelector);
+      }
+      return rule;
+    });
+    return [
+      {
+        type: "style",
+        value: {
+          loc: styleRule.value.loc,
+          selectors: styleRule.value.selectors,
+          rules: nonThemeRules,
+          declarations: styleRule.value.declarations
+        }
+      },
+      ...processedThemeScopedRules
+    ];
+  }
+  processThemeStyle(styleRule, secondSelector) {
+    const whereSelector = secondSelector.selectors.at(0)?.at(0);
+    if (whereSelector?.type !== "class") {
+      return styleRule;
+    }
+    const selectedVariant = this.themes.find((theme) => whereSelector.name === theme);
+    if (selectedVariant === void 0 || this.processedVariables.has(selectedVariant)) {
+      return styleRule;
+    }
+    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 }])
+      }
+    };
+  }
+  // Fixes lightningcss serialization bug
+  removeNulls(value) {
+    if (Array.isArray(value)) {
+      return value.map((v) => this.removeNulls(v));
+    }
+    if (typeof value === "object" && value !== null) {
+      return Object.fromEntries(
+        Object.entries(value).filter(([_, value2]) => {
+          if (value2 === null) {
+            return false;
+          }
+          return true;
+        }).map(([key, value2]) => [key, this.removeNulls(value2)])
+      );
+    }
+    return value;
+  }
+}

package/dist/module/css-visitor/visitor.d.ts

@@ -0,0 +1,8 @@
+import { CustomAtRules, Visitor } from 'lightningcss';
+export declare class UniwindCSSVisitor implements Visitor<CustomAtRules> {
+    private readonly themes;
+    Function: Visitor<CustomAtRules>['Function'];
+    Rule: Visitor<CustomAtRules>['Rule'];
+    StyleSheet: Visitor<CustomAtRules>['StyleSheet'];
+    constructor(themes: Array<string>);
+}

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

@@ -0,0 +1,16 @@
+import { FunctionVisitor } from "./function-visitor.js";
+import { RuleVisitor } from "./rule-visitor.js";
+export class UniwindCSSVisitor {
+  constructor(themes) {
+    this.themes = themes;
+    const ruleVisitor = new RuleVisitor(this.themes);
+    this.Function = new FunctionVisitor();
+    this.Rule = ruleVisitor;
+    this.StyleSheet = () => {
+      ruleVisitor.cleanup();
+    };
+  }
+  Function;
+  Rule;
+  StyleSheet;
+}

package/dist/module/hoc/withUniwind.js

@@ -1,9 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useReducer } from "react";
+import { useUniwindContext } from "../core/context.js";
 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);
 const withAutoUniwind = (Component2) => (props) => {
+  const uniwindContext = useUniwindContext();
   const { classNames, generatedProps } = Object.entries(props).reduce((acc, [propName, propValue]) => {
     if (isColorClassProperty(propName)) {
       const colorProp = classToColor(propName);
@@ -11,7 +13,7 @@ const withAutoUniwind = (Component2) => (props) => {
         return acc;
       }
       const className = propValue;
-      const color = getWebStyles(className).accentColor;
+      const color = getWebStyles(className, uniwindContext).accentColor;
       acc.generatedProps[colorProp] = color !== void 0 ? formatColor(color) : void 0;
       acc.classNames += `${className} `;
       return acc;
@@ -43,6 +45,7 @@ const withAutoUniwind = (Component2) => (props) => {
   );
 };
 const withManualUniwind = (Component2, options) => (props) => {
+  const uniwindContext = useUniwindContext();
   const { generatedProps, classNames } = Object.entries(options).reduce((acc, [propName, option]) => {
     const className = props[option.fromClassName];
     if (className === void 0) {
@@ -52,7 +55,7 @@ const withManualUniwind = (Component2, options) => (props) => {
       if (props[propName] !== void 0) {
         return acc;
       }
-      const value = getWebStyles(className)[option.styleProperty];
+      const value = getWebStyles(className, uniwindContext)[option.styleProperty];
       const transformedValue = value !== void 0 && option.styleProperty.toLowerCase().includes("color") ? formatColor(value) : value;
       acc.classNames += `${className} `;
       acc.generatedProps[propName] = transformedValue;

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

@@ -1,24 +1,26 @@
 import { jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useReducer } from "react";
+import { useUniwindContext } from "../core/context.js";
 import { UniwindListener } from "../core/listener.js";
 import { UniwindStore } from "../core/native/index.js";
 import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from "./withUniwindUtils.js";
 export const withUniwind = (Component2, options) => options ? withManualUniwind(Component2, options) : withAutoUniwind(Component2);
 const withAutoUniwind = (Component2) => (props) => {
+  const uniwindContext = useUniwindContext();
   const { dependencies, generatedProps } = Object.entries(props).reduce((acc, [propName, propValue]) => {
     if (isColorClassProperty(propName)) {
       const colorProp = classToColor(propName);
       if (props[colorProp] !== void 0) {
         return acc;
       }
-      const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(propValue);
+      const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(propValue, void 0, void 0, uniwindContext);
       acc.dependencies.push(...dependencies2);
       acc.generatedProps[colorProp] = styles.accentColor;
       return acc;
     }
     if (isClassProperty(propName)) {
       const styleProp = classToStyle(propName);
-      const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(propValue);
+      const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(propValue, void 0, void 0, uniwindContext);
       acc.dependencies.push(...dependencies2);
       acc.generatedProps[styleProp] ??= [];
       acc.generatedProps[styleProp][0] = styles;
@@ -49,6 +51,7 @@ const withAutoUniwind = (Component2) => (props) => {
   );
 };
 const withManualUniwind = (Component2, options) => (props) => {
+  const uniwindContext = useUniwindContext();
   const { generatedProps, dependencies } = Object.entries(options).reduce((acc, [propName, option]) => {
     const className = props[option.fromClassName];
     if (className === void 0) {
@@ -58,12 +61,12 @@ const withManualUniwind = (Component2, options) => (props) => {
       if (props[propName] !== void 0) {
         return acc;
       }
-      const { styles: styles2, dependencies: dependencies3 } = UniwindStore.getStyles(className);
+      const { styles: styles2, dependencies: dependencies3 } = UniwindStore.getStyles(className, void 0, void 0, uniwindContext);
       acc.generatedProps[propName] = styles2[option.styleProperty];
       acc.dependencies.push(...dependencies3);
       return acc;
     }
-    const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(className);
+    const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(className, void 0, void 0, uniwindContext);
     acc.dependencies.push(...dependencies2);
     if (!isStyleProperty(propName)) {
       acc.generatedProps[propName] = styles;

package/dist/module/hooks/useCSSVariable/getVariableValue.d.ts

@@ -1 +1 @@
-export declare const getVariableValue: (name: string) => string | undefined;
+export declare const getVariableValue: (name: string, uniwindContext: import("../../core/types").UniwindContextType) => string | undefined;

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

@@ -1,12 +1,2 @@
-import { parseCSSValue } from "../../core/web/index.js";
-const documentStyles = typeof document !== "undefined" ? window.getComputedStyle(document.documentElement) : null;
-export const getVariableValue = (name) => {
-  if (!documentStyles) {
-    return void 0;
-  }
-  const value = documentStyles.getPropertyValue(name).trim();
-  if (value === "") {
-    return void 0;
-  }
-  return parseCSSValue(value);
-};
+import { getWebVariable } from "../../core/web/index.js";
+export const getVariableValue = getWebVariable;

package/dist/module/hooks/useCSSVariable/getVariableValue.native.d.ts

@@ -1 +1,2 @@
-export declare const getVariableValue: (name: string) => unknown;
+import { UniwindContextType } from '../../core/types';
+export declare const getVariableValue: (name: string, uniwindContext: UniwindContextType) => unknown;

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

@@ -1,2 +1,2 @@
-import { UniwindStore } from "../../core/native/index.js";
-export const getVariableValue = (name) => UniwindStore.vars[name];
+import { UniwindRuntime, UniwindStore } from "../../core/native/index.js";
+export const getVariableValue = (name, uniwindContext) => UniwindStore.vars[uniwindContext.scopedTheme ?? UniwindRuntime.currentThemeName]?.[name];