@niibase/uniwind 1.6.4 → 1.8.0

package/dist/metro/{metro-transformer.cjs → transformer.cjs}

@@ -1,28 +1,95 @@
 'use strict';
 
-const fs = require('fs');
+const config = require('../shared/uniwind.BEqYiPBB.cjs');
 const path = require('path');
-const common = require('../shared/uniwind.Cv73KtI-.cjs');
-const consts = require('../shared/uniwind.B5q8hBGv.cjs');
-const node = require('@tailwindcss/node');
-const oxide = require('@tailwindcss/oxide');
+const _package = require('../shared/uniwind.DJ5M1Q4q.cjs');
 const lightningcss = require('lightningcss');
-const stringifyThemes = require('../shared/uniwind.r2i22V6d.cjs');
 const culori = require('culori');
+const node = require('@tailwindcss/node');
+const oxide = require('@tailwindcss/oxide');
+const fs = require('fs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
-const fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
 const path__default = /*#__PURE__*/_interopDefaultCompat(path);
+const fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
+
+const toCamelCase = (str) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+const pipe = (data) => ((...fns) => fns.reduce((acc, fn) => fn(acc), data));
+const isNumber = (data) => {
+  if (typeof data === "number") {
+    return true;
+  }
+  if (typeof data === "string" && data !== "") {
+    return !isNaN(Number(data));
+  }
+  return false;
+};
+const smartSplit = (str, separator = " ") => {
+  const escaper = "&&&";
+  return pipe(str)(
+    (x) => x.replace(/\s\?\?\s/g, `${escaper}??${escaper}`),
+    (x) => x.replace(/\s([+\-*/])\s/g, `${escaper}$1${escaper}`),
+    (x) => x.split(separator),
+    (x) => x.map((token) => token.replace(new RegExp(escaper, "g"), " "))
+  );
+};
+const addMissingSpaces = (str) => pipe(str)(
+  (x) => x.trim(),
+  (x) => x.replace(/\](?=\d)/g, "] "),
+  (x) => x.replace(/\](?=")/g, "] "),
+  (x) => x.replace(/\)(?=[^\s,])/g, ") "),
+  (x) => x.replace(/(?<!^)(?<!\s)"(?=\d)/g, '" ')
+);
+const isValidJSValue = (jsValueString) => {
+  try {
+    new Function(`const test = ${jsValueString}`);
+    return true;
+  } catch {
+    return false;
+  }
+};
+const shouldBeSerialized = (value) => {
+  if (value.includes("-")) {
+    return value.split("-").some(shouldBeSerialized);
+  }
+  return [
+    isNumber(value),
+    value.startsWith("vars["),
+    value.startsWith("rt."),
+    /[*/+-]/.test(value),
+    value.includes('"'),
+    value.includes(" "),
+    value === "(",
+    value === ")"
+  ].some(Boolean);
+};
+const roundToPrecision = (value, precision) => parseFloat(value.toFixed(precision));
+const deepEqual = (a, b) => {
+  if (Object.is(a, b)) {
+    return true;
+  }
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null) {
+    return false;
+  }
+  const keysA = Object.keys(a);
+  if (keysA.length !== Object.keys(b).length) {
+    return false;
+  }
+  return keysA.every((key) => deepEqual(a[key], b[key]) && Object.prototype.hasOwnProperty.call(b, key));
+};
+const removeKeys = (obj, keysToRemove) => Object.fromEntries(
+  Object.entries(obj).filter(([key]) => !keysToRemove.includes(key))
+);
 
 const parseStringValue = (value) => {
-  if (common.isValidJSValue(value)) {
+  if (isValidJSValue(value)) {
     return value;
   }
   if (value.startsWith("function")) {
     return value;
   }
-  const tokens = common.smartSplit(common.addMissingSpaces(value));
+  const tokens = smartSplit(addMissingSpaces(value));
   const parsedTokens = tokens.map((token) => {
     if (token.startsWith('"')) {
       return token.replace(/"/g, "");
@@ -30,12 +97,12 @@ const parseStringValue = (value) => {
     if (/^[a-z]+$/i.test(token.replace(/,/g, ""))) {
       return token;
     }
-    if (common.isNumber(token)) {
+    if (isNumber(token)) {
       return token;
     }
     const endsWithComma = token.endsWith(",");
     const expr = endsWithComma ? token.slice(0, -1) : token;
-    if (!common.isValidJSValue(expr)) {
+    if (!isValidJSValue(expr)) {
       return token;
     }
     return [
@@ -60,7 +127,7 @@ const serialize = (value) => {
       return String(value);
     case "number":
     case "bigint":
-      return String(common.roundToPrecision(value, 2));
+      return String(roundToPrecision(value, 2));
     case "boolean":
       return value.toString();
     case "object":
@@ -77,7 +144,7 @@ const serialize = (value) => {
       return [
         "{",
         Object.entries(value).map(([key, val]) => {
-          const serializedKey = common.isNumber(key) ? key : `"${key}"`;
+          const serializedKey = isNumber(key) ? key : `"${key}"`;
           return `${serializedKey}: ${serialize(val)}`;
         }).join(", "),
         "}"
@@ -91,7 +158,7 @@ const serialize = (value) => {
   }
 };
 const serializeJSObject = (obj, serializer) => {
-  const serializedObject = common.pipe(obj)(
+  const serializedObject = pipe(obj)(
     Object.entries,
     (entries) => entries.map(([key, value]) => serializer(key, serialize(value))),
     (serializedValues) => serializedValues.filter((serializedValue) => {
@@ -99,7 +166,7 @@ const serializeJSObject = (obj, serializer) => {
         new Function(`function validateJS() { const obj = ({ ${serializedValue} }) }`);
         return true;
       } catch {
-        stringifyThemes.Logger.error(`Failed to serialize ${serializedValue} as a valid JS object entry. Skipping.`);
+        config.Logger.error(`Failed to serialize ${serializedValue} as a valid JS object entry. Skipping.`);
         return false;
       }
     }),
@@ -114,24 +181,9 @@ const serializeJSObject = (obj, serializer) => {
   return serializedObject;
 };
 
-const isDefined = (value) => value !== void 0 && value !== null;
-
-var StyleDependency = /* @__PURE__ */ ((StyleDependency2) => {
-  StyleDependency2[StyleDependency2["ColorScheme"] = 1] = "ColorScheme";
-  StyleDependency2[StyleDependency2["Theme"] = 2] = "Theme";
-  StyleDependency2[StyleDependency2["Dimensions"] = 3] = "Dimensions";
-  StyleDependency2[StyleDependency2["Orientation"] = 4] = "Orientation";
-  StyleDependency2[StyleDependency2["Insets"] = 5] = "Insets";
-  StyleDependency2[StyleDependency2["FontScale"] = 6] = "FontScale";
-  StyleDependency2[StyleDependency2["Rtl"] = 7] = "Rtl";
-  StyleDependency2[StyleDependency2["AdaptiveThemes"] = 8] = "AdaptiveThemes";
-  StyleDependency2[StyleDependency2["Variables"] = 9] = "Variables";
-  return StyleDependency2;
-})(StyleDependency || {});
-
 const extractVarsFromString = (value) => {
-  const thisIndexes = [...value.matchAll(/this\[/g)].map((m) => m.index);
-  return thisIndexes.map((index) => {
+  const varsIndexes = [...value.matchAll(/vars\[/g)].map((m) => m.index);
+  return varsIndexes.map((index) => {
     const afterIndex = value.slice(index + 5);
     const closingIndex = afterIndex.indexOf("]");
     const varName = afterIndex.slice(0, closingIndex);
@@ -147,6 +199,23 @@ const makeSafeForSerialization = (value) => {
   }
   return value;
 };
+const hasThemedVarDependency = (varName, Processor, visited = /* @__PURE__ */ new Set()) => {
+  if (visited.has(varName)) {
+    return false;
+  }
+  visited.add(varName);
+  const isScopedVar = Object.values(Processor.scopedVars).some((scopedVars) => varName in scopedVars);
+  if (isScopedVar) {
+    return true;
+  }
+  const globalVarValue = Processor.vars[varName];
+  if (typeof globalVarValue !== "string") {
+    return false;
+  }
+  return extractVarsFromString(globalVarValue).some((usedVarName) => {
+    return hasThemedVarDependency(usedVarName, Processor, visited);
+  });
+};
 const addMetaToStylesTemplate = (Processor, currentPlatform) => {
   const stylesheetsEntries = Object.entries(Processor.stylesheets).map(([className, stylesPerMediaQuery]) => {
     const styles = stylesPerMediaQuery.map((style, index) => {
@@ -166,10 +235,10 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
         dataAttributes,
         ...rest
       } = style;
-      const entries = Object.entries(rest).flatMap(([property, value]) => Processor.RN.cssToRN(property, value)).map(([property, value]) => [`"${property}"`, `function() { return ${serialize(value)} }`]);
+      const entries = Object.entries(rest).flatMap(([property, value]) => Processor.RN.cssToRN(property, value)).map(([property, value]) => [`"${property}"`, `function(vars) { return ${serialize(value)} }`]);
       if (platform) {
-        const isTV = currentPlatform === consts.Platform.AndroidTV || currentPlatform === consts.Platform.AppleTV;
-        const commonPlatform = isTV ? consts.Platform.TV : consts.Platform.Native;
+        const isTV = currentPlatform === config.Platform.AndroidTV || currentPlatform === config.Platform.AppleTV;
+        const commonPlatform = isTV ? config.Platform.TV : config.Platform.Native;
         if (platform !== commonPlatform && platform !== currentPlatform) {
           return null;
         }
@@ -180,32 +249,27 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
       const dependencies = [];
       const stringifiedEntries = JSON.stringify(entries);
       const usedVars = extractVarsFromString(stringifiedEntries);
-      const isUsingThemedVar = usedVars.some((usedVarName) => {
-        return Object.values(Processor.scopedVars).some((scopedVars) => {
-          const scopedVarsNames = Object.keys(scopedVars);
-          return scopedVarsNames.includes(usedVarName);
-        });
-      });
+      const isUsingThemedVar = usedVars.some((usedVarName) => hasThemedVarDependency(usedVarName, Processor));
       if (usedVars.length > 0) {
-        dependencies.push(StyleDependency.Variables);
+        dependencies.push(config.StyleDependency.Variables);
       }
       if (theme !== null || isUsingThemedVar || stringifiedEntries.includes("rt.lightDark")) {
-        dependencies.push(StyleDependency.Theme);
+        dependencies.push(config.StyleDependency.Theme);
       }
       if (orientation !== null) {
-        dependencies.push(StyleDependency.Orientation);
+        dependencies.push(config.StyleDependency.Orientation);
       }
       if (rtl !== null) {
-        dependencies.push(StyleDependency.Rtl);
+        dependencies.push(config.StyleDependency.Rtl);
       }
-      if (Number(minWidth) !== 0 || Number(maxWidth) !== Number.MAX_VALUE || stringifiedEntries.includes("rt.screen")) {
-        dependencies.push(StyleDependency.Dimensions);
+      if (Number(minWidth) !== 0 || Number(maxWidth) !== Number.MAX_VALUE || stringifiedEntries.includes("rt.makeResponsive") || stringifiedEntries.includes("rt.screen")) {
+        dependencies.push(config.StyleDependency.Dimensions);
       }
       if (stringifiedEntries.includes("rt.insets")) {
-        dependencies.push(StyleDependency.Insets);
+        dependencies.push(config.StyleDependency.Insets);
       }
       if (stringifiedEntries.includes("rt.fontScale")) {
-        dependencies.push(StyleDependency.FontScale);
+        dependencies.push(config.StyleDependency.FontScale);
       }
       return {
         entries,
@@ -222,7 +286,7 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
         active,
         focus,
         disabled,
-        importantProperties: importantProperties?.map((property) => property.startsWith("--") ? property : common.toCamelCase).map(makeSafeForSerialization) ?? [],
+        importantProperties: importantProperties?.map((property) => property.startsWith("--") ? property : toCamelCase(property)).map(makeSafeForSerialization) ?? [],
         dataAttributes,
         complexity: [
           minWidth !== 0,
@@ -237,7 +301,7 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
         ].filter(Boolean).length
       };
     });
-    const filteredStyles = styles.filter(isDefined);
+    const filteredStyles = styles.filter(config.isDefined);
     if (filteredStyles.length === 0) {
       return null;
     }
@@ -245,7 +309,7 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
       className,
       filteredStyles
     ];
-  }).filter(isDefined);
+  }).filter(config.isDefined);
   const stylesheets = Object.fromEntries(stylesheetsEntries);
   return stylesheets;
 };
@@ -294,11 +358,7 @@ const parseTransformsMutation = (styles, preserve = false) => {
     }
   }
   if (transformsResult.length > 0) {
-    Object.defineProperty(styles, "transform", {
-      configurable: true,
-      enumerable: true,
-      value: transformsResult
-    });
+    styles.transform = transformsResult;
   }
 };
 
@@ -308,7 +368,7 @@ class Color {
   }
   toRgb = culori.converter("rgb");
   black = "#000000";
-  logger = new stringifyThemes.Logger("Color");
+  logger = new config.Logger("Color");
   processColor(color) {
     if (typeof color === "string") {
       const parsed = culori.parse(color);
@@ -325,10 +385,10 @@ class Color {
     }
     try {
       if (color.type === "currentcolor") {
-        return 'this["currentColor"]';
+        return 'vars["currentColor"]?.(vars)';
       }
       if (color.type === "rgb" || color.type === "srgb") {
-        const alpha = typeof color.alpha === "number" ? color.alpha : common.pipe(color.alpha)(
+        const alpha = typeof color.alpha === "number" ? color.alpha : pipe(color.alpha)(
           (x) => this.Processor.CSS.processValue(x),
           Number,
           (x) => isNaN(x) ? 1 : x
@@ -469,7 +529,7 @@ const getProcessedAnimation = (declarationValue, getProcessedValue) => {
     const valueTokens = segment.slice(colonIndex + 1);
     const rawKey = tokensToText(keyTokens, getProcessedValue);
     const value = parseValues(valueTokens, getProcessedValue);
-    const key = common.toCamelCase(rawKey);
+    const key = toCamelCase(rawKey);
     result.push([key, value]);
   }
   return result;
@@ -479,9 +539,9 @@ class CSS {
   constructor(Processor) {
     this.Processor = Processor;
   }
-  logger = new stringifyThemes.Logger("CSS");
-  processValue(declarationValue) {
-    const processedValue = this.getProcessedValue(declarationValue);
+  logger = new config.Logger("CSS");
+  processValue(declarationValue, declarationProperty) {
+    const processedValue = this.getProcessedValue(declarationValue, declarationProperty);
     if (typeof processedValue === "string") {
       return this.makeSafeForSerialization(processedValue);
     }
@@ -520,7 +580,7 @@ class CSS {
       if (token.type === "var") {
         return this.Processor.Var.processVar(token.value);
       }
-      return Object.entries(token).map(([key, value]) => [common.toCamelCase(key), this.processValue(value)]);
+      return Object.entries(token).map(([key, value]) => [toCamelCase(key), this.processValue(value)]);
     }
     return getProcessedAnimation(
       declarationValue,
@@ -544,7 +604,7 @@ class CSS {
           this.processValue(filter.value.yOffset),
           this.processValue(filter.value.blur),
           this.processValue(filter.value.color)
-        ].filter(isDefined);
+        ].filter(config.isDefined);
         return `drop-shadow(${parts.join(" ")})`;
       }
       const value = this.processValue(filter.value);
@@ -552,7 +612,7 @@ class CSS {
     });
     return filterStrings.join(" ");
   }
-  getProcessedValue(declarationValue) {
+  getProcessedValue(declarationValue, declarationProperty) {
     if (typeof declarationValue !== "object") {
       return declarationValue;
     }
@@ -707,7 +767,7 @@ class CSS {
             return this.Processor.Color.processColor(declarationValue.value);
           }
           if (declarationValue.value === "currentcolor") {
-            return 'this["currentColor"]';
+            return 'vars["currentColor"]?.(vars)';
           }
           return declarationValue.value;
         case "env":
@@ -744,7 +804,7 @@ class CSS {
         case "pair":
           return declarationValue.inside.type;
         case "currentcolor":
-          return 'this["currentColor"]';
+          return 'vars["currentColor"]?.(vars)';
         case "calc":
           return this.Processor.Functions.processCalc(declarationValue.value);
         case "min":
@@ -777,7 +837,7 @@ class CSS {
           return [
             this.Processor.Color.processColor(declarationValue.color),
             declarationValue.position ? this.processValue(declarationValue.position) : null
-          ].filter(isDefined).join(" ");
+          ].filter(config.isDefined).join(" ");
         case "side":
           return declarationValue.side;
         case "absolute":
@@ -837,11 +897,17 @@ class CSS {
       };
     }
     if ("grow" in declarationValue) {
-      return {
+      const parsedFlex = {
         flexGrow: declarationValue.grow,
         flexShrink: declarationValue.shrink,
         flexBasis: this.processValue(declarationValue.basis)
       };
+      if (declarationProperty === "flex" && parsedFlex.flexGrow === 1 && parsedFlex.flexShrink === 1 && parsedFlex.flexBasis === '"0%"') {
+        return {
+          flex: 1
+        };
+      }
+      return parsedFlex;
     }
     if (Array.isArray(declarationValue)) {
       if (declarationValue.length === 1) {
@@ -856,7 +922,7 @@ class CSS {
       return this.addComaBetweenTokens(declarationValue).reduce((acc, value, index, array) => {
         if (typeof value === "object") {
           const nextValue = array.at(index + 1);
-          if (common.deepEqual(value, nextValue)) {
+          if (deepEqual(value, nextValue)) {
             return acc;
           }
           const result = this.processValue(value);
@@ -873,7 +939,7 @@ class CSS {
       return declarationValue.case;
     }
     if ("angle" in declarationValue) {
-      const angles = common.pipe([
+      const angles = pipe([
         ["rotateX", declarationValue.x * declarationValue.angle.value],
         ["rotateY", declarationValue.y * declarationValue.angle.value],
         ["rotateZ", declarationValue.z * declarationValue.angle.value]
@@ -912,7 +978,7 @@ class CSS {
         this.processValue(declarationValue.blur),
         this.processValue(declarationValue.spread),
         this.processValue(declarationValue.color)
-      ].filter(isDefined).join(" ");
+      ].filter(config.isDefined).join(" ");
     }
     if ("blockStart" in declarationValue) {
       const startValue = this.processValue(declarationValue.blockStart);
@@ -955,7 +1021,7 @@ class CSS {
       };
     }
     if ("duration" in declarationValue) {
-      return Object.entries(declarationValue).map(([key, value]) => [common.toCamelCase(key), this.processValue(value)]);
+      return Object.entries(declarationValue).map(([key, value]) => [toCamelCase(key), this.processValue(value)]);
     }
     this.logUnsupported(`Unsupported value - ${JSON.stringify(declarationValue)}`);
     return void 0;
@@ -1022,11 +1088,11 @@ class CSS {
     );
   }
   makeSafeForSerialization(value) {
-    if (common.shouldBeSerialized(value)) {
+    if (shouldBeSerialized(value)) {
       return value;
     }
     if (value.endsWith("%")) {
-      return `"${common.roundToPrecision(parseFloat(value), 2)}%"`;
+      return `"${roundToPrecision(parseFloat(value), 2)}%"`;
     }
     return `"${value}"`;
   }
@@ -1036,7 +1102,7 @@ class Functions {
   constructor(Processor) {
     this.Processor = Processor;
   }
-  logger = new stringifyThemes.Logger("Functions");
+  logger = new config.Logger("Functions");
   processCalc(calc) {
     switch (calc.type) {
       case "sum": {
@@ -1061,27 +1127,27 @@ class Functions {
     }
     if (fn.name === "calc") {
       const calc = this.Processor.CSS.processValue(fn.arguments);
-      return common.pipe(calc)(
+      return pipe(calc)(
         String,
         (x) => this.Processor.Functions.tryEval(x)
       );
     }
     if (fn.name === "cubic-bezier") {
-      const cubicArguments = common.pipe(this.Processor.CSS.processValue(fn.arguments))(
+      const cubicArguments = pipe(this.Processor.CSS.processValue(fn.arguments))(
         String,
         (x) => x.replace(/,\s/g, ",")
       );
       return `rt.cubicBezier(${cubicArguments})`;
     }
     if (fn.name === "steps") {
-      const stepsArguments = common.pipe(this.Processor.CSS.processValue(fn.arguments))(
+      const stepsArguments = pipe(this.Processor.CSS.processValue(fn.arguments))(
         String,
         (x) => x.replace(/,\s/g, ",")
       );
       return `rt.steps(${stepsArguments})`;
     }
     if (fn.name === "linear") {
-      const linearArguments = common.pipe(this.Processor.CSS.processValue(fn.arguments))(
+      const linearArguments = pipe(this.Processor.CSS.processValue(fn.arguments))(
         String,
         (x) => x.replace(/,\s/g, ",")
       );
@@ -1211,7 +1277,7 @@ class Functions {
   }
   processColorMix(fn) {
     const tokens = fn.arguments.map(
-      (arg) => common.pipe(arg)(
+      (arg) => pipe(arg)(
         (x) => this.Processor.CSS.processValue(x),
         String,
         (x) => x.trim()
@@ -1230,12 +1296,12 @@ class MQ {
     for (const mediaQuery of mediaQueries) {
       const { condition, mediaType } = mediaQuery;
       if ([
-        consts.Platform.Android,
-        consts.Platform.iOS,
-        consts.Platform.Native,
-        consts.Platform.AndroidTV,
-        consts.Platform.AppleTV,
-        consts.Platform.TV
+        config.Platform.Android,
+        config.Platform.iOS,
+        config.Platform.Native,
+        config.Platform.AndroidTV,
+        config.Platform.AppleTV,
+        config.Platform.TV
       ].includes(mediaType)) {
         mq.platform = mediaType;
         continue;
@@ -1305,7 +1371,7 @@ const cssToRNMap = {
     };
   },
   transitionProperty: (value) => {
-    const properties = value.replace(/"/g, "").split(",").filter((token) => token !== "" && !token.startsWith("--")).map((token) => transitions[token.trim()] ?? `"${common.toCamelCase(token.trim())}"`);
+    const properties = value.replace(/"/g, "").split(",").filter((token) => token !== "" && !token.startsWith("--")).map((token) => transitions[token.trim()] ?? `"${toCamelCase(token.trim())}"`);
     if (properties.length === 1 && ['"allowDiscrete"', '"normal"'].includes(properties[0])) {
       const behavior = properties[0] === '"allowDiscrete"' ? "allow-discrete" : "normal";
       return {
@@ -1333,7 +1399,7 @@ const cssToRNMap = {
         if (val === '"none"') {
           continue;
         }
-        const keyName = common.toCamelCase(`animation-${key.replace(/^"|"$/g, "")}`);
+        const keyName = toCamelCase(`animation-${key.replace(/^"|"$/g, "")}`);
         if (key === "name") {
           result[keyName] = typeof val === "string" ? val.split(",").map((v) => v.startsWith('"') ? v : `"${v}"`) : val;
         } else {
@@ -1486,13 +1552,65 @@ const cssToRNMap = {
 const BORDER_WIDTH_KEYS = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"];
 const BORDER_COLOR_KEYS = ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"];
 const BORDER_RADIUS_KEYS = ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"];
+const COMPONENT_RESPONSIVE_PROPS = /* @__PURE__ */ new Set([
+  "width",
+  "height",
+  "minWidth",
+  "maxWidth",
+  "minHeight",
+  "maxHeight",
+  "padding",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingHorizontal",
+  "paddingVertical",
+  "paddingStart",
+  "paddingEnd",
+  "margin",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "marginHorizontal",
+  "marginVertical",
+  "marginStart",
+  "marginEnd",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "gap",
+  "rowGap",
+  "columnGap",
+  "borderWidth",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderStartWidth",
+  "borderEndWidth",
+  "borderRadius",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+  "borderTopStartRadius",
+  "borderTopEndRadius",
+  "borderBottomStartRadius",
+  "borderBottomEndRadius",
+  "flexBasis",
+  "translateX",
+  "translateY"
+]);
 class RN {
   constructor(Processor) {
     this.Processor = Processor;
   }
   cssToRN(property, value) {
-    const transformedProperty = property.startsWith("--") ? property : common.pipe(property)(
-      common.toCamelCase,
+    const transformedProperty = property.startsWith("--") ? property : pipe(property)(
+      toCamelCase,
       (x) => {
         if (x.includes("padding") || x.includes("margin")) {
           return x.replace("InlineStart", "Start").replace("InlineEnd", "End").replace("Inline", "Horizontal").replace("Block", "Vertical");
@@ -1505,10 +1623,37 @@ class RN {
     );
     const rn = this.transformProperty(
       transformedProperty,
-      typeof value === "string" ? common.addMissingSpaces(value) : value
+      typeof value === "string" ? addMissingSpaces(value) : value
     );
     const joinedStyles = this.joinStyles(rn);
-    return Object.entries(joinedStyles).filter(([, value2]) => isDefined(value2));
+    return Object.entries(joinedStyles).filter(([, value2]) => config.isDefined(value2)).map(([prop, val]) => [prop, this.makeResponsive(prop, val)]);
+  }
+  makeResponsive(property, value) {
+    const mode = this.Processor.bundlerConfig.polyfills?.responsive;
+    if (!mode) {
+      return value;
+    }
+    if (typeof value === "string") {
+      const rawValue = value.startsWith('"') && value.endsWith('"') ? value.slice(1, -1) : value;
+      if (rawValue.endsWith("%")) {
+        const numValue = parseFloat(rawValue);
+        if (!isNaN(numValue)) {
+          return `rt.makeResponsive(${numValue}, 100, true)`;
+        }
+      }
+    }
+    if (typeof value !== "number") {
+      return value;
+    }
+    const isTextMode = mode === true || mode === "text";
+    const isComponentMode = mode === true || mode === "components";
+    if (isTextMode && (property === "fontSize" || property === "--uniwind-em")) {
+      return `rt.makeResponsive(${value}, ${config.DEFAULT_SCREEN_HEIGHT}, true)`;
+    }
+    if (isComponentMode && COMPONENT_RESPONSIVE_PROPS.has(property)) {
+      return `rt.makeResponsive(${value}, ${config.DEFAULT_SCREEN_WIDTH})`;
+    }
+    return value;
   }
   transformProperty(property, value) {
     if (property in cssToRNMap) {
@@ -1589,7 +1734,7 @@ class RN {
       const borderWidth = styles.borderTopWidth;
       if (BORDER_WIDTH_KEYS.every((key) => styles[key] === borderWidth)) {
         return {
-          ...common.removeKeys(styles, BORDER_WIDTH_KEYS),
+          ...removeKeys(styles, BORDER_WIDTH_KEYS),
           borderWidth
         };
       }
@@ -1598,7 +1743,7 @@ class RN {
       const borderColor = styles.borderTopColor;
       if (BORDER_COLOR_KEYS.every((key) => styles[key] === borderColor)) {
         return {
-          ...common.removeKeys(styles, BORDER_COLOR_KEYS),
+          ...removeKeys(styles, BORDER_COLOR_KEYS),
           borderColor
         };
       }
@@ -1607,7 +1752,7 @@ class RN {
       const borderRadius = styles.borderTopLeftRadius;
       if (BORDER_RADIUS_KEYS.every((key) => styles[key] === borderRadius)) {
         return {
-          ...common.removeKeys(styles, BORDER_RADIUS_KEYS),
+          ...removeKeys(styles, BORDER_RADIUS_KEYS),
           borderRadius
         };
       }
@@ -1620,7 +1765,7 @@ class Units {
   constructor(Processor) {
     this.Processor = Processor;
   }
-  logger = new stringifyThemes.Logger("Units");
+  logger = new config.Logger("Units");
   processLength(length) {
     if (typeof length === "number") {
       return length;
@@ -1636,7 +1781,7 @@ class Units {
         case "rem":
           return length.value * this.Processor.vars["--uniwind-em"];
         case "em":
-          return `this[\`--uniwind-em\`] * ${length.value}`;
+          return `vars["--uniwind-em"]?.(vars) * ${length.value}`;
         default:
           this.logger.warn(`Unsupported unit - ${length.unit}`);
           return length.value;
@@ -1669,7 +1814,7 @@ class Var {
     this.Processor = Processor;
   }
   processVar(variable) {
-    const value = `this[\`${variable.name.ident}\`]`;
+    const value = `vars[${JSON.stringify(variable.name.ident)}]?.(vars)`;
     if (!variable.fallback || variable.fallback.length === 0) {
       return value;
     }
@@ -1679,10 +1824,9 @@ class Var {
 }
 
 class ProcessorBuilder {
-  constructor(themes, polyfills) {
-    this.themes = themes;
-    this.polyfills = polyfills;
-    this.vars["--uniwind-em"] = polyfills?.rem ?? 16;
+  constructor(bundlerConfig) {
+    this.bundlerConfig = bundlerConfig;
+    this.vars["--uniwind-em"] = this.bundlerConfig.polyfills?.rem ?? 16;
   }
   stylesheets = {};
   vars = {};
@@ -1758,7 +1902,7 @@ class ProcessorBuilder {
         return this.stylesheets[this.declarationConfig.className]?.at(-1);
       }
       if (mq.platform !== null) {
-        const platformKey = `${consts.UNIWIND_PLATFORM_VARIABLES}${mq.platform}`;
+        const platformKey = `${config.UNIWIND_PLATFORM_VARIABLES}${mq.platform}`;
         this.scopedVars[platformKey] ??= {};
         return this.scopedVars[platformKey];
       }
@@ -1770,7 +1914,7 @@ class ProcessorBuilder {
       if (this.declarationConfig.theme === null) {
         return this.vars;
       }
-      const themeKey = `${consts.UNIWIND_THEME_VARIABLES}${this.declarationConfig.theme}`;
+      const themeKey = `${config.UNIWIND_THEME_VARIABLES}${this.declarationConfig.theme}`;
       this.scopedVars[themeKey] ??= {};
       return this.scopedVars[themeKey];
     })();
@@ -1792,7 +1936,7 @@ class ProcessorBuilder {
     if (!isVar && important) {
       style.importantProperties.push(property);
     }
-    const match = typeof value === "string" ? value.match(/this\[`(.*?)`\]/) : null;
+    const match = typeof value === "string" ? value.match(/vars\["(.*?)"\]/) : null;
     if (match && !isVar) {
       const className = this.declarationConfig.className;
       if (className === null) {
@@ -1843,7 +1987,7 @@ class ProcessorBuilder {
       if (property === "animation") {
         return this.CSS.processAnimation(value);
       }
-      return this.CSS.processValue(value);
+      return this.CSS.processValue(value, property);
     };
     if (declaration.property === "unparsed") {
       const property = declaration.value.propertyId.property;
@@ -1894,7 +2038,7 @@ class ProcessorBuilder {
           if (selector2.type === "pseudo-class" && selector2.kind === "where") {
             selector2.selectors.forEach((selector3) => {
               selector3.forEach((selector4) => {
-                if (selector4.type === "class" && this.themes.includes(selector4.name)) {
+                if (selector4.type === "class" && this.bundlerConfig.themes.includes(selector4.name)) {
                   theme = selector4.name;
                 }
                 if (selector4.type === "pseudo-class" && selector4.kind === "dir") {
@@ -1922,12 +2066,12 @@ class ProcessorBuilder {
           }
         });
         if ([rtl, theme, active, focus, disabled, dataAttributes].some(Boolean)) {
-          this.declarationConfig.rtl = rtl;
-          this.declarationConfig.theme = theme;
-          this.declarationConfig.active = active;
-          this.declarationConfig.focus = focus;
-          this.declarationConfig.disabled = disabled;
-          this.declarationConfig.dataAttributes = dataAttributes;
+          this.declarationConfig.rtl ??= rtl;
+          this.declarationConfig.theme ??= theme;
+          this.declarationConfig.active ??= active;
+          this.declarationConfig.focus ??= focus;
+          this.declarationConfig.disabled ??= disabled;
+          this.declarationConfig.dataAttributes ??= dataAttributes;
           rule.value.declarations?.declarations?.forEach((declaration) => this.addDeclaration(declaration));
           rule.value.declarations?.importantDeclarations?.forEach((declaration) => this.addDeclaration(declaration, true));
           rule.value.rules?.forEach((rule2) => this.parseRuleRec(rule2));
@@ -2006,52 +2150,29 @@ class ProcessorBuilder {
   }
 }
 
-const compileVirtual = async ({ css, cssPath, platform, themes, polyfills, debug, candidates }) => {
-  const compiler = await node.compile(css, {
-    base: path__default.dirname(cssPath),
-    onDependency: () => void 0
-  });
-  const scanner = new oxide.Scanner({
-    sources: [
-      ...compiler.sources,
-      {
-        negated: false,
-        pattern: "**/*",
-        base: path__default.dirname(cssPath)
-      }
-    ]
-  });
-  const tailwindCSS = compiler.build(candidates ?? scanner.scan());
-  if (platform === consts.Platform.Web) {
-    return lightningcss.transform({
-      code: Buffer.from(tailwindCSS),
-      filename: "uniwind.css",
-      visitor: new stringifyThemes.UniwindCSSVisitor(themes)
-    }).code.toString();
-  }
-  const Processor = new ProcessorBuilder(themes, polyfills);
-  stringifyThemes.Logger.debug = debug === true;
+const compileNativeCSS = (bundlerConfig, tailwindCSS) => {
+  const Processor = new ProcessorBuilder(bundlerConfig);
   Processor.transform(tailwindCSS);
   const stylesheet = serializeJSObject(
-    addMetaToStylesTemplate(Processor, platform),
+    addMetaToStylesTemplate(Processor, bundlerConfig.platform),
     (key, value) => `"${key}": ${value}`
   );
   const vars = serializeJSObject(
     Processor.vars,
+    (key, value) => `"${key}": vars => ${value}`
+  );
+  const keyframes = serializeJSObject(
+    Processor.keyframes,
     (key, value) => `get "${key}"() { return ${value} }`
   );
   const scopedVars = Object.fromEntries(
     Object.entries(Processor.scopedVars).map(([scopedVarsName, scopedVars2]) => [
       scopedVarsName,
-      serializeJSObject(scopedVars2, (key, value) => `get "${key}"() { return ${value} }`)
+      serializeJSObject(scopedVars2, (key, value) => `"${key}": vars => ${value}`)
     ])
   );
-  const keyframes = serializeJSObject(
-    Processor.keyframes,
-    (key, value) => `get "${key}"() { return ${value} }`
-  );
   const serializedScopedVars = Object.entries(scopedVars).map(([scopedVarsName, scopedVars2]) => `"${scopedVarsName}": ({ ${scopedVars2} }),`).join("");
-  const currentColorVar = `get currentColor() { return rt.colorScheme === 'dark' ? '#ffffff' : '#000000' },`;
+  const currentColorVar = `currentColor: () => rt.colorScheme === 'dark' ? '#ffffff' : '#000000',`;
   return [
     "({",
     `scopedVars: ({ ${serializedScopedVars} }),`,
@@ -2062,17 +2183,42 @@ const compileVirtual = async ({ css, cssPath, platform, themes, polyfills, debug
   ].join("");
 };
 
-const injectThemes = async ({
-  themes,
-  dtsPath = "uniwind-types.d.ts",
-  input
-}) => {
-  const stringifiedThemes = stringifyThemes.stringifyThemes(themes);
-  stringifyThemes.buildDtsFile(dtsPath, stringifiedThemes);
-  await stringifyThemes.buildCSS(themes, input);
-  return stringifiedThemes;
+const compileTailwind = async (bundlerConfig) => {
+  const css = await fs__default.promises.readFile(bundlerConfig.cssPath, "utf-8");
+  const compiler = await node.compile(css, {
+    base: path__default.dirname(bundlerConfig.cssPath),
+    onDependency: () => void 0
+  });
+  const scanner = new oxide.Scanner({
+    sources: [
+      ...compiler.sources,
+      {
+        negated: false,
+        pattern: "**/*",
+        base: path__default.dirname(bundlerConfig.cssPath)
+      }
+    ]
+  });
+  return compiler.build(scanner.scan());
 };
 
+const compileWebCSS = (bundlerConfig, tailwindCSS) => {
+  return lightningcss.transform({
+    code: Buffer.from(tailwindCSS),
+    filename: "uniwind.css",
+    visitor: bundlerConfig.cssVisitor
+  }).code.toString();
+};
+
+const compileCSS = async (bundlerConfig) => {
+  const tailwindCSS = await compileTailwind(bundlerConfig);
+  if (bundlerConfig.platform === config.Platform.Web) {
+    return compileWebCSS(bundlerConfig, tailwindCSS);
+  }
+  return compileNativeCSS(bundlerConfig, tailwindCSS);
+};
+
+const cssArtifactPath = path__default.resolve(__dirname, "../../uniwind.css");
 let worker;
 try {
   try {
@@ -2084,64 +2230,34 @@ try {
 } catch {
   worker = require("metro-transform-worker");
 }
-const transform = async (config, projectRoot, filePath, data, options) => {
-  const isCss = options.type !== "asset" && path__default.join(process.cwd(), config.uniwind.cssEntryFile) === path__default.join(projectRoot, filePath);
+const transform = async (config$1, projectRoot, filePath, data, options) => {
+  const isCss = options.type !== "asset" && path__default.join(process.cwd(), config$1.uniwind.cssEntryFile) === path__default.join(projectRoot, filePath);
   if (filePath.endsWith("/components/web/metro-injected.js")) {
-    const cssPath2 = path__default.join(process.cwd(), config.uniwind.cssEntryFile);
-    const injectedThemesCode2 = await injectThemes({
-      input: cssPath2,
-      themes: config.uniwind.themes,
-      dtsPath: config.uniwind.dtsFile
-    });
+    const bundlerConfig2 = config.UniwindBundlerConfig.fromMetroConfig(config$1.uniwind, config.Platform.Web);
     data = Buffer.from(
       [
-        `import { Uniwind } from '${common.name}';`,
-        `Uniwind.__reinit(() => ({}), ${injectedThemesCode2});`
+        `import { Uniwind } from '${_package.name}';`,
+        `Uniwind.__reinit(() => ({}), ${bundlerConfig2.stringifiedThemes});`
       ].join(""),
       "utf-8"
     );
   }
   if (!isCss) {
-    return worker.transform(config, projectRoot, filePath, data, options);
+    return worker.transform(config$1, projectRoot, filePath, data, options);
   }
-  const getPlatform = () => {
-    if (!config.uniwind.isTV) {
-      return options.platform;
-    }
-    if (options.platform === consts.Platform.Android) {
-      return consts.Platform.AndroidTV;
-    }
-    if (options.platform === consts.Platform.iOS) {
-      return consts.Platform.AppleTV;
-    }
-    throw new Error(`Platform ${options.platform} not supported`);
-  };
-  const cssPath = path__default.join(process.cwd(), config.uniwind.cssEntryFile);
-  const injectedThemesCode = await injectThemes({
-    input: cssPath,
-    themes: config.uniwind.themes,
-    dtsPath: config.uniwind.dtsFile
-  });
-  const css = fs__default.readFileSync(cssPath, "utf-8");
-  const platform = getPlatform();
-  const virtualCode = await compileVirtual({
-    css,
-    platform,
-    themes: config.uniwind.themes,
-    polyfills: config.uniwind.polyfills,
-    cssPath,
-    debug: config.uniwind.debug
-  });
-  const isWeb = platform === consts.Platform.Web;
+  const bundlerConfig = config.UniwindBundlerConfig.fromMetroConfig(config$1.uniwind, options.platform);
+  await bundlerConfig.generateArtifacts(cssArtifactPath);
+  const virtualCode = await compileCSS(bundlerConfig);
+  const isWeb = bundlerConfig.platform === config.Platform.Web;
   data = Buffer.from(
     isWeb ? virtualCode : [
-      `const { Uniwind } = require('${common.name}');`,
-      `Uniwind.__reinit(rt => ${virtualCode}, ${injectedThemesCode});`
+      `const { Uniwind } = require('${_package.name}');`,
+      `Uniwind.__reinit(rt => ${virtualCode}, ${bundlerConfig.stringifiedThemes});`
     ].join(""),
     "utf-8"
   );
   const transform2 = await worker.transform(
-    config,
+    config$1,
     projectRoot,
     `${filePath}${isWeb ? "" : ".js"}`,
     data,