@kupola/kupola 1.2.0 → 1.4.0

package/scripts/build-css.cjs

@@ -0,0 +1,113 @@
+#!/usr/bin/env node
+/**
+ * build-css.js — Merge and minify Kupola CSS into a single file.
+ *
+ * Usage:
+ *   node scripts/build-css.cjs
+ *
+ * Output:
+ *   dist/kupola.min.css — All CSS merged and minified
+ *   dist/kupola.css     — All CSS merged (unminified, for debugging)
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const CSS_DIR = path.resolve(__dirname, '..', 'css');
+const OUTPUT_DIR = path.resolve(__dirname, '..', 'dist');
+
+// Import order must match kupola.css @import order
+const IMPORT_ORDER = [
+  'colors_and_type.css',
+  'theme-light.css',
+  'theme-dark.css',
+  'brand-themes.css',
+  'scaffold.css',
+  'components.css',
+  'components-ext.css',
+  'states.css',
+  'utilities.css',
+  'responsive.css',
+  'accessibility.css',
+  'animations.css'
+];
+
+function resolveImports(cssContent, basePath) {
+  // Replace @import url('...') with actual file content
+  return cssContent.replace(/@import\s+url\(['"]?([^'")\s]+)['"]?\)\s*;/g, (match, url) => {
+    const filePath = path.join(basePath, url);
+    if (fs.existsSync(filePath)) {
+      const content = fs.readFileSync(filePath, 'utf-8');
+      // Recursively resolve imports
+      return resolveImports(content, path.dirname(filePath));
+    }
+    console.warn(`  Warning: Import not found: ${url}`);
+    return `/* Import not found: ${url} */`;
+  });
+}
+
+function minifyCSS(css) {
+  return css
+    // Remove comments
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    // Remove extra whitespace
+    .replace(/\s+/g, ' ')
+    // Remove spaces around selectors/braces
+    .replace(/\s*{\s*/g, '{')
+    .replace(/\s*}\s*/g, '}')
+    .replace(/\s*;\s*/g, ';')
+    .replace(/\s*:\s*/g, ':')
+    .replace(/\s*,\s*/g, ',')
+    // Remove trailing semicolons before closing braces
+    .replace(/;}/g, '}')
+    // Remove leading/trailing whitespace
+    .trim();
+}
+
+function buildCSS() {
+  console.log('Building Kupola CSS...');
+
+  // Read main entry file
+  const mainFile = path.join(CSS_DIR, 'kupola.css');
+  if (!fs.existsSync(mainFile)) {
+    console.error(`Main CSS file not found: ${mainFile}`);
+    process.exit(1);
+  }
+
+  const mainContent = fs.readFileSync(mainFile, 'utf-8');
+
+  // Resolve all @import statements
+  let merged = resolveImports(mainContent, CSS_DIR);
+
+  // Also check for any files not in the import list (like dashboard.css)
+  // and add them as optional separate output
+
+  // Ensure output directory exists
+  if (!fs.existsSync(OUTPUT_DIR)) {
+    fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+  }
+
+  // Write unminified version
+  const unminPath = path.join(OUTPUT_DIR, 'kupola.css');
+  fs.writeFileSync(unminPath, merged, 'utf-8');
+  const unminSize = (fs.statSync(unminPath).size / 1024).toFixed(1);
+  console.log(`  Unminified: ${unminPath} (${unminSize} KB)`);
+
+  // Write minified version
+  const minified = minifyCSS(merged);
+  const minPath = path.join(OUTPUT_DIR, 'kupola.min.css');
+  fs.writeFileSync(minPath, minified, 'utf-8');
+  const minSize = (fs.statSync(minPath).size / 1024).toFixed(1);
+  console.log(`  Minified:   ${minPath} (${minSize} KB)`);
+
+  // Estimate gzip size (rough approximation)
+  const gzipEstimate = (minSize * 0.25).toFixed(1);
+  console.log(`  Est. gzip:  ~${gzipEstimate} KB`);
+
+  // Summary
+  const files = IMPORT_ORDER.filter(f => fs.existsSync(path.join(CSS_DIR, f)));
+  console.log(`  Source files: ${files.length}`);
+  console.log('CSS build complete!');
+}
+
+buildCSS();

package/scripts/build-svg-sprite.cjs

@@ -0,0 +1,107 @@
+#!/usr/bin/env node
+/**
+ * build-svg-sprite.js — Merge individual SVG icons into a single SVG sprite.
+ *
+ * Usage:
+ *   node scripts/build-svg-sprite.js
+ *
+ * Output:
+ *   dist/icons.svg — SVG sprite with <symbol> elements
+ *
+ * Usage in HTML:
+ *   <svg width="16" height="16"><use href="icons.svg#icon-user"></use></svg>
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const ICONS_DIR = path.resolve(__dirname, '..', 'icons');
+const OUTPUT_DIR = path.resolve(__dirname, '..', 'dist');
+const OUTPUT_FILE = path.join(OUTPUT_DIR, 'icons.svg');
+
+// Skip files that are clearly not individual icons (sprites, variants with hashes)
+const SKIP_PATTERNS = [/\.d\./, /\.[0-9a-f]{6}\./];
+
+function shouldSkip(filename) {
+  return SKIP_PATTERNS.some(p => p.test(filename));
+}
+
+function extractSvgContent(svgString) {
+  // Extract viewBox from root <svg> element
+  const viewBoxMatch = svgString.match(/viewBox="([^"]+)"/);
+  const viewBox = viewBoxMatch ? viewBoxMatch[1] : '0 0 24 24';
+
+  // Extract inner content (everything between <svg> and </svg>)
+  const innerMatch = svgString.match(/<svg[^>]*>([\s\S]*?)<\/svg>/i);
+  const inner = innerMatch ? innerMatch[1].trim() : '';
+
+  return { viewBox, inner };
+}
+
+function buildSprite() {
+  if (!fs.existsSync(ICONS_DIR)) {
+    console.error(`Icons directory not found: ${ICONS_DIR}`);
+    process.exit(1);
+  }
+
+  const files = fs.readdirSync(ICONS_DIR).filter(f => {
+    return f.endsWith('.svg') && !shouldSkip(f);
+  });
+
+  // Deduplicate: if both "user.svg" and "user.0c0c0d.svg" exist, prefer "user.svg"
+  const seen = new Map();
+  for (const file of files) {
+    const baseName = file.replace(/\.[0-9a-f]{6}\.svg$/, '.svg');
+    const cleanName = baseName.replace('.svg', '');
+
+    if (!seen.has(cleanName) || !file.match(/\.[0-9a-f]{6}\.svg$/)) {
+      seen.set(cleanName, file);
+    }
+  }
+
+  const symbols = [];
+  let processed = 0;
+
+  for (const [name, file] of seen) {
+    const filePath = path.join(ICONS_DIR, file);
+    const content = fs.readFileSync(filePath, 'utf-8');
+
+    try {
+      const { viewBox, inner } = extractSvgContent(content);
+      if (!inner) continue;
+
+      const id = `icon-${name}`;
+      symbols.push(
+        `  <symbol id="${id}" viewBox="${viewBox}" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${inner}</symbol>`
+      );
+      processed++;
+    } catch (err) {
+      console.warn(`  Warning: Could not parse ${file}: ${err.message}`);
+    }
+  }
+
+  // Sort symbols alphabetically for consistency
+  symbols.sort((a, b) => a.localeCompare(b));
+
+  const sprite = [
+    '<?xml version="1.0" encoding="UTF-8"?>',
+    '<svg xmlns="http://www.w3.org/2000/svg" style="display:none">',
+    ...symbols,
+    '</svg>',
+    ''
+  ].join('\n');
+
+  // Ensure output directory exists
+  if (!fs.existsSync(OUTPUT_DIR)) {
+    fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+  }
+
+  fs.writeFileSync(OUTPUT_FILE, sprite, 'utf-8');
+
+  const sizeKB = (fs.statSync(OUTPUT_FILE).size / 1024).toFixed(1);
+  console.log(`SVG Sprite built: ${OUTPUT_FILE}`);
+  console.log(`  Icons: ${processed}`);
+  console.log(`  Size: ${sizeKB} KB`);
+}
+
+buildSprite();