@niibase/uniwind 1.0.13 → 1.1.1

package/dist/common/core/index.js

@@ -3,14 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.Uniwind = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _hoc = require("../hoc");
 var _config = require("./config");
-Object.keys(_config).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _config[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _config[key];
-    }
+const Box = ({
+  as,
+  ...props
+}) => {
+  const StyledComponent = (0, _react.useMemo)(() => (0, _hoc.withUniwind)(as), [as]);
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(StyledComponent, {
+    ...props
   });
-});
+};
+const Uniwind = exports.Uniwind = Object.assign(Box, _config.Uniwind);

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

@@ -15,7 +15,6 @@ class UniwindStoreBuilder {
   vars = {};
   runtimeThemeVariables = /* @__PURE__ */new Map();
   stylesheet = {};
-  varsWithMediaQueries = [];
   cache = /* @__PURE__ */new Map();
   generateStyleSheetCallbackResult = null;
   getStyles(className, state) {
@@ -44,15 +43,11 @@ class UniwindStoreBuilder {
     const {
       scopedVars,
       stylesheet,
-      vars,
-      varsWithMediaQueries
+      vars
     } = config;
-    this.vars = varsWithMediaQueries.length > 0 ? {
-      ...vars
-    } : vars;
-    this.varsWithMediaQueries = varsWithMediaQueries;
     this.generateStyleSheetCallbackResult = config;
     this.stylesheet = stylesheet;
+    this.vars = vars;
     const themeVars = scopedVars[`__uniwind-theme-${this.runtime.currentThemeName}`];
     const platformVars = scopedVars[`__uniwind-platform-${_reactNative.Platform.OS}`];
     const runtimeThemeVars = this.runtimeThemeVariables.get(this.runtime.currentThemeName);
@@ -69,36 +64,11 @@ class UniwindStoreBuilder {
       _listener.UniwindListener.notifyAll();
     }
   };
-  resolveMediaQueryVars(dependencies) {
-    for (const [varName, mqVariants] of this.varsWithMediaQueries) {
-      let bestMatch = null;
-      for (const variant of mqVariants) {
-        if (variant.orientation !== null) dependencies.add(_types.StyleDependency.Orientation);
-        if (variant.maxWidth !== null || variant.minWidth !== null) dependencies.add(_types.StyleDependency.Dimensions);
-        if (variant.colorScheme !== null) {
-          dependencies.add(_types.StyleDependency.ColorScheme);
-          dependencies.add(_types.StyleDependency.Theme);
-        }
-        if (variant.minWidth !== null && variant.minWidth > this.runtime.screen.width || variant.maxWidth !== null && variant.maxWidth !== Number.MAX_VALUE && variant.maxWidth < this.runtime.screen.width || variant.orientation !== null && this.runtime.orientation !== variant.orientation || variant.colorScheme !== null && this.runtime.currentThemeName !== variant.colorScheme) {
-          continue;
-        }
-        if (bestMatch === null || (variant.minWidth ?? 0) > (bestMatch.minWidth ?? 0)) bestMatch = variant;
-      }
-      if (bestMatch !== null) {
-        Object.defineProperty(this.vars, varName, {
-          configurable: true,
-          enumerable: true,
-          get: () => bestMatch.value
-        });
-      }
-    }
-    return this.vars;
-  }
   resolveStyles(classNames, state) {
     const result = {};
+    let vars = this.vars;
     const dependencies = /* @__PURE__ */new Set();
     const bestBreakpoints = /* @__PURE__ */new Map();
-    let vars = this.resolveMediaQueryVars(dependencies);
     for (const className of classNames.split(" ")) {
       if (!(className in this.stylesheet)) {
         continue;

package/dist/common/css/themes.js

@@ -17,7 +17,7 @@ const readFileSafe = filePath => {
     return null;
   }
 };
-const isExcludedDependency = url => [url.includes("node_modules/tailwindcss"), url.includes("node_modules/@tailwindcss"), url.includes("node_modules/uniwind")].some(Boolean);
+const isExcludedDependency = url => [url.includes("node_modules/tailwindcss"), url.includes("node_modules/@tailwindcss"), url.includes("node_modules/@niibase/uniwind"), url.includes("node_modules/uniwind")].some(Boolean);
 const generateCSSForThemes = async (themes, input) => {
   const themesVariables = Object.fromEntries(themes.map(theme => [theme, /* @__PURE__ */new Set()]));
   const findVariantsRec = async cssPath => {

package/dist/common/utils/buildDtsFile.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.buildDtsFile = void 0;
 var _fs = _interopRequireDefault(require("fs"));
-var _packageName = require("../metro/packageName");
+var _package = require("../../package.json");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const buildDtsFile = (dtsPath, stringifiedThemes) => {
   const oldDtsContent = _fs.default.existsSync(dtsPath) ? _fs.default.readFileSync(dtsPath, "utf-8") : "";
-  const dtsContent = [`// NOTE: This file is generated by ${_packageName.packageName} and it should not be edited manually.`, `/// <reference types="${_packageName.packageName}/types" />`, "", `declare module '${_packageName.packageName}' {`, `    export interface UniwindConfig {`, `        themes: readonly ${stringifiedThemes}`, `    }`, `}`, "", `export {}`, ""].join("\n");
+  const dtsContent = [`// NOTE: This file is generated by ${_package.name} and it should not be edited manually.`, `/// <reference types="${_package.name}/types" />`, "", `declare module '${_package.name}' {`, `    export interface UniwindConfig {`, `        themes: readonly ${stringifiedThemes}`, `    }`, `}`, "", `export {}`, ""].join("\n");
   if (oldDtsContent === dtsContent) {
     return;
   }

package/dist/common/vite/vite.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.uniwind = void 0;
 var _node = require("@tailwindcss/node");
 var _path = _interopRequireDefault(require("path"));
+var _package = require("../../package.json");
 var _css = require("../css");
 var _processFunctions = require("../css/processFunctions");
-var _packageName = require("../metro/packageName");
 var _utils = require("../metro/utils");
 var _buildDtsFile = require("../utils/buildDtsFile");
 var _stringifyThemes = require("../utils/stringifyThemes");
@@ -34,7 +34,7 @@ const uniwind = ({
         }
       },
       optimizeDeps: {
-        exclude: [_packageName.packageName, "react-native"]
+        exclude: [_package.name, "react-native"]
       },
       resolve: {
         alias: [{
@@ -42,7 +42,7 @@ const uniwind = ({
           replacement: componentPath,
           customResolver: {
             resolveId(_, importer) {
-              if (importer !== void 0 && (0, _node.normalizePath)(importer).includes(`${_packageName.packageName}/dist`)) {
+              if (importer !== void 0 && (0, _node.normalizePath)(importer).includes(`${_package.name}/dist`)) {
                 return this.resolve("react-native-web");
               }
               return componentPath;
@@ -53,7 +53,7 @@ const uniwind = ({
     }),
     transform: (code, id) => {
       const normalizedId = (0, _node.normalizePath)(id);
-      if (normalizedId.includes(`${_packageName.packageName}/dist`) && normalizedId.includes("config/config.js")) {
+      if (normalizedId.includes(`${_package.name}/dist`) && normalizedId.includes("config/config.js")) {
         return {
           code: `${code}Uniwind.__reinit(() => ({}), ${stringifiedThemes})`
         };

package/dist/metro/index.cjs

@@ -4,7 +4,7 @@ const FileStoreBase = require('metro-cache/private/stores/FileStore');
 const os = require('os');
 const path = require('path');
 const node_path = require('node:path');
-const common = require('../shared/uniwind.D6IIgDk0.cjs');
+const common = require('../shared/uniwind.BDoX4wlN.cjs');
 const types = require('../shared/uniwind.BZIuaszw.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
@@ -46,7 +46,9 @@ const patchMetroGraphToSupportUncachedModules = () => {
 
 const thisModuleDist = node_path.resolve(__dirname, "../../dist");
 const thisModuleSrc = node_path.resolve(__dirname, "../../src");
+const nodeModulesPath = node_path.resolve(__dirname, "../../../");
 const isFromThisModule = (filename) => filename.startsWith(thisModuleDist) || filename.startsWith(thisModuleSrc);
+const name = node_path.basename(nodeModulesPath) === "node_modules" ? node_path.basename(node_path.resolve(__dirname, "../../")) : common.name;
 const SUPPORTED_COMPONENTS = [
   "ActivityIndicator",
   "Button",
@@ -86,19 +88,19 @@ const nativeResolver = (extraComponents) => ({
     return resolution;
   }
   if (moduleName === "react-native") {
-    return resolver(context, `${common.packageName}/components`, platform);
+    return resolver(context, `${name}/components`, platform);
   }
   if (moduleName === "react-native-gesture-handler") {
-    return resolver(context, `${common.packageName}/components/react-native-gesture-handler`, platform);
+    return resolver(context, `${name}/components/react-native-gesture-handler`, platform);
   }
   if (moduleName === "react-native-svg") {
-    return resolver(context, `${common.packageName}/components/react-native-svg`, platform);
+    return resolver(context, `${name}/components/react-native-svg`, platform);
   }
   if (resolution.filePath.includes(`${node_path.sep}react-native${node_path.sep}Libraries${node_path.sep}`)) {
     const filename = node_path.basename(resolution.filePath.split(node_path.sep).at(-1) ?? "");
     const module = filename.split(".").at(0);
     if (module !== void 0 && SUPPORTED_COMPONENTS.includes(module)) {
-      return resolver(context, `${common.packageName}/components/${module}`, platform);
+      return resolver(context, `${name}/components/${module}`, platform);
     }
   }
   if (moduleName in extraComponents) {
@@ -127,7 +129,7 @@ const webResolver = (extraComponents) => ({
   if (!isIndex || module === void 0 || !SUPPORTED_COMPONENTS.includes(module) || context.originModulePath.endsWith(`${module}${node_path.sep}index.js`)) {
     return resolution;
   }
-  return resolver(context, `${common.packageName}/components/${module}`, platform);
+  return resolver(context, `${name}/components/${module}`, platform);
 };
 
 const withUniwindConfig = (config, uniwindConfig) => {

package/dist/metro/index.mjs

@@ -2,7 +2,7 @@ import FileStoreBase from 'metro-cache/private/stores/FileStore';
 import os from 'os';
 import path from 'path';
 import { sep, basename, resolve } from 'node:path';
-import { p as packageName, u as uniq } from '../shared/uniwind.BJZZANs0.mjs';
+import { n as name$1, u as uniq } from '../shared/uniwind.DhluOugg.mjs';
 import { P as Platform } from '../shared/uniwind.CyoRUwOj.mjs';
 
 class FileStore extends FileStoreBase {
@@ -38,7 +38,9 @@ const patchMetroGraphToSupportUncachedModules = () => {
 
 const thisModuleDist = resolve(__dirname, "../../dist");
 const thisModuleSrc = resolve(__dirname, "../../src");
+const nodeModulesPath = resolve(__dirname, "../../../");
 const isFromThisModule = (filename) => filename.startsWith(thisModuleDist) || filename.startsWith(thisModuleSrc);
+const name = basename(nodeModulesPath) === "node_modules" ? basename(resolve(__dirname, "../../")) : name$1;
 const SUPPORTED_COMPONENTS = [
   "ActivityIndicator",
   "Button",
@@ -78,19 +80,19 @@ const nativeResolver = (extraComponents) => ({
     return resolution;
   }
   if (moduleName === "react-native") {
-    return resolver(context, `${packageName}/components`, platform);
+    return resolver(context, `${name}/components`, platform);
   }
   if (moduleName === "react-native-gesture-handler") {
-    return resolver(context, `${packageName}/components/react-native-gesture-handler`, platform);
+    return resolver(context, `${name}/components/react-native-gesture-handler`, platform);
   }
   if (moduleName === "react-native-svg") {
-    return resolver(context, `${packageName}/components/react-native-svg`, platform);
+    return resolver(context, `${name}/components/react-native-svg`, platform);
   }
   if (resolution.filePath.includes(`${sep}react-native${sep}Libraries${sep}`)) {
     const filename = basename(resolution.filePath.split(sep).at(-1) ?? "");
     const module = filename.split(".").at(0);
     if (module !== void 0 && SUPPORTED_COMPONENTS.includes(module)) {
-      return resolver(context, `${packageName}/components/${module}`, platform);
+      return resolver(context, `${name}/components/${module}`, platform);
     }
   }
   if (moduleName in extraComponents) {
@@ -119,7 +121,7 @@ const webResolver = (extraComponents) => ({
   if (!isIndex || module === void 0 || !SUPPORTED_COMPONENTS.includes(module) || context.originModulePath.endsWith(`${module}${sep}index.js`)) {
     return resolution;
   }
-  return resolver(context, `${packageName}/components/${module}`, platform);
+  return resolver(context, `${name}/components/${module}`, platform);
 };
 
 const withUniwindConfig = (config, uniwindConfig) => {

package/dist/metro/metro-transformer.cjs

@@ -2,14 +2,13 @@
 
 const fs = require('fs');
 const path = require('path');
+const common = require('../shared/uniwind.BDoX4wlN.cjs');
 const node = require('@tailwindcss/node');
 const oxide = require('@tailwindcss/oxide');
 const types = require('../shared/uniwind.BZIuaszw.cjs');
-const stringifyThemes = require('../shared/uniwind.DkoxF6fp.cjs');
-const common = require('../shared/uniwind.D6IIgDk0.cjs');
+const stringifyThemes = require('../shared/uniwind.DeQhDtT7.cjs');
 const lightningcss = require('lightningcss');
 const culori = require('culori');
-require('node:path');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
@@ -1257,7 +1256,6 @@ class ProcessorBuilder {
   stylesheets = {};
   vars = {};
   scopedVars = {};
-  varsWithMediaQueries = {};
   CSS = new CSS(this);
   RN = new RN(this);
   Var = new Var(this);
@@ -1266,16 +1264,32 @@ class ProcessorBuilder {
   Units = new Units(this);
   Functions = new Functions(this);
   meta = {};
+  varsWithMediaQueries = {};
+  pendingVarReferences = /* @__PURE__ */ new Map();
   declarationConfig = this.getDeclarationConfig();
   transform(css) {
     lightningcss.transform({
       filename: "tailwind.css",
       code: Buffer.from(css),
       visitor: {
-        StyleSheet: (styleSheet) => styleSheet.rules.forEach((rule) => {
-          this.declarationConfig = this.getDeclarationConfig();
-          this.parseRuleRec(rule);
-        })
+        StyleSheet: (styleSheet) => {
+          styleSheet.rules.forEach((rule) => {
+            this.declarationConfig = this.getDeclarationConfig();
+            this.parseRuleRec(rule);
+          });
+          for (const [className, varNames] of this.pendingVarReferences) {
+            for (const varName of varNames) {
+              const varStyles = this.varsWithMediaQueries[varName];
+              if (!varStyles || varStyles.length === 0) {
+                continue;
+              }
+              for (const varStyle of varStyles) {
+                this.stylesheets[className].push(varStyle);
+              }
+            }
+            this.pendingVarReferences.delete(className);
+          }
+        }
       }
     });
   }
@@ -1291,35 +1305,13 @@ class ProcessorBuilder {
       disabled: null
     };
   }
-  storeVarWithMediaQuery(varName, value, mq) {
-    if (!Array.isArray(this.varsWithMediaQueries[varName])) {
-      this.varsWithMediaQueries[varName] = [];
-    }
-    this.varsWithMediaQueries[varName].push({
-      value,
-      minWidth: mq.minWidth,
-      maxWidth: mq.maxWidth,
-      orientation: mq.orientation ? `'${mq.orientation}'` : null,
-      colorScheme: mq.colorScheme ? `'${mq.colorScheme}'` : null
-    });
-  }
   hasMediaQuery(mq) {
     return mq.minWidth !== 0 || mq.maxWidth !== Number.MAX_VALUE || mq.orientation !== null || mq.colorScheme !== null;
   }
-  processDeclarationValue(mq, varName, processedValue, context) {
-    const { isVar, style, important } = context;
-    if (isVar && this.hasMediaQuery(mq)) {
-      this.storeVarWithMediaQuery(varName, processedValue, mq);
-    } else {
-      style[varName] = processedValue;
-    }
-    if (!isVar && important) {
-      style.importantProperties.push(varName);
-    }
-  }
   addDeclaration(declaration, important = false) {
     const isVar = this.declarationConfig.root || this.declarationConfig.className === null;
     const mq = this.MQ.processMediaQueries(this.declarationConfig.mediaQueries);
+    const { property, value } = this.parseDeclaration(declaration);
     const style = (() => {
       if (!isVar) {
         return this.stylesheets[this.declarationConfig.className]?.at(-1);
@@ -1329,6 +1321,11 @@ class ProcessorBuilder {
         this.scopedVars[platformKey] ??= {};
         return this.scopedVars[platformKey];
       }
+      if (this.hasMediaQuery(mq)) {
+        this.varsWithMediaQueries[property] ??= [];
+        this.varsWithMediaQueries[property].push({});
+        return this.varsWithMediaQueries[property].at(-1);
+      }
       if (this.declarationConfig.theme === null) {
         return this.vars;
       }
@@ -1336,32 +1333,56 @@ class ProcessorBuilder {
       this.scopedVars[themeKey] ??= {};
       return this.scopedVars[themeKey];
     })();
-    if (!isVar) {
+    if (!isVar || this.hasMediaQuery(mq)) {
       Object.assign(style, mq);
       style.importantProperties ??= [];
       style.rtl = this.declarationConfig.rtl;
       style.theme = mq.colorScheme ?? this.declarationConfig.theme;
+      style.maxWidth = mq.maxWidth;
+      style.minWidth = mq.minWidth;
+      style.orientation = mq.orientation;
       style.active = this.declarationConfig.active;
       style.focus = this.declarationConfig.focus;
       style.disabled = this.declarationConfig.disabled;
       this.meta.className = this.declarationConfig.className;
     }
-    const context = { isVar, style, important };
+    style[property] = value;
+    if (!isVar && important) {
+      style.importantProperties.push(property);
+    }
+    const match = typeof value === "string" ? value.match(/this\[`(.*?)`\]/) : null;
+    if (match && !isVar) {
+      const className = this.declarationConfig.className;
+      if (className === null) {
+        return;
+      }
+      if (!this.pendingVarReferences.has(className)) {
+        this.pendingVarReferences.set(className, []);
+      }
+      const classVars = this.pendingVarReferences.get(className);
+      const varName = match[1];
+      if (!classVars.includes(varName)) {
+        classVars.push(varName);
+      }
+    }
+  }
+  parseDeclaration(declaration) {
     if (declaration.property === "unparsed") {
-      const varName2 = declaration.value.propertyId.property;
-      const processedValue2 = this.CSS.processValue(declaration.value.value);
-      this.processDeclarationValue(mq, varName2, processedValue2, context);
-      return;
+      return {
+        property: declaration.value.propertyId.property,
+        value: this.CSS.processValue(declaration.value.value)
+      };
     }
     if (declaration.property === "custom") {
-      const varName2 = declaration.value.name;
-      const processedValue2 = this.CSS.processValue(declaration.value.value);
-      this.processDeclarationValue(mq, varName2, processedValue2, context);
-      return;
+      return {
+        property: declaration.value.name,
+        value: this.CSS.processValue(declaration.value.value)
+      };
     }
-    const varName = declaration.property;
-    const processedValue = this.CSS.processValue(declaration.value);
-    this.processDeclarationValue(mq, varName, processedValue, context);
+    return {
+      property: declaration.property,
+      value: this.CSS.processValue(declaration.value)
+    };
   }
   parseRuleRec(rule) {
     if (this.declarationConfig.className !== null) {
@@ -1445,14 +1466,8 @@ class ProcessorBuilder {
     if (rule.type === "media") {
       const { mediaQueries } = rule.value.query;
       this.declarationConfig.mediaQueries.push(...mediaQueries);
-      rule.value.rules.forEach((rule2) => {
-        this.parseRuleRec(rule2);
-        this.declarationConfig = this.getDeclarationConfig();
-      });
-      this.declarationConfig.mediaQueries.splice(
-        this.declarationConfig.mediaQueries.length - mediaQueries.length,
-        mediaQueries.length
-      );
+      rule.value.rules.forEach((rule2) => this.parseRuleRec(rule2));
+      this.declarationConfig = this.getDeclarationConfig();
       return;
     }
     if (rule.type === "layer-block") {
@@ -1506,14 +1521,12 @@ const compileVirtual = async ({ css, cssPath, platform, themes, polyfills, debug
       serializeJSObject(scopedVars2, (key, value) => `get "${key}"() { return ${value} }`)
     ])
   );
-  const varsWithMediaQueries = Object.entries(Processor.varsWithMediaQueries).map(([key, value]) => `["${key}", ${serialize(value)}]`).join(",");
   const serializedScopedVars = Object.entries(scopedVars).map(([scopedVarsName, scopedVars2]) => `"${scopedVarsName}": ({ ${scopedVars2} }),`).join("");
   const currentColorVar = `get currentColor() { return rt.colorScheme === 'dark' ? '#ffffff' : '#000000' },`;
   return [
     "({",
     `scopedVars: ({ ${serializedScopedVars} }),`,
     `vars: ({ ${currentColorVar} ${vars} }),`,
-    `varsWithMediaQueries: ([ ${varsWithMediaQueries} ]),`,
     `stylesheet: ({ ${stylesheet} }),`,
     "})"
   ].join("");
@@ -1552,7 +1565,7 @@ const transform = async (config, projectRoot, filePath, data, options) => {
     });
     data = Buffer.from(
       [
-        `import { Uniwind } from '${common.packageName}';`,
+        `import { Uniwind } from '${common.name}';`,
         `Uniwind.__reinit(() => ({}), ${injectedThemesCode2});`
       ].join(""),
       "utf-8"
@@ -1580,7 +1593,7 @@ const transform = async (config, projectRoot, filePath, data, options) => {
   const isWeb = platform === types.Platform.Web;
   data = Buffer.from(
     isWeb ? virtualCode : [
-      `import { Uniwind } from '${common.packageName}';`,
+      `import { Uniwind } from '${common.name}';`,
       `Uniwind.__reinit(rt => ${virtualCode}, ${injectedThemesCode});`
     ].join(""),
     "utf-8"