@ng-shangjc/cli 1.0.4-beta → 1.0.6-beta

package/dist/commands/init.js

@@ -153,56 +153,6 @@ async function initProject() {
     }
 }
 async function setupTailwind() {
-    // Check if tailwind.config.js exists
-    const tailwindConfigPath = 'tailwind.config.js';
-    if (!fs.existsSync(tailwindConfigPath)) {
-        const tailwindConfig = `/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./src/**/*.{html,ts}",
-  ],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-    },
-  },
-  plugins: [],
-};`;
-        await fs.writeFile(tailwindConfigPath, tailwindConfig);
-        console.log('✅ Created tailwind.config.js');
-    }
     // Update global styles with Tailwind 4 @theme directive
     const globalStylesPath = 'src/styles.css';
     // Check if styles.css exists, if not try other common locations
@@ -215,43 +165,106 @@ module.exports = {
             stylesPath = 'src/app.css';
         }
     }
-    const globalStyles = `@import 'tailwindcss';
-
+    // Read existing content or create empty string for new file
+    let existingContent = '';
+    if (fs.existsSync(stylesPath)) {
+        existingContent = await fs.readFile(stylesPath, 'utf8');
+    }
+    // Check if Tailwind import already exists
+    const hasTailwindImport = existingContent.includes("@import 'tailwindcss';");
+    let newContent = '';
+    // Add Tailwind import if not present
+    if (!hasTailwindImport) {
+        newContent += "@import 'tailwindcss';\n";
+    }
+    // Add dark mode custom variant if user wants dark mode
+    const config = await fs.readJson('shangjc.config.json');
+    if (config.theme === 'dark' || config.theme === 'both') {
+        newContent += "@custom-variant dark (&:where(.dark, .dark *));\n";
+    }
+    // Add the default theme
+    newContent += `
 @theme {
-  --color-primary: 222.2 47.4% 11.2%;
-  --color-primary-foreground: 210 40% 98%;
-  --color-secondary: 210 40% 96.1%;
-  --color-secondary-foreground: 222.2 47.4% 11.2%;
-  --color-muted: 210 40% 96.1%;
-  --color-muted-foreground: 215.4 16.3% 46.9%;
-  --color-accent: 210 40% 96.1%;
-  --color-accent-foreground: 222.2 47.4% 11.2%;
-  --color-destructive: 0 84.2% 60.2%;
-  --color-destructive-foreground: 210 40% 98%;
-  --color-border: 214.3 31.8% 91.4%;
-  --color-input: 214.3 31.8% 91.4%;
-  --color-ring: 222.2 84% 4.9%;
-  --color-background: 0 0% 100%;
-  --color-foreground: 222.2 84% 4.9%;
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
   --radius: 0.5rem;
+  --radius-sm: calc(var(--radius) - 0.25rem);
+  --radius-md: calc(var(--radius) - 0.125rem);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.5);
+  --radius-2xl: calc(var(--radius) * 2);
+  --radius-3xl: calc(var(--radius) * 3);
+  --radius-full: 9999px;
 }
 
+:root {
+  @apply [color-scheme:light];
+  --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 {
-  --color-primary: 210 40% 98%;
-  --color-primary-foreground: 222.2 47.4% 11.2%;
-  --color-secondary: 217.2 32.6% 17.5%;
-  --color-secondary-foreground: 210 40% 98%;
-  --color-muted: 217.2 32.6% 17.5%;
-  --color-muted-foreground: 215 20.2% 65.1%;
-  --color-accent: 217.2 32.6% 17.5%;
-  --color-accent-foreground: 210 40% 98%;
-  --color-destructive: 0 62.8% 30.6%;
-  --color-destructive-foreground: 210 40% 98%;
-  --color-border: 217.2 32.6% 17.5%;
-  --color-input: 217.2 32.6% 17.5%;
-  --color-ring: 212.7 26.8% 83.9%;
-  --color-background: 222.2 84% 4.9%;
-  --color-foreground: 210 40% 98%;
+  @apply [color-scheme: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%;
 }
 
 @layer base {
@@ -260,21 +273,60 @@ module.exports = {
   }
   body {
     @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
   }
-}`;
-    // Append to existing styles or create new file
-    if (fs.existsSync(stylesPath)) {
-        const existingContent = await fs.readFile(stylesPath, 'utf8');
-        if (!existingContent.includes('@import \'tailwindcss\'')) {
-            await fs.appendFile(stylesPath, '\n\n' + globalStyles);
-            console.log(`✅ Updated ${stylesPath} with Tailwind 4 theme`);
-        }
-        else {
-            console.log(`⚠️  ${stylesPath} already contains Tailwind imports`);
+}
+`;
+    // Preserve existing styles after the theme
+    if (existingContent && !hasTailwindImport) {
+        // If file existed but didn't have tailwind import, keep existing content
+        const existingWithoutTailwind = existingContent;
+        if (existingWithoutTailwind.trim()) {
+            newContent += '\n\n' + existingWithoutTailwind;
         }
     }
-    else {
-        await fs.writeFile(stylesPath, globalStyles);
-        console.log(`✅ Created ${stylesPath} with Tailwind 4 theme`);
+    else if (existingContent && hasTailwindImport) {
+        // If file had tailwind import, preserve everything and just add/update the theme
+        const lines = existingContent.split('\n');
+        const preservedLines = [];
+        let skipNextClosingBrace = false;
+        let inThemeSection = false;
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            const trimmedLine = line.trim();
+            // Skip theme-related blocks but preserve everything else
+            if (trimmedLine.startsWith('@theme {') ||
+                trimmedLine.startsWith(':root {') ||
+                trimmedLine.startsWith('.dark {') ||
+                trimmedLine.startsWith('@custom-variant dark')) {
+                inThemeSection = true;
+                continue;
+            }
+            if (inThemeSection && trimmedLine === '}' &&
+                !lines[i + 1]?.trim().startsWith('@layer')) {
+                inThemeSection = false;
+                continue;
+            }
+            if (trimmedLine.startsWith('@layer base {')) {
+                inThemeSection = true;
+                continue;
+            }
+            if (inThemeSection && trimmedLine === '}' &&
+                lines[i - 1]?.trim().startsWith('@layer base')) {
+                inThemeSection = false;
+                continue;
+            }
+            if (inThemeSection) {
+                continue;
+            }
+            // Preserve this line
+            preservedLines.push(line);
+        }
+        if (preservedLines.length > 0) {
+            newContent += '\n\n' + preservedLines.join('\n');
+        }
     }
+    // Write the updated content
+    await fs.writeFile(stylesPath, newContent);
+    console.log(`✅ Updated ${stylesPath} with Tailwind 4 theme`);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-shangjc/cli",
-  "version": "1.0.4-beta",
+  "version": "1.0.6-beta",
   "bin": {
     "ng-shangjc": "./dist/index.js"
   },

package/src/commands/init.ts

@@ -124,59 +124,6 @@ export async function initProject() {
 }
 
 async function setupTailwind() {
-  // Check if tailwind.config.js exists
-  const tailwindConfigPath = 'tailwind.config.js';
-  
-  if (!fs.existsSync(tailwindConfigPath)) {
-    const tailwindConfig = `/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./src/**/*.{html,ts}",
-  ],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-    },
-  },
-  plugins: [],
-};`;
-
-    await fs.writeFile(tailwindConfigPath, tailwindConfig);
-    console.log('✅ Created tailwind.config.js');
-  }
-
   // Update global styles with Tailwind 4 @theme directive
   const globalStylesPath = 'src/styles.css';
   
@@ -190,43 +137,111 @@ module.exports = {
     }
   }
 
-  const globalStyles = `@import 'tailwindcss';
+  // Read existing content or create empty string for new file
+  let existingContent = '';
+  if (fs.existsSync(stylesPath)) {
+    existingContent = await fs.readFile(stylesPath, 'utf8');
+  }
 
+  // Check if Tailwind import already exists
+  const hasTailwindImport = existingContent.includes("@import 'tailwindcss';");
+  
+  let newContent = '';
+  
+  // Add Tailwind import if not present
+  if (!hasTailwindImport) {
+    newContent += "@import 'tailwindcss';\n";
+  }
+  
+  // Add dark mode custom variant if user wants dark mode
+  const config = await fs.readJson('shangjc.config.json');
+  if (config.theme === 'dark' || config.theme === 'both') {
+    newContent += "@custom-variant dark (&:where(.dark, .dark *));\n";
+  }
+  
+  // Add the default theme
+  newContent += `
 @theme {
-  --color-primary: 222.2 47.4% 11.2%;
-  --color-primary-foreground: 210 40% 98%;
-  --color-secondary: 210 40% 96.1%;
-  --color-secondary-foreground: 222.2 47.4% 11.2%;
-  --color-muted: 210 40% 96.1%;
-  --color-muted-foreground: 215.4 16.3% 46.9%;
-  --color-accent: 210 40% 96.1%;
-  --color-accent-foreground: 222.2 47.4% 11.2%;
-  --color-destructive: 0 84.2% 60.2%;
-  --color-destructive-foreground: 210 40% 98%;
-  --color-border: 214.3 31.8% 91.4%;
-  --color-input: 214.3 31.8% 91.4%;
-  --color-ring: 222.2 84% 4.9%;
-  --color-background: 0 0% 100%;
-  --color-foreground: 222.2 84% 4.9%;
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
   --radius: 0.5rem;
+  --radius-sm: calc(var(--radius) - 0.25rem);
+  --radius-md: calc(var(--radius) - 0.125rem);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.5);
+  --radius-2xl: calc(var(--radius) * 2);
+  --radius-3xl: calc(var(--radius) * 3);
+  --radius-full: 9999px;
 }
 
+:root {
+  @apply [color-scheme:light];
+  --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 {
-  --color-primary: 210 40% 98%;
-  --color-primary-foreground: 222.2 47.4% 11.2%;
-  --color-secondary: 217.2 32.6% 17.5%;
-  --color-secondary-foreground: 210 40% 98%;
-  --color-muted: 217.2 32.6% 17.5%;
-  --color-muted-foreground: 215 20.2% 65.1%;
-  --color-accent: 217.2 32.6% 17.5%;
-  --color-accent-foreground: 210 40% 98%;
-  --color-destructive: 0 62.8% 30.6%;
-  --color-destructive-foreground: 210 40% 98%;
-  --color-border: 217.2 32.6% 17.5%;
-  --color-input: 217.2 32.6% 17.5%;
-  --color-ring: 212.7 26.8% 83.9%;
-  --color-background: 222.2 84% 4.9%;
-  --color-foreground: 210 40% 98%;
+  @apply [color-scheme: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%;
 }
 
 @layer base {
@@ -235,20 +250,69 @@ module.exports = {
   }
   body {
     @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
   }
-}`;
+}
+`;
 
-  // Append to existing styles or create new file
-  if (fs.existsSync(stylesPath)) {
-    const existingContent = await fs.readFile(stylesPath, 'utf8');
-    if (!existingContent.includes('@import \'tailwindcss\'')) {
-      await fs.appendFile(stylesPath, '\n\n' + globalStyles);
-      console.log(`✅ Updated ${stylesPath} with Tailwind 4 theme`);
-    } else {
-      console.log(`⚠️  ${stylesPath} already contains Tailwind imports`);
+  // Preserve existing styles after the theme
+  if (existingContent && !hasTailwindImport) {
+    // If file existed but didn't have tailwind import, keep existing content
+    const existingWithoutTailwind = existingContent;
+    if (existingWithoutTailwind.trim()) {
+      newContent += '\n\n' + existingWithoutTailwind;
+    }
+  } else if (existingContent && hasTailwindImport) {
+    // If file had tailwind import, preserve everything and just add/update the theme
+    const lines = existingContent.split('\n');
+    const preservedLines = [];
+    let skipNextClosingBrace = false;
+    let inThemeSection = false;
+    
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      const trimmedLine = line.trim();
+      
+      // Skip theme-related blocks but preserve everything else
+      if (trimmedLine.startsWith('@theme {') || 
+          trimmedLine.startsWith(':root {') || 
+          trimmedLine.startsWith('.dark {') ||
+          trimmedLine.startsWith('@custom-variant dark')) {
+        inThemeSection = true;
+        continue;
+      }
+      
+      if (inThemeSection && trimmedLine === '}' && 
+          !lines[i + 1]?.trim().startsWith('@layer')) {
+        inThemeSection = false;
+        continue;
+      }
+      
+      if (trimmedLine.startsWith('@layer base {')) {
+        inThemeSection = true;
+        continue;
+      }
+      
+      if (inThemeSection && trimmedLine === '}' && 
+          lines[i - 1]?.trim().startsWith('@layer base')) {
+        inThemeSection = false;
+        continue;
+      }
+      
+      if (inThemeSection) {
+        continue;
+      }
+      
+      // Preserve this line
+      preservedLines.push(line);
+    }
+    
+    if (preservedLines.length > 0) {
+      newContent += '\n\n' + preservedLines.join('\n');
     }
-  } else {
-    await fs.writeFile(stylesPath, globalStyles);
-    console.log(`✅ Created ${stylesPath} with Tailwind 4 theme`);
   }
+
+  // Write the updated content
+  await fs.writeFile(stylesPath, newContent);
+  console.log(`✅ Updated ${stylesPath} with Tailwind 4 theme`);
 }