@mgcrea/react-native-tailwind 0.12.1 → 0.13.0

package/dist/babel/index.cjs

@@ -34,6 +34,197 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/babel/config-loader.ts
+var fs = __toESM(require("fs"), 1);
+var path = __toESM(require("path"), 1);
+
+// src/utils/flattenColors.ts
+function flattenColors(colors, prefix = "") {
+  const result = {};
+  for (const [key, value] of Object.entries(colors)) {
+    const newKey = key === "DEFAULT" && prefix ? prefix : prefix ? `${prefix}-${key}` : key;
+    if (typeof value === "string") {
+      result[newKey] = value;
+    } else if (typeof value === "object" && value !== null) {
+      Object.assign(result, flattenColors(value, newKey));
+    }
+  }
+  return result;
+}
+
+// src/babel/config-loader.ts
+var configCache = /* @__PURE__ */ new Map();
+function findTailwindConfig(startDir) {
+  let currentDir = startDir;
+  const root = path.parse(currentDir).root;
+  const configNames = [
+    "tailwind.config.mjs",
+    "tailwind.config.js",
+    "tailwind.config.cjs",
+    "tailwind.config.ts"
+  ];
+  while (currentDir !== root) {
+    for (const configName of configNames) {
+      const configPath = path.join(currentDir, configName);
+      if (fs.existsSync(configPath)) {
+        return configPath;
+      }
+    }
+    currentDir = path.dirname(currentDir);
+  }
+  return null;
+}
+function loadTailwindConfig(configPath) {
+  if (configCache.has(configPath)) {
+    return configCache.get(configPath);
+  }
+  try {
+    const resolvedPath = require.resolve(configPath);
+    delete require.cache[resolvedPath];
+    const config = require(configPath);
+    const resolved = "default" in config ? config.default : config;
+    configCache.set(configPath, resolved);
+    return resolved;
+  } catch (error) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(`[react-native-tailwind] Failed to load config from ${configPath}:`, error);
+    }
+    configCache.set(configPath, null);
+    return null;
+  }
+}
+function extractCustomTheme(filename) {
+  const projectDir = path.dirname(filename);
+  const configPath = findTailwindConfig(projectDir);
+  if (!configPath) {
+    return { colors: {}, fontFamily: {}, fontSize: {} };
+  }
+  const config = loadTailwindConfig(configPath);
+  if (!config?.theme) {
+    return { colors: {}, fontFamily: {}, fontSize: {} };
+  }
+  if (config.theme.colors && !config.theme.extend?.colors && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[react-native-tailwind] Using theme.colors will override all default colors. Use theme.extend.colors to add custom colors while keeping defaults."
+    );
+  }
+  const colors = config.theme.extend?.colors ?? config.theme.colors ?? {};
+  if (config.theme.fontFamily && !config.theme.extend?.fontFamily && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[react-native-tailwind] Using theme.fontFamily will override all default font families. Use theme.extend.fontFamily to add custom fonts while keeping defaults."
+    );
+  }
+  const fontFamily = config.theme.extend?.fontFamily ?? config.theme.fontFamily ?? {};
+  const fontFamilyResult = {};
+  for (const [key, value] of Object.entries(fontFamily)) {
+    if (Array.isArray(value)) {
+      fontFamilyResult[key] = value[0];
+    } else {
+      fontFamilyResult[key] = value;
+    }
+  }
+  if (config.theme.fontSize && !config.theme.extend?.fontSize && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[react-native-tailwind] Using theme.fontSize will override all default font sizes. Use theme.extend.fontSize to add custom font sizes while keeping defaults."
+    );
+  }
+  const fontSize = config.theme.extend?.fontSize ?? config.theme.fontSize ?? {};
+  const fontSizeResult = {};
+  for (const [key, value] of Object.entries(fontSize)) {
+    if (typeof value === "number") {
+      fontSizeResult[key] = value;
+    } else if (typeof value === "string") {
+      const parsed = parseFloat(value.replace(/px$/, ""));
+      if (!isNaN(parsed)) {
+        fontSizeResult[key] = parsed;
+      } else {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[react-native-tailwind] Invalid fontSize value for "${key}": ${value}. Expected number or string like "18px".`
+          );
+        }
+      }
+    }
+  }
+  return {
+    colors: flattenColors(colors),
+    fontFamily: fontFamilyResult,
+    fontSize: fontSizeResult
+  };
+}
+
+// src/babel/utils/attributeMatchers.ts
+var DEFAULT_CLASS_ATTRIBUTES = [
+  "className",
+  "contentContainerClassName",
+  "columnWrapperClassName",
+  "ListHeaderComponentClassName",
+  "ListFooterComponentClassName"
+];
+function buildAttributeMatchers(attributes) {
+  const exactMatches = /* @__PURE__ */ new Set();
+  const patterns = [];
+  for (const attr of attributes) {
+    if (attr.includes("*")) {
+      const regexPattern = "^" + attr.replace(/\*/g, ".*") + "$";
+      patterns.push(new RegExp(regexPattern));
+    } else {
+      exactMatches.add(attr);
+    }
+  }
+  return { exactMatches, patterns };
+}
+function isAttributeSupported(attributeName, exactMatches, patterns) {
+  if (exactMatches.has(attributeName)) {
+    return true;
+  }
+  for (const pattern of patterns) {
+    if (pattern.test(attributeName)) {
+      return true;
+    }
+  }
+  return false;
+}
+function getTargetStyleProp(attributeName) {
+  return attributeName.endsWith("ClassName") ? attributeName.replace("ClassName", "Style") : "style";
+}
+
+// src/babel/plugin/state.ts
+var DEFAULT_STYLES_IDENTIFIER = "_twStyles";
+function createInitialState(options, filename, colorSchemeImportSource, colorSchemeHookName, schemeModifierConfig) {
+  const attributes = options?.attributes ?? [...DEFAULT_CLASS_ATTRIBUTES];
+  const { exactMatches, patterns } = buildAttributeMatchers(attributes);
+  const stylesIdentifier = options?.stylesIdentifier ?? DEFAULT_STYLES_IDENTIFIER;
+  const customTheme = extractCustomTheme(filename);
+  return {
+    styleRegistry: /* @__PURE__ */ new Map(),
+    hasClassNames: false,
+    hasStyleSheetImport: false,
+    hasPlatformImport: false,
+    needsPlatformImport: false,
+    hasColorSchemeImport: false,
+    needsColorSchemeImport: false,
+    colorSchemeVariableName: "_twColorScheme",
+    colorSchemeImportSource,
+    colorSchemeHookName,
+    colorSchemeLocalIdentifier: void 0,
+    hasWindowDimensionsImport: false,
+    needsWindowDimensionsImport: false,
+    windowDimensionsVariableName: "_twDimensions",
+    windowDimensionsLocalIdentifier: void 0,
+    customTheme,
+    schemeModifierConfig,
+    supportedAttributes: exactMatches,
+    attributePatterns: patterns,
+    stylesIdentifier,
+    twImportNames: /* @__PURE__ */ new Set(),
+    hasTwImport: false,
+    reactNativeImportPath: void 0,
+    functionComponentsNeedingColorScheme: /* @__PURE__ */ new Set(),
+    functionComponentsNeedingWindowDimensions: /* @__PURE__ */ new Set()
+  };
+}
+
 // src/parser/aspectRatio.ts
 var ASPECT_RATIO_PRESETS = {
   "aspect-auto": void 0,
@@ -77,187 +268,6 @@ function parseAspectRatio(cls) {
   return null;
 }
 
-// src/parser/borders.ts
-var BORDER_WIDTH_SCALE = {
-  "": 1,
-  "0": 0,
-  "2": 2,
-  "4": 4,
-  "8": 8
-};
-var BORDER_RADIUS_SCALE = {
-  none: 0,
-  sm: 2,
-  "": 4,
-  md: 6,
-  lg: 8,
-  xl: 12,
-  "2xl": 16,
-  "3xl": 24,
-  full: 9999
-};
-var BORDER_WIDTH_PROP_MAP = {
-  t: "borderTopWidth",
-  r: "borderRightWidth",
-  b: "borderBottomWidth",
-  l: "borderLeftWidth"
-};
-var BORDER_RADIUS_CORNER_MAP = {
-  tl: "borderTopLeftRadius",
-  tr: "borderTopRightRadius",
-  bl: "borderBottomLeftRadius",
-  br: "borderBottomRightRadius"
-};
-var BORDER_RADIUS_SIDE_MAP = {
-  t: ["borderTopLeftRadius", "borderTopRightRadius"],
-  r: ["borderTopRightRadius", "borderBottomRightRadius"],
-  b: ["borderBottomLeftRadius", "borderBottomRightRadius"],
-  l: ["borderTopLeftRadius", "borderBottomLeftRadius"]
-};
-function parseArbitraryBorderWidth(value) {
-  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
-  if (pxMatch) {
-    return parseInt(pxMatch[1], 10);
-  }
-  if (value.startsWith("[") && value.endsWith("]")) {
-    if (process.env.NODE_ENV !== "production") {
-      console.warn(
-        `[react-native-tailwind] Unsupported arbitrary border width value: ${value}. Only px values are supported (e.g., [8px] or [8]).`
-      );
-    }
-    return null;
-  }
-  return null;
-}
-function parseArbitraryBorderRadius(value) {
-  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
-  if (pxMatch) {
-    return parseInt(pxMatch[1], 10);
-  }
-  if (value.startsWith("[") && value.endsWith("]")) {
-    if (process.env.NODE_ENV !== "production") {
-      console.warn(
-        `[react-native-tailwind] Unsupported arbitrary border radius value: ${value}. Only px values are supported (e.g., [12px] or [12]).`
-      );
-    }
-    return null;
-  }
-  return null;
-}
-function parseBorder(cls) {
-  if (cls === "border-solid") return { borderStyle: "solid" };
-  if (cls === "border-dotted") return { borderStyle: "dotted" };
-  if (cls === "border-dashed") return { borderStyle: "dashed" };
-  if (cls.startsWith("border-")) {
-    return parseBorderWidth(cls);
-  }
-  if (cls === "border") {
-    return { borderWidth: 1 };
-  }
-  if (cls.startsWith("rounded")) {
-    return parseBorderRadius(cls);
-  }
-  return null;
-}
-function parseBorderWidth(cls) {
-  const dirMatch = cls.match(/^border-([trbl])(?:-(.+))?$/);
-  if (dirMatch) {
-    const dir = dirMatch[1];
-    const valueStr = dirMatch[2] || "";
-    if (valueStr.startsWith("[")) {
-      const arbitraryValue = parseArbitraryBorderWidth(valueStr);
-      if (arbitraryValue !== null) {
-        return { [BORDER_WIDTH_PROP_MAP[dir]]: arbitraryValue };
-      }
-      return null;
-    }
-    const scaleValue = BORDER_WIDTH_SCALE[valueStr];
-    if (scaleValue !== void 0) {
-      return { [BORDER_WIDTH_PROP_MAP[dir]]: scaleValue };
-    }
-    return null;
-  }
-  const allMatch = cls.match(/^border-(\d+)$/);
-  if (allMatch) {
-    const value = BORDER_WIDTH_SCALE[allMatch[1]];
-    if (value !== void 0) {
-      return { borderWidth: value };
-    }
-  }
-  const allArbMatch = cls.match(/^border-(\[.+\])$/);
-  if (allArbMatch) {
-    const arbitraryValue = parseArbitraryBorderWidth(allArbMatch[1]);
-    if (arbitraryValue !== null) {
-      return { borderWidth: arbitraryValue };
-    }
-  }
-  return null;
-}
-function parseBorderRadius(cls) {
-  const withoutPrefix = cls.substring(7);
-  if (withoutPrefix === "") {
-    return { borderRadius: BORDER_RADIUS_SCALE[""] };
-  }
-  if (!withoutPrefix.startsWith("-")) {
-    return null;
-  }
-  const rest = withoutPrefix.substring(1);
-  if (rest === "") {
-    return null;
-  }
-  const cornerMatch = rest.match(/^(tl|tr|bl|br)(?:-(.+))?$/);
-  if (cornerMatch) {
-    const corner = cornerMatch[1];
-    const valueStr = cornerMatch[2] || "";
-    if (valueStr.startsWith("[")) {
-      const arbitraryValue = parseArbitraryBorderRadius(valueStr);
-      if (arbitraryValue !== null) {
-        return { [BORDER_RADIUS_CORNER_MAP[corner]]: arbitraryValue };
-      }
-      return null;
-    }
-    const scaleValue2 = BORDER_RADIUS_SCALE[valueStr];
-    if (scaleValue2 !== void 0) {
-      return { [BORDER_RADIUS_CORNER_MAP[corner]]: scaleValue2 };
-    }
-    return null;
-  }
-  const sideMatch = rest.match(/^([trbl])(?:-(.+))?$/);
-  if (sideMatch) {
-    const side = sideMatch[1];
-    const valueStr = sideMatch[2] || "";
-    let value;
-    if (valueStr.startsWith("[")) {
-      const arbitraryValue = parseArbitraryBorderRadius(valueStr);
-      if (arbitraryValue !== null) {
-        value = arbitraryValue;
-      } else {
-        return null;
-      }
-    } else {
-      value = BORDER_RADIUS_SCALE[valueStr];
-    }
-    if (value !== void 0) {
-      const result = {};
-      BORDER_RADIUS_SIDE_MAP[side].forEach((prop) => result[prop] = value);
-      return result;
-    }
-    return null;
-  }
-  if (rest.startsWith("[")) {
-    const arbitraryValue = parseArbitraryBorderRadius(rest);
-    if (arbitraryValue !== null) {
-      return { borderRadius: arbitraryValue };
-    }
-    return null;
-  }
-  const scaleValue = BORDER_RADIUS_SCALE[rest];
-  if (scaleValue !== void 0) {
-    return { borderRadius: scaleValue };
-  }
-  return null;
-}
-
 // src/config/tailwind.ts
 var TAILWIND_COLORS = {
   red: {
@@ -548,20 +558,6 @@ var TAILWIND_COLORS = {
   }
 };
 
-// src/utils/flattenColors.ts
-function flattenColors(colors, prefix = "") {
-  const result = {};
-  for (const [key, value] of Object.entries(colors)) {
-    const newKey = key === "DEFAULT" && prefix ? prefix : prefix ? `${prefix}-${key}` : key;
-    if (typeof value === "string") {
-      result[newKey] = value;
-    } else if (typeof value === "object" && value !== null) {
-      Object.assign(result, flattenColors(value, newKey));
-    }
-  }
-  return result;
-}
-
 // src/parser/colors.ts
 var COLORS = {
   ...flattenColors(TAILWIND_COLORS),
@@ -663,95 +659,312 @@ function parseColor(cls, customColors) {
       return { borderColor: color };
     }
   }
+  const dirBorderMatch = cls.match(/^border-([trblxy])-(.+)$/);
+  if (dirBorderMatch) {
+    const dir = dirBorderMatch[1];
+    const colorKey = dirBorderMatch[2];
+    if (colorKey.startsWith("[") && !colorKey.startsWith("[#")) {
+      return null;
+    }
+    const color = parseColorWithOpacity(colorKey);
+    if (color) {
+      if (dir === "x") {
+        return {
+          borderLeftColor: color,
+          borderRightColor: color
+        };
+      }
+      if (dir === "y") {
+        return {
+          borderTopColor: color,
+          borderBottomColor: color
+        };
+      }
+      const propMap = {
+        t: "borderTopColor",
+        r: "borderRightColor",
+        b: "borderBottomColor",
+        l: "borderLeftColor"
+      };
+      return { [propMap[dir]]: color };
+    }
+  }
   return null;
 }
 
-// src/parser/layout.ts
-function parseArbitraryInset(value) {
-  const pxMatch = value.match(/^\[(-?\d+)(?:px)?\]$/);
+// src/parser/borders.ts
+var BORDER_WIDTH_SCALE = {
+  "": 1,
+  "0": 0,
+  "2": 2,
+  "4": 4,
+  "8": 8
+};
+var BORDER_RADIUS_SCALE = {
+  none: 0,
+  sm: 2,
+  "": 4,
+  md: 6,
+  lg: 8,
+  xl: 12,
+  "2xl": 16,
+  "3xl": 24,
+  full: 9999
+};
+var BORDER_WIDTH_PROP_MAP = {
+  t: "borderTopWidth",
+  r: "borderRightWidth",
+  b: "borderBottomWidth",
+  l: "borderLeftWidth"
+};
+var BORDER_RADIUS_CORNER_MAP = {
+  tl: "borderTopLeftRadius",
+  tr: "borderTopRightRadius",
+  bl: "borderBottomLeftRadius",
+  br: "borderBottomRightRadius"
+};
+var BORDER_RADIUS_SIDE_MAP = {
+  t: ["borderTopLeftRadius", "borderTopRightRadius"],
+  r: ["borderTopRightRadius", "borderBottomRightRadius"],
+  b: ["borderBottomLeftRadius", "borderBottomRightRadius"],
+  l: ["borderTopLeftRadius", "borderBottomLeftRadius"]
+};
+function parseArbitraryBorderWidth(value) {
+  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
   if (pxMatch) {
     return parseInt(pxMatch[1], 10);
   }
-  const percentMatch = value.match(/^\[(-?\d+(?:\.\d+)?)%\]$/);
-  if (percentMatch) {
-    return `${percentMatch[1]}%`;
-  }
   if (value.startsWith("[") && value.endsWith("]")) {
     if (process.env.NODE_ENV !== "production") {
       console.warn(
-        `[react-native-tailwind] Unsupported arbitrary inset unit: ${value}. Only px and % are supported.`
+        `[react-native-tailwind] Unsupported arbitrary border width value: ${value}. Only px values are supported (e.g., [8px] or [8]).`
       );
     }
     return null;
   }
   return null;
 }
-function parseArbitraryZIndex(value) {
-  const zMatch = value.match(/^\[(-?\d+)\]$/);
-  if (zMatch) {
-    return parseInt(zMatch[1], 10);
+function parseArbitraryBorderRadius(value) {
+  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
+  if (pxMatch) {
+    return parseInt(pxMatch[1], 10);
   }
   if (value.startsWith("[") && value.endsWith("]")) {
     if (process.env.NODE_ENV !== "production") {
       console.warn(
-        `[react-native-tailwind] Invalid arbitrary z-index: ${value}. Only integers are supported.`
+        `[react-native-tailwind] Unsupported arbitrary border radius value: ${value}. Only px values are supported (e.g., [12px] or [12]).`
       );
     }
     return null;
   }
   return null;
 }
-function parseArbitraryGrowShrink(value) {
-  const match = value.match(/^\[(\d+(?:\.\d+)?|\.\d+)\]$/);
-  if (match) {
-    return parseFloat(match[1]);
+function parseBorder(cls, customColors) {
+  if (cls === "border-solid") return { borderStyle: "solid" };
+  if (cls === "border-dotted") return { borderStyle: "dotted" };
+  if (cls === "border-dashed") return { borderStyle: "dashed" };
+  if (cls.startsWith("border-")) {
+    return parseBorderWidth(cls, customColors);
   }
-  if (value.startsWith("[") && value.endsWith("]")) {
-    if (process.env.NODE_ENV !== "production") {
-      console.warn(
-        `[react-native-tailwind] Invalid arbitrary grow/shrink value: ${value}. Only non-negative numbers are supported (e.g., [1.5], [2], [0.5], [.5]).`
-      );
+  if (cls === "border") {
+    return { borderWidth: 1 };
+  }
+  if (cls.startsWith("rounded")) {
+    return parseBorderRadius(cls);
+  }
+  return null;
+}
+function parseBorderWidth(cls, customColors) {
+  const dirMatch = cls.match(/^border-([trbl])(?:-(.+))?$/);
+  if (dirMatch) {
+    const dir = dirMatch[1];
+    const valueStr = dirMatch[2] || "";
+    if (valueStr) {
+      const colorResult = parseColor(cls, customColors);
+      if (colorResult !== null) {
+        return null;
+      }
+    }
+    if (valueStr.startsWith("[")) {
+      const arbitraryValue = parseArbitraryBorderWidth(valueStr);
+      if (arbitraryValue !== null) {
+        return { [BORDER_WIDTH_PROP_MAP[dir]]: arbitraryValue };
+      }
+      return null;
+    }
+    const scaleValue = BORDER_WIDTH_SCALE[valueStr];
+    if (scaleValue !== void 0) {
+      return { [BORDER_WIDTH_PROP_MAP[dir]]: scaleValue };
     }
     return null;
   }
+  const allMatch = cls.match(/^border-(\d+)$/);
+  if (allMatch) {
+    const value = BORDER_WIDTH_SCALE[allMatch[1]];
+    if (value !== void 0) {
+      return { borderWidth: value };
+    }
+  }
+  const allArbMatch = cls.match(/^border-(\[.+\])$/);
+  if (allArbMatch) {
+    const arbitraryValue = parseArbitraryBorderWidth(allArbMatch[1]);
+    if (arbitraryValue !== null) {
+      return { borderWidth: arbitraryValue };
+    }
+  }
   return null;
 }
-var DISPLAY_MAP = {
-  flex: { display: "flex" },
-  hidden: { display: "none" }
-};
-var FLEX_DIRECTION_MAP = {
-  "flex-row": { flexDirection: "row" },
-  "flex-row-reverse": { flexDirection: "row-reverse" },
-  "flex-col": { flexDirection: "column" },
-  "flex-col-reverse": { flexDirection: "column-reverse" }
-};
-var FLEX_WRAP_MAP = {
-  "flex-wrap": { flexWrap: "wrap" },
-  "flex-wrap-reverse": { flexWrap: "wrap-reverse" },
-  "flex-nowrap": { flexWrap: "nowrap" }
-};
-var FLEX_MAP = {
-  "flex-1": { flex: 1 },
-  "flex-auto": { flex: 1 },
-  "flex-none": { flex: 0 }
-};
-var GROW_SHRINK_MAP = {
-  grow: { flexGrow: 1 },
-  "grow-0": { flexGrow: 0 },
-  shrink: { flexShrink: 1 },
-  "shrink-0": { flexShrink: 0 },
-  // CSS-style aliases
-  "flex-grow": { flexGrow: 1 },
-  "flex-grow-0": { flexGrow: 0 },
-  "flex-shrink": { flexShrink: 1 },
-  "flex-shrink-0": { flexShrink: 0 }
-};
-var JUSTIFY_CONTENT_MAP = {
-  "justify-start": { justifyContent: "flex-start" },
-  "justify-end": { justifyContent: "flex-end" },
-  "justify-center": { justifyContent: "center" },
-  "justify-between": { justifyContent: "space-between" },
+function parseBorderRadius(cls) {
+  const withoutPrefix = cls.substring(7);
+  if (withoutPrefix === "") {
+    return { borderRadius: BORDER_RADIUS_SCALE[""] };
+  }
+  if (!withoutPrefix.startsWith("-")) {
+    return null;
+  }
+  const rest = withoutPrefix.substring(1);
+  if (rest === "") {
+    return null;
+  }
+  const cornerMatch = rest.match(/^(tl|tr|bl|br)(?:-(.+))?$/);
+  if (cornerMatch) {
+    const corner = cornerMatch[1];
+    const valueStr = cornerMatch[2] || "";
+    if (valueStr.startsWith("[")) {
+      const arbitraryValue = parseArbitraryBorderRadius(valueStr);
+      if (arbitraryValue !== null) {
+        return { [BORDER_RADIUS_CORNER_MAP[corner]]: arbitraryValue };
+      }
+      return null;
+    }
+    const scaleValue2 = BORDER_RADIUS_SCALE[valueStr];
+    if (scaleValue2 !== void 0) {
+      return { [BORDER_RADIUS_CORNER_MAP[corner]]: scaleValue2 };
+    }
+    return null;
+  }
+  const sideMatch = rest.match(/^([trbl])(?:-(.+))?$/);
+  if (sideMatch) {
+    const side = sideMatch[1];
+    const valueStr = sideMatch[2] || "";
+    let value;
+    if (valueStr.startsWith("[")) {
+      const arbitraryValue = parseArbitraryBorderRadius(valueStr);
+      if (arbitraryValue !== null) {
+        value = arbitraryValue;
+      } else {
+        return null;
+      }
+    } else {
+      value = BORDER_RADIUS_SCALE[valueStr];
+    }
+    if (value !== void 0) {
+      const result = {};
+      BORDER_RADIUS_SIDE_MAP[side].forEach((prop) => result[prop] = value);
+      return result;
+    }
+    return null;
+  }
+  if (rest.startsWith("[")) {
+    const arbitraryValue = parseArbitraryBorderRadius(rest);
+    if (arbitraryValue !== null) {
+      return { borderRadius: arbitraryValue };
+    }
+    return null;
+  }
+  const scaleValue = BORDER_RADIUS_SCALE[rest];
+  if (scaleValue !== void 0) {
+    return { borderRadius: scaleValue };
+  }
+  return null;
+}
+
+// src/parser/layout.ts
+function parseArbitraryInset(value) {
+  const pxMatch = value.match(/^\[(-?\d+)(?:px)?\]$/);
+  if (pxMatch) {
+    return parseInt(pxMatch[1], 10);
+  }
+  const percentMatch = value.match(/^\[(-?\d+(?:\.\d+)?)%\]$/);
+  if (percentMatch) {
+    return `${percentMatch[1]}%`;
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Unsupported arbitrary inset unit: ${value}. Only px and % are supported.`
+      );
+    }
+    return null;
+  }
+  return null;
+}
+function parseArbitraryZIndex(value) {
+  const zMatch = value.match(/^\[(-?\d+)\]$/);
+  if (zMatch) {
+    return parseInt(zMatch[1], 10);
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Invalid arbitrary z-index: ${value}. Only integers are supported.`
+      );
+    }
+    return null;
+  }
+  return null;
+}
+function parseArbitraryGrowShrink(value) {
+  const match = value.match(/^\[(\d+(?:\.\d+)?|\.\d+)\]$/);
+  if (match) {
+    return parseFloat(match[1]);
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Invalid arbitrary grow/shrink value: ${value}. Only non-negative numbers are supported (e.g., [1.5], [2], [0.5], [.5]).`
+      );
+    }
+    return null;
+  }
+  return null;
+}
+var DISPLAY_MAP = {
+  flex: { display: "flex" },
+  hidden: { display: "none" }
+};
+var FLEX_DIRECTION_MAP = {
+  "flex-row": { flexDirection: "row" },
+  "flex-row-reverse": { flexDirection: "row-reverse" },
+  "flex-col": { flexDirection: "column" },
+  "flex-col-reverse": { flexDirection: "column-reverse" }
+};
+var FLEX_WRAP_MAP = {
+  "flex-wrap": { flexWrap: "wrap" },
+  "flex-wrap-reverse": { flexWrap: "wrap-reverse" },
+  "flex-nowrap": { flexWrap: "nowrap" }
+};
+var FLEX_MAP = {
+  "flex-1": { flex: 1 },
+  "flex-auto": { flex: 1 },
+  "flex-none": { flex: 0 }
+};
+var GROW_SHRINK_MAP = {
+  grow: { flexGrow: 1 },
+  "grow-0": { flexGrow: 0 },
+  shrink: { flexShrink: 1 },
+  "shrink-0": { flexShrink: 0 },
+  // CSS-style aliases
+  "flex-grow": { flexGrow: 1 },
+  "flex-grow-0": { flexGrow: 0 },
+  "flex-shrink": { flexShrink: 1 },
+  "flex-shrink-0": { flexShrink: 0 }
+};
+var JUSTIFY_CONTENT_MAP = {
+  "justify-start": { justifyContent: "flex-start" },
+  "justify-end": { justifyContent: "flex-end" },
+  "justify-center": { justifyContent: "center" },
+  "justify-between": { justifyContent: "space-between" },
   "justify-around": { justifyContent: "space-around" },
   "justify-evenly": { justifyContent: "space-evenly" }
 };
@@ -1018,6 +1231,9 @@ function parseShadow(cls) {
   return null;
 }
 
+// src/config/markers.ts
+var RUNTIME_DIMENSIONS_MARKER = "{{RUNTIME:dimensions.";
+
 // src/parser/sizing.ts
 var SIZE_SCALE = {
   0: 0,
@@ -1095,6 +1311,9 @@ function parseArbitrarySize(value) {
 function parseSizing(cls) {
   if (cls.startsWith("w-")) {
     const sizeKey = cls.substring(2);
+    if (sizeKey === "screen") {
+      return { width: `${RUNTIME_DIMENSIONS_MARKER}width}}` };
+    }
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {
       return { width: arbitrarySize };
@@ -1113,6 +1332,9 @@ function parseSizing(cls) {
   }
   if (cls.startsWith("h-")) {
     const sizeKey = cls.substring(2);
+    if (sizeKey === "screen") {
+      return { height: `${RUNTIME_DIMENSIONS_MARKER}height}}` };
+    }
     const arbitrarySize = parseArbitrarySize(sizeKey);
     if (arbitrarySize !== null) {
       return { height: arbitrarySize };
@@ -1921,7 +2143,7 @@ function parseClassName(className, customTheme) {
 function parseClass(cls, customTheme) {
   const parsers = [
     parseSpacing,
-    parseBorder,
+    (cls2) => parseBorder(cls2, customTheme?.colors),
     (cls2) => parseColor(cls2, customTheme?.colors),
     parseLayout,
     (cls2) => parseTypography(cls2, customTheme?.fontFamily, customTheme?.fontSize),
@@ -1949,173 +2171,84 @@ function generateStyleKey(className) {
   return key;
 }
 
-// src/babel/config-loader.ts
-var fs = __toESM(require("fs"), 1);
-var path = __toESM(require("path"), 1);
-var configCache = /* @__PURE__ */ new Map();
-function findTailwindConfig(startDir) {
-  let currentDir = startDir;
-  const root = path.parse(currentDir).root;
-  const configNames = [
-    "tailwind.config.mjs",
-    "tailwind.config.js",
-    "tailwind.config.cjs",
-    "tailwind.config.ts"
-  ];
-  while (currentDir !== root) {
-    for (const configName of configNames) {
-      const configPath = path.join(currentDir, configName);
-      if (fs.existsSync(configPath)) {
-        return configPath;
+// src/babel/utils/windowDimensionsProcessing.ts
+function hasRuntimeDimensions(styleObject) {
+  return Object.values(styleObject).some(
+    (value) => typeof value === "string" && value.startsWith(RUNTIME_DIMENSIONS_MARKER)
+  );
+}
+function createRuntimeDimensionObject(styleObject, state, t) {
+  state.needsWindowDimensionsImport = true;
+  const properties = [];
+  for (const [key, value] of Object.entries(styleObject)) {
+    let valueNode;
+    if (typeof value === "string" && value.startsWith(RUNTIME_DIMENSIONS_MARKER)) {
+      const match = value.match(/dimensions\.(\w+)/);
+      const prop = match?.[1];
+      if (prop) {
+        valueNode = t.memberExpression(t.identifier(state.windowDimensionsVariableName), t.identifier(prop));
+      } else {
+        valueNode = t.stringLiteral(value);
       }
+    } else if (typeof value === "number") {
+      valueNode = t.numericLiteral(value);
+    } else if (typeof value === "string") {
+      valueNode = t.stringLiteral(value);
+    } else if (typeof value === "object" && value !== null) {
+      valueNode = t.valueToNode(value);
+    } else {
+      valueNode = t.valueToNode(value);
     }
-    currentDir = path.dirname(currentDir);
+    properties.push(t.objectProperty(t.identifier(key), valueNode));
   }
-  return null;
+  return t.objectExpression(properties);
 }
-function loadTailwindConfig(configPath) {
-  if (configCache.has(configPath)) {
-    return configCache.get(configPath);
-  }
-  try {
-    const resolvedPath = require.resolve(configPath);
-    delete require.cache[resolvedPath];
-    const config = require(configPath);
-    const resolved = "default" in config ? config.default : config;
-    configCache.set(configPath, resolved);
-    return resolved;
-  } catch (error) {
-    if (process.env.NODE_ENV !== "production") {
-      console.warn(`[react-native-tailwind] Failed to load config from ${configPath}:`, error);
+function splitStaticAndRuntimeStyles(styleObject) {
+  const staticStyles = {};
+  const runtimeStyles = {};
+  for (const [key, value] of Object.entries(styleObject)) {
+    if (typeof value === "string" && value.startsWith(RUNTIME_DIMENSIONS_MARKER)) {
+      runtimeStyles[key] = value;
+    } else {
+      staticStyles[key] = value;
     }
-    configCache.set(configPath, null);
-    return null;
   }
+  return { static: staticStyles, runtime: runtimeStyles };
 }
-function extractCustomTheme(filename) {
-  const projectDir = path.dirname(filename);
-  const configPath = findTailwindConfig(projectDir);
-  if (!configPath) {
-    return { colors: {}, fontFamily: {}, fontSize: {} };
-  }
-  const config = loadTailwindConfig(configPath);
-  if (!config?.theme) {
-    return { colors: {}, fontFamily: {}, fontSize: {} };
-  }
-  if (config.theme.colors && !config.theme.extend?.colors && process.env.NODE_ENV !== "production") {
-    console.warn(
-      "[react-native-tailwind] Using theme.colors will override all default colors. Use theme.extend.colors to add custom colors while keeping defaults."
-    );
-  }
-  const colors = config.theme.extend?.colors ?? config.theme.colors ?? {};
-  if (config.theme.fontFamily && !config.theme.extend?.fontFamily && process.env.NODE_ENV !== "production") {
-    console.warn(
-      "[react-native-tailwind] Using theme.fontFamily will override all default font families. Use theme.extend.fontFamily to add custom fonts while keeping defaults."
-    );
-  }
-  const fontFamily = config.theme.extend?.fontFamily ?? config.theme.fontFamily ?? {};
-  const fontFamilyResult = {};
-  for (const [key, value] of Object.entries(fontFamily)) {
-    if (Array.isArray(value)) {
-      fontFamilyResult[key] = value[0];
-    } else {
-      fontFamilyResult[key] = value;
+
+// src/babel/utils/colorSchemeModifierProcessing.ts
+function processColorSchemeModifiers(colorSchemeModifiers, state, parseClassName2, generateStyleKey2, t) {
+  state.needsColorSchemeImport = true;
+  const modifiersByScheme = /* @__PURE__ */ new Map();
+  for (const mod of colorSchemeModifiers) {
+    const scheme = mod.modifier;
+    if (!modifiersByScheme.has(scheme)) {
+      modifiersByScheme.set(scheme, []);
+    }
+    const schemeGroup = modifiersByScheme.get(scheme);
+    if (schemeGroup) {
+      schemeGroup.push(mod);
     }
   }
-  if (config.theme.fontSize && !config.theme.extend?.fontSize && process.env.NODE_ENV !== "production") {
-    console.warn(
-      "[react-native-tailwind] Using theme.fontSize will override all default font sizes. Use theme.extend.fontSize to add custom font sizes while keeping defaults."
+  const conditionalExpressions = [];
+  for (const [scheme, modifiers] of modifiersByScheme) {
+    const classNames = modifiers.map((m) => m.baseClass).join(" ");
+    const styleObject = parseClassName2(classNames, state.customTheme);
+    if (hasRuntimeDimensions(styleObject)) {
+      throw new Error(
+        `w-screen and h-screen cannot be combined with color scheme modifiers (dark:, light:, scheme:). Found in: "${scheme}:${classNames}". Use w-screen/h-screen without modifiers instead.`
+      );
+    }
+    const styleKey = generateStyleKey2(`${scheme}_${classNames}`);
+    state.styleRegistry.set(styleKey, styleObject);
+    const colorSchemeCheck = t.binaryExpression(
+      "===",
+      t.identifier(state.colorSchemeVariableName),
+      t.stringLiteral(scheme)
     );
-  }
-  const fontSize = config.theme.extend?.fontSize ?? config.theme.fontSize ?? {};
-  const fontSizeResult = {};
-  for (const [key, value] of Object.entries(fontSize)) {
-    if (typeof value === "number") {
-      fontSizeResult[key] = value;
-    } else if (typeof value === "string") {
-      const parsed = parseFloat(value.replace(/px$/, ""));
-      if (!isNaN(parsed)) {
-        fontSizeResult[key] = parsed;
-      } else {
-        if (process.env.NODE_ENV !== "production") {
-          console.warn(
-            `[react-native-tailwind] Invalid fontSize value for "${key}": ${value}. Expected number or string like "18px".`
-          );
-        }
-      }
-    }
-  }
-  return {
-    colors: flattenColors(colors),
-    fontFamily: fontFamilyResult,
-    fontSize: fontSizeResult
-  };
-}
-
-// src/babel/utils/attributeMatchers.ts
-var DEFAULT_CLASS_ATTRIBUTES = [
-  "className",
-  "contentContainerClassName",
-  "columnWrapperClassName",
-  "ListHeaderComponentClassName",
-  "ListFooterComponentClassName"
-];
-function buildAttributeMatchers(attributes) {
-  const exactMatches = /* @__PURE__ */ new Set();
-  const patterns = [];
-  for (const attr of attributes) {
-    if (attr.includes("*")) {
-      const regexPattern = "^" + attr.replace(/\*/g, ".*") + "$";
-      patterns.push(new RegExp(regexPattern));
-    } else {
-      exactMatches.add(attr);
-    }
-  }
-  return { exactMatches, patterns };
-}
-function isAttributeSupported(attributeName, exactMatches, patterns) {
-  if (exactMatches.has(attributeName)) {
-    return true;
-  }
-  for (const pattern of patterns) {
-    if (pattern.test(attributeName)) {
-      return true;
-    }
-  }
-  return false;
-}
-function getTargetStyleProp(attributeName) {
-  return attributeName.endsWith("ClassName") ? attributeName.replace("ClassName", "Style") : "style";
-}
-
-// src/babel/utils/colorSchemeModifierProcessing.ts
-function processColorSchemeModifiers(colorSchemeModifiers, state, parseClassName2, generateStyleKey2, t) {
-  state.needsColorSchemeImport = true;
-  const modifiersByScheme = /* @__PURE__ */ new Map();
-  for (const mod of colorSchemeModifiers) {
-    const scheme = mod.modifier;
-    if (!modifiersByScheme.has(scheme)) {
-      modifiersByScheme.set(scheme, []);
-    }
-    const schemeGroup = modifiersByScheme.get(scheme);
-    if (schemeGroup) {
-      schemeGroup.push(mod);
-    }
-  }
-  const conditionalExpressions = [];
-  for (const [scheme, modifiers] of modifiersByScheme) {
-    const classNames = modifiers.map((m) => m.baseClass).join(" ");
-    const styleObject = parseClassName2(classNames, state.customTheme);
-    const styleKey = generateStyleKey2(`${scheme}_${classNames}`);
-    state.styleRegistry.set(styleKey, styleObject);
-    const colorSchemeCheck = t.binaryExpression(
-      "===",
-      t.identifier(state.colorSchemeVariableName),
-      t.stringLiteral(scheme)
-    );
-    const styleReference = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
-    const conditionalExpression = t.logicalExpression("&&", colorSchemeCheck, styleReference);
-    conditionalExpressions.push(conditionalExpression);
+    const styleReference = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
+    const conditionalExpression = t.logicalExpression("&&", colorSchemeCheck, styleReference);
+    conditionalExpressions.push(conditionalExpression);
   }
   return conditionalExpressions;
 }
@@ -2142,6 +2275,8 @@ function getComponentModifierSupport(jsxElement, t) {
   switch (componentName) {
     case "Pressable":
       return { component: "Pressable", supportedModifiers: ["active", "hover", "focus", "disabled"] };
+    case "TouchableOpacity":
+      return { component: "TouchableOpacity", supportedModifiers: ["active", "disabled"] };
     case "TextInput":
       return { component: "TextInput", supportedModifiers: ["focus", "disabled", "placeholder"] };
     default:
@@ -2482,6 +2617,11 @@ function processStaticClassNameWithModifiers(className, state, parseClassName2,
   if (baseClasses.length > 0) {
     const baseClassName = baseClasses.join(" ");
     const baseStyleObject = parseClassName2(baseClassName, state.customTheme);
+    if (hasRuntimeDimensions(baseStyleObject)) {
+      throw new Error(
+        `w-screen and h-screen cannot be combined with state modifiers (active:, hover:, focus:, etc.) or platform modifiers (ios:, android:, web:). Found in: "${baseClassName}". Use w-screen/h-screen without modifiers instead.`
+      );
+    }
     const baseStyleKey = generateStyleKey2(baseClassName);
     state.styleRegistry.set(baseStyleKey, baseStyleObject);
     baseStyleExpression = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey));
@@ -2491,75 +2631,695 @@ function processStaticClassNameWithModifiers(className, state, parseClassName2,
     if (!modifiersByType.has(mod.modifier)) {
       modifiersByType.set(mod.modifier, []);
     }
-    const modGroup = modifiersByType.get(mod.modifier);
-    if (modGroup) {
-      modGroup.push(mod);
+    const modGroup = modifiersByType.get(mod.modifier);
+    if (modGroup) {
+      modGroup.push(mod);
+    }
+  }
+  const styleArrayElements = [];
+  if (baseStyleExpression) {
+    styleArrayElements.push(baseStyleExpression);
+  }
+  for (const [modifierType, modifiers] of modifiersByType) {
+    const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
+    const modifierStyleObject = parseClassName2(modifierClassNames, state.customTheme);
+    if (hasRuntimeDimensions(modifierStyleObject)) {
+      throw new Error(
+        `w-screen and h-screen cannot be combined with state modifiers (active:, hover:, focus:, etc.) or platform modifiers (ios:, android:, web:). Found in: "${modifierType}:${modifierClassNames}". Use w-screen/h-screen without modifiers instead.`
+      );
+    }
+    const modifierStyleKey = generateStyleKey2(`${modifierType}_${modifierClassNames}`);
+    state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
+    const stateProperty = getStatePropertyForModifier(modifierType);
+    const conditionalExpression = t.logicalExpression(
+      "&&",
+      t.identifier(stateProperty),
+      t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(modifierStyleKey))
+    );
+    styleArrayElements.push(conditionalExpression);
+  }
+  if (styleArrayElements.length === 1) {
+    return styleArrayElements[0];
+  }
+  return t.arrayExpression(styleArrayElements);
+}
+function createStyleFunction(styleExpression, modifierTypes, t) {
+  const paramProperties = [];
+  const usedStateProps = /* @__PURE__ */ new Set();
+  for (const modifierType of modifierTypes) {
+    const stateProperty = getStatePropertyForModifier(modifierType);
+    if (!usedStateProps.has(stateProperty)) {
+      usedStateProps.add(stateProperty);
+      paramProperties.push(
+        t.objectProperty(t.identifier(stateProperty), t.identifier(stateProperty), false, true)
+      );
+    }
+  }
+  const param = t.objectPattern(paramProperties);
+  return t.arrowFunctionExpression([param], styleExpression);
+}
+
+// src/babel/utils/platformModifierProcessing.ts
+function processPlatformModifiers(platformModifiers, state, parseClassName2, generateStyleKey2, t) {
+  state.needsPlatformImport = true;
+  const modifiersByPlatform = /* @__PURE__ */ new Map();
+  for (const mod of platformModifiers) {
+    const platform = mod.modifier;
+    if (!modifiersByPlatform.has(platform)) {
+      modifiersByPlatform.set(platform, []);
+    }
+    const platformGroup = modifiersByPlatform.get(platform);
+    if (platformGroup) {
+      platformGroup.push(mod);
+    }
+  }
+  const selectProperties = [];
+  for (const [platform, modifiers] of modifiersByPlatform) {
+    const classNames = modifiers.map((m) => m.baseClass).join(" ");
+    const styleObject = parseClassName2(classNames, state.customTheme);
+    if (hasRuntimeDimensions(styleObject)) {
+      throw new Error(
+        `w-screen and h-screen cannot be combined with platform modifiers (ios:, android:, web:). Found in: "${platform}:${classNames}". Use w-screen/h-screen without modifiers instead.`
+      );
+    }
+    const styleKey = generateStyleKey2(`${platform}_${classNames}`);
+    state.styleRegistry.set(styleKey, styleObject);
+    const styleReference = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
+    selectProperties.push(t.objectProperty(t.identifier(platform), styleReference));
+  }
+  return t.callExpression(t.memberExpression(t.identifier("Platform"), t.identifier("select")), [
+    t.objectExpression(selectProperties)
+  ]);
+}
+
+// src/babel/utils/styleTransforms.ts
+function getStyleExpression(styleAttribute, t) {
+  const value = styleAttribute.value;
+  if (!t.isJSXExpressionContainer(value)) return null;
+  const expression = value.expression;
+  if (t.isJSXEmptyExpression(expression)) return null;
+  return expression;
+}
+function findStyleAttribute(path2, targetStyleProp, t) {
+  const parent = path2.parent;
+  return parent.attributes.find(
+    (attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === targetStyleProp
+  );
+}
+function replaceWithStyleAttribute(classNamePath, styleKey, targetStyleProp, stylesIdentifier, t) {
+  const styleAttribute = t.jsxAttribute(
+    t.jsxIdentifier(targetStyleProp),
+    t.jsxExpressionContainer(t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)))
+  );
+  classNamePath.replaceWith(styleAttribute);
+}
+function mergeStyleAttribute(classNamePath, styleAttribute, styleKey, stylesIdentifier, t) {
+  const existingStyle = getStyleExpression(styleAttribute, t);
+  if (!existingStyle) return;
+  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
+    const paramIdentifier = t.identifier("_state");
+    const functionCall = t.callExpression(existingStyle, [paramIdentifier]);
+    const mergedArray = t.arrayExpression([
+      t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)),
+      functionCall
+    ]);
+    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+  } else {
+    const styleArray = t.arrayExpression([
+      t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)),
+      existingStyle
+    ]);
+    styleAttribute.value = t.jsxExpressionContainer(styleArray);
+  }
+  classNamePath.remove();
+}
+function replaceDynamicWithStyleAttribute(classNamePath, result, targetStyleProp, t) {
+  const styleAttribute = t.jsxAttribute(
+    t.jsxIdentifier(targetStyleProp),
+    t.jsxExpressionContainer(result.expression)
+  );
+  classNamePath.replaceWith(styleAttribute);
+}
+function mergeDynamicStyleAttribute(classNamePath, styleAttribute, result, t) {
+  const existingStyle = getStyleExpression(styleAttribute, t);
+  if (!existingStyle) return;
+  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
+    const paramIdentifier = t.identifier("_state");
+    const functionCall = t.callExpression(existingStyle, [paramIdentifier]);
+    const mergedArray = t.arrayExpression([result.expression, functionCall]);
+    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+  } else {
+    let styleArray;
+    if (t.isArrayExpression(existingStyle)) {
+      styleArray = t.arrayExpression([result.expression, ...existingStyle.elements]);
+    } else {
+      styleArray = t.arrayExpression([result.expression, existingStyle]);
+    }
+    styleAttribute.value = t.jsxExpressionContainer(styleArray);
+  }
+  classNamePath.remove();
+}
+function replaceWithStyleFunctionAttribute(classNamePath, styleFunctionExpression, targetStyleProp, t) {
+  const styleAttribute = t.jsxAttribute(
+    t.jsxIdentifier(targetStyleProp),
+    t.jsxExpressionContainer(styleFunctionExpression)
+  );
+  classNamePath.replaceWith(styleAttribute);
+}
+function mergeStyleFunctionAttribute(classNamePath, styleAttribute, styleFunctionExpression, t) {
+  const existingStyle = getStyleExpression(styleAttribute, t);
+  if (!existingStyle) return;
+  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
+    const paramIdentifier = t.identifier("_state");
+    const newFunctionCall = t.callExpression(styleFunctionExpression, [paramIdentifier]);
+    const existingFunctionCall = t.callExpression(existingStyle, [paramIdentifier]);
+    const mergedArray = t.arrayExpression([newFunctionCall, existingFunctionCall]);
+    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+  } else {
+    const paramIdentifier = t.identifier("_state");
+    const functionCall = t.callExpression(styleFunctionExpression, [paramIdentifier]);
+    const mergedArray = t.arrayExpression([functionCall, existingStyle]);
+    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+  }
+  classNamePath.remove();
+}
+function addOrMergePlaceholderTextColorProp(jsxOpeningElement, color, t) {
+  const existingProp = jsxOpeningElement.attributes.find(
+    (attr) => t.isJSXAttribute(attr) && attr.name.name === "placeholderTextColor"
+  );
+  if (existingProp) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] placeholderTextColor prop will be overridden by className placeholder: modifier. Remove the explicit prop or the placeholder: modifier to avoid confusion.`
+      );
+    }
+    existingProp.value = t.stringLiteral(color);
+  } else {
+    const newProp = t.jsxAttribute(t.jsxIdentifier("placeholderTextColor"), t.stringLiteral(color));
+    jsxOpeningElement.attributes.push(newProp);
+  }
+}
+
+// src/babel/plugin/componentScope.ts
+function isComponentScope(functionPath, t) {
+  const node = functionPath.node;
+  const parent = functionPath.parent;
+  const parentPath = functionPath.parentPath;
+  if (t.isClassMethod(parent)) {
+    return false;
+  }
+  if (functionPath.findParent((p) => t.isClassBody(p.node))) {
+    return false;
+  }
+  if (t.isFunctionDeclaration(node)) {
+    if (t.isProgram(parent) || t.isExportNamedDeclaration(parent) || t.isExportDefaultDeclaration(parent)) {
+      return true;
+    }
+  }
+  if (t.isFunctionExpression(node) || t.isArrowFunctionExpression(node)) {
+    if (t.isVariableDeclarator(parent)) {
+      const varDeclarationPath = parentPath?.parentPath;
+      if (varDeclarationPath && t.isVariableDeclaration(varDeclarationPath.node) && (t.isProgram(varDeclarationPath.parent) || t.isExportNamedDeclaration(varDeclarationPath.parent))) {
+        if (t.isIdentifier(parent.id)) {
+          const name = parent.id.name;
+          return /^[A-Z]/.test(name);
+        }
+      }
+    }
+  }
+  return false;
+}
+function findComponentScope(path2, t) {
+  let current = path2.getFunctionParent();
+  while (current) {
+    if (t.isFunction(current.node) && isComponentScope(current, t)) {
+      return current;
+    }
+    current = current.getFunctionParent();
+  }
+  return null;
+}
+
+// src/babel/plugin/visitors/className.ts
+function jsxAttributeVisitor(path2, state, t) {
+  const node = path2.node;
+  if (!t.isJSXIdentifier(node.name)) {
+    return;
+  }
+  const attributeName = node.name.name;
+  if (!isAttributeSupported(attributeName, state.supportedAttributes, state.attributePatterns)) {
+    return;
+  }
+  const value = node.value;
+  const targetStyleProp = getTargetStyleProp(attributeName);
+  const processStaticClassName = (className) => {
+    const trimmedClassName = className.trim();
+    if (!trimmedClassName) {
+      path2.remove();
+      return true;
+    }
+    state.hasClassNames = true;
+    const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(trimmedClassName);
+    const modifierClasses = [];
+    for (const modifier of rawModifierClasses) {
+      if (isSchemeModifier(modifier.modifier)) {
+        const expanded = expandSchemeModifier(
+          modifier,
+          state.customTheme.colors ?? {},
+          state.schemeModifierConfig.darkSuffix,
+          state.schemeModifierConfig.lightSuffix
+        );
+        modifierClasses.push(...expanded);
+      } else {
+        modifierClasses.push(modifier);
+      }
+    }
+    const placeholderModifiers = modifierClasses.filter((m) => m.modifier === "placeholder");
+    const platformModifiers = modifierClasses.filter((m) => isPlatformModifier(m.modifier));
+    const colorSchemeModifiers = modifierClasses.filter((m) => isColorSchemeModifier(m.modifier));
+    const stateModifiers = modifierClasses.filter(
+      (m) => isStateModifier(m.modifier) && m.modifier !== "placeholder"
+    );
+    if (placeholderModifiers.length > 0) {
+      const jsxOpeningElement = path2.parent;
+      const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
+      if (componentSupport?.supportedModifiers.includes("placeholder")) {
+        const placeholderClasses = placeholderModifiers.map((m) => m.baseClass).join(" ");
+        const placeholderColor = parsePlaceholderClasses(placeholderClasses, state.customTheme.colors);
+        if (placeholderColor) {
+          addOrMergePlaceholderTextColorProp(jsxOpeningElement, placeholderColor, t);
+        }
+      } else {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[react-native-tailwind] placeholder: modifier can only be used on TextInput component at ${state.file.opts.filename ?? "unknown"}`
+          );
+        }
+      }
+    }
+    const hasPlatformModifiers = platformModifiers.length > 0;
+    const hasColorSchemeModifiers = colorSchemeModifiers.length > 0;
+    const hasStateModifiers = stateModifiers.length > 0;
+    const hasBaseClasses = baseClasses.length > 0;
+    let componentScope = null;
+    if (hasColorSchemeModifiers) {
+      componentScope = findComponentScope(path2, t);
+      if (componentScope) {
+        state.functionComponentsNeedingColorScheme.add(componentScope);
+      } else {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[react-native-tailwind] dark:/light: modifiers require a function component scope. Found in non-component context at ${state.file.opts.filename ?? "unknown"}. These modifiers are not supported in class components or nested callbacks.`
+          );
+        }
+      }
+    }
+    if (hasStateModifiers && (hasPlatformModifiers || hasColorSchemeModifiers)) {
+      const jsxOpeningElement = path2.parent;
+      const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
+      if (componentSupport) {
+        const styleArrayElements = [];
+        if (hasBaseClasses) {
+          const baseClassName = baseClasses.join(" ");
+          const baseStyleObject = parseClassName(baseClassName, state.customTheme);
+          if (hasRuntimeDimensions(baseStyleObject)) {
+            throw path2.buildCodeFrameError(
+              `w-screen and h-screen cannot be combined with modifiers. Found: "${baseClassName}" with state, platform, or color scheme modifiers. Use w-screen/h-screen without modifiers instead.`
+            );
+          }
+          const baseStyleKey = generateStyleKey(baseClassName);
+          state.styleRegistry.set(baseStyleKey, baseStyleObject);
+          styleArrayElements.push(
+            t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey))
+          );
+        }
+        if (hasPlatformModifiers) {
+          const platformSelectExpression = processPlatformModifiers(
+            platformModifiers,
+            state,
+            parseClassName,
+            generateStyleKey,
+            t
+          );
+          styleArrayElements.push(platformSelectExpression);
+        }
+        if (hasColorSchemeModifiers && componentScope) {
+          const colorSchemeConditionals = processColorSchemeModifiers(
+            colorSchemeModifiers,
+            state,
+            parseClassName,
+            generateStyleKey,
+            t
+          );
+          styleArrayElements.push(...colorSchemeConditionals);
+        }
+        const modifiersByType = /* @__PURE__ */ new Map();
+        for (const mod of stateModifiers) {
+          const modType = mod.modifier;
+          if (!modifiersByType.has(modType)) {
+            modifiersByType.set(modType, []);
+          }
+          modifiersByType.get(modType)?.push(mod);
+        }
+        for (const [modifierType, modifiers] of modifiersByType) {
+          if (!componentSupport.supportedModifiers.includes(modifierType)) {
+            continue;
+          }
+          const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
+          const modifierStyleObject = parseClassName(modifierClassNames, state.customTheme);
+          const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
+          state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
+          const stateProperty = getStatePropertyForModifier(modifierType);
+          const conditionalExpression = t.logicalExpression(
+            "&&",
+            t.identifier(stateProperty),
+            t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(modifierStyleKey))
+          );
+          styleArrayElements.push(conditionalExpression);
+        }
+        const usedModifiers = Array.from(new Set(stateModifiers.map((m) => m.modifier))).filter(
+          (mod) => componentSupport.supportedModifiers.includes(mod)
+        );
+        const styleArrayExpression = t.arrayExpression(styleArrayElements);
+        const styleFunctionExpression = createStyleFunction(styleArrayExpression, usedModifiers, t);
+        const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
+        if (styleAttribute2) {
+          mergeStyleFunctionAttribute(path2, styleAttribute2, styleFunctionExpression, t);
+        } else {
+          replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
+        }
+        return true;
+      } else {
+      }
+    }
+    if ((hasPlatformModifiers || hasColorSchemeModifiers) && !hasStateModifiers) {
+      const styleExpressions = [];
+      if (hasBaseClasses) {
+        const baseClassName = baseClasses.join(" ");
+        const baseStyleObject = parseClassName(baseClassName, state.customTheme);
+        if (hasRuntimeDimensions(baseStyleObject)) {
+          throw path2.buildCodeFrameError(
+            `w-screen and h-screen cannot be combined with modifiers. Found: "${baseClassName}" with platform or color scheme modifiers. Use w-screen/h-screen without modifiers instead.`
+          );
+        }
+        const baseStyleKey = generateStyleKey(baseClassName);
+        state.styleRegistry.set(baseStyleKey, baseStyleObject);
+        styleExpressions.push(
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey))
+        );
+      }
+      if (hasPlatformModifiers) {
+        const platformSelectExpression = processPlatformModifiers(
+          platformModifiers,
+          state,
+          parseClassName,
+          generateStyleKey,
+          t
+        );
+        styleExpressions.push(platformSelectExpression);
+      }
+      if (hasColorSchemeModifiers && componentScope) {
+        const colorSchemeConditionals = processColorSchemeModifiers(
+          colorSchemeModifiers,
+          state,
+          parseClassName,
+          generateStyleKey,
+          t
+        );
+        styleExpressions.push(...colorSchemeConditionals);
+      }
+      const styleExpression = styleExpressions.length === 1 ? styleExpressions[0] : t.arrayExpression(styleExpressions);
+      const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
+      if (styleAttribute2) {
+        const existingStyle = styleAttribute2.value;
+        if (t.isJSXExpressionContainer(existingStyle) && !t.isJSXEmptyExpression(existingStyle.expression)) {
+          const existing = existingStyle.expression;
+          const mergedArray = t.isArrayExpression(existing) ? t.arrayExpression([styleExpression, ...existing.elements]) : t.arrayExpression([styleExpression, existing]);
+          styleAttribute2.value = t.jsxExpressionContainer(mergedArray);
+        } else {
+          styleAttribute2.value = t.jsxExpressionContainer(styleExpression);
+        }
+        path2.remove();
+      } else {
+        path2.node.name = t.jsxIdentifier(targetStyleProp);
+        path2.node.value = t.jsxExpressionContainer(styleExpression);
+      }
+      return true;
+    }
+    if (hasStateModifiers) {
+      const jsxOpeningElement = path2.parent;
+      const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
+      if (componentSupport) {
+        const usedModifiers = Array.from(new Set(stateModifiers.map((m) => m.modifier)));
+        const unsupportedModifiers = usedModifiers.filter(
+          (mod) => !componentSupport.supportedModifiers.includes(mod)
+        );
+        if (unsupportedModifiers.length > 0) {
+          if (process.env.NODE_ENV !== "production") {
+            console.warn(
+              `[react-native-tailwind] Modifiers (${unsupportedModifiers.map((m) => `${m}:`).join(", ")}) are not supported on ${componentSupport.component} component at ${state.file.opts.filename ?? "unknown"}. Supported modifiers: ${componentSupport.supportedModifiers.join(", ")}`
+            );
+          }
+          const supportedModifierClasses = stateModifiers.filter(
+            (m) => componentSupport.supportedModifiers.includes(m.modifier)
+          );
+          if (supportedModifierClasses.length === 0) {
+          } else {
+            const filteredClassName = baseClasses.join(" ") + " " + supportedModifierClasses.map((m) => `${m.modifier}:${m.baseClass}`).join(" ");
+            const styleExpression = processStaticClassNameWithModifiers(
+              filteredClassName.trim(),
+              state,
+              parseClassName,
+              generateStyleKey,
+              splitModifierClasses,
+              t
+            );
+            const modifierTypes = Array.from(new Set(supportedModifierClasses.map((m) => m.modifier)));
+            const styleFunctionExpression = createStyleFunction(styleExpression, modifierTypes, t);
+            const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
+            if (styleAttribute2) {
+              mergeStyleFunctionAttribute(path2, styleAttribute2, styleFunctionExpression, t);
+            } else {
+              replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
+            }
+            return true;
+          }
+        } else {
+          const styleExpression = processStaticClassNameWithModifiers(
+            trimmedClassName,
+            state,
+            parseClassName,
+            generateStyleKey,
+            splitModifierClasses,
+            t
+          );
+          const modifierTypes = usedModifiers;
+          const styleFunctionExpression = createStyleFunction(styleExpression, modifierTypes, t);
+          const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
+          if (styleAttribute2) {
+            mergeStyleFunctionAttribute(path2, styleAttribute2, styleFunctionExpression, t);
+          } else {
+            replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
+          }
+          return true;
+        }
+      } else {
+        if (process.env.NODE_ENV !== "production") {
+          const usedModifiers = Array.from(new Set(stateModifiers.map((m) => m.modifier)));
+          console.warn(
+            `[react-native-tailwind] Modifiers (${usedModifiers.map((m) => `${m}:`).join(", ")}) can only be used on compatible components (Pressable, TextInput). Found on unsupported element at ${state.file.opts.filename ?? "unknown"}`
+          );
+        }
+      }
+    }
+    const classNameForStyle = baseClasses.join(" ");
+    if (!classNameForStyle) {
+      path2.remove();
+      return true;
+    }
+    const styleObject = parseClassName(classNameForStyle, state.customTheme);
+    if (hasRuntimeDimensions(styleObject)) {
+      const { static: staticStyles, runtime: runtimeStyles } = splitStaticAndRuntimeStyles(styleObject);
+      const componentScope2 = findComponentScope(path2, t);
+      if (componentScope2) {
+        state.hasClassNames = true;
+        state.functionComponentsNeedingWindowDimensions.add(componentScope2);
+        state.needsWindowDimensionsImport = true;
+        const styleExpressions = [];
+        if (Object.keys(staticStyles).length > 0) {
+          const styleKey2 = generateStyleKey(classNameForStyle);
+          state.styleRegistry.set(styleKey2, staticStyles);
+          styleExpressions.push(
+            t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey2))
+          );
+        }
+        const runtimeDimensionObject = createRuntimeDimensionObject(runtimeStyles, state, t);
+        styleExpressions.push(runtimeDimensionObject);
+        const styleExpression = styleExpressions.length === 1 ? styleExpressions[0] : t.arrayExpression(styleExpressions);
+        const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
+        if (styleAttribute2) {
+          const existingStyle = styleAttribute2.value;
+          if (t.isJSXExpressionContainer(existingStyle) && !t.isJSXEmptyExpression(existingStyle.expression)) {
+            const existing = existingStyle.expression;
+            if (t.isArrowFunctionExpression(existing) || t.isFunctionExpression(existing)) {
+              const paramIdentifier = t.identifier("_state");
+              const functionCall = t.callExpression(existing, [paramIdentifier]);
+              const mergedArray = t.arrayExpression([styleExpression, functionCall]);
+              const wrappedFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+              styleAttribute2.value = t.jsxExpressionContainer(wrappedFunction);
+            } else {
+              const mergedArray = t.isArrayExpression(existing) ? t.arrayExpression([styleExpression, ...existing.elements]) : t.arrayExpression([styleExpression, existing]);
+              styleAttribute2.value = t.jsxExpressionContainer(mergedArray);
+            }
+          } else {
+            styleAttribute2.value = t.jsxExpressionContainer(styleExpression);
+          }
+          path2.remove();
+        } else {
+          path2.node.name = t.jsxIdentifier(targetStyleProp);
+          path2.node.value = t.jsxExpressionContainer(styleExpression);
+        }
+        return true;
+      } else {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[react-native-tailwind] w-screen/h-screen classes require a function component scope. Found in non-component context at ${state.file.opts.filename ?? "unknown"}. These classes are not supported in class components or nested callbacks.`
+          );
+        }
+      }
+    }
+    const styleKey = generateStyleKey(classNameForStyle);
+    state.styleRegistry.set(styleKey, styleObject);
+    const styleAttribute = findStyleAttribute(path2, targetStyleProp, t);
+    if (styleAttribute) {
+      mergeStyleAttribute(path2, styleAttribute, styleKey, state.stylesIdentifier, t);
+    } else {
+      replaceWithStyleAttribute(path2, styleKey, targetStyleProp, state.stylesIdentifier, t);
+    }
+    return true;
+  };
+  if (t.isStringLiteral(value)) {
+    if (processStaticClassName(value.value)) {
+      return;
     }
   }
-  const styleArrayElements = [];
-  if (baseStyleExpression) {
-    styleArrayElements.push(baseStyleExpression);
-  }
-  for (const [modifierType, modifiers] of modifiersByType) {
-    const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
-    const modifierStyleObject = parseClassName2(modifierClassNames, state.customTheme);
-    const modifierStyleKey = generateStyleKey2(`${modifierType}_${modifierClassNames}`);
-    state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
-    const stateProperty = getStatePropertyForModifier(modifierType);
-    const conditionalExpression = t.logicalExpression(
-      "&&",
-      t.identifier(stateProperty),
-      t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(modifierStyleKey))
-    );
-    styleArrayElements.push(conditionalExpression);
-  }
-  if (styleArrayElements.length === 1) {
-    return styleArrayElements[0];
-  }
-  return t.arrayExpression(styleArrayElements);
-}
-function createStyleFunction(styleExpression, modifierTypes, t) {
-  const paramProperties = [];
-  const usedStateProps = /* @__PURE__ */ new Set();
-  for (const modifierType of modifierTypes) {
-    const stateProperty = getStatePropertyForModifier(modifierType);
-    if (!usedStateProps.has(stateProperty)) {
-      usedStateProps.add(stateProperty);
-      paramProperties.push(
-        t.objectProperty(t.identifier(stateProperty), t.identifier(stateProperty), false, true)
+  if (t.isJSXExpressionContainer(value)) {
+    const expression = value.expression;
+    if (t.isJSXEmptyExpression(expression)) {
+      return;
+    }
+    if (t.isStringLiteral(expression)) {
+      if (processStaticClassName(expression.value)) {
+        return;
+      }
+    }
+    try {
+      const componentScope = findComponentScope(path2, t);
+      const result = processDynamicExpression(
+        expression,
+        state,
+        parseClassName,
+        generateStyleKey,
+        splitModifierClasses,
+        processPlatformModifiers,
+        processColorSchemeModifiers,
+        componentScope,
+        isPlatformModifier,
+        isColorSchemeModifier,
+        isSchemeModifier,
+        expandSchemeModifier,
+        t
       );
+      if (result) {
+        state.hasClassNames = true;
+        const styleAttribute = findStyleAttribute(path2, targetStyleProp, t);
+        if (styleAttribute) {
+          mergeDynamicStyleAttribute(path2, styleAttribute, result, t);
+        } else {
+          replaceDynamicWithStyleAttribute(path2, result, targetStyleProp, t);
+        }
+        return;
+      }
+    } catch (error) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          `[react-native-tailwind] Failed to process dynamic ${attributeName} at ${state.file.opts.filename ?? "unknown"}: ${error instanceof Error ? error.message : String(error)}`
+        );
+      }
     }
   }
-  const param = t.objectPattern(paramProperties);
-  return t.arrowFunctionExpression([param], styleExpression);
+  if (process.env.NODE_ENV !== "production") {
+    const filename = state.file.opts.filename ?? "unknown";
+    console.warn(
+      `[react-native-tailwind] Dynamic ${attributeName} values are not fully supported at ${filename}. Use the ${targetStyleProp} prop for dynamic values.`
+    );
+  }
 }
 
-// src/babel/utils/platformModifierProcessing.ts
-function processPlatformModifiers(platformModifiers, state, parseClassName2, generateStyleKey2, t) {
-  state.needsPlatformImport = true;
-  const modifiersByPlatform = /* @__PURE__ */ new Map();
-  for (const mod of platformModifiers) {
-    const platform = mod.modifier;
-    if (!modifiersByPlatform.has(platform)) {
-      modifiersByPlatform.set(platform, []);
+// src/babel/plugin/visitors/imports.ts
+function importDeclarationVisitor(path2, state, t) {
+  const node = path2.node;
+  if (node.source.value === "react-native") {
+    const specifiers = node.specifiers;
+    const hasStyleSheet = specifiers.some((spec) => {
+      if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+        return spec.imported.name === "StyleSheet";
+      }
+      return false;
+    });
+    const hasPlatform = specifiers.some((spec) => {
+      if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+        return spec.imported.name === "Platform";
+      }
+      return false;
+    });
+    if (node.importKind !== "type") {
+      for (const spec of specifiers) {
+        if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+          if (spec.imported.name === "useWindowDimensions") {
+            state.hasWindowDimensionsImport = true;
+            state.windowDimensionsLocalIdentifier = spec.local.name;
+            break;
+          }
+        }
+      }
     }
-    const platformGroup = modifiersByPlatform.get(platform);
-    if (platformGroup) {
-      platformGroup.push(mod);
+    if (hasStyleSheet) {
+      state.hasStyleSheetImport = true;
     }
+    if (hasPlatform) {
+      state.hasPlatformImport = true;
+    }
+    state.reactNativeImportPath = path2;
   }
-  const selectProperties = [];
-  for (const [platform, modifiers] of modifiersByPlatform) {
-    const classNames = modifiers.map((m) => m.baseClass).join(" ");
-    const styleObject = parseClassName2(classNames, state.customTheme);
-    const styleKey = generateStyleKey2(`${platform}_${classNames}`);
-    state.styleRegistry.set(styleKey, styleObject);
-    const styleReference = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
-    selectProperties.push(t.objectProperty(t.identifier(platform), styleReference));
+  if (node.source.value === state.colorSchemeImportSource && node.importKind !== "type") {
+    const specifiers = node.specifiers;
+    for (const spec of specifiers) {
+      if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+        if (spec.imported.name === state.colorSchemeHookName) {
+          state.hasColorSchemeImport = true;
+          state.colorSchemeLocalIdentifier = spec.local.name;
+          break;
+        }
+      }
+    }
+  }
+  if (node.source.value === "@mgcrea/react-native-tailwind") {
+    const specifiers = node.specifiers;
+    specifiers.forEach((spec) => {
+      if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+        const importedName = spec.imported.name;
+        if (importedName === "tw" || importedName === "twStyle") {
+          const localName = spec.local.name;
+          state.twImportNames.add(localName);
+        }
+      }
+    });
   }
-  return t.callExpression(t.memberExpression(t.identifier("Platform"), t.identifier("select")), [
-    t.objectExpression(selectProperties)
-  ]);
 }
 
 // src/babel/utils/styleInjection.ts
@@ -2687,152 +3447,100 @@ function injectColorSchemeHook(functionPath, colorSchemeVariableName, hookName,
   body.body.unshift(hookCall);
   return true;
 }
-function injectStylesAtTop(path2, styleRegistry, stylesIdentifier, t) {
-  const styleProperties = [];
-  for (const [key, styleObject] of styleRegistry) {
-    const properties = Object.entries(styleObject).map(([styleProp, styleValue]) => {
-      let valueNode;
-      if (typeof styleValue === "number") {
-        valueNode = t.numericLiteral(styleValue);
-      } else if (typeof styleValue === "string") {
-        valueNode = t.stringLiteral(styleValue);
-      } else {
-        valueNode = t.valueToNode(styleValue);
-      }
-      return t.objectProperty(t.identifier(styleProp), valueNode);
-    });
-    styleProperties.push(t.objectProperty(t.identifier(key), t.objectExpression(properties)));
-  }
-  const styleSheet = t.variableDeclaration("const", [
-    t.variableDeclarator(
-      t.identifier(stylesIdentifier),
-      t.callExpression(t.memberExpression(t.identifier("StyleSheet"), t.identifier("create")), [
-        t.objectExpression(styleProperties)
-      ])
-    )
-  ]);
+function addWindowDimensionsImport(path2, t) {
   const body = path2.node.body;
-  let insertIndex = 0;
-  for (let i = 0; i < body.length; i++) {
-    if (t.isImportDeclaration(body[i])) {
-      insertIndex = i + 1;
-    } else {
-      break;
+  let existingValueImport = null;
+  for (const statement of body) {
+    if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
+      if (statement.importKind !== "type") {
+        existingValueImport = statement;
+        break;
+      }
     }
   }
-  body.splice(insertIndex, 0, styleSheet);
-}
-
-// src/babel/utils/styleTransforms.ts
-function getStyleExpression(styleAttribute, t) {
-  const value = styleAttribute.value;
-  if (!t.isJSXExpressionContainer(value)) return null;
-  const expression = value.expression;
-  if (t.isJSXEmptyExpression(expression)) return null;
-  return expression;
-}
-function findStyleAttribute(path2, targetStyleProp, t) {
-  const parent = path2.parent;
-  return parent.attributes.find(
-    (attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === targetStyleProp
-  );
-}
-function replaceWithStyleAttribute(classNamePath, styleKey, targetStyleProp, stylesIdentifier, t) {
-  const styleAttribute = t.jsxAttribute(
-    t.jsxIdentifier(targetStyleProp),
-    t.jsxExpressionContainer(t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)))
-  );
-  classNamePath.replaceWith(styleAttribute);
-}
-function mergeStyleAttribute(classNamePath, styleAttribute, styleKey, stylesIdentifier, t) {
-  const existingStyle = getStyleExpression(styleAttribute, t);
-  if (!existingStyle) return;
-  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
-    const paramIdentifier = t.identifier("_state");
-    const functionCall = t.callExpression(existingStyle, [paramIdentifier]);
-    const mergedArray = t.arrayExpression([
-      t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)),
-      functionCall
-    ]);
-    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
-    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
-  } else {
-    const styleArray = t.arrayExpression([
-      t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)),
-      existingStyle
-    ]);
-    styleAttribute.value = t.jsxExpressionContainer(styleArray);
-  }
-  classNamePath.remove();
-}
-function replaceDynamicWithStyleAttribute(classNamePath, result, targetStyleProp, t) {
-  const styleAttribute = t.jsxAttribute(
-    t.jsxIdentifier(targetStyleProp),
-    t.jsxExpressionContainer(result.expression)
-  );
-  classNamePath.replaceWith(styleAttribute);
-}
-function mergeDynamicStyleAttribute(classNamePath, styleAttribute, result, t) {
-  const existingStyle = getStyleExpression(styleAttribute, t);
-  if (!existingStyle) return;
-  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
-    const paramIdentifier = t.identifier("_state");
-    const functionCall = t.callExpression(existingStyle, [paramIdentifier]);
-    const mergedArray = t.arrayExpression([result.expression, functionCall]);
-    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
-    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
-  } else {
-    let styleArray;
-    if (t.isArrayExpression(existingStyle)) {
-      styleArray = t.arrayExpression([result.expression, ...existingStyle.elements]);
-    } else {
-      styleArray = t.arrayExpression([result.expression, existingStyle]);
+  if (existingValueImport) {
+    const hasHook = existingValueImport.specifiers.some(
+      (spec) => t.isImportSpecifier(spec) && spec.imported.type === "Identifier" && spec.imported.name === "useWindowDimensions"
+    );
+    if (!hasHook) {
+      existingValueImport.specifiers.push(
+        t.importSpecifier(t.identifier("useWindowDimensions"), t.identifier("useWindowDimensions"))
+      );
     }
-    styleAttribute.value = t.jsxExpressionContainer(styleArray);
+  } else {
+    const importDeclaration = t.importDeclaration(
+      [t.importSpecifier(t.identifier("useWindowDimensions"), t.identifier("useWindowDimensions"))],
+      t.stringLiteral("react-native")
+    );
+    path2.unshiftContainer("body", importDeclaration);
   }
-  classNamePath.remove();
-}
-function replaceWithStyleFunctionAttribute(classNamePath, styleFunctionExpression, targetStyleProp, t) {
-  const styleAttribute = t.jsxAttribute(
-    t.jsxIdentifier(targetStyleProp),
-    t.jsxExpressionContainer(styleFunctionExpression)
-  );
-  classNamePath.replaceWith(styleAttribute);
 }
-function mergeStyleFunctionAttribute(classNamePath, styleAttribute, styleFunctionExpression, t) {
-  const existingStyle = getStyleExpression(styleAttribute, t);
-  if (!existingStyle) return;
-  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
-    const paramIdentifier = t.identifier("_state");
-    const newFunctionCall = t.callExpression(styleFunctionExpression, [paramIdentifier]);
-    const existingFunctionCall = t.callExpression(existingStyle, [paramIdentifier]);
-    const mergedArray = t.arrayExpression([newFunctionCall, existingFunctionCall]);
-    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
-    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
-  } else {
-    const paramIdentifier = t.identifier("_state");
-    const functionCall = t.callExpression(styleFunctionExpression, [paramIdentifier]);
-    const mergedArray = t.arrayExpression([functionCall, existingStyle]);
-    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
-    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+function injectWindowDimensionsHook(functionPath, dimensionsVariableName, hookName, localIdentifier, t) {
+  let body = functionPath.node.body;
+  if (!t.isBlockStatement(body)) {
+    if (t.isArrowFunctionExpression(functionPath.node) && t.isExpression(body)) {
+      const returnStatement = t.returnStatement(body);
+      const blockStatement = t.blockStatement([returnStatement]);
+      functionPath.node.body = blockStatement;
+      body = blockStatement;
+    } else {
+      return false;
+    }
   }
-  classNamePath.remove();
+  const hasHook = body.body.some((statement) => {
+    if (t.isVariableDeclaration(statement) && statement.declarations.length > 0 && t.isVariableDeclarator(statement.declarations[0])) {
+      const declarator = statement.declarations[0];
+      return t.isIdentifier(declarator.id) && declarator.id.name === dimensionsVariableName;
+    }
+    return false;
+  });
+  if (hasHook) {
+    return false;
+  }
+  const identifierToCall = localIdentifier ?? hookName;
+  const hookCall = t.variableDeclaration("const", [
+    t.variableDeclarator(
+      t.identifier(dimensionsVariableName),
+      t.callExpression(t.identifier(identifierToCall), [])
+    )
+  ]);
+  body.body.unshift(hookCall);
+  return true;
 }
-function addOrMergePlaceholderTextColorProp(jsxOpeningElement, color, t) {
-  const existingProp = jsxOpeningElement.attributes.find(
-    (attr) => t.isJSXAttribute(attr) && attr.name.name === "placeholderTextColor"
-  );
-  if (existingProp) {
-    if (process.env.NODE_ENV !== "production") {
-      console.warn(
-        `[react-native-tailwind] placeholderTextColor prop will be overridden by className placeholder: modifier. Remove the explicit prop or the placeholder: modifier to avoid confusion.`
-      );
+function injectStylesAtTop(path2, styleRegistry, stylesIdentifier, t) {
+  const styleProperties = [];
+  for (const [key, styleObject] of styleRegistry) {
+    const properties = Object.entries(styleObject).map(([styleProp, styleValue]) => {
+      let valueNode;
+      if (typeof styleValue === "number") {
+        valueNode = t.numericLiteral(styleValue);
+      } else if (typeof styleValue === "string") {
+        valueNode = t.stringLiteral(styleValue);
+      } else {
+        valueNode = t.valueToNode(styleValue);
+      }
+      return t.objectProperty(t.identifier(styleProp), valueNode);
+    });
+    styleProperties.push(t.objectProperty(t.identifier(key), t.objectExpression(properties)));
+  }
+  const styleSheet = t.variableDeclaration("const", [
+    t.variableDeclarator(
+      t.identifier(stylesIdentifier),
+      t.callExpression(t.memberExpression(t.identifier("StyleSheet"), t.identifier("create")), [
+        t.objectExpression(styleProperties)
+      ])
+    )
+  ]);
+  const body = path2.node.body;
+  let insertIndex = 0;
+  for (let i = 0; i < body.length; i++) {
+    if (t.isImportDeclaration(body[i])) {
+      insertIndex = i + 1;
+    } else {
+      break;
     }
-    existingProp.value = t.stringLiteral(color);
-  } else {
-    const newProp = t.jsxAttribute(t.jsxIdentifier("placeholderTextColor"), t.stringLiteral(color));
-    jsxOpeningElement.attributes.push(newProp);
   }
+  body.splice(insertIndex, 0, styleSheet);
 }
 
 // src/babel/utils/twProcessing.ts
@@ -2856,6 +3564,11 @@ function processTwCall(className, path2, state, parseClassName2, generateStyleKe
   if (baseClasses.length > 0) {
     const baseClassName = baseClasses.join(" ");
     const baseStyleObject = parseClassName2(baseClassName, state.customTheme);
+    if (hasRuntimeDimensions(baseStyleObject)) {
+      throw path2.buildCodeFrameError(
+        `w-screen and h-screen are not supported in tw\`\` or twStyle() calls. Found: "${baseClassName}". Use them in className attributes instead.`
+      );
+    }
     const baseStyleKey = generateStyleKey2(baseClassName);
     state.styleRegistry.set(baseStyleKey, baseStyleObject);
     objectProperties.push(
@@ -3053,586 +3766,180 @@ function removeTwImports(path2, t) {
   });
 }
 
-// src/babel/plugin.ts
-var DEFAULT_STYLES_IDENTIFIER = "_twStyles";
-function isComponentScope(functionPath, t) {
-  const node = functionPath.node;
-  const parent = functionPath.parent;
-  const parentPath = functionPath.parentPath;
-  if (t.isClassMethod(parent)) {
-    return false;
+// src/babel/plugin/visitors/program.ts
+function programEnter(_path, _state) {
+}
+function programExit(path2, state, t) {
+  if (state.hasTwImport) {
+    removeTwImports(path2, t);
   }
-  if (functionPath.findParent((p) => t.isClassBody(p.node))) {
-    return false;
+  if (!state.hasClassNames && !state.needsWindowDimensionsImport && !state.needsColorSchemeImport) {
+    return;
   }
-  if (t.isFunctionDeclaration(node)) {
-    if (t.isProgram(parent) || t.isExportNamedDeclaration(parent) || t.isExportDefaultDeclaration(parent)) {
-      return true;
+  if (!state.hasStyleSheetImport && state.styleRegistry.size > 0) {
+    addStyleSheetImport(path2, t);
+  }
+  if (state.needsPlatformImport && !state.hasPlatformImport) {
+    addPlatformImport(path2, t);
+  }
+  if (state.needsColorSchemeImport && !state.hasColorSchemeImport) {
+    addColorSchemeImport(path2, state.colorSchemeImportSource, state.colorSchemeHookName, t);
+  }
+  if (state.needsColorSchemeImport) {
+    for (const functionPath of state.functionComponentsNeedingColorScheme) {
+      injectColorSchemeHook(
+        functionPath,
+        state.colorSchemeVariableName,
+        state.colorSchemeHookName,
+        state.colorSchemeLocalIdentifier,
+        t
+      );
     }
   }
-  if (t.isFunctionExpression(node) || t.isArrowFunctionExpression(node)) {
-    if (t.isVariableDeclarator(parent)) {
-      const varDeclarationPath = parentPath?.parentPath;
-      if (varDeclarationPath && t.isVariableDeclaration(varDeclarationPath.node) && (t.isProgram(varDeclarationPath.parent) || t.isExportNamedDeclaration(varDeclarationPath.parent))) {
-        if (t.isIdentifier(parent.id)) {
-          const name = parent.id.name;
-          return /^[A-Z]/.test(name);
-        }
-      }
+  if (state.needsWindowDimensionsImport && !state.hasWindowDimensionsImport) {
+    addWindowDimensionsImport(path2, t);
+  }
+  if (state.needsWindowDimensionsImport) {
+    for (const functionPath of state.functionComponentsNeedingWindowDimensions) {
+      injectWindowDimensionsHook(
+        functionPath,
+        state.windowDimensionsVariableName,
+        "useWindowDimensions",
+        state.windowDimensionsLocalIdentifier,
+        t
+      );
     }
   }
-  return false;
+  if (state.styleRegistry.size > 0) {
+    injectStylesAtTop(path2, state.styleRegistry, state.stylesIdentifier, t);
+  }
 }
-function findComponentScope(path2, t) {
-  let current = path2.getFunctionParent();
-  while (current) {
-    if (t.isFunction(current.node) && isComponentScope(current, t)) {
-      return current;
+
+// src/babel/plugin/visitors/tw.ts
+function taggedTemplateVisitor(path2, state, t) {
+  const node = path2.node;
+  if (!t.isIdentifier(node.tag)) {
+    return;
+  }
+  const tagName = node.tag.name;
+  if (!state.twImportNames.has(tagName)) {
+    return;
+  }
+  const quasi = node.quasi;
+  if (!t.isTemplateLiteral(quasi)) {
+    return;
+  }
+  if (quasi.expressions.length > 0) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Dynamic tw\`...\` with interpolations is not supported at ${state.file.opts.filename ?? "unknown"}. Use style prop for dynamic values.`
+      );
     }
-    current = current.getFunctionParent();
+    return;
   }
-  return null;
+  const className = quasi.quasis[0]?.value.cooked?.trim() ?? "";
+  if (!className) {
+    path2.replaceWith(t.objectExpression([t.objectProperty(t.identifier("style"), t.objectExpression([]))]));
+    state.hasTwImport = true;
+    return;
+  }
+  state.hasClassNames = true;
+  processTwCall(
+    className,
+    path2,
+    state,
+    parseClassName,
+    generateStyleKey,
+    splitModifierClasses,
+    findComponentScope,
+    t
+  );
+  state.hasTwImport = true;
+}
+function callExpressionVisitor(path2, state, t) {
+  const node = path2.node;
+  if (!t.isIdentifier(node.callee)) {
+    return;
+  }
+  const calleeName = node.callee.name;
+  if (!state.twImportNames.has(calleeName)) {
+    return;
+  }
+  if (node.arguments.length !== 1) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] twStyle() expects exactly one argument at ${state.file.opts.filename ?? "unknown"}`
+      );
+    }
+    return;
+  }
+  const arg = node.arguments[0];
+  if (!t.isStringLiteral(arg)) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] twStyle() only supports static string literals at ${state.file.opts.filename ?? "unknown"}. Use style prop for dynamic values.`
+      );
+    }
+    return;
+  }
+  const className = arg.value.trim();
+  if (!className) {
+    path2.replaceWith(t.identifier("undefined"));
+    state.hasTwImport = true;
+    return;
+  }
+  state.hasClassNames = true;
+  processTwCall(
+    className,
+    path2,
+    state,
+    parseClassName,
+    generateStyleKey,
+    splitModifierClasses,
+    findComponentScope,
+    t
+  );
+  state.hasTwImport = true;
 }
+
+// src/babel/plugin.ts
 function reactNativeTailwindBabelPlugin({ types: t }, options) {
-  const attributes = options?.attributes ?? [...DEFAULT_CLASS_ATTRIBUTES];
-  const { exactMatches, patterns } = buildAttributeMatchers(attributes);
-  const stylesIdentifier = options?.stylesIdentifier ?? DEFAULT_STYLES_IDENTIFIER;
+  const colorSchemeImportSource = options?.colorScheme?.importFrom ?? "react-native";
+  const colorSchemeHookName = options?.colorScheme?.importName ?? "useColorScheme";
   const schemeModifierConfig = {
     darkSuffix: options?.schemeModifier?.darkSuffix ?? "-dark",
     lightSuffix: options?.schemeModifier?.lightSuffix ?? "-light"
   };
-  const colorSchemeImportSource = options?.colorScheme?.importFrom ?? "react-native";
-  const colorSchemeHookName = options?.colorScheme?.importName ?? "useColorScheme";
   return {
     name: "react-native-tailwind",
     visitor: {
       Program: {
-        enter(_path, state) {
-          state.styleRegistry = /* @__PURE__ */ new Map();
-          state.hasClassNames = false;
-          state.hasStyleSheetImport = false;
-          state.hasPlatformImport = false;
-          state.needsPlatformImport = false;
-          state.hasColorSchemeImport = false;
-          state.needsColorSchemeImport = false;
-          state.colorSchemeVariableName = "_twColorScheme";
-          state.colorSchemeImportSource = colorSchemeImportSource;
-          state.colorSchemeHookName = colorSchemeHookName;
-          state.supportedAttributes = exactMatches;
-          state.attributePatterns = patterns;
-          state.stylesIdentifier = stylesIdentifier;
-          state.twImportNames = /* @__PURE__ */ new Set();
-          state.hasTwImport = false;
-          state.functionComponentsNeedingColorScheme = /* @__PURE__ */ new Set();
-          state.hasColorSchemeImport = false;
-          state.colorSchemeLocalIdentifier = void 0;
-          state.needsPlatformImport = false;
-          state.hasPlatformImport = false;
-          state.customTheme = extractCustomTheme(state.file.opts.filename ?? "");
-          state.schemeModifierConfig = schemeModifierConfig;
+        enter(path2, state) {
+          const initialState = createInitialState(
+            options,
+            state.file.opts.filename ?? "",
+            colorSchemeImportSource,
+            colorSchemeHookName,
+            schemeModifierConfig
+          );
+          Object.assign(state, initialState);
+          programEnter(path2, state);
         },
         exit(path2, state) {
-          if (state.hasTwImport) {
-            removeTwImports(path2, t);
-          }
-          if (!state.hasClassNames || state.styleRegistry.size === 0) {
-            return;
-          }
-          if (!state.hasStyleSheetImport) {
-            addStyleSheetImport(path2, t);
-          }
-          if (state.needsPlatformImport && !state.hasPlatformImport) {
-            addPlatformImport(path2, t);
-          }
-          if (state.needsColorSchemeImport && !state.hasColorSchemeImport) {
-            addColorSchemeImport(path2, state.colorSchemeImportSource, state.colorSchemeHookName, t);
-          }
-          if (state.needsColorSchemeImport) {
-            for (const functionPath of state.functionComponentsNeedingColorScheme) {
-              injectColorSchemeHook(
-                functionPath,
-                state.colorSchemeVariableName,
-                state.colorSchemeHookName,
-                state.colorSchemeLocalIdentifier,
-                t
-              );
-            }
-          }
-          injectStylesAtTop(path2, state.styleRegistry, state.stylesIdentifier, t);
+          programExit(path2, state, t);
         }
       },
-      // Check if StyleSheet/Platform are already imported and track tw/twStyle imports
       ImportDeclaration(path2, state) {
-        const node = path2.node;
-        if (node.source.value === "react-native") {
-          const specifiers = node.specifiers;
-          const hasStyleSheet = specifiers.some((spec) => {
-            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
-              return spec.imported.name === "StyleSheet";
-            }
-            return false;
-          });
-          const hasPlatform = specifiers.some((spec) => {
-            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
-              return spec.imported.name === "Platform";
-            }
-            return false;
-          });
-          if (hasStyleSheet) {
-            state.hasStyleSheetImport = true;
-          }
-          if (hasPlatform) {
-            state.hasPlatformImport = true;
-          }
-          state.reactNativeImportPath = path2;
-        }
-        if (node.source.value === state.colorSchemeImportSource && node.importKind !== "type") {
-          const specifiers = node.specifiers;
-          for (const spec of specifiers) {
-            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
-              if (spec.imported.name === state.colorSchemeHookName) {
-                state.hasColorSchemeImport = true;
-                state.colorSchemeLocalIdentifier = spec.local.name;
-                break;
-              }
-            }
-          }
-        }
-        if (node.source.value === "@mgcrea/react-native-tailwind") {
-          const specifiers = node.specifiers;
-          specifiers.forEach((spec) => {
-            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
-              const importedName = spec.imported.name;
-              if (importedName === "tw" || importedName === "twStyle") {
-                const localName = spec.local.name;
-                state.twImportNames.add(localName);
-              }
-            }
-          });
-        }
+        importDeclarationVisitor(path2, state, t);
       },
-      // Handle tw`...` tagged template expressions
       TaggedTemplateExpression(path2, state) {
-        const node = path2.node;
-        if (!t.isIdentifier(node.tag)) {
-          return;
-        }
-        const tagName = node.tag.name;
-        if (!state.twImportNames.has(tagName)) {
-          return;
-        }
-        const quasi = node.quasi;
-        if (!t.isTemplateLiteral(quasi)) {
-          return;
-        }
-        if (quasi.expressions.length > 0) {
-          if (process.env.NODE_ENV !== "production") {
-            console.warn(
-              `[react-native-tailwind] Dynamic tw\`...\` with interpolations is not supported at ${state.file.opts.filename ?? "unknown"}. Use style prop for dynamic values.`
-            );
-          }
-          return;
-        }
-        const className = quasi.quasis[0]?.value.cooked?.trim() ?? "";
-        if (!className) {
-          path2.replaceWith(
-            t.objectExpression([t.objectProperty(t.identifier("style"), t.objectExpression([]))])
-          );
-          state.hasTwImport = true;
-          return;
-        }
-        state.hasClassNames = true;
-        processTwCall(
-          className,
-          path2,
-          state,
-          parseClassName,
-          generateStyleKey,
-          splitModifierClasses,
-          findComponentScope,
-          t
-        );
-        state.hasTwImport = true;
+        taggedTemplateVisitor(path2, state, t);
       },
-      // Handle twStyle('...') call expressions
       CallExpression(path2, state) {
-        const node = path2.node;
-        if (!t.isIdentifier(node.callee)) {
-          return;
-        }
-        const calleeName = node.callee.name;
-        if (!state.twImportNames.has(calleeName)) {
-          return;
-        }
-        if (node.arguments.length !== 1) {
-          if (process.env.NODE_ENV !== "production") {
-            console.warn(
-              `[react-native-tailwind] twStyle() expects exactly one argument at ${state.file.opts.filename ?? "unknown"}`
-            );
-          }
-          return;
-        }
-        const arg = node.arguments[0];
-        if (!t.isStringLiteral(arg)) {
-          if (process.env.NODE_ENV !== "production") {
-            console.warn(
-              `[react-native-tailwind] twStyle() only supports static string literals at ${state.file.opts.filename ?? "unknown"}. Use style prop for dynamic values.`
-            );
-          }
-          return;
-        }
-        const className = arg.value.trim();
-        if (!className) {
-          path2.replaceWith(t.identifier("undefined"));
-          state.hasTwImport = true;
-          return;
-        }
-        state.hasClassNames = true;
-        processTwCall(
-          className,
-          path2,
-          state,
-          parseClassName,
-          generateStyleKey,
-          splitModifierClasses,
-          findComponentScope,
-          t
-        );
-        state.hasTwImport = true;
+        callExpressionVisitor(path2, state, t);
       },
       JSXAttribute(path2, state) {
-        const node = path2.node;
-        if (!t.isJSXIdentifier(node.name)) {
-          return;
-        }
-        const attributeName = node.name.name;
-        if (!isAttributeSupported(attributeName, state.supportedAttributes, state.attributePatterns)) {
-          return;
-        }
-        const value = node.value;
-        const targetStyleProp = getTargetStyleProp(attributeName);
-        const processStaticClassName = (className) => {
-          const trimmedClassName = className.trim();
-          if (!trimmedClassName) {
-            path2.remove();
-            return true;
-          }
-          state.hasClassNames = true;
-          const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(trimmedClassName);
-          const modifierClasses = [];
-          for (const modifier of rawModifierClasses) {
-            if (isSchemeModifier(modifier.modifier)) {
-              const expanded = expandSchemeModifier(
-                modifier,
-                state.customTheme.colors ?? {},
-                state.schemeModifierConfig.darkSuffix,
-                state.schemeModifierConfig.lightSuffix
-              );
-              modifierClasses.push(...expanded);
-            } else {
-              modifierClasses.push(modifier);
-            }
-          }
-          const placeholderModifiers = modifierClasses.filter((m) => m.modifier === "placeholder");
-          const platformModifiers = modifierClasses.filter((m) => isPlatformModifier(m.modifier));
-          const colorSchemeModifiers = modifierClasses.filter((m) => isColorSchemeModifier(m.modifier));
-          const stateModifiers = modifierClasses.filter(
-            (m) => isStateModifier(m.modifier) && m.modifier !== "placeholder"
-          );
-          if (placeholderModifiers.length > 0) {
-            const jsxOpeningElement = path2.parent;
-            const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
-            if (componentSupport?.supportedModifiers.includes("placeholder")) {
-              const placeholderClasses = placeholderModifiers.map((m) => m.baseClass).join(" ");
-              const placeholderColor = parsePlaceholderClasses(placeholderClasses, state.customTheme.colors);
-              if (placeholderColor) {
-                addOrMergePlaceholderTextColorProp(jsxOpeningElement, placeholderColor, t);
-              }
-            } else {
-              if (process.env.NODE_ENV !== "production") {
-                console.warn(
-                  `[react-native-tailwind] placeholder: modifier can only be used on TextInput component at ${state.file.opts.filename ?? "unknown"}`
-                );
-              }
-            }
-          }
-          const hasPlatformModifiers = platformModifiers.length > 0;
-          const hasColorSchemeModifiers = colorSchemeModifiers.length > 0;
-          const hasStateModifiers = stateModifiers.length > 0;
-          const hasBaseClasses = baseClasses.length > 0;
-          let componentScope = null;
-          if (hasColorSchemeModifiers) {
-            componentScope = findComponentScope(path2, t);
-            if (componentScope) {
-              state.functionComponentsNeedingColorScheme.add(componentScope);
-            } else {
-              if (process.env.NODE_ENV !== "production") {
-                console.warn(
-                  `[react-native-tailwind] dark:/light: modifiers require a function component scope. Found in non-component context at ${state.file.opts.filename ?? "unknown"}. These modifiers are not supported in class components or nested callbacks.`
-                );
-              }
-            }
-          }
-          if (hasStateModifiers && (hasPlatformModifiers || hasColorSchemeModifiers)) {
-            const jsxOpeningElement = path2.parent;
-            const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
-            if (componentSupport) {
-              const styleArrayElements = [];
-              if (hasBaseClasses) {
-                const baseClassName = baseClasses.join(" ");
-                const baseStyleObject = parseClassName(baseClassName, state.customTheme);
-                const baseStyleKey = generateStyleKey(baseClassName);
-                state.styleRegistry.set(baseStyleKey, baseStyleObject);
-                styleArrayElements.push(
-                  t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey))
-                );
-              }
-              if (hasPlatformModifiers) {
-                const platformSelectExpression = processPlatformModifiers(
-                  platformModifiers,
-                  state,
-                  parseClassName,
-                  generateStyleKey,
-                  t
-                );
-                styleArrayElements.push(platformSelectExpression);
-              }
-              if (hasColorSchemeModifiers && componentScope) {
-                const colorSchemeConditionals = processColorSchemeModifiers(
-                  colorSchemeModifiers,
-                  state,
-                  parseClassName,
-                  generateStyleKey,
-                  t
-                );
-                styleArrayElements.push(...colorSchemeConditionals);
-              }
-              const modifiersByType = /* @__PURE__ */ new Map();
-              for (const mod of stateModifiers) {
-                const modType = mod.modifier;
-                if (!modifiersByType.has(modType)) {
-                  modifiersByType.set(modType, []);
-                }
-                modifiersByType.get(modType)?.push(mod);
-              }
-              for (const [modifierType, modifiers] of modifiersByType) {
-                if (!componentSupport.supportedModifiers.includes(modifierType)) {
-                  continue;
-                }
-                const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
-                const modifierStyleObject = parseClassName(modifierClassNames, state.customTheme);
-                const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
-                state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
-                const stateProperty = getStatePropertyForModifier(modifierType);
-                const conditionalExpression = t.logicalExpression(
-                  "&&",
-                  t.identifier(stateProperty),
-                  t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(modifierStyleKey))
-                );
-                styleArrayElements.push(conditionalExpression);
-              }
-              const usedModifiers = Array.from(new Set(stateModifiers.map((m) => m.modifier))).filter(
-                (mod) => componentSupport.supportedModifiers.includes(mod)
-              );
-              const styleArrayExpression = t.arrayExpression(styleArrayElements);
-              const styleFunctionExpression = createStyleFunction(styleArrayExpression, usedModifiers, t);
-              const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
-              if (styleAttribute2) {
-                mergeStyleFunctionAttribute(path2, styleAttribute2, styleFunctionExpression, t);
-              } else {
-                replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
-              }
-              return true;
-            } else {
-            }
-          }
-          if ((hasPlatformModifiers || hasColorSchemeModifiers) && !hasStateModifiers) {
-            const styleExpressions = [];
-            if (hasBaseClasses) {
-              const baseClassName = baseClasses.join(" ");
-              const baseStyleObject = parseClassName(baseClassName, state.customTheme);
-              const baseStyleKey = generateStyleKey(baseClassName);
-              state.styleRegistry.set(baseStyleKey, baseStyleObject);
-              styleExpressions.push(
-                t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey))
-              );
-            }
-            if (hasPlatformModifiers) {
-              const platformSelectExpression = processPlatformModifiers(
-                platformModifiers,
-                state,
-                parseClassName,
-                generateStyleKey,
-                t
-              );
-              styleExpressions.push(platformSelectExpression);
-            }
-            if (hasColorSchemeModifiers && componentScope) {
-              const colorSchemeConditionals = processColorSchemeModifiers(
-                colorSchemeModifiers,
-                state,
-                parseClassName,
-                generateStyleKey,
-                t
-              );
-              styleExpressions.push(...colorSchemeConditionals);
-            }
-            const styleExpression = styleExpressions.length === 1 ? styleExpressions[0] : t.arrayExpression(styleExpressions);
-            const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
-            if (styleAttribute2) {
-              const existingStyle = styleAttribute2.value;
-              if (t.isJSXExpressionContainer(existingStyle) && !t.isJSXEmptyExpression(existingStyle.expression)) {
-                const existing = existingStyle.expression;
-                const mergedArray = t.isArrayExpression(existing) ? t.arrayExpression([styleExpression, ...existing.elements]) : t.arrayExpression([styleExpression, existing]);
-                styleAttribute2.value = t.jsxExpressionContainer(mergedArray);
-              } else {
-                styleAttribute2.value = t.jsxExpressionContainer(styleExpression);
-              }
-              path2.remove();
-            } else {
-              path2.node.name = t.jsxIdentifier(targetStyleProp);
-              path2.node.value = t.jsxExpressionContainer(styleExpression);
-            }
-            return true;
-          }
-          if (hasStateModifiers) {
-            const jsxOpeningElement = path2.parent;
-            const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
-            if (componentSupport) {
-              const usedModifiers = Array.from(new Set(stateModifiers.map((m) => m.modifier)));
-              const unsupportedModifiers = usedModifiers.filter(
-                (mod) => !componentSupport.supportedModifiers.includes(mod)
-              );
-              if (unsupportedModifiers.length > 0) {
-                if (process.env.NODE_ENV !== "production") {
-                  console.warn(
-                    `[react-native-tailwind] Modifiers (${unsupportedModifiers.map((m) => `${m}:`).join(", ")}) are not supported on ${componentSupport.component} component at ${state.file.opts.filename ?? "unknown"}. Supported modifiers: ${componentSupport.supportedModifiers.join(", ")}`
-                  );
-                }
-                const supportedModifierClasses = stateModifiers.filter(
-                  (m) => componentSupport.supportedModifiers.includes(m.modifier)
-                );
-                if (supportedModifierClasses.length === 0) {
-                } else {
-                  const filteredClassName = baseClasses.join(" ") + " " + supportedModifierClasses.map((m) => `${m.modifier}:${m.baseClass}`).join(" ");
-                  const styleExpression = processStaticClassNameWithModifiers(
-                    filteredClassName.trim(),
-                    state,
-                    parseClassName,
-                    generateStyleKey,
-                    splitModifierClasses,
-                    t
-                  );
-                  const modifierTypes = Array.from(new Set(supportedModifierClasses.map((m) => m.modifier)));
-                  const styleFunctionExpression = createStyleFunction(styleExpression, modifierTypes, t);
-                  const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
-                  if (styleAttribute2) {
-                    mergeStyleFunctionAttribute(path2, styleAttribute2, styleFunctionExpression, t);
-                  } else {
-                    replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
-                  }
-                  return true;
-                }
-              } else {
-                const styleExpression = processStaticClassNameWithModifiers(
-                  trimmedClassName,
-                  state,
-                  parseClassName,
-                  generateStyleKey,
-                  splitModifierClasses,
-                  t
-                );
-                const modifierTypes = usedModifiers;
-                const styleFunctionExpression = createStyleFunction(styleExpression, modifierTypes, t);
-                const styleAttribute2 = findStyleAttribute(path2, targetStyleProp, t);
-                if (styleAttribute2) {
-                  mergeStyleFunctionAttribute(path2, styleAttribute2, styleFunctionExpression, t);
-                } else {
-                  replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
-                }
-                return true;
-              }
-            } else {
-              if (process.env.NODE_ENV !== "production") {
-                const usedModifiers = Array.from(new Set(stateModifiers.map((m) => m.modifier)));
-                console.warn(
-                  `[react-native-tailwind] Modifiers (${usedModifiers.map((m) => `${m}:`).join(", ")}) can only be used on compatible components (Pressable, TextInput). Found on unsupported element at ${state.file.opts.filename ?? "unknown"}`
-                );
-              }
-            }
-          }
-          const classNameForStyle = baseClasses.join(" ");
-          if (!classNameForStyle) {
-            path2.remove();
-            return true;
-          }
-          const styleObject = parseClassName(classNameForStyle, state.customTheme);
-          const styleKey = generateStyleKey(classNameForStyle);
-          state.styleRegistry.set(styleKey, styleObject);
-          const styleAttribute = findStyleAttribute(path2, targetStyleProp, t);
-          if (styleAttribute) {
-            mergeStyleAttribute(path2, styleAttribute, styleKey, state.stylesIdentifier, t);
-          } else {
-            replaceWithStyleAttribute(path2, styleKey, targetStyleProp, state.stylesIdentifier, t);
-          }
-          return true;
-        };
-        if (t.isStringLiteral(value)) {
-          if (processStaticClassName(value.value)) {
-            return;
-          }
-        }
-        if (t.isJSXExpressionContainer(value)) {
-          const expression = value.expression;
-          if (t.isJSXEmptyExpression(expression)) {
-            return;
-          }
-          if (t.isStringLiteral(expression)) {
-            if (processStaticClassName(expression.value)) {
-              return;
-            }
-          }
-          try {
-            const componentScope = findComponentScope(path2, t);
-            const result = processDynamicExpression(
-              expression,
-              state,
-              parseClassName,
-              generateStyleKey,
-              splitModifierClasses,
-              processPlatformModifiers,
-              processColorSchemeModifiers,
-              componentScope,
-              isPlatformModifier,
-              isColorSchemeModifier,
-              isSchemeModifier,
-              expandSchemeModifier,
-              t
-            );
-            if (result) {
-              state.hasClassNames = true;
-              const styleAttribute = findStyleAttribute(path2, targetStyleProp, t);
-              if (styleAttribute) {
-                mergeDynamicStyleAttribute(path2, styleAttribute, result, t);
-              } else {
-                replaceDynamicWithStyleAttribute(path2, result, targetStyleProp, t);
-              }
-              return;
-            }
-          } catch (error) {
-            if (process.env.NODE_ENV !== "production") {
-              console.warn(
-                `[react-native-tailwind] Failed to process dynamic ${attributeName} at ${state.file.opts.filename ?? "unknown"}: ${error instanceof Error ? error.message : String(error)}`
-              );
-            }
-          }
-        }
-        if (process.env.NODE_ENV !== "production") {
-          const filename = state.file.opts.filename ?? "unknown";
-          console.warn(
-            `[react-native-tailwind] Dynamic ${attributeName} values are not fully supported at ${filename}. Use the ${targetStyleProp} prop for dynamic values.`
-          );
-        }
+        jsxAttributeVisitor(path2, state, t);
       }
     }
   };