@happlyui/cli 0.1.4 → 0.2.0

package/dist/index.js

@@ -188726,6 +188726,7 @@ async function detectProject(cwd) {
     isSrcDir: false,
     tailwindConfig: null,
     tailwindCss: null,
+    tailwindVersion: 3,
     packageManager: "bun",
     aliases: {},
     framework: "unknown"
@@ -188735,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);
@@ -188795,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";
@@ -188988,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;
 
@@ -189048,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();
@@ -189079,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)}`);
   }
@@ -189141,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}`;
       }
     }

package/package.json

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