@dinachi/cli 0.6.0 → 0.6.1

package/dist/index.js

@@ -668,6 +668,45 @@ ${withTrailingComma}
 `;
   return next;
 }
+function detectTailwindMajorVersion(projectRoot) {
+  const packageJsonPath = path3.join(projectRoot, "package.json");
+  if (!fs3.existsSync(packageJsonPath)) return 4;
+  try {
+    const raw = fs3.readFileSync(packageJsonPath, "utf-8");
+    const packageJson = JSON.parse(raw);
+    const deps = { ...packageJson.dependencies ?? {}, ...packageJson.devDependencies ?? {} };
+    const twVersion = deps.tailwindcss;
+    if (!twVersion) return 4;
+    const match = twVersion.match(/(\d+)/);
+    return match ? parseInt(match[1], 10) : 4;
+  } catch {
+    return 4;
+  }
+}
+async function ensureTW4Plugin(deps, cssFilePath) {
+  if (!deps.includes("tailwindcss-animate")) {
+    return null;
+  }
+  if (!fs3.existsSync(cssFilePath)) {
+    return { skipped: true, path: cssFilePath };
+  }
+  const content = await fs3.readFile(cssFilePath, "utf-8");
+  if (content.includes("tailwindcss-animate")) {
+    return { exists: true, path: cssFilePath };
+  }
+  const pluginLine = '@plugin "tailwindcss-animate";';
+  const importMatch = content.match(/^@import\s+["']tailwindcss["'];?\s*$/m);
+  let updated;
+  if (importMatch) {
+    updated = content.replace(importMatch[0], `${importMatch[0].trimEnd()}
+${pluginLine}`);
+  } else {
+    updated = `${pluginLine}
+${content}`;
+  }
+  await fs3.writeFile(cssFilePath, updated);
+  return { updated: true, path: cssFilePath };
+}
 async function ensureTailwindConfig(deps, projectRoot, configuredFileName) {
   if (!deps.includes("tailwindcss-animate")) {
     return null;
@@ -761,8 +800,8 @@ ${linesToAppend.join("\n")}
   await fs3.writeFile(targetPath, updatedContent);
   allFilesAdded.push({ name: "index.ts", path: path3.join(targetDir, "index.ts") });
 }
-var addCommand = new Command("add").description("Add a component to your project").argument("[component]", "Name of the component (optional when using --all)").option("-y, --yes", "Skip confirmation prompts").option("-o, --overwrite", "Overwrite existing files").option("-a, --all", "Install all available components").option("--skip-install", "Skip package installation").action(
-  async (componentName, options) => {
+var addCommand = new Command("add").description("Add a component to your project").argument("[components...]", "Names of the components to add (optional when using --all)").option("-y, --yes", "Skip confirmation prompts").option("-o, --overwrite", "Overwrite existing files").option("-a, --all", "Install all available components").option("--skip-install", "Skip package installation").action(
+  async (componentNames, options) => {
     const spinner = ora("Adding component...").start();
     try {
       const config = await getConfig();
@@ -785,7 +824,7 @@ var addCommand = new Command("add").description("Add a component to your project
         }
         componentsToInstall = Array.from(allComponentsWithDeps);
       } else {
-        if (!componentName) {
+        if (componentNames.length === 0) {
           spinner.fail("\u274C Component name is required when not using --all flag.");
           console.log("Available components:");
           Object.keys(registry).forEach((name) => {
@@ -793,16 +832,23 @@ var addCommand = new Command("add").description("Add a component to your project
           });
           process.exit(1);
         }
-        const component = registry[componentName];
-        if (!component) {
-          spinner.fail(`\u274C Component "${componentName}" not found.`);
-          console.log("Available components:");
-          Object.keys(registry).forEach((name) => {
-            console.log(`  ${chalk.cyan(name)}`);
-          });
-          process.exit(1);
+        for (const name of componentNames) {
+          if (!registry[name]) {
+            spinner.fail(`\u274C Component "${name}" not found.`);
+            console.log("Available components:");
+            Object.keys(registry).forEach((n) => {
+              console.log(`  ${chalk.cyan(n)}`);
+            });
+            process.exit(1);
+          }
+        }
+        const allWithDeps = /* @__PURE__ */ new Set();
+        for (const name of componentNames) {
+          allWithDeps.add(name);
+          const deps = getComponentDependencies(name);
+          deps.forEach((dep) => allWithDeps.add(dep));
         }
-        componentsToInstall = [componentName, ...getComponentDependencies(componentName)];
+        componentsToInstall = Array.from(allWithDeps);
       }
       if (!options.all) {
         spinner.text = `Installing ${componentsToInstall.join(", ")}...`;
@@ -868,7 +914,11 @@ var addCommand = new Command("add").description("Add a component to your project
         }
       }
       spinner.text = "Updating Tailwind configuration...";
-      const tailwindConfigInfo = await ensureTailwindConfig(
+      const tailwindMajor = detectTailwindMajorVersion(projectRoot);
+      const tailwindConfigInfo = tailwindMajor >= 4 ? await ensureTW4Plugin(
+        allDepsInstalled,
+        path3.resolve(projectRoot, config.tailwind?.css || "src/index.css")
+      ) : await ensureTailwindConfig(
         allDepsInstalled,
         projectRoot,
         config.tailwind?.config || "tailwind.config.js"
@@ -967,7 +1017,7 @@ export function cn(...inputs: ClassValue[]) {
 }
 `;
 }
-function detectTailwindMajorVersion(projectRoot) {
+function detectTailwindMajorVersion2(projectRoot) {
   const packageJsonPath = path4.join(projectRoot, "package.json");
   if (!fs4.existsSync(packageJsonPath)) return 4;
   try {
@@ -1081,6 +1131,16 @@ function getThemeCSS(tailwindMajor, mode) {
   }
   return parts.join("\n\n") + "\n";
 }
+function stripConflictingCSS(css) {
+  let result = css;
+  result = result.replace(/@media\s*\(\s*prefers-color-scheme\s*:\s*dark\s*\)\s*\{[\s\S]*?\n\}/g, "");
+  result = result.replace(/:root\s*\{[^}]*\}/g, "");
+  result = result.replace(/\.dark\s*\{[^}]*\}/g, "");
+  result = result.replace(/@theme\s+inline\s*\{[^}]*\}/g, "");
+  result = result.replace(/(?:^|\n)body\s*\{[^}]*\}/g, "");
+  result = result.replace(/\n{3,}/g, "\n\n");
+  return result.trim();
+}
 async function injectThemeCSS(cssFilePath, tailwindMajor) {
   await fs4.ensureDir(path4.dirname(cssFilePath));
   if (fs4.existsSync(cssFilePath)) {
@@ -1088,8 +1148,10 @@ async function injectThemeCSS(cssFilePath, tailwindMajor) {
     if (existing.includes("--primary:")) {
       return { path: cssFilePath, skipped: true };
     }
+    const cleaned = stripConflictingCSS(existing);
     const theme2 = getThemeCSS(tailwindMajor, "append");
-    await fs4.writeFile(cssFilePath, existing.trimEnd() + "\n\n" + theme2);
+    const result = cleaned.length > 0 ? cleaned + "\n\n" + theme2 : getThemeCSS(tailwindMajor, "full");
+    await fs4.writeFile(cssFilePath, result);
     return { path: cssFilePath, updated: true };
   }
   const theme = getThemeCSS(tailwindMajor, "full");
@@ -1332,7 +1394,7 @@ var initCommand = new Command2("init").description("Initialize Dinachi UI in you
     const utilsContent = createUtilsFileContent();
     await fs4.writeFile(utilsFilePath, utilsContent);
     spinner.text = "Setting up color theme...";
-    const tailwindMajor = detectTailwindMajorVersion(projectRoot);
+    const tailwindMajor = detectTailwindMajorVersion2(projectRoot);
     const cssFilePath = path4.resolve(projectRoot, projectConfig.cssPath);
     const themeCSSResult = await injectThemeCSS(cssFilePath, tailwindMajor);
     let twColorConfigResult = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dinachi/cli",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "CLI for adding Dinachi UI components to your project",
   "type": "module",
   "keywords": [