huge rewrite

scripts/bundle-css.mjs

@@ -0,0 +1,71 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const rootDir = path.resolve(__dirname, '..');
+const cssDir = path.join(rootDir, 'src', 'css');
+
+const CSS_ORDER = [
+  'roots.css',
+  'layout.css',
+  'themes.css',
+  'components.css',
+  'features.css',
+  'overlay.css',
+  'prose.css',
+  '404.css'
+];
+
+export function bundleCss() {
+  const parts = [];
+
+  for (const file of CSS_ORDER) {
+    const filePath = path.join(cssDir, file);
+    if (fs.existsSync(filePath)) {
+      const content = fs.readFileSync(filePath, 'utf-8');
+      parts.push(`/* --- ${file} --- */\n${content}`);
+    } else {
+      console.warn(`[bundle-css] Warning: ${file} not found.`);
+    }
+  }
+
+  const unminified = parts.join('\n\n');
+  const bundlePath = path.join(cssDir, 'bundle.css');
+  fs.writeFileSync(bundlePath, unminified, 'utf-8');
+
+  let min = unminified
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/\s*([\{\};,>~])\s*/g, '$1')
+    .replace(/\s*(!important)\b/g, '$1')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  const minPath = path.join(cssDir, 'bundle.min.css');
+  fs.writeFileSync(minPath, min, 'utf-8');
+
+  const unminKb = (Buffer.byteLength(unminified, 'utf-8') / 1024).toFixed(1);
+  const minKb = (Buffer.byteLength(min, 'utf-8') / 1024).toFixed(1);
+
+  console.log(`[bundle-css] Bundled ${CSS_ORDER.length} files -> bundle.css (${unminKb} KB) | bundle.min.css (${minKb} KB)`);
+}
+
+if (process.argv[1] === __filename) {
+  const isWatch = process.argv.includes('--watch') || process.argv.includes('-w');
+  bundleCss();
+
+  if (isWatch) {
+    console.log('[bundle-css] Watching src/css for changes (Press Ctrl+C to stop)...');
+    let timeout = null;
+    fs.watch(cssDir, (eventType, filename) => {
+      if (filename && filename.endsWith('.css') && !filename.includes('bundle')) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+          console.log(`[bundle-css] Change detected in ${filename}, rebuilding...`);
+          bundleCss();
+        }, 80);
+      }
+    });
+  }
+}