@luna_ui/luna 0.11.0 → 0.20.0

package/src/css/index.ts

@@ -1,10 +0,0 @@
-/**
- * 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

@@ -1,205 +0,0 @@
-/**
- * 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

@@ -1,182 +0,0 @@
-/**
- * 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

@@ -1,70 +0,0 @@
-/**
- * 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

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