@ng-shangjc/cli 1.0.4-beta → 1.0.5-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,50 @@ 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, remove the old theme and keep other styles
+        const lines = existingContent.split('\n');
+        const afterThemeLines = [];
+        let inThemeBlock = false;
+        let foundTheme = false;
+        for (const line of lines) {
+            if (line.includes('@theme {') || line.includes(':root {') || line.includes('.dark {') || line.includes('@layer base {')) {
+                inThemeBlock = true;
+                foundTheme = true;
+                continue;
+            }
+            if (inThemeBlock && line.includes('}') && !line.includes('@layer')) {
+                inThemeBlock = false;
+                continue;
+            }
+            if (inThemeBlock && line.includes('@layer base {')) {
+                // Skip the old @layer base content
+                continue;
+            }
+            if (inThemeBlock) {
+                continue;
+            }
+            if (foundTheme && line.trim()) {
+                afterThemeLines.push(line);
+            }
+        }
+        if (afterThemeLines.length > 0) {
+            newContent += '\n\n' + afterThemeLines.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.5-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,53 @@ 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, remove the old theme and keep other styles
+    const lines = existingContent.split('\n');
+    const afterThemeLines = [];
+    let inThemeBlock = false;
+    let foundTheme = false;
+    
+    for (const line of lines) {
+      if (line.includes('@theme {') || line.includes(':root {') || line.includes('.dark {') || line.includes('@layer base {')) {
+        inThemeBlock = true;
+        foundTheme = true;
+        continue;
+      }
+      if (inThemeBlock && line.includes('}') && !line.includes('@layer')) {
+        inThemeBlock = false;
+        continue;
+      }
+      if (inThemeBlock && line.includes('@layer base {')) {
+        // Skip the old @layer base content
+        continue;
+      }
+      if (inThemeBlock) {
+        continue;
+      }
+      if (foundTheme && line.trim()) {
+        afterThemeLines.push(line);
+      }
+    }
+    
+    if (afterThemeLines.length > 0) {
+      newContent += '\n\n' + afterThemeLines.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`);
 }