setup-nativewind 1.1.2 → 1.2.0

package/README.md

@@ -1,6 +1,6 @@
 # setup-nativewind
 
-> One command to set up NativeWind in your Expo or React Native project.
+> CLI tool to instantly set up NativeWind v4 for Expo and React Native projects.
 
 ## Usage
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "setup-nativewind",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "One command NativeWind setup for Expo and React Native",
   "main": "src/index.js",
   "type": "module",

package/src/fileWriter.js

@@ -1,11 +1,11 @@
-import fs from 'fs-extra';
-import path from 'path';
-import { fileURLToPath } from 'url';
+import fs from "fs-extra";
+import path from "path";
+import { fileURLToPath } from "url";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export async function writeConfigFiles(projectType) {
-  const templateDir = path.join(__dirname, 'templates', projectType);
+  const templateDir = path.join(__dirname, "templates", projectType);
   const targetDir = process.cwd();
   const files = fs.readdirSync(templateDir);
 
@@ -14,6 +14,18 @@ export async function writeConfigFiles(projectType) {
     const dest = path.join(targetDir, file);
 
     if (fs.existsSync(dest)) {
+      // Smart merge for babel.config.js
+      if (file === "babel.config.js") {
+        await mergeBabelConfig(dest, projectType);
+        continue;
+      }
+
+      // Smart merge for metro.config.js
+      if (file === "metro.config.js") {
+        await mergeMetroConfig(dest, projectType);
+        continue;
+      }
+
       console.log(`⚠️  Skipping ${file} — already exists`);
       continue;
     }
@@ -23,13 +35,81 @@ export async function writeConfigFiles(projectType) {
   }
 
   // For TS projects update tsconfig.json automatically
-  if (projectType.includes('ts')) {
+  if (projectType.includes("ts")) {
     await updateTsConfig(targetDir);
   }
 }
 
+async function mergeBabelConfig(destPath, projectType) {
+  const content = fs.readFileSync(destPath, "utf8");
+
+  // Already has nativewind config
+  if (content.includes("nativewind")) {
+    console.log("⚠️  Skipping babel.config.js — already has NativeWind config");
+    return;
+  }
+
+  let updated;
+
+  if (projectType.includes("expo")) {
+    // Expo babel config
+    updated = content.replace(
+      /presets:\s*\[/,
+      `presets: [\n      ["babel-preset-expo", { jsxImportSource: "nativewind" }],\n      "nativewind/babel",`,
+    );
+  } else {
+    // RN CLI babel config
+    updated = content.replace(
+      /plugins:\s*\[/,
+      `plugins: [\n    "nativewind/babel",`,
+    );
+
+    // If no plugins array exists add it
+    if (!content.includes("plugins")) {
+      updated = content.replace(
+        /presets:\s*\[([^\]]*)\]/,
+        `presets: [$1],\n  plugins: ["nativewind/babel"]`,
+      );
+    }
+  }
+
+  fs.writeFileSync(destPath, updated, "utf8");
+  console.log("✅ Updated babel.config.js");
+}
+
+async function mergeMetroConfig(destPath, projectType) {
+  const content = fs.readFileSync(destPath, "utf8");
+
+  // Already has nativewind config
+  if (content.includes("nativewind")) {
+    console.log("⚠️  Skipping metro.config.js — already has NativeWind config");
+    return;
+  }
+
+  let updated;
+
+  if (projectType.includes("expo")) {
+    // Expo metro config
+    updated = `const { getDefaultConfig } = require("expo/metro-config");\nconst { withNativeWind } = require("nativewind/metro");\n\nconst config = getDefaultConfig(__dirname);\n\nmodule.exports = withNativeWind(config, { input: "./global.css" });\n`;
+  } else {
+    // RN CLI metro config — add withNativeWind import and wrap export
+    updated = content
+      .replace(
+        /const\s*\{\s*getDefaultConfig,\s*mergeConfig\s*\}\s*=\s*require\(['"]@react-native\/metro-config['"]\);/,
+        `const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");\nconst { withNativeWind } = require("nativewind/metro");`,
+      )
+      .replace(
+        /module\.exports\s*=\s*mergeConfig\(([^;]+)\);/s, // ← fixed: [^;]+ with s flag
+        `const mergedConfig = mergeConfig($1);\nmodule.exports = withNativeWind(mergedConfig, { input: "./global.css" });`,
+      );
+  }
+
+  fs.writeFileSync(destPath, updated, "utf8");
+  console.log("✅ Updated metro.config.js");
+}
+
 async function updateTsConfig(targetDir) {
-  const tsconfigPath = path.join(targetDir, 'tsconfig.json');
+  const tsconfigPath = path.join(targetDir, "tsconfig.json");
 
   if (!fs.existsSync(tsconfigPath)) return;
 
@@ -39,9 +119,9 @@ async function updateTsConfig(targetDir) {
     tsconfig.include = [];
   }
 
-  if (!tsconfig.include.includes('nativewind-env.d.ts')) {
-    tsconfig.include.push('nativewind-env.d.ts');
+  if (!tsconfig.include.includes("nativewind-env.d.ts")) {
+    tsconfig.include.push("nativewind-env.d.ts");
     fs.writeJsonSync(tsconfigPath, tsconfig, { spaces: 2 });
-    console.log('✅ Updated tsconfig.json');
+    console.log("✅ Updated tsconfig.json");
   }
-}
+}

package/src/index.js

@@ -48,6 +48,7 @@ async function run() {
   console.log('  2. Start using Tailwind classes in your components');
   if (projectType.includes('ts')) {
     console.log('  3. nativewind-env.d.ts has been created for TypeScript support ✅');
+    console.log('  4. Start your dev server once to resolve any CSS import warnings');
   }
   console.log('');
 }