documentation/scripts/bundle-css.mjs

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',
  'highlight.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);
      }
    });
  }
}