zerozeeker 2.2.4 → 2.2.5

package/dist/index.js

@@ -177,14 +177,59 @@ function checkTypeScriptConfig(projectRoot) {
   };
 }
 function checkTailwindConfig(projectRoot) {
+  const cssFileLocations = [
+    "app/globals.css",
+    "src/app/globals.css",
+    "styles/globals.css",
+    "src/styles/globals.css",
+    "app/global.css",
+    "src/app/global.css",
+    "styles/global.css",
+    "src/styles/global.css",
+    "app/index.css",
+    "src/index.css",
+    "index.css"
+  ];
+  for (const cssPath of cssFileLocations) {
+    const fullPath = join(projectRoot, cssPath);
+    if (existsSync(fullPath)) {
+      try {
+        const content = readFileSync(fullPath, "utf-8");
+        if (content.includes('@import "tailwindcss"') || content.includes("@import 'tailwindcss'") || content.includes("@theme")) {
+          return { name: "Tailwind CSS v4", passed: true };
+        }
+        if (content.includes("@tailwind base") || content.includes("@tailwind components") || content.includes("@tailwind utilities")) {
+          return { name: "Tailwind CSS v3", passed: true };
+        }
+      } catch {
+      }
+    }
+  }
   const tailwindConfigs = [
     "tailwind.config.ts",
     "tailwind.config.js",
     "tailwind.config.mjs",
     "tailwind.config.cjs"
   ];
-  const hasTailwind = tailwindConfigs.some((config) => existsSync(join(projectRoot, config)));
-  return hasTailwind ? { name: "Tailwind CSS", passed: true } : { name: "Tailwind CSS", passed: false, message: "Config file not found" };
+  const hasTailwindConfig = tailwindConfigs.some((config) => existsSync(join(projectRoot, config)));
+  if (hasTailwindConfig) {
+    return { name: "Tailwind CSS", passed: true };
+  }
+  const packageJson = parseJsonFile(join(projectRoot, "package.json"));
+  if (packageJson) {
+    const deps = {
+      ...packageJson.dependencies ?? {},
+      ...packageJson.devDependencies ?? {}
+    };
+    if (deps.tailwindcss) {
+      return {
+        name: "Tailwind CSS",
+        passed: true,
+        message: "Installed but config not detected - may need setup"
+      };
+    }
+  }
+  return { name: "Tailwind CSS", passed: false, message: "Config file not found" };
 }
 function checkFramework(projectRoot) {
   const packageJson = parseJsonFile(join(projectRoot, "package.json"));
@@ -201,7 +246,7 @@ function checkFramework(projectRoot) {
 }
 function displaySetupHelp(checks) {
   const tsCheck = checks.find((c) => c.name.startsWith("TypeScript"));
-  const tailwindCheck = checks.find((c) => c.name === "Tailwind CSS");
+  const tailwindCheck = checks.find((c) => c.name.startsWith("Tailwind"));
   const pm = detectPackageManager();
   if (tsCheck && !tsCheck.passed) {
     console.log(chalk.dim("Install TypeScript:"));
@@ -210,7 +255,9 @@ function displaySetupHelp(checks) {
     console.log(chalk.white("  npx tsc --init"));
   }
   if (tailwindCheck && !tailwindCheck.passed) {
-    console.log(chalk.dim("\nInstall Tailwind CSS:"));
+    console.log(chalk.dim("\nInstall Tailwind CSS v4:"));
+    console.log(chalk.white(`  ${pm} ${pm === "npm" ? "install" : "add"} -D tailwindcss @tailwindcss/postcss postcss`));
+    console.log(chalk.dim("\nOr for Tailwind CSS v3:"));
     console.log(chalk.white(`  ${pm} ${pm === "npm" ? "install" : "add"} -D tailwindcss postcss autoprefixer`));
     console.log(chalk.white("  npx tailwindcss init -p"));
   }
@@ -237,14 +284,73 @@ async function autoFixSetup(projectRoot, needsTypeScript, needsTailwind, spinner
   tsconfig.compilerOptions.paths["@/lib/*"] = ["lib/*"];
   writeFileSync(tsconfigPath, JSON.stringify(tsconfig, null, 2), "utf-8");
   if (needsTailwind) {
-    spinner.text = "Installing Tailwind CSS...";
-    execSync(`${pm} ${installCmd} -D tailwindcss postcss autoprefixer`, { stdio: "inherit" });
-    spinner.text = "Initializing Tailwind config...";
+    spinner.text = "Installing Tailwind CSS v4...";
     try {
-      execSync("npx tailwindcss init -p", { stdio: "inherit" });
+      execSync(`${pm} ${installCmd} -D tailwindcss @tailwindcss/postcss postcss`, { stdio: "inherit" });
     } catch {
-      console.warn(chalk.yellow("\nWarning: `npx tailwindcss init -p` failed. Creating default config files instead."));
-      const tailwindConfig = `/** @type {import('tailwindcss').Config} */
+      console.warn(chalk.yellow("\nWarning: Tailwind CSS v4 packages not available. Installing v3 instead."));
+      execSync(`${pm} ${installCmd} -D tailwindcss postcss autoprefixer`, { stdio: "inherit" });
+    }
+    spinner.text = "Creating Tailwind CSS configuration...";
+    try {
+      const postcssConfig = `export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+`;
+      const appDir = join(projectRoot, "app");
+      const srcAppDir = join(projectRoot, "src", "app");
+      let globalsCssDir;
+      let globalsCssPath;
+      if (existsSync(srcAppDir)) {
+        globalsCssDir = srcAppDir;
+        globalsCssPath = join(srcAppDir, "globals.css");
+      } else if (existsSync(appDir)) {
+        globalsCssDir = appDir;
+        globalsCssPath = join(appDir, "globals.css");
+      } else {
+        globalsCssDir = appDir;
+        globalsCssPath = join(appDir, "globals.css");
+        mkdirSync(appDir, { recursive: true });
+      }
+      const globals = `@import "tailwindcss";
+
+/* 
+ * Tailwind CSS v4 uses CSS-first configuration.
+ * Customize your theme using the @theme directive:
+ * 
+ * @theme {
+ *   --color-primary: oklch(0.7 0.15 200);
+ *   --font-display: "Satoshi", sans-serif;
+ * }
+ * 
+ * Learn more: https://tailwindcss.com/docs/v4-beta
+ */
+`;
+      writeFileSync(join(projectRoot, "postcss.config.mjs"), postcssConfig, "utf-8");
+      if (!existsSync(globalsCssPath)) {
+        writeFileSync(globalsCssPath, globals, "utf-8");
+        console.log(chalk.green(`Created postcss.config.mjs and ${globalsCssPath.replace(projectRoot, "")}`));
+      } else {
+        const existingContent = readFileSync(globalsCssPath, "utf-8");
+        if (!existingContent.includes('@import "tailwindcss"') && !existingContent.includes("@import 'tailwindcss'") && !existingContent.includes("@tailwind")) {
+          writeFileSync(globalsCssPath, `@import "tailwindcss";
+
+${existingContent}`, "utf-8");
+          console.log(chalk.green(`Created postcss.config.mjs and added Tailwind import to ${globalsCssPath.replace(projectRoot, "")}`));
+        } else {
+          console.log(chalk.green("Created postcss.config.mjs"));
+        }
+      }
+    } catch (writeErr) {
+      const errorMessage = writeErr instanceof Error ? writeErr.message : String(writeErr);
+      console.warn(chalk.yellow(`Failed to write Tailwind config files: ${errorMessage}`));
+      console.log(chalk.dim("Attempting fallback to Tailwind v3 configuration..."));
+      try {
+        execSync("npx tailwindcss init -p", { stdio: "inherit" });
+      } catch {
+        const tailwindConfig = `/** @type {import('tailwindcss').Config} */
 export default {
   content: [
     './app/**/*.{js,ts,jsx,tsx,mdx}',
@@ -257,33 +363,16 @@ export default {
   plugins: [],
 };
 `;
-      const postcssConfig = `export default {
+        const postcssConfig = `export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
 };
 `;
-      const globalsCssDir = join(projectRoot, "app");
-      const globalsCssPath = join(globalsCssDir, "globals.css");
-      try {
         writeFileSync(join(projectRoot, "tailwind.config.js"), tailwindConfig, "utf-8");
         writeFileSync(join(projectRoot, "postcss.config.js"), postcssConfig, "utf-8");
-        if (!existsSync(globalsCssDir)) {
-          mkdirSync(globalsCssDir, { recursive: true });
-        }
-        if (!existsSync(globalsCssPath)) {
-          const globals = `@tailwind base;
-@tailwind components;
-@tailwind utilities;
-`;
-          writeFileSync(globalsCssPath, globals, "utf-8");
-        }
-        console.log(chalk.green("Created tailwind.config.js, postcss.config.js, and app/globals.css"));
-      } catch (writeErr) {
-        const errorMessage = writeErr instanceof Error ? writeErr.message : String(writeErr);
-        console.warn(chalk.yellow(`Failed to write fallback Tailwind files: ${errorMessage}`));
-        throw writeErr;
+        console.log(chalk.green("Created tailwind.config.js and postcss.config.js (v3 fallback)"));
       }
     }
   }
@@ -329,7 +418,7 @@ program.command("init").description("Initialize ZeroZeeker in your project").act
     console.log(chalk.yellow("\n[!] Some setup issues detected\n"));
     displaySetupHelp(checks);
     const needsTypeScript = !checks.find((c) => c.name.startsWith("TypeScript"))?.passed;
-    const needsTailwind = !checks.find((c) => c.name === "Tailwind CSS")?.passed;
+    const needsTailwind = !checks.find((c) => c.name.startsWith("Tailwind"))?.passed;
     const doAuto = await askYesNo("Would you like ZeroZeeker to try to automatically fix these issues now?", true);
     if (!doAuto) {
       process.exit(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zerozeeker",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "Zero-config CLI for installing ZeroZeeker UI components. No shadcn required.",
   "type": "module",
   "bin": {