@mgcrea/react-native-tailwind 0.13.0 → 0.15.0

package/README.md

@@ -27,7 +27,7 @@
     <img src="https://img.shields.io/codecov/c/github/mgcrea/react-native-tailwind?style=for-the-badge" alt="coverage" />
   </a>
   <a href="https://depfu.com/github/mgcrea/react-native-tailwind">
-    <img src="https://img.shields.io/depfu/dependencies/github/mgcrea/react-native-tailwind?style=for-the-badge" alt="dependencies status" />
+    <img src="https://img.shields.io/badge/dependencies-none-brightgreen?style=for-the-badge" alt="dependencies status" />
   </a>
 </p>
 
@@ -37,22 +37,21 @@ Compile-time Tailwind CSS for React Native with zero runtime overhead. Transform
 
 ## Features
 
-- ⚡ **Zero runtime overhead** — All transformations happen at compile time
-- 🔧 **No dependencies** — Direct-to-React-Native style generation without tailwindcss package
-- 🎯 **Babel-only setup** — No Metro configuration required
-- 📝 **TypeScript-first** — Full type safety and autocomplete support
-- 🚀 **Optimized performance** — Compiles down to `StyleSheet.create` for optimal performance
-- 📦 **Small bundle size** — Only includes actual styles used in your app
-- 🎨 **Custom colors** — Extend the default palette via `tailwind.config.*`
-- 📐 **Arbitrary values** — Use custom sizes and borders: `w-[123px]`, `rounded-[20px]`
-- 🔀 **Dynamic className** — Conditional styles with hybrid compile-time optimization
-- 🏃 **Runtime option** — Optional `tw` template tag for fully dynamic styling (~25KB)
-- 🎯 **State modifiers** — `active:`, `hover:`, `focus:`, and `disabled:` modifiers for interactive components
-- 📱 **Platform modifiers** — `ios:`, `android:`, and `web:` modifiers for platform-specific styling
-- 🌓 **Color scheme modifiers** — `dark:` and `light:` modifiers for automatic theme adaptation
-- 🎨 **Scheme modifier** — `scheme:` convenience modifier that expands to both `dark:` and `light:` variants
-- 📜 **Special style props** — Support for `contentContainerClassName`, `columnWrapperClassName`, and more
-- 🎛️ **Custom attributes** — Configure which props to transform with exact matching or glob patterns
+- **⚡ Zero Runtime Overhead** - All transformations happen at compile time
+- **🔧 No Dependencies** - Direct-to-React-Native style generation without tailwindcss package
+- **🎯 Babel-only Setup** - No Metro configuration required
+- **📝 TypeScript-first** - Full type safety and autocomplete support
+- **🚀 Optimized Performance** - Compiles down to StyleSheet.create for optimal performance
+- **🔀 Dynamic className** - Conditional styles support with compile-time optimization
+- **📦 Small Bundle Size** - Only includes actual styles used in your app
+- **🎯 State Modifiers** - `active:`, `hover:`, `focus:`, and `disabled:` modifiers for interactive components
+- **📱 Platform Modifiers** - `ios:`, `android:`, and `web:` modifiers for platform-specific styling
+- **🌓 Color Scheme Modifiers** - `dark:` and `light:` and `scheme:` modifiers for automatic theme adaptation
+- **🎨 Custom Colors** - Extend the default palette via tailwind.config.\*
+- **📐 Arbitrary Values** - Use custom sizes and borders: `w-[123px]`, `rounded-[20px]`
+- **📜 Special Style Props** - Support for `contentContainerClassName`, `columnWrapperClassName`, and more
+
+📊 **[How It Compares](https://mgcrea.github.io/react-native-tailwind/getting-started/how-it-compares/)** - See how this library stacks up against other React Native styling solutions.
 
 ## Demo
 
@@ -113,7 +112,7 @@ The Babel plugin transforms your code at compile time:
 **Input** (what you write):
 
 ```tsx
-<View className="m-4 p-2 bg-blue-500 rounded-lg" />
+<View className={`rounded-lg p-4 ${isSelected ? "bg-blue-500 border border-blue-700" : "bg-gray-200"}`} />
 ```
 
 **Output** (what Babel generates):
@@ -121,15 +120,19 @@ The Babel plugin transforms your code at compile time:
 ```tsx
 import { StyleSheet } from "react-native";
 
-<View style={_twStyles._bg_blue_500_m_4_p_2_rounded_lg} />;
+<View
+  style={[
+    _twStyles._rounded_lg,
+    _twStyles._p_4,
+    isSelected ? _twStyles._bg_blue_500_border_border_blue_700 : _twStyles._bg_gray_200,
+  ]}
+/>;
 
 const _twStyles = StyleSheet.create({
-  _bg_blue_500_m_4_p_2_rounded_lg: {
-    margin: 16,
-    padding: 8,
-    backgroundColor: "#3B82F6",
-    borderRadius: 8,
-  },
+  _rounded_lg: { borderRadius: 8 },
+  _p_4: { padding: 16 },
+  _bg_blue_500_border_border_blue_700: { backgroundColor: "#3B82F6", borderWidth: 1, borderColor: "#1D4ED8" },
+  _bg_gray_200: { backgroundColor: "#E5E7EB" },
 });
 ```
 
@@ -200,9 +203,7 @@ import { View, Text } from "react-native";
 export function PlatformCard() {
   return (
     <View className="p-4 ios:p-6 android:p-8 bg-white rounded-lg">
-      <Text className="text-base ios:text-blue-600 android:text-green-600">
-        Platform-specific styles
-      </Text>
+      <Text className="text-base ios:text-blue-600 android:text-green-600">Platform-specific styles</Text>
     </View>
   );
 }
@@ -212,12 +213,14 @@ export function PlatformCard() {
 
 Contributions are welcome! Please read our [Contributing Guide](https://mgcrea.github.io/react-native-tailwind/advanced/contributing/) for details.
 
+## Credits
+
+- [Tailwind CSS](https://tailwindcss.com/) - The utility-first CSS framework that revolutionized the way we style applications. If you enjoy this library, consider supporting them by purchasing [Tailwind Plus](https://tailwindcss.com/plus).
+
 ## Authors
 
 - [Olivier Louvignes](https://github.com/mgcrea) - [@mgcrea](https://twitter.com/mgcrea)
 
-## License
-
 ```text
 MIT License
 

package/dist/babel/config-loader.d.ts

@@ -8,12 +8,21 @@ export type TailwindConfig = {
             colors?: Record<string, string | Record<string, string>>;
             fontFamily?: Record<string, string | string[]>;
             fontSize?: Record<string, string | number>;
+            spacing?: Record<string, string | number>;
+            [key: string]: unknown;
         };
         colors?: Record<string, string | Record<string, string>>;
         fontFamily?: Record<string, string | string[]>;
         fontSize?: Record<string, string | number>;
+        spacing?: Record<string, string | number>;
+        [key: string]: unknown;
     };
 };
+/**
+ * Check for unsupported theme extensions and warn the user
+ * @internal Exported for testing
+ */
+export declare function warnUnsupportedThemeKeys(config: TailwindConfig, configPath: string): void;
 /**
  * Find tailwind.config.* file by traversing up from startDir
  */
@@ -29,6 +38,7 @@ export type CustomTheme = {
     colors: Record<string, string>;
     fontFamily: Record<string, string>;
     fontSize: Record<string, number>;
+    spacing: Record<string, number>;
 };
 /**
  * Extract all custom theme extensions from tailwind config

package/dist/babel/config-loader.test.ts

@@ -1,6 +1,11 @@
 import * as fs from "fs";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { extractCustomTheme, findTailwindConfig, loadTailwindConfig } from "./config-loader";
+import {
+  extractCustomTheme,
+  findTailwindConfig,
+  loadTailwindConfig,
+  warnUnsupportedThemeKeys,
+} from "./config-loader";
 
 // Mock fs
 vi.mock("fs");
@@ -120,35 +125,84 @@ describe("config-loader", () => {
       vi.spyOn(fs, "existsSync").mockReturnValue(false);
 
       const result = extractCustomTheme("/project/src/file.ts");
-      expect(result).toEqual({ colors: {}, fontFamily: {}, fontSize: {} });
+      expect(result).toEqual({ colors: {}, fontFamily: {}, fontSize: {}, spacing: {} });
     });
+  });
 
-    it("should return empty theme when config has no theme", () => {
-      const configPath = "/project/tailwind.config.js";
+  describe("warnUnsupportedThemeKeys", () => {
+    it("should warn about unsupported theme keys", () => {
+      const configPath = "/project/unsupported/tailwind.config.js";
+      const mockConfig = {
+        theme: {
+          extend: {
+            colors: { brand: "#123456" },
+            spacing: { "72": "18rem" }, // Supported (now!)
+            borderRadius: { xl: "1rem" }, // Unsupported
+            lineHeight: { tight: "1.25" }, // Unsupported
+          },
+          screens: { tablet: "640px" }, // Unsupported
+        },
+      };
 
-      vi.spyOn(fs, "existsSync").mockImplementation((filepath) => filepath === configPath);
-      vi.spyOn(require, "resolve").mockReturnValue(configPath);
+      const consoleSpy = vi.spyOn(console, "warn").mockImplementation(vi.fn());
 
-      // loadTailwindConfig will be called, but we've already tested it
-      // For integration, we'd need to mock the entire flow
-      const result = extractCustomTheme("/project/src/file.ts");
+      warnUnsupportedThemeKeys(mockConfig, configPath);
 
-      // Without actual config loading, this returns empty
-      expect(result).toEqual({ colors: {}, fontFamily: {}, fontSize: {} });
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining("Unsupported theme configuration detected"),
+      );
+      // spacing is now supported, so should NOT warn about it
+      expect(consoleSpy).not.toHaveBeenCalledWith(expect.stringContaining("theme.extend.spacing"));
+      expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining("theme.extend.borderRadius"));
+      expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining("theme.extend.lineHeight"));
+      expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining("theme.screens"));
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining("https://github.com/mgcrea/react-native-tailwind/issues/new"),
+      );
+
+      consoleSpy.mockRestore();
     });
 
-    it("should extract colors and fontFamily from theme.extend", () => {
-      // This would require complex mocking of the entire require flow
-      // Testing the logic: theme.extend is preferred
-      const colors = { brand: { light: "#fff", dark: "#000" } };
-      const fontFamily = { sans: ['"SF Pro"'], custom: ['"Custom Font"'] };
-      const theme = {
-        extend: { colors, fontFamily },
+    it("should not warn for supported theme keys only", () => {
+      const configPath = "/project/supported/tailwind.config.js";
+      const mockConfig = {
+        theme: {
+          extend: {
+            colors: { brand: "#123456" },
+            fontFamily: { custom: "CustomFont" },
+            fontSize: { huge: "48px" },
+            spacing: { "72": "18rem" },
+          },
+        },
+      };
+
+      const consoleSpy = vi.spyOn(console, "warn").mockImplementation(vi.fn());
+
+      warnUnsupportedThemeKeys(mockConfig, configPath);
+
+      expect(consoleSpy).not.toHaveBeenCalled();
+
+      consoleSpy.mockRestore();
+    });
+
+    it("should only warn once per config path", () => {
+      const configPath = "/project/once/tailwind.config.js";
+      const mockConfig = {
+        theme: {
+          extend: {
+            borderRadius: { xl: "1rem" }, // Unsupported
+          },
+        },
       };
 
-      // If we had the config, we'd flatten the colors and convert fontFamily
-      expect(theme.extend.colors).toEqual(colors);
-      expect(theme.extend.fontFamily).toEqual(fontFamily);
+      const consoleSpy = vi.spyOn(console, "warn").mockImplementation(vi.fn());
+
+      warnUnsupportedThemeKeys(mockConfig, configPath);
+      warnUnsupportedThemeKeys(mockConfig, configPath);
+
+      expect(consoleSpy).toHaveBeenCalledTimes(1);
+
+      consoleSpy.mockRestore();
     });
   });
 });

package/dist/babel/config-loader.ts

@@ -15,13 +15,68 @@ export type TailwindConfig = {
       colors?: Record<string, string | Record<string, string>>;
       fontFamily?: Record<string, string | string[]>;
       fontSize?: Record<string, string | number>;
+      spacing?: Record<string, string | number>;
+      [key: string]: unknown;
     };
     colors?: Record<string, string | Record<string, string>>;
     fontFamily?: Record<string, string | string[]>;
     fontSize?: Record<string, string | number>;
+    spacing?: Record<string, string | number>;
+    [key: string]: unknown;
   };
 };
 
+/**
+ * Theme keys currently supported by react-native-tailwind
+ */
+const SUPPORTED_THEME_KEYS = new Set(["colors", "fontFamily", "fontSize", "spacing", "extend"]);
+
+/**
+ * Cache for warned config paths to avoid duplicate warnings
+ */
+const warnedConfigPaths = new Set<string>();
+
+/**
+ * Check for unsupported theme extensions and warn the user
+ * @internal Exported for testing
+ */
+export function warnUnsupportedThemeKeys(config: TailwindConfig, configPath: string): void {
+  if (process.env.NODE_ENV === "production" || warnedConfigPaths.has(configPath)) {
+    return;
+  }
+
+  const unsupportedKeys: string[] = [];
+
+  // Check theme.extend keys
+  if (config.theme?.extend && typeof config.theme.extend === "object") {
+    for (const key of Object.keys(config.theme.extend)) {
+      if (!SUPPORTED_THEME_KEYS.has(key)) {
+        unsupportedKeys.push(`theme.extend.${key}`);
+      }
+    }
+  }
+
+  // Check direct theme keys (excluding 'extend')
+  if (config.theme && typeof config.theme === "object") {
+    for (const key of Object.keys(config.theme)) {
+      if (key !== "extend" && !SUPPORTED_THEME_KEYS.has(key)) {
+        unsupportedKeys.push(`theme.${key}`);
+      }
+    }
+  }
+
+  if (unsupportedKeys.length > 0) {
+    warnedConfigPaths.add(configPath);
+    console.warn(
+      `[react-native-tailwind] Unsupported theme configuration detected:\n` +
+        `  ${unsupportedKeys.join(", ")}\n\n` +
+        `  Currently supported: colors, fontFamily, fontSize, spacing\n\n` +
+        `  These extensions will be ignored. If you need support for these features,\n` +
+        `  please open an issue: https://github.com/mgcrea/react-native-tailwind/issues/new`,
+    );
+  }
+}
+
 // Cache configs per path to avoid repeated file I/O
 const configCache = new Map<string, TailwindConfig | null>();
 
@@ -92,6 +147,7 @@ export type CustomTheme = {
   colors: Record<string, string>;
   fontFamily: Record<string, string>;
   fontSize: Record<string, number>;
+  spacing: Record<string, number>;
 };
 
 /**
@@ -103,14 +159,17 @@ export function extractCustomTheme(filename: string): CustomTheme {
   const configPath = findTailwindConfig(projectDir);
 
   if (!configPath) {
-    return { colors: {}, fontFamily: {}, fontSize: {} };
+    return { colors: {}, fontFamily: {}, fontSize: {}, spacing: {} };
   }
 
   const config = loadTailwindConfig(configPath);
   if (!config?.theme) {
-    return { colors: {}, fontFamily: {}, fontSize: {} };
+    return { colors: {}, fontFamily: {}, fontSize: {}, spacing: {} };
   }
 
+  // Warn about unsupported theme keys
+  warnUnsupportedThemeKeys(config, configPath);
+
   // Extract colors
   /* v8 ignore next 5 */
   if (config.theme.colors && !config.theme.extend?.colors && process.env.NODE_ENV !== "production") {
@@ -173,9 +232,48 @@ export function extractCustomTheme(filename: string): CustomTheme {
     }
   }
 
+  // Extract spacing
+  /* v8 ignore next 5 */
+  if (config.theme.spacing && !config.theme.extend?.spacing && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[react-native-tailwind] Using theme.spacing will override all default spacing. " +
+        "Use theme.extend.spacing to add custom spacing while keeping defaults.",
+    );
+  }
+  const spacing = config.theme.extend?.spacing ?? config.theme.spacing ?? {};
+
+  // Convert spacing values to numbers (handle rem, px, or number values)
+  const spacingResult: Record<string, number> = {};
+  for (const [key, value] of Object.entries(spacing)) {
+    if (typeof value === "number") {
+      spacingResult[key] = value;
+    } else if (typeof value === "string") {
+      // Parse string values: "18rem" -> 288, "16px" -> 16, "16" -> 16
+      let parsed: number;
+      if (value.endsWith("rem")) {
+        // Convert rem to px (1rem = 16px)
+        parsed = parseFloat(value.replace(/rem$/, "")) * 16;
+      } else {
+        // Parse px or unitless values
+        parsed = parseFloat(value.replace(/px$/, ""));
+      }
+      if (!isNaN(parsed)) {
+        spacingResult[key] = parsed;
+      } else {
+        /* v8 ignore next 5 */
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[react-native-tailwind] Invalid spacing value for "${key}": ${value}. Expected number or string like "16px" or "1rem".`,
+          );
+        }
+      }
+    }
+  }
+
   return {
     colors: flattenColors(colors),
     fontFamily: fontFamilyResult,
     fontSize: fontSizeResult,
+    spacing: spacingResult,
   };
 }