hyperframes/packages/sdk/src/engine/cssWriter.ts

/**
 * Hand-rolled flat-CSS rule editor.
 *
 * Handles only simple flat rules (`selector { declarations }`) — no nesting,
 * no @-rules, no CSS comments. Sufficient for composition <style> blocks
 * generated by hyperframes, which never contain those constructs.
 */

// ─── Types ────────────────────────────────────────────────────────────────────

interface CssRule {
  selector: string;
  body: string;
  /** Byte offset of the first char of the selector. */
  start: number;
  /** Byte offset after the closing `}`. */
  end: number;
}

// ─── Parsing ──────────────────────────────────────────────────────────────────

// fallow-ignore-next-line complexity
function parseCssRules(css: string): CssRule[] {
  const rules: CssRule[] = [];
  let i = 0;
  const len = css.length;
  while (i < len) {
    const braceOpen = css.indexOf("{", i);
    if (braceOpen === -1) break;
    const selector = css.slice(i, braceOpen).trim();
    if (!selector) {
      i = braceOpen + 1;
      continue;
    }
    // skip leading whitespace to get the true selector start
    let selStart = i;
    while (selStart < braceOpen && " \t\r\n".includes(css[selStart]!)) selStart++;
    // find closing }, respecting quoted strings so `content: "}"` doesn't end the rule
    let j = braceOpen + 1;
    let quote: string | null = null;
    while (j < len) {
      const ch = css[j]!;
      if (quote) {
        if (ch === "\\" && j + 1 < len)
          j++; // skip escaped char
        else if (ch === quote) quote = null;
      } else if (ch === '"' || ch === "'") {
        quote = ch;
      } else if (ch === "}") {
        break;
      }
      j++;
    }
    rules.push({ selector, body: css.slice(braceOpen + 1, j), start: selStart, end: j + 1 });
    i = j + 1;
  }
  return rules;
}

// fallow-ignore-next-line complexity
function parseDeclarations(body: string): Record<string, string> {
  const decls: Record<string, string> = {};
  let depth = 0;
  let quote: string | null = null;
  let start = 0;
  for (let i = 0; i <= body.length; i++) {
    const ch = i < body.length ? body[i]! : ";"; // sentinel flush
    if (quote) {
      if (ch === "\\") {
        i++;
        continue;
      } // skip escaped char
      if (ch === quote) quote = null;
      continue;
    }
    if (ch === '"' || ch === "'") {
      quote = ch;
      continue;
    }
    if (ch === "(") depth++;
    else if (ch === ")") depth--;
    else if (ch === ";" && depth === 0) {
      const part = body.slice(start, i);
      const colon = part.indexOf(":");
      if (colon !== -1) {
        const prop = part.slice(0, colon).trim();
        const value = part.slice(colon + 1).trim();
        if (prop && value) decls[prop] = value;
      }
      start = i + 1;
    }
  }
  return decls;
}

function serializeDeclarations(decls: Record<string, string>): string {
  const entries = Object.entries(decls);
  if (!entries.length) return "";
  return " " + entries.map(([k, v]) => `${k}: ${v}`).join("; ") + "; ";
}

function normalizeSelector(sel: string): string {
  return sel.trim().replace(/\s+/g, " ");
}

// ─── Public API ───────────────────────────────────────────────────────────────

/**
 * Update or insert a CSS rule.
 *
 * Finds the first rule whose selector matches (after whitespace normalization)
 * and merges the given declarations into it. A null value removes the property.
 * If no matching rule exists, appends a new one.
 *
 * Returns the modified CSS string. Returns `css` unchanged when nothing changed.
 */
export function upsertCssRule(
  css: string,
  selector: string,
  styles: Record<string, string | null>,
): string {
  const normalized = normalizeSelector(selector);
  const rules = parseCssRules(css);
  const idx = rules.findIndex((r) => normalizeSelector(r.selector) === normalized);

  if (idx !== -1) {
    const rule = rules[idx]!;
    const decls = parseDeclarations(rule.body);
    for (const [prop, value] of Object.entries(styles)) {
      if (value === null) {
        delete decls[prop];
      } else {
        decls[prop] = value;
      }
    }
    const newRuleText = `${rule.selector} {${serializeDeclarations(decls)}}`;
    return css.slice(0, rule.start) + newRuleText + css.slice(rule.end);
  }

  // Append new rule — skip if all values are null (nothing to write).
  const newDecls: Record<string, string> = {};
  for (const [prop, value] of Object.entries(styles)) {
    if (value !== null) newDecls[prop] = value;
  }
  if (!Object.keys(newDecls).length) return css;

  const newRuleText = `${selector} {${serializeDeclarations(newDecls)}}`;
  const sep = css.length > 0 && !css.endsWith("\n") ? "\n" : "";
  return css + sep + newRuleText + "\n";
}