@hemia/lume 0.0.3 → 0.0.5

package/dist/index.js

@@ -336,6 +336,53 @@ export default {
   plugins: [],
 } satisfies Config
 `;
+var TAILWIND_CONFIG_TEMPLATE_JS = `/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ['class'],
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+      },
+      borderRadius: {
+        sm: 'var(--radius-sm)',
+        md: 'var(--radius-md)',
+        lg: 'var(--radius-lg)',
+        DEFAULT: 'var(--radius)',
+      },
+    },
+  },
+  plugins: [],
+}
+`;
 function getTemplateConfig(framework, template) {
   const configs = {
     "vite-vue": {
@@ -382,10 +429,11 @@ function info(message, options) {
 }
 function extractCssVariables(cssContent) {
   const vars = /* @__PURE__ */ new Map();
-  const varRegex = /--([a-zA-Z0-9-]+):\s*([^;]+);/g;
+  const cleanContent = cssContent.replace(/\/\*[\s\S]*?\*\//g, "");
+  const varRegex = /--([a-zA-Z0-9-]+)\s*:\s*([^;]+);/g;
   let match;
-  while ((match = varRegex.exec(cssContent)) !== null) {
-    vars.set(match[1], match[2]);
+  while ((match = varRegex.exec(cleanContent)) !== null) {
+    vars.set(match[1].trim(), match[2].trim());
   }
   return vars;
 }
@@ -396,8 +444,8 @@ function mergeCssVariables(existingCss, templateCss) {
     existingVars.set(key, value);
   }
   let result = existingCss;
-  const rootMatch = result.match(/@layer base\s*\{[\s\S]*?:root\s*\{([\s\S]*?)\}/);
-  if (rootMatch) {
+  const rootLayerMatch = result.match(/@layer base\s*\{[\s\S]*?:root\s*\{([\s\S]*?)\}/);
+  if (rootLayerMatch) {
     const newRootVars = Array.from(existingVars.entries()).map(([key, value]) => `    --${key}: ${value};`).join("\n");
     result = result.replace(
       /@layer base\s*\{[\s\S]*?:root\s*\{[\s\S]*?\}/,
@@ -406,40 +454,125 @@ function mergeCssVariables(existingCss, templateCss) {
 ${newRootVars}
   }`
     );
+  } else {
+    const rootMatch = result.match(/:root\s*\{([\s\S]*?)\}/);
+    if (rootMatch) {
+      const newRootVars = Array.from(existingVars.entries()).map(([key, value]) => `    --${key}: ${value};`).join("\n");
+      result = result.replace(
+        /:root\s*\{[\s\S]*?\}/,
+        `:root {
+${newRootVars}
+}`
+      );
+    } else {
+      const newRootVars = Array.from(existingVars.entries()).map(([key, value]) => `  --${key}: ${value};`).join("\n");
+      result = `@layer base {
+  :root {
+${newRootVars}
+  }
+}
+
+${result}`;
+    }
   }
   return result;
 }
+function extractColors(templateConfig) {
+  const colors = /* @__PURE__ */ new Map();
+  const colorsMatch = templateConfig.match(/colors:\s*\{([\s\S]*?)\n\s*\}/);
+  if (!colorsMatch) return colors;
+  const colorsBlock = colorsMatch[1];
+  const colorRegex = /([a-zA-Z0-9-]+):\s*\{([^}]+)\}/g;
+  let match;
+  while ((match = colorRegex.exec(colorsBlock)) !== null) {
+    const colorName = match[1];
+    const colorValue = match[2].trim();
+    colors.set(colorName, colorValue);
+  }
+  return colors;
+}
+function extractBorderRadius(templateConfig) {
+  const radius = /* @__PURE__ */ new Map();
+  const radiusMatch = templateConfig.match(/borderRadius:\s*\{([\s\S]*?)\n\s*\}/);
+  if (!radiusMatch) return radius;
+  const radiusBlock = radiusMatch[1];
+  const radiusRegex = /([a-zA-Z0-9-]+):\s*['"`]([^'"`]+)['"`]/g;
+  let match;
+  while ((match = radiusRegex.exec(radiusBlock)) !== null) {
+    radius.set(match[1], match[2]);
+  }
+  return radius;
+}
 function mergeTailwindConfig(existingConfig, templateConfig) {
-  const colorMatches = templateConfig.match(/colors:\s*\{([\s\S]*?)\}/);
-  const radiusMatches = templateConfig.match(/borderRadius:\s*\{([\s\S]*?)\}/);
+  const templateColors = extractColors(templateConfig);
+  const templateRadius = extractBorderRadius(templateConfig);
   let result = existingConfig;
   if (!result.includes("theme:")) {
     return templateConfig;
   }
-  if (colorMatches) {
-    const colorsBlock = colorMatches[0];
-    if (!result.includes("colors:")) {
-      result = result.replace(
-        /theme:\s*\{/,
-        `theme: {
+  if (templateColors.size > 0) {
+    for (const [colorName, colorValue] of templateColors) {
+      if (!result.includes(`${colorName}:`)) {
+        const themeMatch = result.match(/theme:\s*\{/);
+        if (themeMatch) {
+          if (result.includes("extend:")) {
+            result = result.replace(
+              /extend:\s*\{/,
+              `extend: {
+      colors: {
+        ${colorName}: ${colorValue},
+      },`
+            );
+          } else {
+            result = result.replace(
+              /theme:\s*\{/,
+              `theme: {
     extend: {
-      colors: {${colorsBlock.replace("colors:", "")}`
-      );
+      colors: {
+        ${colorName}: ${colorValue},
+      },`
+            );
+          }
+        }
+      }
     }
   }
-  if (radiusMatches) {
-    const radiusBlock = radiusMatches[0];
-    if (!result.includes("borderRadius:")) {
-      result = result.replace(
-        /theme:\s*\{/,
-        `theme: {
+  if (templateRadius.size > 0) {
+    for (const [radiusName, radiusValue] of templateRadius) {
+      if (!result.includes(`${radiusName}:`)) {
+        const themeMatch = result.match(/theme:\s*\{/);
+        if (themeMatch) {
+          if (result.includes("extend:")) {
+            result = result.replace(
+              /extend:\s*\{/,
+              `extend: {
+      borderRadius: {
+        ${radiusName}: '${radiusValue}',
+      },`
+            );
+          } else {
+            result = result.replace(
+              /theme:\s*\{/,
+              `theme: {
     extend: {
-      borderRadius: {${radiusBlock.replace("borderRadius:", "")}`
-      );
+      borderRadius: {
+        ${radiusName}: '${radiusValue}',
+      },`
+            );
+          }
+        }
+      }
     }
   }
-  if (!result.includes("colors:") && colorMatches) {
-    return templateConfig;
+  if (!result.includes("darkMode:") && templateConfig.includes("darkMode:")) {
+    const darkModeMatch = templateConfig.match(/darkMode:\s*\[[^\]]+\]/);
+    if (darkModeMatch) {
+      result = result.replace(
+        /export default \{/,
+        `export default {
+  ${darkModeMatch[0]},`
+      );
+    }
   }
   return result;
 }
@@ -462,6 +595,15 @@ function detectFramework(cwd) {
     return "vue";
   }
 }
+function detectTailwindConfigExtension(cwd) {
+  const extensions = ["js", "ts", "mjs", "cjs"];
+  for (const ext of extensions) {
+    if (fs4.existsSync(path4.resolve(cwd, `tailwind.config.${ext}`))) {
+      return ext;
+    }
+  }
+  return "js";
+}
 async function addStyles(_args = [], options = {}) {
   if (options.silent === void 0 && process.argv.includes("--help") || process.argv.includes("-h")) {
     console.log(`
@@ -480,6 +622,8 @@ Options:
     return;
   }
   const cwd = options.cwd ? path4.resolve(options.cwd) : process.cwd();
+  const tailwindExt = detectTailwindConfigExtension(cwd);
+  const tailwindTemplate = tailwindExt === "js" ? TAILWIND_CONFIG_TEMPLATE_JS : TAILWIND_CONFIG_TEMPLATE;
   const configPath = path4.resolve(cwd, "lume.config.json");
   if (!await fs4.pathExists(configPath)) {
     const cssPath2 = path4.resolve(cwd, "src/assets/globals.css");
@@ -489,7 +633,7 @@ Options:
     await fs4.ensureDir(path4.dirname(cssPath2));
     await fs4.writeFile(cssPath2, GLOBALS_CSS_TEMPLATE);
     log2(pc3.green(`\u2705 Created src/assets/globals.css`), options);
-    await fs4.writeFile(tailwindPath2, TAILWIND_CONFIG_TEMPLATE);
+    await fs4.writeFile(tailwindPath2, tailwindTemplate);
     log2(pc3.green(`\u2705 Created tailwind.config.ts`), options);
     log2(pc3.green("\n\u2705 Styles added successfully!"), options);
     return;
@@ -511,7 +655,7 @@ Options:
     await fs4.ensureDir(path4.dirname(cssPath));
     await fs4.writeFile(cssPath, GLOBALS_CSS_TEMPLATE);
     log2(pc3.green(`\u2705 Created ${configPaths.globalsCssPath}`), options);
-    await fs4.writeFile(tailwindPath, TAILWIND_CONFIG_TEMPLATE);
+    await fs4.writeFile(tailwindPath, tailwindTemplate);
     log2(pc3.green(`\u2705 Created ${configPaths.tailwindConfigPath}`), options);
     log2(pc3.green("\n\u2705 Styles added successfully!"), options);
     return;
@@ -553,16 +697,16 @@ Options:
   }
   if (tailwindExists) {
     if (shouldOverwrite && !shouldMerge) {
-      await fs4.writeFile(tailwindPath, TAILWIND_CONFIG_TEMPLATE);
+      await fs4.writeFile(tailwindPath, tailwindTemplate);
       log2(pc3.green(`\u2705 Overwrote ${configPaths.tailwindConfigPath}`), options);
     } else if (shouldMerge) {
       const existingConfig = await fs4.readFile(tailwindPath, "utf-8");
-      const mergedConfig = mergeTailwindConfig(existingConfig, TAILWIND_CONFIG_TEMPLATE);
+      const mergedConfig = mergeTailwindConfig(existingConfig, tailwindTemplate);
       await fs4.writeFile(tailwindPath, mergedConfig);
       log2(pc3.green(`\u2705 Merged Tailwind config in ${configPaths.tailwindConfigPath}`), options);
     }
   } else {
-    await fs4.writeFile(tailwindPath, TAILWIND_CONFIG_TEMPLATE);
+    await fs4.writeFile(tailwindPath, tailwindTemplate);
     log2(pc3.green(`\u2705 Created ${configPaths.tailwindConfigPath}`), options);
   }
   log2(pc3.green("\n\u2705 Styles added successfully!"), options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hemia/lume",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "files": ["dist"],
   "bin": {