@niibase/uniwind 1.1.10 → 1.4.0

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

@@ -1,24 +1,26 @@
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useReducer } from "react";
+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;
@@ -31,12 +33,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,
     {
@@ -46,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) {
@@ -55,22 +61,34 @@ 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);
-    acc.generatedProps[propName] = styles;
+    const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(className, void 0, void 0, uniwindContext);
     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/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];

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

@@ -1,9 +1,10 @@
-import { useEffect, useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
+import { useUniwindContext } from "../../core/context.js";
 import { UniwindListener } from "../../core/listener.js";
 import { Logger } from "../../core/logger.js";
 import { StyleDependency } from "../../types.js";
 import { getVariableValue } from "./getVariableValue.js";
-const getValue = (name) => Array.isArray(name) ? name.map(getVariableValue) : getVariableValue(name);
+const getValue = (name, uniwindContext) => Array.isArray(name) ? name.map((name2) => getVariableValue(name2, uniwindContext)) : getVariableValue(name, uniwindContext);
 const arrayEquals = (a, b) => {
   if (a.length !== b.length) {
     return false;
@@ -18,30 +19,31 @@ const logDevError = (name) => {
   );
 };
 export const useCSSVariable = (name) => {
-  const [value, setValue] = useState(getValue(name));
+  const uniwindContext = useUniwindContext();
+  const [value, setValue] = useState(getValue(name, uniwindContext));
   const nameRef = useRef(name);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (Array.isArray(name) && Array.isArray(nameRef.current)) {
       if (arrayEquals(name, nameRef.current)) {
         return;
       }
-      setValue(getValue(name));
+      setValue(getValue(name, uniwindContext));
       nameRef.current = name;
       return;
     }
     if (name !== nameRef.current) {
-      setValue(getValue(name));
+      setValue(getValue(name, uniwindContext));
       nameRef.current = name;
     }
   }, [name]);
-  useEffect(() => {
-    const updateValue = () => setValue(getValue(nameRef.current));
+  useLayoutEffect(() => {
+    const updateValue = () => setValue(getValue(nameRef.current, uniwindContext));
     const dispose = UniwindListener.subscribe(
       updateValue,
       [StyleDependency.Theme, StyleDependency.Variables]
     );
     return dispose;
-  }, []);
+  }, [uniwindContext]);
   if (Array.isArray(value)) {
     value.forEach((val, index) => {
       if (val === void 0 && __DEV__ && !warned) {

package/dist/module/hooks/useResolveClassNames.js

@@ -1,18 +1,21 @@
-import { useEffect, useReducer } from "react";
+import { useLayoutEffect, useReducer } from "react";
+import { useUniwindContext } from "../core/context.js";
 import { CSSListener, getWebStyles } from "../core/web/index.js";
 const emptyState = {};
 export const useResolveClassNames = (className) => {
+  const uniwindContext = useUniwindContext();
   const [styles, recreate] = useReducer(
-    () => className !== "" ? getWebStyles(className) : emptyState,
-    className !== "" ? getWebStyles(className) : emptyState
+    () => className !== "" ? getWebStyles(className, uniwindContext) : emptyState,
+    void 0,
+    () => className !== "" ? getWebStyles(className, uniwindContext) : emptyState
   );
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (className === "") {
       return;
     }
     recreate();
     const dispose = CSSListener.subscribeToClassName(className, recreate);
     return dispose;
-  }, [className]);
+  }, [className, uniwindContext]);
   return styles;
 };

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

@@ -1,21 +1,24 @@
-import { useEffect, useReducer } from "react";
+import { useLayoutEffect, useReducer } from "react";
+import { useUniwindContext } from "../core/context.js";
 import { UniwindListener } from "../core/listener.js";
 import { UniwindStore } from "../core/native/index.js";
 export const useResolveClassNames = (className) => {
+  const uniwindContext = useUniwindContext();
   const [uniwindState, recreate] = useReducer(
-    () => UniwindStore.getStyles(className),
-    UniwindStore.getStyles(className)
+    () => UniwindStore.getStyles(className, void 0, void 0, uniwindContext),
+    void 0,
+    () => UniwindStore.getStyles(className, void 0, void 0, uniwindContext)
   );
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (className !== "") {
       recreate();
     }
-  }, [className]);
-  useEffect(() => {
+  }, [className, uniwindContext]);
+  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.d.ts

@@ -1,5 +1,4 @@
-import { ThemeName } from '../core/types';
 export declare const useUniwind: () => {
-    theme: ThemeName;
+    theme: string;
     hasAdaptiveThemes: boolean;
 };

package/dist/module/hooks/useUniwind.js

@@ -1,11 +1,16 @@
-import { useEffect, useState } from "react";
+import { useLayoutEffect, useState } from "react";
 import { Uniwind } from "../core/index.js";
+import { useUniwindContext } from "../core/context.js";
 import { UniwindListener } from "../core/listener.js";
 import { StyleDependency } from "../types.js";
 export const useUniwind = () => {
+  const uniwindContext = useUniwindContext();
   const [theme, setTheme] = useState(Uniwind.currentTheme);
   const [hasAdaptiveThemes, setHasAdaptiveThemes] = useState(Uniwind.hasAdaptiveThemes);
-  useEffect(() => {
+  useLayoutEffect(() => {
+    if (uniwindContext.scopedTheme !== null) {
+      return;
+    }
     const dispose = UniwindListener.subscribe(() => {
       setTheme(Uniwind.currentTheme);
       setHasAdaptiveThemes(Uniwind.hasAdaptiveThemes);
@@ -13,9 +18,9 @@ export const useUniwind = () => {
     return () => {
       dispose();
     };
-  }, []);
+  }, [uniwindContext]);
   return {
-    theme,
-    hasAdaptiveThemes
+    theme: uniwindContext.scopedTheme ?? theme,
+    hasAdaptiveThemes: uniwindContext.scopedTheme !== null ? false : hasAdaptiveThemes
   };
 };

package/dist/module/index.d.ts

@@ -1,3 +1,4 @@
+export * from './components/ScopedTheme';
 export { Uniwind } from './core';
 export { withUniwind } from './hoc';
 export type { ApplyUniwind, ApplyUniwindOptions } from './hoc/types';

package/dist/module/index.js

@@ -1,3 +1,4 @@
+export * from "./components/ScopedTheme/index.js";
 export { Uniwind } from "./core/index.js";
 export { withUniwind } from "./hoc/index.js";
 export { useCSSVariable, useResolveClassNames, useUniwind } from "./hooks/index.js";

package/dist/module/vite/vite.js

@@ -2,7 +2,7 @@ import { normalizePath } from "@tailwindcss/node";
 import path from "path";
 import { name as UNIWIND_PACKAGE_NAME } from "../../package.json";
 import { buildCSS } from "../css/index.js";
-import { processFunctions } from "../css/processFunctions.js";
+import { UniwindCSSVisitor } from "../css-visitor/index.js";
 import { uniq } from "../metro/utils";
 import { buildDtsFile } from "../utils/buildDtsFile.js";
 import { stringifyThemes } from "../utils/stringifyThemes.js";
@@ -28,13 +28,19 @@ 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",
         lightningcss: {
-          visitor: {
-            Function: processFunctions
-          }
+          visitor: new UniwindCSSVisitor(themes)
         }
       },
       optimizeDeps: {

package/dist/shared/{uniwind.BJE4mTIG.cjs → uniwind.CyACT0sD.cjs}

@@ -4,7 +4,7 @@ const fs = require('fs');
 const path = require('path');
 const node = require('@tailwindcss/node');
 const lightningcss = require('lightningcss');
-const common = require('./uniwind.thpLtIq6.cjs');
+const common = require('./uniwind.nl8746mK.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
@@ -50,8 +50,8 @@ const ONE_PX = {
   type: "token",
   value: { type: "dimension", unit: "px", value: 1 }
 };
-const processFunctions = {
-  pixelRatio: (fn) => {
+class FunctionVisitor {
+  pixelRatio(fn) {
     return {
       type: "function",
       value: {
@@ -63,8 +63,8 @@ const processFunctions = {
         ]
       }
     };
-  },
-  fontScale: (fn) => {
+  }
+  fontScale(fn) {
     return {
       type: "function",
       value: {
@@ -79,9 +79,89 @@ const processFunctions = {
         ]
       }
     };
-  },
-  hairlineWidth: () => ONE_PX
-};
+  }
+  hairlineWidth() {
+    return ONE_PX;
+  }
+}
+
+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 }])
+      }
+    };
+  }
+}
+
+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;
+}
 
 const types = ["margin", "padding", "inset"];
 const sides = ["inset", "x", "y", "top", "bottom", "left", "right"];
@@ -355,7 +435,7 @@ const buildDtsFile = (dtsPath, stringifiedThemes) => {
 const stringifyThemes = (themes = []) => `[${themes.map((theme) => `'${theme}'`).join(", ")}]`;
 
 exports.Logger = Logger;
+exports.UniwindCSSVisitor = UniwindCSSVisitor;
 exports.buildCSS = buildCSS;
 exports.buildDtsFile = buildDtsFile;
-exports.processFunctions = processFunctions;
 exports.stringifyThemes = stringifyThemes;

package/dist/shared/{uniwind.xtsPxiWD.mjs → uniwind.D-ahjOrG.mjs}

@@ -2,7 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import { compile } from '@tailwindcss/node';
 import { transform } from 'lightningcss';
-import { n as name } from './uniwind.BxeutNHQ.mjs';
+import { n as name } from './uniwind.F-0-Rr--.mjs';
 
 const red = "\x1B[91m";
 const yellow = "\x1B[33m";
@@ -43,8 +43,8 @@ const ONE_PX = {
   type: "token",
   value: { type: "dimension", unit: "px", value: 1 }
 };
-const processFunctions = {
-  pixelRatio: (fn) => {
+class FunctionVisitor {
+  pixelRatio(fn) {
     return {
       type: "function",
       value: {
@@ -56,8 +56,8 @@ const processFunctions = {
         ]
       }
     };
-  },
-  fontScale: (fn) => {
+  }
+  fontScale(fn) {
     return {
       type: "function",
       value: {
@@ -72,9 +72,89 @@ const processFunctions = {
         ]
       }
     };
-  },
-  hairlineWidth: () => ONE_PX
-};
+  }
+  hairlineWidth() {
+    return ONE_PX;
+  }
+}
+
+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 }])
+      }
+    };
+  }
+}
+
+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;
+}
 
 const types = ["margin", "padding", "inset"];
 const sides = ["inset", "x", "y", "top", "bottom", "left", "right"];
@@ -347,4 +427,4 @@ const buildDtsFile = (dtsPath, stringifiedThemes) => {
 
 const stringifyThemes = (themes = []) => `[${themes.map((theme) => `'${theme}'`).join(", ")}]`;
 
-export { Logger as L, buildCSS as a, buildDtsFile as b, processFunctions as p, stringifyThemes as s };
+export { Logger as L, UniwindCSSVisitor as U, buildCSS as a, buildDtsFile as b, stringifyThemes as s };

package/dist/shared/{uniwind.BxeutNHQ.mjs → uniwind.F-0-Rr--.mjs}

@@ -25,6 +25,7 @@ const addMissingSpaces = (str) => pipe(str)(
   (x) => x.trim(),
   (x) => x.replace(/([^ {])this/g, "$1 this"),
   (x) => x.replace(/\](?=\d)/g, "] "),
+  (x) => x.replace(/\](?=")/g, "] "),
   (x) => x.replace(/\)(?=\S)/g, ") "),
   (x) => x.replace(/(?<!^)(?<!\s)"(?=\d)/g, '" ')
 );

package/dist/shared/{uniwind.thpLtIq6.cjs → uniwind.nl8746mK.cjs}

@@ -27,6 +27,7 @@ const addMissingSpaces = (str) => pipe(str)(
   (x) => x.trim(),
   (x) => x.replace(/([^ {])this/g, "$1 this"),
   (x) => x.replace(/\](?=\d)/g, "] "),
+  (x) => x.replace(/\](?=")/g, "] "),
   (x) => x.replace(/\)(?=\S)/g, ") "),
   (x) => x.replace(/(?<!^)(?<!\s)"(?=\d)/g, '" ')
 );

package/dist/vite/index.cjs

@@ -2,8 +2,8 @@
 
 const node = require('@tailwindcss/node');
 const path = require('path');
-const common = require('../shared/uniwind.thpLtIq6.cjs');
-const stringifyThemes = require('../shared/uniwind.BJE4mTIG.cjs');
+const common = require('../shared/uniwind.nl8746mK.cjs');
+const stringifyThemes = require('../shared/uniwind.CyACT0sD.cjs');
 require('fs');
 require('lightningcss');
 
@@ -33,13 +33,19 @@ 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",
         lightningcss: {
-          visitor: {
-            Function: stringifyThemes.processFunctions
-          }
+          visitor: new stringifyThemes.UniwindCSSVisitor(themes)
         }
       },
       optimizeDeps: {