feat(sdk,core): phase 3b — 8 gsap/label ops + setClassStyle (#1379)

2026-09-08 10:46:06 +00:00 · 2026-06-15 00:46:17 -07:00
parent 8b56e558c6
commit 6dcbb5530e
17 changed files with 1442 additions and 61 deletions
@@ -0,0 +1,137 @@
+/**
+ * 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 start = 0;
+  for (let i = 0; i <= body.length; i++) {
+    const ch = i < body.length ? body[i]! : ";"; // sentinel flush
+    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";
+}