@luna_ui/luna 0.3.4 → 0.3.5

package/src/css/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Luna CSS Utilities
+ *
+ * Zero-runtime CSS generation and extraction tools.
+ */
+
+export * from "./extract.js";
+export * from "./minify.js";
+export * from "./inline.js";
+export * from "./inject.js";

package/src/css/inject.ts

@@ -0,0 +1,205 @@
+/**
+ * CSS Injection into HTML files
+ *
+ * Replaces CSS between markers in HTML files with extracted CSS.
+ * Supports inline embedding or external file generation.
+ */
+
+import fs from "fs";
+import path from "path";
+import { extract } from "./extract.js";
+
+// Markers for CSS injection
+const CSS_START_MARKER = "/* LUNA_CSS_START */";
+const CSS_END_MARKER = "/* LUNA_CSS_END */";
+
+// Link marker for external CSS
+const LINK_MARKER = "<!-- LUNA_CSS_LINK -->";
+
+export type OutputMode = "inline" | "external" | "auto";
+
+export interface InjectHtmlOptions {
+  srcDir: string;
+  htmlFile: string;
+  outputFile?: string;
+  /** Output mode: "inline" embeds CSS in HTML, "external" creates separate .css file, "auto" chooses based on threshold */
+  mode?: OutputMode;
+  /** Size threshold in bytes for "auto" mode (default: 4096) */
+  threshold?: number;
+  /** CSS filename for external mode (default: "luna.css") */
+  cssFileName?: string;
+  verbose?: boolean;
+}
+
+export interface InjectHtmlResult {
+  html: string;
+  css: string;
+  replaced: boolean;
+  /** Path to external CSS file if created */
+  cssFile?: string;
+  /** Actual mode used */
+  mode: OutputMode;
+}
+
+/**
+ * Inject extracted CSS into HTML file between markers
+ */
+export function injectCssToHtml(options: InjectHtmlOptions): InjectHtmlResult {
+  const {
+    srcDir,
+    htmlFile,
+    mode = "inline",
+    threshold = 4096,
+    cssFileName = "luna.css",
+    verbose = false,
+  } = options;
+
+  // Extract CSS from source
+  const { css } = extract(srcDir, { warn: false });
+
+  if (verbose) {
+    console.error(`Extracted CSS: ${css.length} bytes`);
+  }
+
+  // Read HTML file
+  const html = fs.readFileSync(htmlFile, "utf-8");
+
+  // Determine actual mode
+  let actualMode: OutputMode = mode;
+  if (mode === "auto") {
+    actualMode = css.length > threshold ? "external" : "inline";
+    if (verbose) {
+      console.error(
+        `Auto mode: ${css.length} bytes ${css.length > threshold ? ">" : "<="} ${threshold} threshold → ${actualMode}`
+      );
+    }
+  }
+
+  if (actualMode === "external") {
+    return injectExternal(html, css, htmlFile, cssFileName, verbose);
+  } else {
+    return injectInline(html, css, htmlFile, verbose);
+  }
+}
+
+/**
+ * Inject CSS inline between markers
+ */
+function injectInline(
+  html: string,
+  css: string,
+  htmlFile: string,
+  verbose: boolean
+): InjectHtmlResult {
+  // Find markers
+  const startIdx = html.indexOf(CSS_START_MARKER);
+  const endIdx = html.indexOf(CSS_END_MARKER);
+
+  if (startIdx === -1 || endIdx === -1) {
+    if (verbose) {
+      console.error(
+        `Warning: Markers not found in ${htmlFile}. Add /* LUNA_CSS_START */ and /* LUNA_CSS_END */ to your HTML.`
+      );
+    }
+    return { html, css, replaced: false, mode: "inline" };
+  }
+
+  // Replace content between markers
+  const before = html.substring(0, startIdx + CSS_START_MARKER.length);
+  const after = html.substring(endIdx);
+  const newHtml = `${before}\n    ${css}\n    ${after}`;
+
+  if (verbose) {
+    console.error(`Injected CSS inline into ${htmlFile}`);
+  }
+
+  return { html: newHtml, css, replaced: true, mode: "inline" };
+}
+
+/**
+ * Create external CSS file and add link tag
+ */
+function injectExternal(
+  html: string,
+  css: string,
+  htmlFile: string,
+  cssFileName: string,
+  verbose: boolean
+): InjectHtmlResult {
+  const htmlDir = path.dirname(htmlFile);
+  const cssFilePath = path.join(htmlDir, cssFileName);
+
+  // Check for link marker or style markers
+  const hasLinkMarker = html.includes(LINK_MARKER);
+  const startIdx = html.indexOf(CSS_START_MARKER);
+  const endIdx = html.indexOf(CSS_END_MARKER);
+
+  let newHtml = html;
+  let replaced = false;
+
+  if (hasLinkMarker) {
+    // Replace link marker with actual link tag
+    newHtml = html.replace(
+      LINK_MARKER,
+      `<link rel="stylesheet" href="${cssFileName}">`
+    );
+    replaced = true;
+  } else if (startIdx !== -1 && endIdx !== -1) {
+    // Clear inline markers and add link before </head>
+    const before = html.substring(0, startIdx + CSS_START_MARKER.length);
+    const after = html.substring(endIdx);
+    newHtml = `${before}\n    /* External: ${cssFileName} */\n    ${after}`;
+
+    // Add link tag before </head> if not already present
+    if (!newHtml.includes(`href="${cssFileName}"`)) {
+      newHtml = newHtml.replace(
+        "</head>",
+        `  <link rel="stylesheet" href="${cssFileName}">\n</head>`
+      );
+    }
+    replaced = true;
+  } else {
+    if (verbose) {
+      console.error(
+        `Warning: No markers found in ${htmlFile}. Add <!-- LUNA_CSS_LINK --> or /* LUNA_CSS_START/END */ markers.`
+      );
+    }
+  }
+
+  if (verbose && replaced) {
+    console.error(`Created external CSS: ${cssFilePath}`);
+  }
+
+  return {
+    html: newHtml,
+    css,
+    replaced,
+    cssFile: cssFilePath,
+    mode: "external",
+  };
+}
+
+/**
+ * Inject CSS and write to file(s)
+ */
+export function injectAndWrite(options: InjectHtmlOptions): InjectHtmlResult {
+  const result = injectCssToHtml(options);
+  const outputFile = options.outputFile || options.htmlFile;
+
+  if (result.replaced) {
+    fs.writeFileSync(outputFile, result.html);
+    if (options.verbose) {
+      console.error(`Written HTML to: ${outputFile}`);
+    }
+
+    // Write external CSS file if needed
+    if (result.mode === "external" && result.cssFile) {
+      fs.writeFileSync(result.cssFile, result.css);
+      if (options.verbose) {
+        console.error(`Written CSS to: ${result.cssFile}`);
+      }
+    }
+  }
+
+  return result;
+}

package/src/css/inline.ts

@@ -0,0 +1,182 @@
+/**
+ * CSS Class Name Inliner
+ *
+ * Replaces CSS utility function calls with pre-computed class names.
+ * This enables true zero-runtime CSS by eliminating runtime style registration.
+ */
+
+import { extract } from "./extract.js";
+
+// =============================================================================
+// Pattern Matching for Compiled MoonBit Output
+// =============================================================================
+
+// Pattern for register_decl calls (base CSS)
+// mizchi$luna$luna$css$$register_decl("display:flex")
+const REGISTER_DECL_PATTERN =
+  /mizchi\$luna\$luna\$css\$\$register_decl\s*\(\s*"([^"]+)"\s*\)/g;
+
+// Pattern for register_pseudo calls
+// mizchi$luna$luna$css$$register_pseudo(":hover", "background", "#2563eb")
+const REGISTER_PSEUDO_PATTERN =
+  /mizchi\$luna\$luna\$css\$\$register_pseudo\s*\(\s*"([^"]+)"\s*,\s*"([^"]+)"\s*,\s*"([^"]+)"\s*\)/g;
+
+// Pattern for register_media calls
+// mizchi$luna$luna$css$$register_media("min-width:768px", "padding", "2rem")
+const REGISTER_MEDIA_PATTERN =
+  /mizchi\$luna\$luna\$css\$\$register_media\s*\(\s*"([^"]+)"\s*,\s*"([^"]+)"\s*,\s*"([^"]+)"\s*\)/g;
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface InlineOptions {
+  verbose?: boolean;
+  dryRun?: boolean;
+  removeRegistry?: boolean;
+}
+
+export interface Replacement {
+  type: "base" | "pseudo" | "media";
+  from: string;
+  to: string;
+  key?: string;
+  decl?: string;
+}
+
+export interface InlineResult {
+  code: string;
+  replacements: Replacement[];
+  originalSize: number;
+  finalSize: number;
+}
+
+// =============================================================================
+// Inlining Logic
+// =============================================================================
+
+/**
+ * Replace CSS function calls with pre-computed class names
+ */
+export function inlineCSS(
+  code: string,
+  mapping: Record<string, string>,
+  options: InlineOptions = {}
+): InlineResult {
+  const { verbose = false } = options;
+  const replacements: Replacement[] = [];
+  const originalSize = Buffer.byteLength(code, "utf-8");
+
+  let result = code;
+
+  // Replace register_decl calls (base CSS)
+  result = result.replace(REGISTER_DECL_PATTERN, (match, decl) => {
+    const className = mapping[decl];
+    if (className) {
+      replacements.push({
+        type: "base",
+        from: match,
+        to: `"${className}"`,
+        decl,
+      });
+      return `"${className}"`;
+    }
+    if (verbose) {
+      console.error(`Warning: No mapping for base declaration: ${decl}`);
+    }
+    return match;
+  });
+
+  // Replace register_pseudo calls
+  result = result.replace(
+    REGISTER_PSEUDO_PATTERN,
+    (match, pseudo, property, value) => {
+      const key = `${pseudo}:${property}:${value}`;
+      const className = mapping[key];
+      if (className) {
+        replacements.push({
+          type: "pseudo",
+          from: match,
+          to: `"${className}"`,
+          key,
+        });
+        return `"${className}"`;
+      }
+      if (verbose) {
+        console.error(`Warning: No mapping for pseudo: ${key}`);
+      }
+      return match;
+    }
+  );
+
+  // Replace register_media calls
+  result = result.replace(
+    REGISTER_MEDIA_PATTERN,
+    (match, condition, property, value) => {
+      const key = `@media(${condition}):${property}:${value}`;
+      const className = mapping[key];
+      if (className) {
+        replacements.push({
+          type: "media",
+          from: match,
+          to: `"${className}"`,
+          key,
+        });
+        return `"${className}"`;
+      }
+      if (verbose) {
+        console.error(`Warning: No mapping for media: ${key}`);
+      }
+      return match;
+    }
+  );
+
+  const finalSize = Buffer.byteLength(result, "utf-8");
+
+  return { code: result, replacements, originalSize, finalSize };
+}
+
+/**
+ * Remove CSS registry code (dead code after inlining)
+ */
+export function removeRegistryCode(code: string): string {
+  const patterns = [
+    // Registry objects
+    /const mizchi\$luna\$luna\$css\$\$registry\s*=\s*\{[^}]+\};?\n?/g,
+    /const mizchi\$luna\$luna\$css\$\$pseudo_registry\s*=\s*\{[^}]+\};?\n?/g,
+    /const mizchi\$luna\$luna\$css\$\$media_registry\s*=\s*\{[^}]+\};?\n?/g,
+    // Class chars constant
+    /const mizchi\$luna\$luna\$css\$\$class_chars\s*=\s*"[^"]+";?\n?/g,
+    // Bind constants
+    /const mizchi\$luna\$luna\$css\$\$[a-z_]+\$46\$42\$bind[^;]+;?\n?/g,
+  ];
+
+  let result = code;
+  for (const pattern of patterns) {
+    result = result.replace(pattern, "");
+  }
+
+  return result;
+}
+
+/**
+ * Inline CSS with mapping extracted from source directory
+ */
+export function inlineFromSource(
+  code: string,
+  srcDir: string,
+  options: InlineOptions = {}
+): InlineResult {
+  const { mapping } = extract(srcDir, { warn: false });
+  let result = inlineCSS(code, mapping, options);
+
+  if (options.removeRegistry) {
+    result = {
+      ...result,
+      code: removeRegistryCode(result.code),
+      finalSize: Buffer.byteLength(removeRegistryCode(result.code), "utf-8"),
+    };
+  }
+
+  return result;
+}

package/src/css/minify.ts

@@ -0,0 +1,70 @@
+/**
+ * Simple CSS Minifier
+ *
+ * Minifies CSS without changing class names.
+ * Safe for use with existing templates.
+ */
+
+export interface MinifyOptions {
+  verbose?: boolean;
+}
+
+export interface MinifyResult {
+  minified: string;
+  originalSize: number;
+  minifiedSize: number;
+  reduction: number;
+}
+
+/**
+ * Minify CSS content
+ */
+export function minifyCSS(css: string): string {
+  return (
+    css
+      // Remove comments
+      .replace(/\/\*[\s\S]*?\*\//g, "")
+      // Remove newlines and multiple spaces
+      .replace(/\s+/g, " ")
+      // Remove space around { } : ; ,
+      .replace(/\s*([{};:,])\s*/g, "$1")
+      // Remove trailing semicolons before }
+      .replace(/;}/g, "}")
+      // Remove space after ( and before )
+      .replace(/\(\s+/g, "(")
+      .replace(/\s+\)/g, ")")
+      // Trim
+      .trim()
+  );
+}
+
+/**
+ * Format file size
+ */
+export function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  return `${(bytes / 1024).toFixed(1)} KB`;
+}
+
+/**
+ * Minify CSS and return result with stats
+ */
+export function minify(css: string, options: MinifyOptions = {}): MinifyResult {
+  const originalSize = Buffer.byteLength(css, "utf-8");
+  const minified = minifyCSS(css);
+  const minifiedSize = Buffer.byteLength(minified, "utf-8");
+  const reduction = ((1 - minifiedSize / originalSize) * 100);
+
+  if (options.verbose) {
+    console.error(
+      `Minified: ${formatSize(originalSize)} → ${formatSize(minifiedSize)} (${reduction.toFixed(1)}% reduction)`
+    );
+  }
+
+  return {
+    minified,
+    originalSize,
+    minifiedSize,
+    reduction,
+  };
+}

package/src/css/optimizer.ts

@@ -0,0 +1,6 @@
+/**
+ * CSS Co-occurrence Optimizer
+ * Re-exports from the standalone css-optimizer module
+ */
+
+export * from "../css-optimizer/index.js";