@mgcrea/react-native-tailwind 0.2.0

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@mgcrea/react-native-tailwind",
+  "version": "0.2.0",
+  "description": "Compile-time Tailwind CSS for React Native with zero runtime overhead",
+  "author": "Olivier Louvignes <olivier@mgcrea.io> (https://github.com/mgcrea)",
+  "homepage": "https://github.com/mgcrea/react-native-tailwind#readme",
+  "repository": "github:mgcrea/react-native-tailwind",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./babel": {
+      "import": "./dist/babel/index.cjs",
+      "require": "./dist/babel/index.cjs"
+    },
+    "./react-native": {
+      "types": "./dist/react-native.d.ts"
+    }
+  },
+  "files": [
+    "*.podspec",
+    "src",
+    "dist",
+    "ios"
+  ],
+  "scripts": {
+    "dev": "cd example; npm run dev",
+    "build": "npm run build:babel && npm run build:babel-plugin && npm run build:types",
+    "build:babel": "babel src --out-dir dist --extensions \".ts,.tsx,.js,.jsx\" --copy-files --ignore 'src/babel/**' --ignore '**/*.d.ts'",
+    "build:babel-plugin": "node scripts/bundle-babel-plugin.cjs",
+    "build:types": "tsc --emitDeclarationOnly && node scripts/post-build-types.cjs",
+    "install:ios": "cd example; npm run install:ios",
+    "open:ios": "cd example; npm run open:ios",
+    "lint": "eslint .",
+    "prettify": "prettier --write src/",
+    "check": "tsc --noEmit",
+    "spec": "NODE_OPTIONS=--experimental-require-module jest",
+    "test": "npm run lint && npm run check && npm run spec",
+    "prepare": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/plugin-transform-modules-commonjs": "^7.27.1",
+    "@babel/preset-typescript": "^7.28.5",
+    "@babel/runtime": "^7.28.4",
+    "@babel/types": "^7.28.5",
+    "@mgcrea/eslint-config-react-native": "^0.14.0",
+    "@react-native-community/cli": "^20.0.2",
+    "@react-native/babel-preset": "0.82.1",
+    "@react-native/typescript-config": "0.82.1",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__traverse": "^7.28.0",
+    "@types/react": "^19.2.5",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "esbuild": "^0.27.0",
+    "eslint": "^9.39.1",
+    "jest": "^30.2.0",
+    "prettier": "^3.6.2",
+    "prettier-plugin-organize-imports": "^4.3.0",
+    "react": "^19.2.0",
+    "react-native": "0.82.1",
+    "typescript": "^5.9.3"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "packageManager": "pnpm@10.22.0",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/babel/config-loader.ts

@@ -0,0 +1,134 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+/* eslint-disable @typescript-eslint/no-dynamic-delete */
+/**
+ * Tailwind config loader for Babel plugin
+ * Discovers and loads tailwind.config.* files from the project
+ */
+
+import * as fs from "fs";
+import * as path from "path";
+
+export type TailwindConfig = {
+  theme?: {
+    extend?: {
+      colors?: Record<string, string | Record<string, string>>;
+    };
+    colors?: Record<string, string | Record<string, string>>;
+  };
+};
+
+// Cache configs per path to avoid repeated file I/O
+const configCache = new Map<string, TailwindConfig | null>();
+
+/**
+ * Find tailwind.config.* file by traversing up from startDir
+ */
+export function findTailwindConfig(startDir: string): string | null {
+  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;
+}
+
+/**
+ * Load and parse tailwind config file
+ */
+export function loadTailwindConfig(configPath: string): TailwindConfig | null {
+  // Check cache
+  if (configCache.has(configPath)) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return configCache.get(configPath)!;
+  }
+
+  try {
+    // Clear require cache to allow hot reloading
+    const resolvedPath = require.resolve(configPath);
+    delete require.cache[resolvedPath];
+
+    // Load config
+    const config = require(configPath) as TailwindConfig | { default: TailwindConfig };
+
+    // Handle both default export and direct export
+    const resolved: TailwindConfig = "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;
+  }
+}
+
+/**
+ * Flatten nested color objects into dot notation
+ * Example: { brand: { light: '#fff', dark: '#000' } } -> { 'brand-light': '#fff', 'brand-dark': '#000' }
+ */
+function flattenColors(
+  colors: Record<string, string | Record<string, string>>,
+  prefix = "",
+): Record<string, string> {
+  const result: Record<string, string> = {};
+
+  for (const [key, value] of Object.entries(colors)) {
+    const newKey = 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;
+}
+
+/**
+ * Extract custom colors from tailwind config
+ * Prefers theme.extend.colors over theme.colors to avoid overriding defaults
+ */
+export function extractCustomColors(filename: string): Record<string, string> {
+  const projectDir = path.dirname(filename);
+  const configPath = findTailwindConfig(projectDir);
+
+  if (!configPath) {
+    return {};
+  }
+
+  const config = loadTailwindConfig(configPath);
+  if (!config?.theme) {
+    return {};
+  }
+
+  // Warn if using theme.colors instead of theme.extend.colors
+  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.",
+    );
+  }
+
+  // Prefer theme.extend.colors
+  const colors = config.theme.extend?.colors ?? config.theme.colors ?? {};
+
+  return flattenColors(colors);
+}

package/src/babel/index.ts

@@ -0,0 +1,286 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
+/**
+ * Babel plugin for react-native-tailwind
+ * Transforms className props to style props at compile time
+ */
+
+import type { NodePath, PluginObj, PluginPass } from "@babel/core";
+import * as BabelTypes from "@babel/types";
+import { parseClassName as parseClassNameFn } from "../parser/index.js";
+import { generateStyleKey as generateStyleKeyFn } from "../utils/styleKey.js";
+import { extractCustomColors } from "./config-loader.js";
+
+type PluginState = PluginPass & {
+  styleRegistry: Map<string, Record<string, string | number>>;
+  hasClassNames: boolean;
+  hasStyleSheetImport: boolean;
+  customColors: Record<string, string>;
+};
+
+/**
+ * Supported className-like attributes
+ */
+const SUPPORTED_CLASS_ATTRIBUTES = [
+  "className",
+  "contentContainerClassName",
+  "columnWrapperClassName",
+  "ListHeaderComponentClassName",
+  "ListFooterComponentClassName",
+] as const;
+
+/**
+ * Get the target style prop name based on the className attribute
+ */
+function getTargetStyleProp(attributeName: string): string {
+  if (attributeName === "contentContainerClassName") {
+    return "contentContainerStyle";
+  }
+  if (attributeName === "columnWrapperClassName") {
+    return "columnWrapperStyle";
+  }
+  if (attributeName === "ListHeaderComponentClassName") {
+    return "ListHeaderComponentStyle";
+  }
+  if (attributeName === "ListFooterComponentClassName") {
+    return "ListFooterComponentStyle";
+  }
+  return "style";
+}
+
+export default function reactNativeTailwindBabelPlugin({
+  types: t,
+}: {
+  types: typeof BabelTypes;
+}): PluginObj<PluginState> {
+  return {
+    name: "react-native-tailwind",
+
+    visitor: {
+      Program: {
+        enter(_path: NodePath, state: PluginState) {
+          // Initialize state for this file
+          state.styleRegistry = new Map();
+          state.hasClassNames = false;
+          state.hasStyleSheetImport = false;
+
+          // Load custom colors from tailwind.config.*
+          state.customColors = extractCustomColors(state.file.opts.filename ?? "");
+        },
+
+        exit(path: NodePath, state: PluginState) {
+          // If no classNames were found, skip StyleSheet generation
+          if (!state.hasClassNames || state.styleRegistry.size === 0) {
+            return;
+          }
+
+          // Add StyleSheet import if not already present
+          if (!state.hasStyleSheetImport) {
+            addStyleSheetImport(path, t);
+          }
+
+          // Generate and inject StyleSheet.create at the end of the file
+          injectStyles(path, state.styleRegistry, t);
+        },
+      },
+
+      // Check if StyleSheet is already imported
+      ImportDeclaration(path: NodePath, state: PluginState) {
+        const node = path.node as any;
+        if (node.source.value === "react-native") {
+          const specifiers = node.specifiers;
+          const hasStyleSheet = specifiers.some((spec: any) => {
+            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+              return spec.imported.name === "StyleSheet";
+            }
+            return false;
+          });
+
+          if (hasStyleSheet) {
+            state.hasStyleSheetImport = true;
+          } else {
+            // Add StyleSheet to existing import
+            node.specifiers.push(t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet")));
+            state.hasStyleSheetImport = true;
+          }
+        }
+      },
+
+      JSXAttribute(path: NodePath, state: PluginState) {
+        const node = path.node as any;
+        const attributeName = node.name.name;
+
+        // Only process className-like attributes
+        if (!SUPPORTED_CLASS_ATTRIBUTES.includes(attributeName)) {
+          return;
+        }
+
+        const value = node.value;
+
+        // Only handle static string literals
+        if (!t.isStringLiteral(value)) {
+          // Warn about dynamic className in development
+          if (process.env.NODE_ENV !== "production") {
+            const filename = state.file.opts.filename ?? "unknown";
+            const targetStyleProp = getTargetStyleProp(attributeName);
+            console.warn(
+              `[react-native-tailwind] Dynamic ${attributeName} values are not supported at ${filename}. ` +
+                `Use the ${targetStyleProp} prop for dynamic values.`,
+            );
+          }
+          return;
+        }
+
+        const className = value.value.trim();
+
+        // Skip empty classNames
+        if (!className) {
+          path.remove();
+          return;
+        }
+
+        state.hasClassNames = true;
+
+        // Parse className to React Native styles
+        const styleObject = parseClassName(className, state.customColors);
+
+        // Generate unique style key
+        const styleKey = generateStyleKey(className);
+
+        // Store in registry
+        state.styleRegistry.set(styleKey, styleObject);
+
+        // Determine target style prop based on attribute name
+        const targetStyleProp = getTargetStyleProp(attributeName);
+
+        // Check if there's already a style prop on this element
+        const parent = path.parent as any;
+        const styleAttribute = parent.attributes.find(
+          (attr: any) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp,
+        );
+
+        if (styleAttribute) {
+          // Merge with existing style prop
+          mergeStyleAttribute(path, styleAttribute, styleKey, t);
+        } else {
+          // Replace className with style prop
+          replaceWithStyleAttribute(path, styleKey, targetStyleProp, t);
+        }
+      },
+    },
+  };
+}
+
+/**
+ * Add StyleSheet import to the file
+ */
+function addStyleSheetImport(path: NodePath, t: typeof BabelTypes) {
+  const importDeclaration = t.importDeclaration(
+    [t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet"))],
+    t.stringLiteral("react-native"),
+  );
+
+  // Add import at the top of the file
+  (path as any).unshiftContainer("body", importDeclaration);
+}
+
+/**
+ * Replace className with style attribute
+ */
+function replaceWithStyleAttribute(
+  classNamePath: NodePath,
+  styleKey: string,
+  targetStyleProp: string,
+  t: typeof BabelTypes,
+) {
+  const styleAttribute = t.jsxAttribute(
+    t.jsxIdentifier(targetStyleProp),
+    t.jsxExpressionContainer(t.memberExpression(t.identifier("styles"), t.identifier(styleKey))),
+  );
+
+  classNamePath.replaceWith(styleAttribute);
+}
+
+/**
+ * Merge className styles with existing style prop
+ */
+function mergeStyleAttribute(
+  classNamePath: NodePath,
+  styleAttribute: any,
+  styleKey: string,
+  t: typeof BabelTypes,
+) {
+  const existingStyle = styleAttribute.value.expression;
+
+  // Create array with className styles first, then existing styles
+  // This allows existing styles to override className styles
+  const styleArray = t.arrayExpression([
+    t.memberExpression(t.identifier("styles"), t.identifier(styleKey)),
+    existingStyle,
+  ]);
+
+  styleAttribute.value = t.jsxExpressionContainer(styleArray);
+
+  // Remove the className attribute
+  classNamePath.remove();
+}
+
+/**
+ * Inject StyleSheet.create with all collected styles
+ */
+function injectStyles(
+  path: NodePath,
+  styleRegistry: Map<string, Record<string, string | number>>,
+  t: typeof BabelTypes,
+) {
+  // Build style object properties
+  const styleProperties: any[] = [];
+
+  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 {
+        // Fallback for other types
+        valueNode = t.valueToNode(styleValue);
+      }
+
+      return t.objectProperty(t.identifier(styleProp), valueNode);
+    });
+
+    styleProperties.push(t.objectProperty(t.identifier(key), t.objectExpression(properties)));
+  }
+
+  // Create: const styles = StyleSheet.create({ ... })
+  const styleSheet = t.variableDeclaration("const", [
+    t.variableDeclarator(
+      t.identifier("styles"),
+      t.callExpression(t.memberExpression(t.identifier("StyleSheet"), t.identifier("create")), [
+        t.objectExpression(styleProperties),
+      ]),
+    ),
+  ]);
+
+  // Add StyleSheet.create at the end of the file
+  (path as any).pushContainer("body", styleSheet);
+}
+
+// Helper functions that use the imported parser
+function parseClassName(
+  className: string,
+  customColors: Record<string, string>,
+): Record<string, string | number> {
+  return parseClassNameFn(className, customColors);
+}
+
+function generateStyleKey(className: string): string {
+  return generateStyleKeyFn(className);
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+/**
+ * @mgcrea/react-native-tailwind
+ * Compile-time Tailwind CSS for React Native
+ */
+
+// Main parser functions
+export { parseClass, parseClassName } from "./parser";
+export { generateStyleKey } from "./utils/styleKey";
+
+// Re-export types
+export type { RNStyle, StyleObject } from "./types";
+
+// Re-export individual parsers for advanced usage
+export { parseBorder, parseColor, parseLayout, parseSizing, parseSpacing, parseTypography } from "./parser";
+
+// Re-export constants for customization
+export { COLORS } from "./parser/colors";
+export { SIZE_PERCENTAGES, SIZE_SCALE } from "./parser/sizing";
+export { SPACING_SCALE } from "./parser/spacing";
+export { FONT_SIZES } from "./parser/typography";