@happlyui/cli 0.1.3 → 0.1.5

package/dist/index.js

@@ -187362,6 +187362,9 @@ var {
   Help
 } = import__.default;
 
+// src/index.ts
+import { createRequire as createRequire2 } from "module";
+
 // src/commands/init.ts
 var import_prompts = __toESM(require_prompts3(), 1);
 
@@ -188723,6 +188726,7 @@ async function detectProject(cwd) {
     isSrcDir: false,
     tailwindConfig: null,
     tailwindCss: null,
+    tailwindVersion: 3,
     packageManager: "bun",
     aliases: {},
     framework: "unknown"
@@ -188732,6 +188736,7 @@ async function detectProject(cwd) {
   info.packageManager = await detectPackageManager(cwd);
   info.tailwindConfig = await detectTailwindConfig(cwd);
   info.tailwindCss = await detectTailwindCss(cwd);
+  info.tailwindVersion = await detectTailwindVersion(cwd, info.tailwindCss);
   info.framework = await detectFramework(cwd);
   if (info.isTypeScript) {
     info.aliases = await detectAliases(cwd);
@@ -188792,6 +188797,37 @@ async function detectTailwindCss(cwd) {
   }
   return null;
 }
+async function detectTailwindVersion(cwd, cssFile) {
+  try {
+    const pkgPath = path.join(cwd, "package.json");
+    if (existsSync(pkgPath)) {
+      const pkg = JSON.parse(await readFile(pkgPath, "utf-8"));
+      const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+      if (deps["@tailwindcss/vite"] || deps["@tailwindcss/postcss"] || deps["@tailwindcss/cli"]) {
+        return 4;
+      }
+      const twVersion = deps["tailwindcss"];
+      if (twVersion) {
+        const versionMatch = twVersion.match(/(\d+)\./);
+        if (versionMatch && parseInt(versionMatch[1], 10) >= 4) {
+          return 4;
+        }
+      }
+    }
+  } catch {}
+  if (cssFile) {
+    try {
+      const cssPath = path.join(cwd, cssFile);
+      if (existsSync(cssPath)) {
+        const content = await readFile(cssPath, "utf-8");
+        if (content.includes('@import "tailwindcss"') || content.includes("@import 'tailwindcss'")) {
+          return 4;
+        }
+      }
+    } catch {}
+  }
+  return 3;
+}
 async function detectFramework(cwd) {
   if (existsSync(path.join(cwd, "next.config.js")) || existsSync(path.join(cwd, "next.config.ts")) || existsSync(path.join(cwd, "next.config.mjs"))) {
     return "next";
@@ -188985,7 +189021,7 @@ export function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 `;
-var CSS_TEMPLATE = `@tailwind base;
+var CSS_TEMPLATE_V3 = `@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
@@ -189045,6 +189081,64 @@ var CSS_TEMPLATE = `@tailwind base;
   }
 }
 `;
+var CSS_TEMPLATE_V4 = `@import "tailwindcss";
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+}
+`;
 async function init(options) {
   const cwd = options.cwd || process.cwd();
   const nonInteractive = isNonInteractive();
@@ -189076,6 +189170,7 @@ async function init(options) {
   logger.info(`Framework: ${logger.highlight(projectInfo.framework)}`);
   logger.info(`TypeScript: ${logger.highlight(String(projectInfo.isTypeScript))}`);
   logger.info(`Package Manager: ${logger.highlight(projectInfo.packageManager)}`);
+  logger.info(`Tailwind CSS: ${logger.highlight(`v${projectInfo.tailwindVersion}`)}`);
   if (projectInfo.tailwindConfig) {
     logger.info(`Tailwind Config: ${logger.highlight(projectInfo.tailwindConfig)}`);
   }
@@ -189138,14 +189233,20 @@ async function init(options) {
     writeSpinner.text = `Created ${utilsPath}${utilsExt}`;
     const cssPath = config.tailwind.css;
     const fullCssPath = path3.join(cwd, cssPath);
+    const cssTemplate = projectInfo.tailwindVersion === 4 ? CSS_TEMPLATE_V4 : CSS_TEMPLATE_V3;
     if (!existsSync3(fullCssPath)) {
-      await writeComponentFile(cwd, cssPath, CSS_TEMPLATE);
+      await writeComponentFile(cwd, cssPath, cssTemplate);
       writeSpinner.text = `Created ${cssPath}`;
     } else {
       const existingCss = await readFile3(fullCssPath, "utf-8");
       if (!existingCss.includes("--background:")) {
-        await writeFile2(fullCssPath, CSS_TEMPLATE + `
+        if (projectInfo.tailwindVersion === 4 && existingCss.includes('@import "tailwindcss"')) {
+          const updatedCss = existingCss.replace('@import "tailwindcss";', cssTemplate);
+          await writeFile2(fullCssPath, updatedCss, "utf-8");
+        } else {
+          await writeFile2(fullCssPath, cssTemplate + `
 ` + existingCss, "utf-8");
+        }
         writeSpinner.text = `Updated ${cssPath}`;
       }
     }
@@ -189418,8 +189519,10 @@ function pascalCase(str) {
 
 // src/index.ts
 var import_picocolors2 = __toESM(require_picocolors(), 1);
+var require2 = createRequire2(import.meta.url);
+var { version } = require2("../package.json");
 var program2 = new Command;
-program2.name("happlyui").description("Add HapplyUI components to your project").version("0.0.1");
+program2.name("happlyui").description("Add HapplyUI components to your project").version(version);
 program2.command("init").description("Initialize your project with HapplyUI").option("-c, --cwd <path>", "Working directory", process.cwd()).option("-y, --yes", "Skip prompts and use defaults").option("--defaults", "Use default configuration").option("--base-color <color>", "Base color theme (slate, gray, zinc, neutral, stone)").option("--no-css-variables", "Disable CSS variables for colors").action(init);
 program2.command("add").description("Add components to your project").argument("[components...]", "Components to add").option("-c, --cwd <path>", "Working directory", process.cwd()).option("-y, --yes", "Skip prompts").option("-o, --overwrite", "Overwrite existing files").option("-a, --all", "Add all available components").option("-p, --path <path>", "Custom path for components").action(add);
 program2.command("list").description("List all available components").option("-c, --cwd <path>", "Working directory", process.cwd()).action(async (options) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happlyui/cli",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Add HapplyUI components to your project",
   "type": "module",
   "bin": {