tailjng 0.1.0 → 0.1.1

package/README.md

@@ -41,9 +41,10 @@ El CLI instala **dependencias transitivas** automáticamente (ej. `button` → `
 
 ## Requisitos
 
-- Angular **19.2+**
-- Tailwind CSS **4.x**
+- Angular **19.2+** (19.x dentro del mismo major; no Angular 20/21 aún)
+- Tailwind CSS **4.x** (incluido si eliges Tailwind al crear el proyecto con `ng new`)
 - Peers: `lucide-angular`, `date-fns`, `exceljs`, `xlsx` (el CLI los instala con `init:app` si faltan)
+- Estilos globales en **CSS o SCSS** — `init:app` detecta cuál usa tu app
 
 ---
 

package/cli/execute/init-app.js

@@ -20,11 +20,13 @@ const {
   patchAppConfig,
   patchAppComponentForAlerts,
   getMissingPackages,
+  resolveRuntimePackages,
+  resolveDevPackages,
+  hasTailwindSetup,
   fileExists,
 } = require('../settings/project-utils');
 
 const RUNTIME_PACKAGES = {
-  '@angular/animations': '^19.2.0',
   'lucide-angular': '^0.525.0',
   '@ng-icons/lucide': '>=32.0.0',
   'date-fns': '^4.1.0',
@@ -82,10 +84,19 @@ function installPackages(workspaceRoot, packages, isDev = false) {
   const flag = isDev ? '--save-dev' : '--save';
   console.log(`${COLORS.blue}[tailjng CLI] Installing ${isDev ? 'dev ' : ''}dependencies...${COLORS.reset}`);
 
+  const run = (extra = '') => {
+    execSync(`npm install ${flag} ${extra} ${spec}`.replace(/\s+/g, ' ').trim(), {
+      cwd: workspaceRoot,
+      stdio: 'inherit',
+      shell: true,
+    });
+  };
+
   try {
-    execSync(`npm install ${flag} ${spec}`, { cwd: workspaceRoot, stdio: 'inherit' });
+    run();
   } catch {
-    execSync(`npm install ${flag} ${spec}`, { cwd: workspaceRoot, stdio: 'inherit', shell: true });
+    console.log(`${COLORS.yellow}[tailjng CLI] Retrying with --legacy-peer-deps...${COLORS.reset}`);
+    run('--legacy-peer-deps');
   }
 }
 
@@ -158,6 +169,7 @@ async function runInitApp() {
 
   const packageJsonPath = path.join(workspaceRoot, 'package.json');
   const packageJson = fileExists(packageJsonPath) ? readJson(packageJsonPath) : { dependencies: {}, devDependencies: {} };
+  const tailwindReady = hasTailwindSetup(workspaceRoot, packageJson, primaryStylePath);
 
   if (!packageJson.dependencies?.tailjng) {
     console.log(`${COLORS.yellow}[tailjng CLI] WARNING: tailjng is not in package.json dependencies.${COLORS.reset}`);
@@ -165,8 +177,19 @@ async function runInitApp() {
   }
 
   if (installDeps) {
-    const missingRuntime = Object.fromEntries(getMissingPackages(packageJson, RUNTIME_PACKAGES));
-    const missingDev = Object.fromEntries(getMissingPackages(packageJson, DEV_PACKAGES));
+    if (tailwindReady) {
+      console.log(`${COLORS.cyan}[tailjng CLI] Tailwind already configured — skipping Tailwind/PostCSS packages and .postcssrc.json${COLORS.reset}`);
+    }
+
+    const runtimePackages = resolveRuntimePackages(packageJson, RUNTIME_PACKAGES);
+    const devPackages = resolveDevPackages(packageJson, DEV_PACKAGES, tailwindReady);
+    const missingRuntime = Object.fromEntries(getMissingPackages(packageJson, runtimePackages));
+    const missingDev = Object.fromEntries(getMissingPackages(packageJson, devPackages));
+
+    if (missingRuntime['@angular/animations']) {
+      console.log(`${COLORS.dim}[tailjng CLI] Adding @angular/animations aligned with @angular/core${COLORS.reset}`);
+    }
+
     installPackages(workspaceRoot, missingRuntime, false);
     installPackages(workspaceRoot, missingDev, true);
   }
@@ -192,6 +215,12 @@ async function runInitApp() {
   }
 
   for (const file of files) {
+    if (tailwindReady && file.relativePath === '.postcssrc.json') {
+      skipped += 1;
+      console.log(`${COLORS.yellow}↷ Skipped (Tailwind already configured) ${file.relativePath}${COLORS.reset}`);
+      continue;
+    }
+
     const targetPath = resolveTargetPath(workspaceRoot, selectedApp, file.relativePath, file.appRootRelative);
     const isPrimaryStyles = file.relativePath === primaryStylePath;
     const forceWrite = isPrimaryStyles && shouldWriteStyles(targetPath);
@@ -236,6 +265,10 @@ async function runInitApp() {
     }
   }
 
+  if (tailwindReady && !shouldWriteStyles(path.join(workspaceRoot, primaryStylePath))) {
+    console.log(`${COLORS.yellow}[tailjng CLI] Tip: add tailjng @theme tokens to your existing styles if components look unstyled.${COLORS.reset}`);
+  }
+
   console.log(`\n${COLORS.greenBright}${COLORS.bright}[tailjng CLI] init:app completed.${COLORS.reset}`);
   console.log(`${COLORS.dim}Created: ${created} | Skipped: ${skipped}${COLORS.reset}`);
   console.log(`\n${COLORS.cyan}Project ready. Install components when you need them:${COLORS.reset}`);

package/cli/settings/project-utils.js

@@ -201,6 +201,72 @@ function getMissingPackages(packageJson, packages) {
   return Object.entries(packages).filter(([name]) => !deps[name]);
 }
 
+function getMergedDependencies(packageJson) {
+  return { ...packageJson.dependencies, ...packageJson.devDependencies };
+}
+
+/** Alinea @angular/animations con la línea de @angular/core del proyecto (evita ERESOLVE 19.2.0 vs 19.2.25). */
+function resolveRuntimePackages(packageJson, basePackages) {
+  const packages = { ...basePackages };
+  const deps = getMergedDependencies(packageJson);
+
+  if (deps['@angular/animations']) {
+    delete packages['@angular/animations'];
+  } else if (deps['@angular/core']) {
+    packages['@angular/animations'] = deps['@angular/core'];
+  }
+
+  return packages;
+}
+
+function resolveDevPackages(packageJson, basePackages, tailwindReady) {
+  const packages = { ...basePackages };
+  if (!tailwindReady) return packages;
+
+  for (const name of ['tailwindcss', '@tailwindcss/postcss', 'postcss', 'autoprefixer']) {
+    if (getMergedDependencies(packageJson)[name]) {
+      delete packages[name];
+    }
+  }
+  return packages;
+}
+
+function hasTailwindSetup(workspaceRoot, packageJson, primaryStylePath) {
+  const deps = getMergedDependencies(packageJson);
+  if (deps.tailwindcss || deps['@tailwindcss/postcss']) {
+    return true;
+  }
+
+  const postcssConfigs = [
+    '.postcssrc.json',
+    'postcss.config.js',
+    'postcss.config.mjs',
+    'postcss.config.cjs',
+  ];
+
+  for (const configName of postcssConfigs) {
+    const configPath = path.join(workspaceRoot, configName);
+    if (!fs.existsSync(configPath)) continue;
+    const content = fs.readFileSync(configPath, 'utf8');
+    if (/tailwindcss|@tailwindcss\/postcss/.test(content)) {
+      return true;
+    }
+  }
+
+  const stylePath = path.isAbsolute(primaryStylePath)
+    ? primaryStylePath
+    : path.join(workspaceRoot, primaryStylePath);
+
+  if (fs.existsSync(stylePath)) {
+    const content = fs.readFileSync(stylePath, 'utf8');
+    if (/tailwindcss/.test(content)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
 module.exports = {
   findAngularWorkspace,
   readJson,
@@ -216,5 +282,9 @@ module.exports = {
   patchAppConfig,
   patchAppComponentForAlerts,
   getMissingPackages,
+  getMergedDependencies,
+  resolveRuntimePackages,
+  resolveDevPackages,
+  hasTailwindSetup,
   fileExists,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailjng",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0",