@niibase/uniwind 1.6.2 → 1.6.3

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## What's Changed in 1.6.3
+
+
+
+### 🐛 Bug Fixes
+
+* use node resolver to prevent escaped traversal errors (#506) by @Brentlok
+* updateCSSVariable inside scoped theme (#502) by @Brentlok
+* inject cjs instead of esm to initialize (#501) by @Brentlok
+
+### 🏠 Chores
+
+* update config attributes and lint rules (#504) by @Brentlok
+* use oxlint instead of eslint (#503) by @Brentlok
+
+### 📦 Other
+
+* Merge branch 'pre-release' by @divineniiquaye
+
+
+**Full Changelog**: https://github.com/divineniiquaye/uniwind/compare/v1.6.2...v1.6.3
+
+
 ## What's Changed in 1.6.2
 
 

package/dist/common/common/utils.js

@@ -3,6 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isDefined = void 0;
+exports.isDefined = exports.arrayEquals = void 0;
 const isDefined = value => value !== void 0 && value !== null;
-exports.isDefined = isDefined;
+exports.isDefined = isDefined;
+const arrayEquals = (a, b) => {
+  if (a.length !== b.length) {
+    return false;
+  }
+  return a.every((value, index) => value === b[index]);
+};
+exports.arrayEquals = arrayEquals;

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

@@ -84,13 +84,10 @@ class UniwindConfigBuilder {
       }
     }
   }
-  updateCSSVariables(theme, variables) {
-    theme;
-    variables;
-  }
-  updateInsets(insets) {
-    insets;
-  }
+  // oxlint-disable-next-line typescript/no-unused-vars
+  updateCSSVariables(theme, cssVariables) {}
+  // oxlint-disable-next-line typescript/no-unused-vars
+  updateInsets(insets) {}
   __reinit(_, themes) {
     this._themes = themes;
   }

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

@@ -4,50 +4,69 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Uniwind = void 0;
+var _utils = require("../../common/utils");
 var _types = require("../../types");
 var _listener = require("../listener");
 var _logger = require("../logger");
+var _web = require("../web");
 var _config = require("./config.common");
 class UniwindConfigBuilder extends _config.UniwindConfigBuilder {
-  runtimeCSSVariables = /* @__PURE__ */new Map();
+  cssRules;
   constructor() {
     super();
   }
   updateCSSVariables(theme, variables) {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const uniwindRules = this.getUniwindDynamicCSSRules();
     Object.entries(variables).forEach(([varName, varValue]) => {
       if (!varName.startsWith("--") && __DEV__) {
         _logger.Logger.error(`CSS variable name must start with "--", instead got: ${varName}`);
-        return;
-      }
-      const runtimeCSSVariables = this.runtimeCSSVariables.get(theme) ?? {};
-      runtimeCSSVariables[varName] = varValue;
-      this.runtimeCSSVariables.set(theme, runtimeCSSVariables);
-      if (theme === this.currentTheme) {
-        this.applyCSSVariable(varName, varValue);
       }
+      const existingRules = Object.fromEntries(uniwindRules.map(rule => [rule.theme, (0, _web.getWebVariable)(varName, {
+        scopedTheme: rule.theme
+      })]));
+      uniwindRules.forEach(rule => {
+        if (rule.theme === theme) {
+          rule.style.setProperty(varName, typeof varValue === "number" ? `${varValue}px` : varValue);
+          return;
+        }
+        rule.style.setProperty(varName, existingRules[rule.theme] ?? null);
+      });
     });
-    if (theme === this.currentTheme) {
-      _listener.UniwindListener.notify([_types.StyleDependency.Variables]);
-    }
+    _listener.UniwindListener.notify([_types.StyleDependency.Variables]);
   }
-  onThemeChange() {
-    if (typeof document === "undefined") {
+  __reinit(generateStyleSheetCallback, themes) {
+    const oldThemes = this.themes;
+    super.__reinit(generateStyleSheetCallback, themes);
+    if ((0, _utils.arrayEquals)(themes, oldThemes)) {
       return;
     }
-    document.documentElement.removeAttribute("style");
-    const runtimeCSSVariables = this.runtimeCSSVariables.get(this.currentTheme);
-    if (!runtimeCSSVariables) {
-      return;
+    this.cssRules = void 0;
+    if (typeof document !== "undefined") {
+      document.querySelector("#uniwind-dynamic-styles")?.remove();
     }
-    Object.entries(runtimeCSSVariables).forEach(([varName, varValue]) => {
-      this.applyCSSVariable(varName, varValue);
-    });
   }
-  applyCSSVariable(varName, varValue) {
+  getUniwindDynamicCSSRules() {
+    if (this.cssRules) {
+      return this.cssRules;
+    }
     if (typeof document === "undefined") {
-      return;
+      return [];
     }
-    document.documentElement.style.setProperty(varName, typeof varValue === "number" ? `${varValue}px` : varValue);
+    const styleElement = document.createElement("style");
+    styleElement.innerText = this.themes.reduce((acc, theme) => {
+      return `${acc}.${theme}{}`;
+    }, "");
+    styleElement.setAttribute("id", "uniwind-dynamic-styles");
+    document.head.appendChild(styleElement);
+    const cssRules = Array.from(styleElement.sheet?.cssRules ?? []).filter(rule => "selectorText" in rule && "style" in rule).map(rule => ({
+      style: rule.style,
+      theme: rule.selectorText.replace(".", "")
+    }));
+    this.cssRules = cssRules;
+    return cssRules;
   }
 }
 const Uniwind = exports.Uniwind = new UniwindConfigBuilder();

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

@@ -37,9 +37,7 @@ class UniwindConfigBuilder extends _config.UniwindConfigBuilder {
         get: getValue
       });
     });
-    if (theme === this.currentTheme) {
-      _listener.UniwindListener.notify([_types.StyleDependency.Variables]);
-    }
+    _listener.UniwindListener.notify([_types.StyleDependency.Variables]);
   }
   updateInsets(insets) {
     _native.UniwindStore.runtime.insets.bottom = insets.bottom ?? 0;

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

@@ -54,7 +54,7 @@ class CSSListenerBuilder {
       listeners?.add(listener);
       disposables.push(() => listeners?.delete(listener));
     });
-    const disposeThemeListener = _listener.UniwindListener.subscribe(listener, [_types.StyleDependency.Theme]);
+    const disposeThemeListener = _listener.UniwindListener.subscribe(listener, [_types.StyleDependency.Theme, _types.StyleDependency.Variables]);
     return () => {
       disposables.forEach(disposable => disposable());
       disposeThemeListener();

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

@@ -5,18 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useCSSVariable = void 0;
 var _react = require("react");
+var _utils = require("../../common/utils");
 var _context = require("../../core/context");
 var _listener = require("../../core/listener");
 var _logger = require("../../core/logger");
 var _types = require("../../types");
 var _getVariableValue = require("./getVariableValue");
 const getValue = (name, uniwindContext) => Array.isArray(name) ? name.map(name2 => (0, _getVariableValue.getVariableValue)(name2, uniwindContext)) : (0, _getVariableValue.getVariableValue)(name, uniwindContext);
-const arrayEquals = (a, b) => {
-  if (a.length !== b.length) {
-    return false;
-  }
-  return a.every((value, index) => value === b[index]);
-};
 let warned = false;
 const logDevError = name => {
   warned = true;
@@ -28,7 +23,7 @@ const useCSSVariable = name => {
   const nameRef = (0, _react.useRef)(name);
   (0, _react.useLayoutEffect)(() => {
     if (Array.isArray(name) && Array.isArray(nameRef.current)) {
-      if (arrayEquals(name, nameRef.current)) {
+      if ((0, _utils.arrayEquals)(name, nameRef.current)) {
         return;
       }
       setValue(getValue(name, uniwindContext));

package/dist/metro/index.cjs

@@ -78,8 +78,11 @@ const nativeResolver = (extraComponents) => ({
 }) => {
   const resolution = resolver(context, moduleName, platform);
   if (cachedInternalBasePath === null) {
-    const componentsResolution = resolver(context, `${common.name}/components`, platform);
-    cachedInternalBasePath = componentsResolution.type === "sourceFile" ? node_path.join(node_path.dirname(componentsResolution.filePath), "../..") : "";
+    try {
+      cachedInternalBasePath = node_path.dirname(require.resolve(`${common.name}/package.json`));
+    } catch {
+      cachedInternalBasePath = "";
+    }
   }
   const isInternal = cachedInternalBasePath !== "" && context.originModulePath.startsWith(cachedInternalBasePath);
   const isFromNodeModules = context.originModulePath.includes(`${node_path.sep}node_modules${node_path.sep}`);
@@ -115,8 +118,11 @@ const webResolver = (extraComponents) => ({
 }) => {
   const resolution = resolver(context, moduleName, platform);
   if (cachedInternalBasePath === null) {
-    const componentsResolution = resolver(context, `${common.name}/components`, platform);
-    cachedInternalBasePath = componentsResolution.type === "sourceFile" ? node_path.join(node_path.dirname(componentsResolution.filePath), "../../../..") : "";
+    try {
+      cachedInternalBasePath = node_path.dirname(require.resolve(`${common.name}/package.json`));
+    } catch {
+      cachedInternalBasePath = "";
+    }
   }
   if (cachedInternalBasePath !== "" && context.originModulePath.startsWith(cachedInternalBasePath) || resolution.type !== "sourceFile" || !resolution.filePath.includes(`${node_path.sep}react-native-web${node_path.sep}`)) {
     return resolution;

package/dist/metro/index.mjs

@@ -2,7 +2,7 @@ import { P as Platform } from '../shared/uniwind.JSWK3vHl.mjs';
 import FileStoreBase from 'metro-cache/private/stores/FileStore';
 import os from 'os';
 import path from 'path';
-import { join, dirname, sep, basename } from 'node:path';
+import { dirname, sep, basename } from 'node:path';
 import { n as name, u as uniq } from '../shared/uniwind.PtWWxxnh.mjs';
 
 class FileStore extends FileStoreBase {
@@ -70,8 +70,11 @@ const nativeResolver = (extraComponents) => ({
 }) => {
   const resolution = resolver(context, moduleName, platform);
   if (cachedInternalBasePath === null) {
-    const componentsResolution = resolver(context, `${name}/components`, platform);
-    cachedInternalBasePath = componentsResolution.type === "sourceFile" ? join(dirname(componentsResolution.filePath), "../..") : "";
+    try {
+      cachedInternalBasePath = dirname(require.resolve(`${name}/package.json`));
+    } catch {
+      cachedInternalBasePath = "";
+    }
   }
   const isInternal = cachedInternalBasePath !== "" && context.originModulePath.startsWith(cachedInternalBasePath);
   const isFromNodeModules = context.originModulePath.includes(`${sep}node_modules${sep}`);
@@ -107,8 +110,11 @@ const webResolver = (extraComponents) => ({
 }) => {
   const resolution = resolver(context, moduleName, platform);
   if (cachedInternalBasePath === null) {
-    const componentsResolution = resolver(context, `${name}/components`, platform);
-    cachedInternalBasePath = componentsResolution.type === "sourceFile" ? join(dirname(componentsResolution.filePath), "../../../..") : "";
+    try {
+      cachedInternalBasePath = dirname(require.resolve(`${name}/package.json`));
+    } catch {
+      cachedInternalBasePath = "";
+    }
   }
   if (cachedInternalBasePath !== "" && context.originModulePath.startsWith(cachedInternalBasePath) || resolution.type !== "sourceFile" || !resolution.filePath.includes(`${sep}react-native-web${sep}`)) {
     return resolution;

package/dist/metro/metro-transformer.cjs

@@ -158,8 +158,7 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
         minWidth,
         maxWidth,
         colorScheme,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        important,
+        important: _,
         importantProperties,
         active,
         focus,
@@ -961,7 +960,6 @@ class CSS {
     this.logUnsupported(`Unsupported value - ${JSON.stringify(declarationValue)}`);
     return void 0;
   }
-  // eslint-disable-next-line @typescript-eslint/member-ordering
   static TRANSFORM_TYPES = /* @__PURE__ */ new Set([
     "translate",
     "translateX",
@@ -2124,7 +2122,7 @@ const transform = async (config, projectRoot, filePath, data, options) => {
   const isWeb = platform === consts.Platform.Web;
   data = Buffer.from(
     isWeb ? virtualCode : [
-      `import { Uniwind } from '${common.name}';`,
+      `const { Uniwind } = require('${common.name}');`,
       `Uniwind.__reinit(rt => ${virtualCode}, ${injectedThemesCode});`
     ].join(""),
     "utf-8"

package/dist/metro/metro-transformer.mjs

@@ -151,8 +151,7 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
         minWidth,
         maxWidth,
         colorScheme,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        important,
+        important: _,
         importantProperties,
         active,
         focus,
@@ -954,7 +953,6 @@ class CSS {
     this.logUnsupported(`Unsupported value - ${JSON.stringify(declarationValue)}`);
     return void 0;
   }
-  // eslint-disable-next-line @typescript-eslint/member-ordering
   static TRANSFORM_TYPES = /* @__PURE__ */ new Set([
     "translate",
     "translateX",
@@ -2117,7 +2115,7 @@ const transform = async (config, projectRoot, filePath, data, options) => {
   const isWeb = platform === Platform.Web;
   data = Buffer.from(
     isWeb ? virtualCode : [
-      `import { Uniwind } from '${name}';`,
+      `const { Uniwind } = require('${name}');`,
       `Uniwind.__reinit(rt => ${virtualCode}, ${injectedThemesCode});`
     ].join(""),
     "utf-8"

package/dist/module/common/utils.d.ts

@@ -1 +1,2 @@
 export declare const isDefined: <T>(value: T) => value is NonNullable<T>;
+export declare const arrayEquals: <T>(a: Array<T>, b: Array<T>) => boolean;

package/dist/module/common/utils.js

@@ -1 +1,7 @@
 export const isDefined = (value) => value !== void 0 && value !== null;
+export const arrayEquals = (a, b) => {
+  if (a.length !== b.length) {
+    return false;
+  }
+  return a.every((value, index) => value === b[index]);
+};

package/dist/module/core/config/config.common.d.ts

@@ -15,7 +15,7 @@ export declare class UniwindConfigBuilder {
         as: T;
     } & ApplyUniwind<Omit<ComponentPropsWithRef<T>, 'as'>>): import("react").FunctionComponentElement<any>;
     setTheme(theme: ThemeName | typeof SYSTEM_THEME): void;
-    updateCSSVariables(theme: ThemeName, variables: CSSVariables): void;
+    updateCSSVariables(theme: ThemeName, cssVariables: CSSVariables): void;
     updateInsets(insets: Insets): void;
     protected __reinit(_: GenerateStyleSheetsCallback, themes: Array<string>): void;
     protected onThemeChange(): void;

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

@@ -76,12 +76,11 @@ export class UniwindConfigBuilder {
       }
     }
   }
-  updateCSSVariables(theme, variables) {
-    theme;
-    variables;
+  // oxlint-disable-next-line typescript/no-unused-vars
+  updateCSSVariables(theme, cssVariables) {
   }
+  // oxlint-disable-next-line typescript/no-unused-vars
   updateInsets(insets) {
-    insets;
   }
   __reinit(_, themes) {
     this._themes = themes;

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

@@ -1,11 +1,11 @@
-import { CSSVariables, ThemeName } from '../types';
+import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types';
 import { UniwindConfigBuilder as UniwindConfigBuilderBase } from './config.common';
 declare class UniwindConfigBuilder extends UniwindConfigBuilderBase {
-    private runtimeCSSVariables;
+    private cssRules?;
     constructor();
     updateCSSVariables(theme: ThemeName, variables: CSSVariables): void;
-    protected onThemeChange(): void;
-    private applyCSSVariable;
+    protected __reinit(generateStyleSheetCallback: GenerateStyleSheetsCallback, themes: Array<string>): void;
+    private getUniwindDynamicCSSRules;
 }
 export declare const Uniwind: UniwindConfigBuilder;
 export {};

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

@@ -1,50 +1,69 @@
+import { arrayEquals } from "../../common/utils.js";
 import { StyleDependency } from "../../types.js";
 import { UniwindListener } from "../listener.js";
 import { Logger } from "../logger.js";
+import { getWebVariable } from "../web/index.js";
 import { UniwindConfigBuilder as UniwindConfigBuilderBase } from "./config.common.js";
 class UniwindConfigBuilder extends UniwindConfigBuilderBase {
-  runtimeCSSVariables = /* @__PURE__ */ new Map();
+  cssRules;
   constructor() {
     super();
   }
   updateCSSVariables(theme, variables) {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const uniwindRules = this.getUniwindDynamicCSSRules();
     Object.entries(variables).forEach(([varName, varValue]) => {
       if (!varName.startsWith("--") && __DEV__) {
         Logger.error(`CSS variable name must start with "--", instead got: ${varName}`);
-        return;
-      }
-      const runtimeCSSVariables = this.runtimeCSSVariables.get(theme) ?? {};
-      runtimeCSSVariables[varName] = varValue;
-      this.runtimeCSSVariables.set(theme, runtimeCSSVariables);
-      if (theme === this.currentTheme) {
-        this.applyCSSVariable(varName, varValue);
       }
+      const existingRules = Object.fromEntries(
+        uniwindRules.map((rule) => [rule.theme, getWebVariable(varName, { scopedTheme: rule.theme })])
+      );
+      uniwindRules.forEach((rule) => {
+        if (rule.theme === theme) {
+          rule.style.setProperty(
+            varName,
+            typeof varValue === "number" ? `${varValue}px` : varValue
+          );
+          return;
+        }
+        rule.style.setProperty(varName, existingRules[rule.theme] ?? null);
+      });
     });
-    if (theme === this.currentTheme) {
-      UniwindListener.notify([StyleDependency.Variables]);
-    }
+    UniwindListener.notify([StyleDependency.Variables]);
   }
-  onThemeChange() {
-    if (typeof document === "undefined") {
+  __reinit(generateStyleSheetCallback, themes) {
+    const oldThemes = this.themes;
+    super.__reinit(generateStyleSheetCallback, themes);
+    if (arrayEquals(themes, oldThemes)) {
       return;
     }
-    document.documentElement.removeAttribute("style");
-    const runtimeCSSVariables = this.runtimeCSSVariables.get(this.currentTheme);
-    if (!runtimeCSSVariables) {
-      return;
+    this.cssRules = void 0;
+    if (typeof document !== "undefined") {
+      document.querySelector("#uniwind-dynamic-styles")?.remove();
     }
-    Object.entries(runtimeCSSVariables).forEach(([varName, varValue]) => {
-      this.applyCSSVariable(varName, varValue);
-    });
   }
-  applyCSSVariable(varName, varValue) {
+  getUniwindDynamicCSSRules() {
+    if (this.cssRules) {
+      return this.cssRules;
+    }
     if (typeof document === "undefined") {
-      return;
+      return [];
     }
-    document.documentElement.style.setProperty(
-      varName,
-      typeof varValue === "number" ? `${varValue}px` : varValue
+    const styleElement = document.createElement("style");
+    styleElement.innerText = this.themes.reduce(
+      (acc, theme) => {
+        return `${acc}.${theme}{}`;
+      },
+      ""
     );
+    styleElement.setAttribute("id", "uniwind-dynamic-styles");
+    document.head.appendChild(styleElement);
+    const cssRules = Array.from(styleElement.sheet?.cssRules ?? []).filter((rule) => "selectorText" in rule && "style" in rule).map((rule) => ({ style: rule.style, theme: rule.selectorText.replace(".", "") }));
+    this.cssRules = cssRules;
+    return cssRules;
   }
 }
 export const Uniwind = new UniwindConfigBuilder();

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

@@ -31,9 +31,7 @@ class UniwindConfigBuilder extends UniwindConfigBuilderBase {
         get: getValue
       });
     });
-    if (theme === this.currentTheme) {
-      UniwindListener.notify([StyleDependency.Variables]);
-    }
+    UniwindListener.notify([StyleDependency.Variables]);
   }
   updateInsets(insets) {
     UniwindStore.runtime.insets.bottom = insets.bottom ?? 0;

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

@@ -49,7 +49,7 @@ class CSSListenerBuilder {
       listeners?.add(listener);
       disposables.push(() => listeners?.delete(listener));
     });
-    const disposeThemeListener = UniwindListener.subscribe(listener, [StyleDependency.Theme]);
+    const disposeThemeListener = UniwindListener.subscribe(listener, [StyleDependency.Theme, StyleDependency.Variables]);
     return () => {
       disposables.forEach((disposable) => disposable());
       disposeThemeListener();

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

@@ -1,16 +1,11 @@
 import { useLayoutEffect, useRef, useState } from "react";
+import { arrayEquals } from "../../common/utils.js";
 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, uniwindContext) => Array.isArray(name) ? name.map((name2) => getVariableValue(name2, uniwindContext)) : getVariableValue(name, uniwindContext);
-const arrayEquals = (a, b) => {
-  if (a.length !== b.length) {
-    return false;
-  }
-  return a.every((value, index) => value === b[index]);
-};
 let warned = false;
 const logDevError = (name) => {
   warned = true;

package/package.json

@@ -1,7 +1,7 @@
 {
     "private": false,
     "name": "@niibase/uniwind",
-    "version": "1.6.2",
+    "version": "1.6.3",
     "description": "A fork of Uniwind with Reanimated 4 support",
     "homepage": "https://uniwind.dev",
     "author": "Unistack",
@@ -12,8 +12,8 @@
         "precommit": "bun lint",
         "build": "unbuild",
         "check:typescript": "tsc --noEmit",
-        "lint": "eslint src",
-        "lint:fix": "eslint src --fix",
+        "lint": "oxlint src",
+        "lint:fix": "oxlint src --fix",
         "format": "dprint fmt",
         "prepublishOnly": "bun run build",
         "circular:check": "dpdm --no-warning --no-tree -T --exit-code circular:1 'src/**/*.ts' 'src/**/*.tsx'",

package/src/common/utils.ts

@@ -1 +1,9 @@
 export const isDefined = <T>(value: T): value is NonNullable<T> => value !== undefined && value !== null
+
+export const arrayEquals = <T>(a: Array<T>, b: Array<T>) => {
+    if (a.length !== b.length) {
+        return false
+    }
+
+    return a.every((value, index) => value === b[index])
+}

package/src/core/config/config.common.ts

@@ -7,8 +7,7 @@ import { UniwindListener } from '../listener'
 import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types'
 
 const SYSTEM_THEME = 'system' as const
-
-// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+// Platform.constants is not defined in RNW
 const RN_VERSION = Platform.constants?.reactNativeVersion?.minor ?? 0
 const UNSPECIFIED_THEME = RN_VERSION >= 82 ? 'unspecified' : undefined
 
@@ -21,7 +20,6 @@ export class UniwindConfigBuilder {
         Appearance.addChangeListener(event => {
             const colorScheme = event.colorScheme === 'unspecified'
                 ? ColorScheme.Light
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                 : event.colorScheme ?? ColorScheme.Light
             const prevTheme = this.#currentTheme
 
@@ -108,15 +106,14 @@ export class UniwindConfigBuilder {
         }
     }
 
-    updateCSSVariables(theme: ThemeName, variables: CSSVariables) {
+    // oxlint-disable-next-line typescript/no-unused-vars
+    updateCSSVariables(theme: ThemeName, cssVariables: CSSVariables) {
         // noop
-        theme
-        variables
     }
 
+    // oxlint-disable-next-line typescript/no-unused-vars
     updateInsets(insets: Insets) {
         // noop
-        insets
     }
 
     protected __reinit(_: GenerateStyleSheetsCallback, themes: Array<string>) {

package/src/core/config/config.native.ts

@@ -44,9 +44,7 @@ class UniwindConfigBuilder extends UniwindConfigBuilderBase {
             })
         })
 
-        if (theme === this.currentTheme) {
-            UniwindListener.notify([StyleDependency.Variables])
-        }
+        UniwindListener.notify([StyleDependency.Variables])
     }
 
     updateInsets(insets: Insets) {

package/src/core/config/config.ts

@@ -1,66 +1,98 @@
+import { arrayEquals } from '../../common/utils'
 import { StyleDependency } from '../../types'
 import { UniwindListener } from '../listener'
 import { Logger } from '../logger'
-import { CSSVariables, ThemeName } from '../types'
+import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types'
+import { getWebVariable } from '../web'
 import { UniwindConfigBuilder as UniwindConfigBuilderBase } from './config.common'
 
+type UniwindCSSRule = {
+    style: CSSStyleDeclaration
+    theme: ThemeName
+}
+
 class UniwindConfigBuilder extends UniwindConfigBuilderBase {
-    private runtimeCSSVariables = new Map<ThemeName, CSSVariables>()
+    private cssRules?: Array<UniwindCSSRule>
 
     constructor() {
         super()
     }
 
     updateCSSVariables(theme: ThemeName, variables: CSSVariables) {
+        if (typeof document === 'undefined') {
+            return
+        }
+
+        const uniwindRules = this.getUniwindDynamicCSSRules()
+
         Object.entries(variables).forEach(([varName, varValue]) => {
             if (!varName.startsWith('--') && __DEV__) {
                 Logger.error(`CSS variable name must start with "--", instead got: ${varName}`)
-
-                return
             }
 
-            const runtimeCSSVariables = this.runtimeCSSVariables.get(theme) ?? {}
+            const existingRules: Record<ThemeName, string | undefined> = Object.fromEntries(
+                uniwindRules.map(rule => [rule.theme, getWebVariable(varName, { scopedTheme: rule.theme })]),
+            )
 
-            runtimeCSSVariables[varName] = varValue
-            this.runtimeCSSVariables.set(theme, runtimeCSSVariables)
+            uniwindRules.forEach(rule => {
+                if (rule.theme === theme) {
+                    rule.style.setProperty(
+                        varName,
+                        typeof varValue === 'number' ? `${varValue}px` : varValue,
+                    )
 
-            if (theme === this.currentTheme) {
-                this.applyCSSVariable(varName, varValue)
-            }
+                    return
+                }
+
+                rule.style.setProperty(varName, existingRules[rule.theme] ?? null)
+            })
         })
 
-        if (theme === this.currentTheme) {
-            UniwindListener.notify([StyleDependency.Variables])
-        }
+        UniwindListener.notify([StyleDependency.Variables])
     }
 
-    protected onThemeChange() {
-        if (typeof document === 'undefined') {
+    protected __reinit(generateStyleSheetCallback: GenerateStyleSheetsCallback, themes: Array<string>) {
+        const oldThemes = this.themes
+        super.__reinit(generateStyleSheetCallback, themes)
+
+        if (arrayEquals(themes, oldThemes)) {
             return
         }
 
-        document.documentElement.removeAttribute('style')
-
-        const runtimeCSSVariables = this.runtimeCSSVariables.get(this.currentTheme)
+        this.cssRules = undefined
 
-        if (!runtimeCSSVariables) {
-            return
+        if (typeof document !== 'undefined') {
+            document.querySelector('#uniwind-dynamic-styles')?.remove()
         }
-
-        Object.entries(runtimeCSSVariables).forEach(([varName, varValue]) => {
-            this.applyCSSVariable(varName, varValue)
-        })
     }
 
-    private applyCSSVariable(varName: keyof CSSVariables, varValue: CSSVariables[keyof CSSVariables]) {
+    private getUniwindDynamicCSSRules() {
+        if (this.cssRules) {
+            return this.cssRules
+        }
+
         if (typeof document === 'undefined') {
-            return
+            return []
         }
 
-        document.documentElement.style.setProperty(
-            varName,
-            typeof varValue === 'number' ? `${varValue}px` : varValue,
+        const styleElement = document.createElement('style')
+
+        styleElement.innerText = this.themes.reduce(
+            (acc, theme) => {
+                return `${acc}.${theme}{}`
+            },
+            '',
         )
+        styleElement.setAttribute('id', 'uniwind-dynamic-styles')
+        document.head.appendChild(styleElement)
+
+        const cssRules = Array.from(styleElement.sheet?.cssRules ?? [])
+            .filter((rule): rule is CSSStyleRule => 'selectorText' in rule && 'style' in rule)
+            .map((rule): UniwindCSSRule => ({ style: rule.style, theme: rule.selectorText.replace('.', '') }))
+
+        this.cssRules = cssRules
+
+        return cssRules
     }
 }
 

package/src/core/logger.ts

@@ -1,5 +1,3 @@
-/* eslint-disable no-console */
-
 export class Logger {
     static log(message: string) {
         console.log(`Uniwind - ${message}`)

package/src/core/native/parsers/transforms.ts

@@ -1,4 +1,3 @@
-/* eslint-disable max-depth */
 const transforms = [
     'translateX',
     'translateY',

package/src/core/native/store.ts

@@ -1,4 +1,3 @@
-/* eslint-disable max-depth */
 import { Dimensions, Platform } from 'react-native'
 import { CSSAnimationKeyframes } from 'react-native-reanimated'
 import { Platform as UniwindPlatform, UNIWIND_PLATFORM_VARIABLES, UNIWIND_THEME_VARIABLES } from '../../common/consts'

package/src/core/web/cssListener.ts

@@ -54,7 +54,6 @@ class CSSListenerBuilder {
             const mediaQuery = this.classNameMediaQueryListeners.get(className)
 
             if (!mediaQuery) {
-                // eslint-disable-next-line no-empty-function
                 return () => {}
             }
 
@@ -64,7 +63,7 @@ class CSSListenerBuilder {
             disposables.push(() => listeners?.delete(listener))
         })
 
-        const disposeThemeListener = UniwindListener.subscribe(listener, [StyleDependency.Theme])
+        const disposeThemeListener = UniwindListener.subscribe(listener, [StyleDependency.Theme, StyleDependency.Variables])
 
         return () => {
             disposables.forEach(disposable => disposable())
@@ -129,7 +128,7 @@ class CSSListenerBuilder {
                 continue
             }
 
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition, @typescript-eslint/strict-boolean-expressions
+            // oxlint-disable-next-line @typescript-eslint/strict-boolean-expressions
             if (!rules) {
                 continue
             }

package/src/hoc/withUniwind.native.tsx

@@ -120,7 +120,6 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
 
         const existingStyle = props[propName]
 
-        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
         if (existingStyle) {
             acc.generatedProps[propName] = [styles, existingStyle]
 

package/src/hooks/useCSSVariable/useCSSVariable.ts

@@ -1,4 +1,5 @@
 import { useLayoutEffect, useRef, useState } from 'react'
+import { arrayEquals } from '../../common/utils'
 import { useUniwindContext } from '../../core/context'
 import { UniwindListener } from '../../core/listener'
 import { Logger } from '../../core/logger'
@@ -11,14 +12,6 @@ const getValue = (name: string | Array<string>, uniwindContext: UniwindContextTy
         ? name.map(name => getVariableValue(name, uniwindContext))
         : getVariableValue(name, uniwindContext)
 
-const arrayEquals = <T>(a: Array<T>, b: Array<T>) => {
-    if (a.length !== b.length) {
-        return false
-    }
-
-    return a.every((value, index) => value === b[index])
-}
-
 let warned = false
 
 const logDevError = (name: string) => {

package/src/metro/addMetaToStylesTemplate.ts

@@ -41,8 +41,7 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlat
                     minWidth,
                     maxWidth,
                     colorScheme,
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    important,
+                    important: _,
                     importantProperties,
                     active,
                     focus,

package/src/metro/logger.ts

@@ -1,5 +1,3 @@
-/* eslint-disable no-console */
-
 const red = '\x1b[91m'
 const yellow = '\x1b[33m'
 const blue = '\x1b[36m'

package/src/metro/metro-css-patches.ts

@@ -6,7 +6,6 @@ import path from 'path'
 
 class FileStore<T> extends FileStoreBase<T> {
     async set(key: Buffer, value: any): Promise<void> {
-        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
         if (value?.output?.[0]?.data?.css?.skipCache) {
             return
         }
@@ -27,7 +26,7 @@ interface TraverseDependencies {
 export const patchMetroGraphToSupportUncachedModules = () => {
     const { Graph } = require('metro/private/DeltaBundler/Graph') as typeof import('metro/private/DeltaBundler/Graph')
 
-    // eslint-disable-next-line @typescript-eslint/unbound-method
+    // oxlint-disable-next-line @typescript-eslint/unbound-method
     const original_traverseDependencies = Graph.prototype.traverseDependencies as unknown as TraverseDependencies
 
     if (original_traverseDependencies.__patched) {

package/src/metro/metro-transformer.ts

@@ -91,7 +91,7 @@ export const transform = async (
         isWeb
             ? virtualCode
             : [
-                `import { Uniwind } from '${name}';`,
+                `const { Uniwind } = require('${name}');`,
                 `Uniwind.__reinit(rt => ${virtualCode}, ${injectedThemesCode});`,
             ].join(''),
         'utf-8',

package/src/metro/processor/css.ts

@@ -590,7 +590,6 @@ export class CSS {
         return undefined
     }
 
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     private static readonly TRANSFORM_TYPES = new Set([
         'translate',
         'translateX',

package/src/metro/processor/functions.ts

@@ -239,7 +239,6 @@ export class Functions {
                 .replace(/"/g, '')
                 .replace(new RegExp(unit, 'g'), '')
 
-            // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func
             return new Function(`return ${numericValue} + '${unit}'`)()
         } catch {
             this.logger.error(`Invalid calc ${value}`)

package/src/metro/resolvers.ts

@@ -1,5 +1,5 @@
 import { CustomResolutionContext, CustomResolver } from 'metro-resolver'
-import { basename, dirname, join, sep } from 'node:path'
+import { basename, dirname, sep } from 'node:path'
 import { name } from '../../package.json'
 
 type ResolverConfig = {
@@ -47,12 +47,11 @@ export const nativeResolver = (extraComponents: Record<string, string>) =>
     const resolution = resolver(context, moduleName, platform)
 
     if (cachedInternalBasePath === null) {
-        const componentsResolution = resolver(context, `${name}/components`, platform)
-
-        cachedInternalBasePath = componentsResolution.type === 'sourceFile'
-            // Go from src/components to root
-            ? join(dirname(componentsResolution.filePath), '../..')
-            : ''
+        try {
+            cachedInternalBasePath = dirname(require.resolve(`${name}/package.json`))
+        } catch {
+            cachedInternalBasePath = ''
+        }
     }
 
     const isInternal = cachedInternalBasePath !== '' && context.originModulePath.startsWith(cachedInternalBasePath)
@@ -106,13 +105,13 @@ export const webResolver = (extraComponents: Record<string, string>) =>
     const resolution = resolver(context, moduleName, platform)
 
     if (cachedInternalBasePath === null) {
-        const componentsResolution = resolver(context, `${name}/components`, platform)
-
-        cachedInternalBasePath = componentsResolution.type === 'sourceFile'
-            // Go from dist/module/components/web to root
-            ? join(dirname(componentsResolution.filePath), '../../../..')
-            : ''
+        try {
+            cachedInternalBasePath = dirname(require.resolve(`${name}/package.json`))
+        } catch {
+            cachedInternalBasePath = ''
+        }
     }
+
     if (
         (cachedInternalBasePath !== '' && context.originModulePath.startsWith(cachedInternalBasePath))
         || resolution.type !== 'sourceFile'

package/src/metro/utils/common.ts

@@ -52,7 +52,6 @@ export const uniq = <T>(arr: Array<T>) => Array.from(new Set(arr))
 
 export const isValidJSValue = (jsValueString: string) => {
     try {
-        // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func
         new Function(`const test = ${jsValueString}`)
 
         return true

package/src/metro/utils/serialize.ts

@@ -103,7 +103,6 @@ export const serializeJSObject = (obj: Record<string, any>, serializer: (key: st
         serializedValues =>
             serializedValues.filter(serializedValue => {
                 try {
-                    // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func
                     new Function(`function validateJS() { const obj = ({ ${serializedValue} }) }`)
 
                     return true

package/src/types.ts

@@ -20,5 +20,4 @@ export const enum ColorScheme {
     Dark = 'dark',
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface UniwindConfig {}