bertui 1.2.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bertui",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Lightning-fast React dev server powered by Bun - Now with Rust image optimization (WASM, no Rust required for users)",
   "type": "module",
   "main": "./index.js",

package/src/build/compiler/file-transpiler.js

@@ -3,34 +3,129 @@ import { join, relative, dirname, extname } from 'path';
 import { readdirSync, statSync, mkdirSync, writeFileSync } from 'fs';
 import logger from '../../logger/logger.js';
 import { replaceEnvInCode } from '../../utils/env.js';
+import { transform } from 'lightningcss';
+
+// ============================================
+// CSS MODULES
+// ============================================
+
+function hashClassName(filename, className) {
+  const str = filename + className;
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) - hash + str.charCodeAt(i);
+    hash |= 0;
+  }
+  return Math.abs(hash).toString(36).slice(0, 5);
+}
+
+function scopeCSSModule(cssText, filename) {
+  const classNames = new Set();
+  const classRegex = /\.([a-zA-Z_][a-zA-Z0-9_-]*)\s*[{,\s:]/g;
+  let match;
+  while ((match = classRegex.exec(cssText)) !== null) {
+    classNames.add(match[1]);
+  }
+  const mapping = {};
+  for (const cls of classNames) {
+    mapping[cls] = `${cls}_${hashClassName(filename, cls)}`;
+  }
+  let scopedCSS = cssText;
+  for (const [original, scoped] of Object.entries(mapping)) {
+    scopedCSS = scopedCSS.replace(
+      new RegExp(`\\.${original}(?=[\\s{,:\\[#.>+~)\\]])`, 'g'),
+      `.${scoped}`
+    );
+  }
+  return { mapping, scopedCSS };
+}
+
+async function compileCSSModule(srcPath, rootBuildDir) {
+  const filename = srcPath.split('/').pop();
+  const cssText = await Bun.file(srcPath).text();
+  const { mapping, scopedCSS } = scopeCSSModule(cssText, filename);
+
+  let finalCSS = scopedCSS;
+  try {
+    const { code } = transform({
+      filename,
+      code: Buffer.from(scopedCSS),
+      minify: false,
+      drafts: { nesting: true },
+      targets: { chrome: 90 << 16 }
+    });
+    finalCSS = code.toString();
+  } catch (e) {
+    logger.warn(`LightningCSS failed for ${filename}: ${e.message}`);
+  }
+
+  // JS mapping → .bertuibuild/styles/home.module.css.js (for JS imports)
+  const stylesDir = join(rootBuildDir, 'styles');
+  mkdirSync(stylesDir, { recursive: true });
+  const jsContent = `// CSS Module: ${filename} — auto-generated by BertUI\nconst styles = ${JSON.stringify(mapping, null, 2)};\nexport default styles;\n`;
+  writeFileSync(join(stylesDir, filename + '.js'), jsContent);
+
+  // Scoped CSS → .bertuibuild/styles-staged/home.module.css (for css-builder.js to pick up)
+  const stagingDir = join(rootBuildDir, 'styles-staged');
+  mkdirSync(stagingDir, { recursive: true });
+  writeFileSync(join(stagingDir, filename), finalCSS);
+
+  logger.debug(`CSS Module: ${filename} → ${Object.keys(mapping).length} classes scoped`);
+}
+
+function transformCSSModuleImports(code, outPath, rootBuildDir) {
+  const moduleImportRegex = /import\s+(\w+)\s+from\s+['"]([^'"]*\.module\.css)['"]/g;
+  const outFileDir = dirname(outPath);
+  const stylesDir = join(rootBuildDir, 'styles');
+
+  code = code.replace(moduleImportRegex, (match, varName, importPath) => {
+    const filename = importPath.split('/').pop();
+    const jsFile = join(stylesDir, filename + '.js');
+    let rel = relative(outFileDir, jsFile).replace(/\\/g, '/');
+    if (!rel.startsWith('.')) rel = './' + rel;
+    return `import ${varName} from '${rel}'`;
+  });
+
+  return code;
+}
+
+// ============================================
+// MAIN COMPILER
+// ============================================
 
 export async function compileBuildDirectory(srcDir, buildDir, root, envVars) {
-  // Create bunfig.toml in build directory
   const bunfigContent = `
 [build]
 jsx = "react"
 jsxFactory = "React.createElement"
 jsxFragment = "React.Fragment"
 `.trim();
-  
+
   writeFileSync(join(buildDir, 'bunfig.toml'), bunfigContent);
   logger.info('Created bunfig.toml for classic JSX');
-  
+
   const files = readdirSync(srcDir);
   const filesToCompile = [];
-  
+  const rootBuildDir = join(root, '.bertuibuild');
+
   for (const file of files) {
     const srcPath = join(srcDir, file);
     const stat = statSync(srcPath);
-    
+
     if (stat.isDirectory()) {
       const subBuildDir = join(buildDir, file);
       mkdirSync(subBuildDir, { recursive: true });
       await compileBuildDirectory(srcPath, subBuildDir, root, envVars);
     } else {
       const ext = extname(file);
+
+      if (file.endsWith('.module.css')) {
+        await compileCSSModule(srcPath, rootBuildDir);
+        continue;
+      }
+
       if (ext === '.css') continue;
-      
+
       if (['.jsx', '.tsx', '.ts'].includes(ext)) {
         filesToCompile.push({ path: srcPath, dir: buildDir, name: file, type: 'tsx' });
       } else if (ext === '.js') {
@@ -38,58 +133,56 @@ jsxFragment = "React.Fragment"
       }
     }
   }
-  
+
   if (filesToCompile.length === 0) return;
-  
+
   logger.info(`📦 Compiling ${filesToCompile.length} files...`);
-  
+
   for (let i = 0; i < filesToCompile.length; i++) {
     const file = filesToCompile[i];
-    
+
     try {
       if (file.type === 'tsx') {
-        await compileBuildFile(file.path, file.dir, file.name, root, envVars, buildDir);
+        await compileBuildFile(file.path, file.dir, file.name, root, envVars, rootBuildDir);
       } else {
-        await compileJSFile(file.path, file.dir, file.name, root, envVars);
+        await compileJSFile(file.path, file.dir, file.name, root, envVars, rootBuildDir);
       }
-      
+
       if ((i + 1) % 10 === 0 || i === filesToCompile.length - 1) {
         const percent = (((i + 1) / filesToCompile.length) * 100).toFixed(0);
         logger.info(`   Progress: ${i + 1}/${filesToCompile.length} (${percent}%)`);
       }
-      
+
     } catch (error) {
       logger.error(`Failed to compile ${file.name}: ${error.message}`);
     }
   }
-  
+
   logger.success(`✅ Compiled ${filesToCompile.length} files`);
 }
 
-async function compileBuildFile(srcPath, buildDir, filename, root, envVars, configDir) {
+async function compileBuildFile(srcPath, buildDir, filename, root, envVars, rootBuildDir) {
   const ext = extname(filename);
-  
+
   try {
     let code = await Bun.file(srcPath).text();
-    code = removeCSSImports(code);
     code = replaceEnvInCode(code, envVars);
-    
+
     const outFilename = filename.replace(/\.(jsx|tsx|ts)$/, '.js');
     const outPath = join(buildDir, outFilename);
+
+    code = transformCSSModuleImports(code, outPath, rootBuildDir);
+    code = removePlainCSSImports(code);
     code = fixBuildImports(code, srcPath, outPath, root);
-    
-    // Add React import BEFORE transpiling
+
     if (!code.includes('import React')) {
       code = `import React from 'react';\n${code}`;
     }
-    
-    // Use Bun.Transpiler with explicit production settings
+
     const transpiler = new Bun.Transpiler({
       loader: ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx',
       target: 'browser',
-      define: {
-        'process.env.NODE_ENV': '"production"'
-      },
+      define: { 'process.env.NODE_ENV': '"production"' },
       tsconfig: {
         compilerOptions: {
           jsx: 'react',
@@ -99,50 +192,50 @@ async function compileBuildFile(srcPath, buildDir, filename, root, envVars, conf
         }
       }
     });
-    
+
     let compiled = await transpiler.transform(code);
-    
-    // Verify no dev JSX leaked through
+
     if (compiled.includes('jsxDEV')) {
       logger.warn(`⚠️  Dev JSX detected in ${filename}, fixing...`);
       compiled = compiled.replace(/jsxDEV/g, 'jsx');
     }
-    
+
     compiled = fixRelativeImports(compiled);
     await Bun.write(outPath, compiled);
-    
+
     code = null;
     compiled = null;
-    
+
   } catch (error) {
     logger.error(`Failed to compile ${filename}: ${error.message}`);
     throw error;
   }
 }
 
-async function compileJSFile(srcPath, buildDir, filename, root, envVars) {
+async function compileJSFile(srcPath, buildDir, filename, root, envVars, rootBuildDir) {
   const outPath = join(buildDir, filename);
   let code = await Bun.file(srcPath).text();
-  code = removeCSSImports(code);
   code = replaceEnvInCode(code, envVars);
+  code = transformCSSModuleImports(code, outPath, rootBuildDir);
+  code = removePlainCSSImports(code);
   code = fixBuildImports(code, srcPath, outPath, root);
-  
+
   if (usesJSX(code) && !code.includes('import React')) {
     code = `import React from 'react';\n${code}`;
   }
-  
+
   await Bun.write(outPath, code);
   code = null;
 }
 
 function usesJSX(code) {
-  return code.includes('React.createElement') || 
+  return code.includes('React.createElement') ||
          code.includes('React.Fragment') ||
          /<[A-Z]/.test(code);
 }
 
-function removeCSSImports(code) {
-  code = code.replace(/import\s+['"][^'"]*\.css['"];?\s*/g, '');
+function removePlainCSSImports(code) {
+  code = code.replace(/import\s+['"][^'"]*(?<!\.module)\.css['"];?\s*/g, '');
   code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');
   return code;
 }
@@ -152,7 +245,6 @@ function fixBuildImports(code, srcPath, outPath, root) {
   const routerPath = join(buildDir, 'router.js');
   const relativeToRouter = relative(dirname(outPath), routerPath).replace(/\\/g, '/');
   const routerImport = relativeToRouter.startsWith('.') ? relativeToRouter : './' + relativeToRouter;
-  
   code = code.replace(/from\s+['"]bertui\/router['"]/g, `from '${routerImport}'`);
   return code;
 }
@@ -164,4 +256,4 @@ function fixRelativeImports(code) {
     return `from '${prefix}${path}.js';`;
   });
   return code;
-}
+}

package/src/build/compiler/route-discoverer.js

@@ -20,13 +20,14 @@ export async function discoverRoutes(pagesDir) {
         
         if (['.jsx', '.tsx', '.js', '.ts'].includes(ext)) {
           const fileName = entry.name.replace(ext, '');
+
+          // Only loading is reserved - index is a valid route (becomes /)
+          if (fileName === 'loading') continue;
+
           let route = '/' + relativePath.replace(/\\/g, '/').replace(ext, '');
-          
-          const RESERVED = ['index', 'loading'];
           if (fileName === 'index') {
             route = route.replace('/index', '') || '/';
           }
-          if (RESERVED.includes(fileName)) continue;
           
           const isDynamic = fileName.includes('[') && fileName.includes(']');
           

package/src/build/generators/sitemap-generator.js

@@ -1,6 +1,6 @@
 // bertui/src/build/sitemap-generator.js - SIMPLIFIED
 import { join } from 'path';
-import logger from '../../logger/logger';
+import logger from '../../logger/logger.js';
 
 function calculatePriority(route) {
   if (route === '/') return 1.0;

package/src/build/processors/css-builder.js

@@ -1,4 +1,4 @@
-// bertui/src/build/processors/css-builder.js - WITH SCSS + CACHING
+// bertui/src/build/processors/css-builder.js - WITH SCSS + CACHING + CSS MODULES
 import { join } from 'path';
 import { existsSync, readdirSync, mkdirSync } from 'fs';
 import logger from '../../logger/logger.js';
@@ -9,13 +9,14 @@ export async function buildAllCSS(root, outDir) {
   const startTime = process.hrtime.bigint();
   
   const srcStylesDir = join(root, 'src', 'styles');
+  // CSS modules scoped CSS is staged here by file-transpiler.js
+  const modulesStagingDir = join(root, '.bertuibuild', 'styles-staged');
   const stylesOutDir = join(outDir, 'styles');
   
   mkdirSync(stylesOutDir, { recursive: true });
   
-  // Check cache for entire CSS build
   const cacheKey = `css-build:${root}:${Date.now()}`;
-  const cached = globalCache.get(cacheKey, { ttl: 1000 }); // 1 second cache
+  const cached = globalCache.get(cacheKey, { ttl: 1000 });
   
   if (cached) {
     logger.info(`⚡ Using cached CSS (${cached.files} files)`);
@@ -23,43 +24,50 @@ export async function buildAllCSS(root, outDir) {
     return;
   }
   
-  if (!existsSync(srcStylesDir)) {
-    await Bun.write(join(stylesOutDir, 'bertui.min.css'), '/* No custom styles */');
-    logger.info('No styles directory found, created empty CSS');
-    return;
+  let combinedCSS = '';
+  let fileCount = 0;
+
+  // 1. Process src/styles/ (plain CSS + SCSS)
+  if (existsSync(srcStylesDir)) {
+    await processSCSSDirectory(srcStylesDir, root);
+    const cssFiles = readdirSync(srcStylesDir).filter(f => f.endsWith('.css') && !f.endsWith('.module.css'));
+
+    logger.info(`Processing ${cssFiles.length} CSS file(s)...`);
+
+    for (const cssFile of cssFiles) {
+      const srcPath = join(srcStylesDir, cssFile);
+      const fileBuffer = await globalCache.getFile(srcPath, { logSpeed: true });
+      if (fileBuffer) {
+        const content = fileBuffer.toString('utf-8');
+        combinedCSS += `/* ${cssFile} */\n${content}\n\n`;
+        fileCount++;
+      }
+    }
+  } else {
+    logger.info('No styles directory found');
   }
-  
-  // Process SCSS files first
-  await processSCSSDirectory(srcStylesDir, root);
-  
-  // Read all CSS files (including compiled SCSS)
-  const cssFiles = readdirSync(srcStylesDir).filter(f => f.endsWith('.css'));
-  
-  if (cssFiles.length === 0) {
+
+  // 2. Include scoped CSS from CSS modules (staged by file-transpiler.js)
+  if (existsSync(modulesStagingDir)) {
+    const moduleFiles = readdirSync(modulesStagingDir).filter(f => f.endsWith('.css'));
+    if (moduleFiles.length > 0) {
+      logger.info(`Including ${moduleFiles.length} CSS module(s)...`);
+      for (const cssFile of moduleFiles) {
+        const srcPath = join(modulesStagingDir, cssFile);
+        const content = await Bun.file(srcPath).text();
+        combinedCSS += `/* module: ${cssFile} */\n${content}\n\n`;
+        fileCount++;
+      }
+    }
+  }
+
+  if (!combinedCSS.trim()) {
     await Bun.write(join(stylesOutDir, 'bertui.min.css'), '/* No CSS */');
     return;
   }
-  
-  logger.info(`Processing ${cssFiles.length} CSS file(s)...`);
-  
-  let combinedCSS = '';
-  const fileContents = [];
-  
-  for (const cssFile of cssFiles) {
-    const srcPath = join(srcStylesDir, cssFile);
-    
-    // Use file cache
-    const fileBuffer = await globalCache.getFile(srcPath, { logSpeed: true });
-    if (fileBuffer) {
-      const content = fileBuffer.toString('utf-8');
-      fileContents.push({ filename: cssFile, content });
-      combinedCSS += `/* ${cssFile} */\n${content}\n\n`;
-    }
-  }
-  
+
   const combinedPath = join(stylesOutDir, 'bertui.min.css');
   
-  // Minify with caching
   const minifyCacheKey = `minify:${Buffer.from(combinedCSS).length}:${combinedCSS.substring(0, 100)}`;
   let minified = globalCache.get(minifyCacheKey);
   
@@ -68,7 +76,7 @@ export async function buildAllCSS(root, outDir) {
       filename: 'bertui.min.css',
       sourceMap: false
     });
-    globalCache.set(minifyCacheKey, minified, { ttl: 60000 }); // Cache for 60 seconds
+    globalCache.set(minifyCacheKey, minified, { ttl: 60000 });
   }
   
   await Bun.write(combinedPath, minified);
@@ -78,23 +86,20 @@ export async function buildAllCSS(root, outDir) {
   const reduction = ((1 - minifiedSize / originalSize) * 100).toFixed(1);
   
   const endTime = process.hrtime.bigint();
-  const duration = Number(endTime - startTime) / 1000; // Microseconds
+  const duration = Number(endTime - startTime) / 1000;
   
   logger.success(`CSS optimized: ${(originalSize/1024).toFixed(2)}KB → ${(minifiedSize/1024).toFixed(2)}KB (-${reduction}%)`);
   logger.info(`⚡ Processing time: ${duration.toFixed(3)}µs`);
   
-  // Cache the final result
   globalCache.set(cacheKey, {
-    files: cssFiles.length,
+    files: fileCount,
     content: minified,
     size: minifiedSize
   }, { ttl: 5000 });
 }
 
-// NEW: Process SCSS directory
 async function processSCSSDirectory(stylesDir, root) {
   try {
-    // Check if sass is installed
     const sass = await import('sass').catch(() => null);
     if (!sass) return;
     
@@ -109,7 +114,6 @@ async function processSCSSDirectory(stylesDir, root) {
       const srcPath = join(stylesDir, file);
       const cssPath = join(stylesDir, file.replace(/\.(scss|sass)$/, '.css'));
       
-      // Check cache
       const fileBuffer = await globalCache.getFile(srcPath);
       const cacheKey = `scss:${file}:${Buffer.from(fileBuffer).length}`;
       const cached = globalCache.get(cacheKey);

package/src/build.js

@@ -153,7 +153,9 @@ async function bundleJavaScript(buildEntry, routerPath, outDir, envVars, buildDi
     });
 
     if (!result.success) {
-      const errors = result.logs?.map(l => l.message).join('\n') || 'Unknown error';
+      console.log('RAW LOGS:', JSON.stringify(result.logs, null, 2));
+      console.log('OUTPUTS:', JSON.stringify(result.outputs?.map(o => o.path), null, 2));
+      const errors = result.logs?.map(l => l.text || l.message || JSON.stringify(l)).join('\n') || 'Unknown error';
       throw new Error(`JavaScript bundling failed:\n${errors}`);
     }