domflax 0.1.2 → 0.1.4

package/dist/webpack-loader.cjs

@@ -107,6 +107,7 @@ function defaultMeta(safetyFloor = 0) {
     declaresCustomProperties: false,
     whitespaceSensitive: false,
     touched: false,
+    styleDirty: false,
     synthetic: false,
     safetyFloor
   };
@@ -287,6 +288,14 @@ function markTouched(state, id) {
     state.touched.add(id);
   }
 }
+function markStyleDirty(state, id) {
+  const n = state.doc.nodes.get(id);
+  if (n) {
+    n.meta.touched = true;
+    n.meta.styleDirty = true;
+    state.touched.add(id);
+  }
+}
 function removeSubtree(state, id) {
   const node = state.doc.nodes.get(id);
   if (!node) return;
@@ -578,7 +587,7 @@ function applyOne(state, op) {
         return [precond(op, op.target, "setClassList target is not an element")];
       }
       el.computed = cloneStyleMap(op.style);
-      markTouched(state, op.target);
+      markStyleDirty(state, op.target);
       return [];
     }
     case "mergeStyle": {
@@ -601,7 +610,7 @@ function applyOne(state, op) {
         const src = doc.nodes.get(op.source);
         if (src) markTouched(state, op.source);
       }
-      markTouched(state, op.target);
+      markStyleDirty(state, op.target);
       return [];
     }
     case "foldInheritedStyles":
@@ -652,7 +661,7 @@ function applyFold(state, op) {
     }
     if (folded) {
       into.computed = { blocks: nextBlocks };
-      markTouched(state, intoId);
+      markStyleDirty(state, intoId);
     }
   }
   for (const d of issues) state.diagnostics.push(d);
@@ -912,8 +921,123 @@ function buildMatchContext(doc, elementId, resolver, selectors, safety, phase, i
 var DISPLAY = "display";
 var POSITION = "position";
 var TRANSFORM = "transform";
+var ALIGN_ITEMS = "align-items";
+var JUSTIFY_CONTENT = "justify-content";
+var JUSTIFY_ITEMS = "justify-items";
+var PLACE_ITEMS = "place-items";
+var PLACE_SELF = "place-self";
 var CONTEXT_SAFE_DISPLAYS = /* @__PURE__ */ new Set(["block", "contents", ""]);
 var STATIC_POSITIONS = /* @__PURE__ */ new Set(["static", ""]);
+var CENTERING_DISPLAYS = /* @__PURE__ */ new Set(["flex", "grid"]);
+var GRID_PARENT_DISPLAYS = /* @__PURE__ */ new Set(["grid"]);
+var STRETCHY_ITEM_ALIGN = /* @__PURE__ */ new Set(["normal", "stretch"]);
+var PARENT_ITEMS_ALIGN_PROPS = [ALIGN_ITEMS, JUSTIFY_ITEMS, PLACE_ITEMS];
+function isBaseCondition(block) {
+  const c = block.condition;
+  return c.media === "" && c.states.length === 0 && c.pseudoElement === "";
+}
+function baseValue(sm, prop) {
+  for (const block of sm.blocks.values()) {
+    if (!isBaseCondition(block)) continue;
+    const d = block.decls.get(prop);
+    return d ? String(d.value) : null;
+  }
+  return null;
+}
+function parentIsFillingGrid(before, wrapper, norm) {
+  if (wrapper.parent == null) return false;
+  const p = before.nodes.get(wrapper.parent);
+  if (!p || p.kind !== "element") return false;
+  const pc2 = norm.normalizeStyleMap(p.computed);
+  let baseIsGrid = false;
+  for (const block of pc2.blocks.values()) {
+    const disp = block.decls.get(DISPLAY);
+    if (disp) {
+      if (!GRID_PARENT_DISPLAYS.has(String(disp.value))) return false;
+      if (isBaseCondition(block)) baseIsGrid = true;
+    }
+    for (const prop of PARENT_ITEMS_ALIGN_PROPS) {
+      const d = block.decls.get(prop);
+      if (d && !STRETCHY_ITEM_ALIGN.has(String(d.value))) return false;
+    }
+  }
+  return baseIsGrid;
+}
+function wrapperHasOnlyCenteringStyle(wrapperComputed, childComputed, norm) {
+  for (const block of wrapperComputed.blocks.values()) {
+    const base = isBaseCondition(block);
+    const ck = conditionKey(block.condition);
+    for (const [prop, decl] of block.decls) {
+      const val = String(decl.value);
+      if (prop === DISPLAY) {
+        if (base && CENTERING_DISPLAYS.has(val)) continue;
+        return false;
+      }
+      if (prop === ALIGN_ITEMS) {
+        if (base && val === "center") continue;
+        return false;
+      }
+      if (prop === JUSTIFY_CONTENT) {
+        if (base && val === "center") continue;
+        return false;
+      }
+      if (prop === POSITION) {
+        if (STATIC_POSITIONS.has(val)) continue;
+        return false;
+      }
+      if (prop === TRANSFORM) {
+        if (val === "none") continue;
+        return false;
+      }
+      if (isInherited2(decl, norm)) continue;
+      if (childReproduces(childComputed, ck, prop, val)) continue;
+      return false;
+    }
+  }
+  return true;
+}
+function wrapperCentersSingleElement(before, wrapper) {
+  let elements = 0;
+  for (const cid of wrapper.children) {
+    const n = before.nodes.get(cid);
+    if (!n) continue;
+    if (n.kind === "element") {
+      elements += 1;
+      continue;
+    }
+    if (n.kind === "comment") continue;
+    if (n.kind === "text" && n.value.trim() === "") continue;
+    return false;
+  }
+  return elements === 1;
+}
+function childHasSelfAlign(childBefore, norm) {
+  if (!childBefore) return false;
+  const sm = norm.normalizeStyleMap(childBefore);
+  for (const block of sm.blocks.values()) {
+    for (const prop of SELF_ALIGN_PROPS) {
+      const d = block.decls.get(prop);
+      if (d && !NEUTRAL_ALIGN.has(String(d.value))) return true;
+    }
+  }
+  return false;
+}
+function childGainsPlaceSelfCenter(childAfter) {
+  if (baseValue(childAfter, PLACE_SELF) === "center") return true;
+  return baseValue(childAfter, "align-self") === "center" && baseValue(childAfter, "justify-self") === "center";
+}
+function isContextCompensatedCentering(before, wrapper, wrapperComputed, childBefore, childAfter, norm) {
+  if (!childAfter) return false;
+  if (!CENTERING_DISPLAYS.has(baseValue(wrapperComputed, DISPLAY) ?? "")) return false;
+  if (baseValue(wrapperComputed, ALIGN_ITEMS) !== "center") return false;
+  if (baseValue(wrapperComputed, JUSTIFY_CONTENT) !== "center") return false;
+  const childAfterNorm = norm.normalizeStyleMap(childAfter);
+  if (!childGainsPlaceSelfCenter(childAfterNorm)) return false;
+  if (!wrapperHasOnlyCenteringStyle(wrapperComputed, childAfterNorm, norm)) return false;
+  if (!wrapperCentersSingleElement(before, wrapper)) return false;
+  if (childHasSelfAlign(childBefore, norm)) return false;
+  return parentIsFillingGrid(before, wrapper, norm);
+}
 var SELF_ALIGN_PROPS = [
   "place-self",
   "align-self",
@@ -1013,6 +1137,9 @@ function classifyFlattenOps(before, after, ops, norm) {
   const wrapperComputed = norm.normalizeStyleMap(wrapper.computed);
   const childAfter = childId != null ? getElement(after, childId)?.computed ?? null : null;
   const childBefore = childId != null ? getElement(before, childId)?.computed ?? null : null;
+  if (isContextCompensatedCentering(before, wrapper, wrapperComputed, childBefore, childAfter, norm)) {
+    return { kind: "provably-safe", wrapperId, childId };
+  }
   if (establishesChildContext(wrapperComputed)) {
     return { kind: "needs-verification", wrapperId, childId };
   }
@@ -1441,15 +1568,34 @@ function sameTokens(a, b) {
   for (let i = 0; i < a.length; i += 1) if (a[i] !== b[i]) return false;
   return true;
 }
+function residualStyle(computed2, covered, norm) {
+  const cov = norm.normalizeStyleMap(covered);
+  const blocks = /* @__PURE__ */ new Map();
+  for (const [key, block] of norm.normalizeStyleMap(computed2).blocks) {
+    const covBlock = cov.blocks.get(key);
+    const decls = /* @__PURE__ */ new Map();
+    for (const [prop, decl] of block.decls) {
+      const covDecl = covBlock?.decls.get(prop);
+      if (covDecl && covDecl.value === decl.value && covDecl.important === decl.important) continue;
+      decls.set(prop, decl);
+    }
+    if (decls.size > 0) blocks.set(key, { condition: block.condition, decls });
+  }
+  return { blocks };
+}
 function syncClassesFromComputed(doc, resolver, norm) {
   const sink = createSyntheticSink();
   for (const id of elementIds(doc)) {
     const el = getElement(doc, id);
-    if (!el || !el.meta.touched) continue;
+    if (!el) continue;
+    if (!el.meta.styleDirty) continue;
     if (el.classes.opaque || el.classes.hasDynamic) continue;
     const tokens = staticTokensOf(el.classes);
+    const retained = tokens.filter((t) => !resolver.selectorUsage(t).droppable);
+    const covered = retained.length > 0 ? resolver.resolve({ classes: retained }).styles : null;
+    const target = covered ? residualStyle(el.computed, covered, norm) : el.computed;
     const ctx = { normalizer: norm, sink };
-    const emitted = resolver.emit(el.computed, ctx).classes;
+    const emitted = resolver.emit(target, ctx).classes;
     if (emitted.length === 0) continue;
     const emittedSet = new Set(emitted);
     const next = [];
@@ -2161,19 +2307,28 @@ var flexCenterWrapper = definePattern({
     flattenInto: "child",
     childGains: { placeSelf: "center" }
   },
-  // Collapsing a flex-centering wrapper to `place-self:center` on the child only stays centered when
-  // the child's NEW parent is flex/grid; moreover the wrapper's own `display:flex` establishes a
-  // formatting context. Both make this a `needs-verification` flatten, which the conservative
-  // production gate (`'provably-safe'`, used by the harness) intentionally REVERTS — so every case
-  // here is a no-match: the wrapper is preserved. Op-level rewrite correctness (purity, id-preserving
-  // unwrap, opacity-barrier safety) is still asserted by the invariant suite over every pattern.
+  // Collapsing a flex-centering wrapper to `place-self:center` on the child is render-identical ONLY
+  // when the child's NEW parent is a statically-known GRID that lets the wrapper fill its area (there
+  // `place-self`'s align-self AND justify-self both take effect). Under that ONE context the flatten is
+  // classified `provably-safe` and commits; under a flex/block/unknown parent — or when the wrapper
+  // drops any own style — it stays `needs-verification` and the conservative production gate PRESERVES
+  // it. Op-level correctness (purity, id-preserving unwrap, opacity-barrier safety) is additionally
+  // asserted by the invariant suite over every pattern.
   test: {
+    cases: [
+      {
+        name: "grid parent \u2192 flattened (child gains place-self-center)",
+        before: '<div className="grid"><div className="flex items-center justify-center"><span className="bg-red-200">x</span></div></div>',
+        after: '<div className="grid"><span className="bg-red-200 place-self-center">x</span></div>'
+      }
+    ],
     noMatch: [
-      // Even under a static flex/grid parent the centering flatten is not provably layout-neutral
-      // (the wrapper itself establishes a flex formatting context) → left unchanged.
-      '<div className="grid"><div className="flex items-center justify-center"><span className="bg-red-200">x</span></div></div>',
-      // Non-flex/grid parent (document root): place-self centering would not hold → left unchanged.
+      // Non-grid (flex) parent (document root): `justify-self` is ignored in flex → not provably safe.
       '<div className="flex justify-center items-center"><div className="bg-red-200">Hello</div></div>',
+      // Grid parent, but the wrapper drops padding when removed → not layout-neutral (rule 3).
+      '<div className="grid"><div className="p-4 flex items-center justify-center"><span className="bg-red-200">x</span></div></div>',
+      // Grid parent forcing place-items-center: the wrapper would not fill its area → fill guard skips.
+      '<div className="grid place-items-center"><div className="flex items-center justify-center"><span className="bg-red-200">x</span></div></div>',
       // onClick is a hard opacity barrier → the wrapper is load-bearing regardless of the gate.
       '<div className="flex justify-center items-center" onClick={handleClick}><div className="bg-red-200">Hello</div></div>'
     ]
@@ -3377,11 +3532,11 @@ var paddingShorthand = definePattern({
 });
 
 // ../patterns/src/library/compress/place-shorthand.pattern.ts
-var ALIGN_ITEMS = "align-items";
-var JUSTIFY_ITEMS = "justify-items";
-var PLACE_ITEMS = "place-items";
+var ALIGN_ITEMS2 = "align-items";
+var JUSTIFY_ITEMS2 = "justify-items";
+var PLACE_ITEMS2 = "place-items";
 var ALIGN_CONTENT = "align-content";
-var JUSTIFY_CONTENT = "justify-content";
+var JUSTIFY_CONTENT2 = "justify-content";
 var PLACE_CONTENT = "place-content";
 var BASE_KEY8 = conditionKey(BASE_CONDITION);
 function samePair(a, b) {
@@ -3421,21 +3576,21 @@ var placeShorthand = definePattern({
     rewriteClasses(computed2) {
       const base = computed2.blocks.get(BASE_KEY8);
       if (!base) return null;
-      const alignItems = base.decls.get(ALIGN_ITEMS);
-      const justifyItems = base.decls.get(JUSTIFY_ITEMS);
+      const alignItems = base.decls.get(ALIGN_ITEMS2);
+      const justifyItems = base.decls.get(JUSTIFY_ITEMS2);
       const alignContent = base.decls.get(ALIGN_CONTENT);
-      const justifyContent = base.decls.get(JUSTIFY_CONTENT);
+      const justifyContent = base.decls.get(JUSTIFY_CONTENT2);
       const next = new Map(base.decls);
       let collapsed = false;
       if (samePair(alignItems, justifyItems)) {
-        next.delete(ALIGN_ITEMS);
-        next.delete(JUSTIFY_ITEMS);
-        next.set(PLACE_ITEMS, placeDecl(PLACE_ITEMS, alignItems));
+        next.delete(ALIGN_ITEMS2);
+        next.delete(JUSTIFY_ITEMS2);
+        next.set(PLACE_ITEMS2, placeDecl(PLACE_ITEMS2, alignItems));
         collapsed = true;
       }
       if (samePair(alignContent, justifyContent)) {
         next.delete(ALIGN_CONTENT);
-        next.delete(JUSTIFY_CONTENT);
+        next.delete(JUSTIFY_CONTENT2);
         next.set(PLACE_CONTENT, placeDecl(PLACE_CONTENT, alignContent));
         collapsed = true;
       }
@@ -4624,11 +4779,349 @@ function createCssResolver(cssFiles = [], options) {
 var import_node_path = require("path");
 var import_node_url = require("url");
 
+// ../frontend-html/src/backend.ts
+var import_magic_string = __toESM(require("magic-string"), 1);
+function staticTokensOf2(classes) {
+  const out = [];
+  for (const seg of classes.segments) {
+    if (seg.kind === "static") for (const t of seg.tokens) out.push(t.value);
+  }
+  return out;
+}
+function sameTokens2(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) if (a[i] !== b[i]) return false;
+  return true;
+}
+function primarySource(doc) {
+  for (const sf of doc.sources.values()) {
+    if (typeof sf.text === "string" && sf.text.length > 0) return sf;
+  }
+  return null;
+}
+function collectKept(doc) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  const visit = (id) => {
+    if (seen.has(id)) return;
+    seen.add(id);
+    const n = doc.nodes.get(id);
+    if (!n) return;
+    out.push(n);
+    if (n.kind === "element" || n.kind === "fragment") for (const c of n.children) visit(c);
+  };
+  visit(doc.root);
+  return out;
+}
+function strictlyContains(a, b) {
+  if (a.file !== b.file) return false;
+  if (a.start <= b.start && b.end <= a.end) return !(a.start === b.start && a.end === b.end);
+  return false;
+}
+function backrefIds(doc) {
+  const out = [];
+  const max = doc.alloc.peek;
+  for (let i = 1; i < max; i += 1) {
+    const id = i;
+    if (doc.backref.get(id)) out.push(id);
+  }
+  return out;
+}
+function currentTokens(sf, valueSpan) {
+  const raw = sf.text.slice(valueSpan.start, valueSpan.end).trim();
+  const unquoted = raw.replace(/^['"]/, "").replace(/['"]$/, "");
+  return unquoted.split(/\s+/).filter((t) => t.length > 0);
+}
+function editClasses(ms, doc, sf, el) {
+  const classes = el.classes;
+  if (classes.hasDynamic || classes.opaque) return false;
+  const tokens = staticTokensOf2(classes);
+  const valueSpan = classes.valueSpan;
+  if (valueSpan && valueSpan.file === sf.id) {
+    if (sameTokens2(currentTokens(sf, valueSpan), tokens)) return false;
+    const current = sf.text.slice(valueSpan.start, valueSpan.end).trim();
+    const quote = current.startsWith("'") ? "'" : '"';
+    ms.overwrite(valueSpan.start, valueSpan.end, `${quote}${tokens.join(" ")}${quote}`);
+    return true;
+  }
+  if (tokens.length === 0) return false;
+  const openTag = doc.backref.get(el.id)?.openTagSpan;
+  if (!openTag || openTag.file !== sf.id) return false;
+  ms.appendLeft(openTag.start + 1 + el.tag.length, ` class="${tokens.join(" ")}"`);
+  return true;
+}
+function surgicalPrint(doc) {
+  const sf = primarySource(doc);
+  if (!sf) return null;
+  const ms = new import_magic_string.default(sf.text);
+  const kept = collectKept(doc);
+  const keptSpans = [];
+  for (const n of kept) if (n.span && n.span.file === sf.id) keptSpans.push(n.span);
+  const removed = [];
+  for (const id of backrefIds(doc)) {
+    if (doc.nodes.has(id)) continue;
+    const back = doc.backref.get(id);
+    if (!back || back.span.file !== sf.id) continue;
+    const unwrapped = keptSpans.some((k) => strictlyContains(back.span, k));
+    removed.push({ backref: back, unwrapped });
+  }
+  const fullRemovals = removed.filter((r) => !r.unwrapped).map((r) => r.backref.span);
+  for (const r of removed) {
+    const s = r.backref.span;
+    if (fullRemovals.some((f) => f !== s && strictlyContains(f, s))) continue;
+    if (r.unwrapped) {
+      const open = r.backref.openTagSpan;
+      const close = r.backref.closeTagSpan;
+      if (open && open.file === sf.id && open.end > open.start) ms.remove(open.start, open.end);
+      if (close && close.file === sf.id && close.end > close.start) ms.remove(close.start, close.end);
+    } else {
+      ms.remove(s.start, s.end);
+    }
+  }
+  for (const n of kept) if (n.kind === "element") editClasses(ms, doc, sf, n);
+  return ms.toString();
+}
+function doPrint(doc) {
+  return surgicalPrint(doc) ?? "";
+}
+
+// ../frontend-html/src/parse.ts
+var import_node_module3 = require("module");
+
+// ../frontend-html/src/walk.ts
+var HTML_LANGS = ["html"];
+var FILE_ID = 1;
+function looksLikeHtml(id, code) {
+  if (/\.html?$/i.test(id)) return true;
+  const head = code.slice(0, 256).trimStart().toLowerCase();
+  return head.startsWith("<!doctype html") || head.startsWith("<html") || head.startsWith("<");
+}
+var OPAQUE_SUBTREE_TAGS = /* @__PURE__ */ new Set([
+  "script",
+  "style",
+  "template",
+  "svg",
+  "pre",
+  "textarea"
+]);
+function isOpaqueSubtreeTag(tag) {
+  return OPAQUE_SUBTREE_TAGS.has(tag);
+}
+function elementIsOpaque(attrs) {
+  for (const a of attrs) {
+    const n = a.name.toLowerCase();
+    if (n === "id" || n === "contenteditable") return true;
+    if (n.startsWith("on")) return true;
+  }
+  return false;
+}
+function hasEventHandler(attrs) {
+  for (const a of attrs) if (/^on/i.test(a.name)) return true;
+  return false;
+}
+function span(start, end) {
+  return { file: FILE_ID, start, end };
+}
+function attrsLocOf(loc) {
+  if (!loc) return void 0;
+  return loc.startTag?.attrs ?? loc.attrs;
+}
+function classValueSpan(loc, source) {
+  const attrsLoc = attrsLocOf(loc);
+  const cl = attrsLoc?.["class"];
+  if (!cl) return null;
+  const text = source.slice(cl.startOffset, cl.endOffset);
+  const eq = text.indexOf("=");
+  if (eq === -1) return null;
+  let i = eq + 1;
+  while (i < text.length && /\s/.test(text[i])) i += 1;
+  if (i >= text.length) return null;
+  return span(cl.startOffset + i, cl.endOffset);
+}
+
+// ../frontend-html/src/parse.ts
+var cachedParse5 = null;
+function loadParse5() {
+  if (cachedParse5) return cachedParse5;
+  const req = (0, import_node_module3.createRequire)(importMetaUrl);
+  cachedParse5 = req("parse5");
+  return cachedParse5;
+}
+function doParse(code, ctx) {
+  const diagnostics = [];
+  const doc = createDocument("html");
+  const backref = doc.backref;
+  const parse5 = loadParse5();
+  const document2 = parse5.parse(code, { sourceCodeLocationInfo: true });
+  const eol = code.includes("\r\n") ? "\r\n" : "\n";
+  const sourceFile = {
+    id: FILE_ID,
+    path: ctx.id,
+    text: code,
+    frontend: "html",
+    eol,
+    indentUnit: "  ",
+    native: document2
+  };
+  doc.sources.set(FILE_ID, sourceFile);
+  const resolveComputed = (tokens, tag, nodeId) => {
+    if (tokens.length === 0) return emptyStyleMap();
+    const res = ctx.resolver.resolve({ classes: tokens, element: { tagName: tag, namespace: "html" } });
+    for (const w of res.warnings) {
+      diagnostics.push({
+        code: "DF_STYLE_CONFLICT_UNRESOLVED",
+        severity: w.severity,
+        message: w.message,
+        nodeId
+      });
+    }
+    return ctx.normalizer.normalizeStyleMap(res.styles);
+  };
+  const splitTokens = (raw) => raw.split(/\s+/).filter((t) => t.length > 0);
+  const appendChild = (node, parentId, out) => {
+    const name = node.nodeName;
+    if (name === "#text") {
+      const value = node.value ?? "";
+      const id = doc.alloc.next();
+      const loc = node.sourceCodeLocation ?? null;
+      doc.nodes.set(
+        id,
+        createText(id, value, {
+          parent: parentId,
+          span: loc ? span(loc.startOffset, loc.endOffset) : null,
+          collapsible: /^\s*$/.test(value)
+        })
+      );
+      out.push(id);
+      return;
+    }
+    if (name === "#comment") {
+      const id = doc.alloc.next();
+      const loc = node.sourceCodeLocation ?? null;
+      doc.nodes.set(
+        id,
+        createComment(id, node.data ?? "", {
+          parent: parentId,
+          span: loc ? span(loc.startOffset, loc.endOffset) : null
+        })
+      );
+      out.push(id);
+      return;
+    }
+    if (name === "#documentType") return;
+    if (name.startsWith("#")) {
+      for (const c of node.childNodes ?? []) appendChild(c, parentId, out);
+      return;
+    }
+    out.push(buildElement(node, parentId));
+  };
+  const buildElement = (node, parentId) => {
+    const id = doc.alloc.next();
+    const tag = (node.tagName ?? node.nodeName).toLowerCase();
+    const loc = node.sourceCodeLocation ?? null;
+    const attrsArr = node.attrs ?? [];
+    const opaqueSubtree = isOpaqueSubtreeTag(tag);
+    const synthetic = loc == null;
+    const opaque2 = opaqueSubtree || synthetic || elementIsOpaque(attrsArr);
+    const meta = defaultMeta();
+    meta.hasEventHandlers = hasEventHandler(attrsArr);
+    meta.safetyFloor = opaque2 ? 0 : 3;
+    let classes = emptyClassList();
+    let classTokens = [];
+    const entries = /* @__PURE__ */ new Map();
+    const order = [];
+    for (const a of attrsArr) {
+      if (a.name.toLowerCase() === "class") {
+        classTokens = splitTokens(a.value);
+        const valueSpan = classValueSpan(loc, code);
+        const clAttr = attrsLocOf(loc)?.["class"];
+        const seg = {
+          kind: "static",
+          span: valueSpan ?? void 0,
+          tokens: classTokens.map((value) => ({ value }))
+        };
+        classes = {
+          form: "string-literal",
+          segments: [seg],
+          valueSpan,
+          attrSpan: clAttr ? span(clAttr.startOffset, clAttr.endOffset) : void 0,
+          hasDynamic: false,
+          opaque: false,
+          rewritable: valueSpan != null
+        };
+        continue;
+      }
+      const v = a.value;
+      entries.set(a.name, { kind: "static", value: v === "" ? true : v });
+      order.push(a.name);
+    }
+    const attrs = { entries, spreads: [], order };
+    const computed2 = resolveComputed(classTokens, tag, id);
+    const children = [];
+    if (!opaqueSubtree) {
+      for (const c of node.childNodes ?? []) appendChild(c, id, children);
+    }
+    const el = createElement(id, {
+      tag,
+      namespace: "html",
+      isComponent: false,
+      selfClosing: loc ? loc.endTag == null : false,
+      classes,
+      computed: computed2,
+      attrs,
+      children,
+      parent: parentId,
+      span: loc ? span(loc.startOffset, loc.endOffset) : null,
+      meta
+    });
+    doc.nodes.set(id, el);
+    if (loc) {
+      backref.set(id, {
+        nodeId: id,
+        span: span(loc.startOffset, loc.endOffset),
+        openTagSpan: loc.startTag ? span(loc.startTag.startOffset, loc.startTag.endOffset) : null,
+        closeTagSpan: loc.endTag ? span(loc.endTag.startOffset, loc.endTag.endOffset) : null,
+        innerSpan: null,
+        selfClosing: loc.endTag == null
+      });
+    }
+    return id;
+  };
+  const rootFrag = doc.nodes.get(doc.root);
+  appendChild(document2, doc.root, rootFrag.children);
+  return { doc, diagnostics };
+}
+
+// ../frontend-html/src/index.ts
+var htmlFrontend = {
+  name: "html",
+  langs: HTML_LANGS,
+  canParse(id, code) {
+    return looksLikeHtml(id, code);
+  },
+  parse(code, ctx) {
+    return doParse(code, ctx);
+  }
+};
+function createHtmlFrontend() {
+  return htmlFrontend;
+}
+var htmlBackend = {
+  name: "html",
+  langs: HTML_LANGS,
+  print(doc, _plan, _ctx) {
+    return { code: doPrint(doc), map: null, edits: [], diagnostics: [] };
+  }
+};
+function createHtmlBackend() {
+  return htmlBackend;
+}
+
 // ../frontend-jsx/src/frontend-ast.ts
 var import_traverse = __toESM(require("@babel/traverse"), 1);
 var traverse = typeof import_traverse.default === "function" ? import_traverse.default : import_traverse.default.default;
 var JSX_LANGS = ["jsx", "tsx"];
-var FILE_ID = 1;
+var FILE_ID2 = 1;
 function jsxName(node) {
   switch (node.type) {
     case "JSXIdentifier":
@@ -4752,7 +5245,7 @@ function looksLikeJsx(id, code) {
 
 // ../frontend-jsx/src/frontend-parse.ts
 var import_parser = require("@babel/parser");
-function doParse(code, ctx) {
+function doParse2(code, ctx) {
   const diagnostics = [];
   const doc = createDocument("jsx");
   const backref = doc.backref;
@@ -4762,7 +5255,7 @@ function doParse(code, ctx) {
   });
   const eol = code.includes("\r\n") ? "\r\n" : "\n";
   const sourceFile = {
-    id: FILE_ID,
+    id: FILE_ID2,
     path: ctx.id,
     text: code,
     frontend: "jsx",
@@ -4770,23 +5263,23 @@ function doParse(code, ctx) {
     indentUnit: "  ",
     native: ast
   };
-  doc.sources.set(FILE_ID, sourceFile);
+  doc.sources.set(FILE_ID2, sourceFile);
   const spanOf = (node) => {
     if (node.start == null || node.end == null) return null;
-    const span = {
-      file: FILE_ID,
+    const span2 = {
+      file: FILE_ID2,
       start: node.start,
       end: node.end,
       startLoc: node.loc ? { line: node.loc.start.line, column: node.loc.start.column } : void 0,
       endLoc: node.loc ? { line: node.loc.end.line, column: node.loc.end.column } : void 0
     };
-    return span;
+    return span2;
   };
   const sliceOf = (node) => node.start == null || node.end == null ? "" : code.slice(node.start, node.end);
   const internExpr = (node, spread) => {
     const payload = { text: sliceOf(node), spread };
     return doc.exprs.intern({
-      span: spanOf(node) ?? { file: FILE_ID, start: 0, end: 0 },
+      span: spanOf(node) ?? { file: FILE_ID2, start: 0, end: 0 },
       kind: exprKind(node),
       payload
     });
@@ -4832,7 +5325,7 @@ function doParse(code, ctx) {
     }
     return emptyClassList();
   };
-  const staticTokensOf3 = (classes) => {
+  const staticTokensOf4 = (classes) => {
     const out = [];
     for (const seg of classes.segments) {
       if (seg.kind === "static") for (const t of seg.tokens) out.push(t.value);
@@ -4910,7 +5403,7 @@ function doParse(code, ctx) {
     doc.nodes.set(id, createFragment(id, { children, parent: parentId, span: spanOf(node) }));
     backref.set(id, {
       nodeId: id,
-      span: spanOf(node) ?? { file: FILE_ID, start: 0, end: 0 },
+      span: spanOf(node) ?? { file: FILE_ID2, start: 0, end: 0 },
       openTagSpan: spanOf(node.openingFragment),
       closeTagSpan: spanOf(node.closingFragment),
       innerSpan: null,
@@ -4959,7 +5452,7 @@ function doParse(code, ctx) {
     }
     let computed2 = emptyStyleMap();
     if (!classes.hasDynamic) {
-      const tokens = staticTokensOf3(classes);
+      const tokens = staticTokensOf4(classes);
       if (tokens.length > 0) {
         const res = ctx.resolver.resolve({
           classes: tokens,
@@ -4992,13 +5485,13 @@ function doParse(code, ctx) {
     });
     doc.nodes.set(id, el);
     const inner = children.length > 0 ? spanOf(node.children[0]) && spanOf(node.children.at(-1)) ? {
-      file: FILE_ID,
+      file: FILE_ID2,
       start: spanOf(node.children[0]).start,
       end: spanOf(node.children.at(-1)).end
     } : null : null;
     backref.set(id, {
       nodeId: id,
-      span: spanOf(node) ?? { file: FILE_ID, start: 0, end: 0 },
+      span: spanOf(node) ?? { file: FILE_ID2, start: 0, end: 0 },
       openTagSpan: spanOf(opening),
       closeTagSpan: node.closingElement ? spanOf(node.closingElement) : null,
       innerSpan: inner,
@@ -5033,7 +5526,7 @@ var jsxFrontend = {
     return looksLikeJsx(id, code);
   },
   parse(code, ctx) {
-    return doParse(code, ctx);
+    return doParse2(code, ctx);
   }
 };
 function createJsxFrontend() {
@@ -5041,7 +5534,7 @@ function createJsxFrontend() {
 }
 
 // ../frontend-jsx/src/backend.ts
-var import_magic_string = __toESM(require("magic-string"), 1);
+var import_magic_string2 = __toESM(require("magic-string"), 1);
 var JSX_LANGS2 = ["jsx", "tsx"];
 function exprText(doc, ref) {
   const rec = doc.exprs.get(ref);
@@ -5055,20 +5548,20 @@ function exprText(doc, ref) {
   }
   return { text: "", spread: false };
 }
-function staticTokensOf2(classes) {
+function staticTokensOf3(classes) {
   const out = [];
   for (const seg of classes.segments) {
     if (seg.kind === "static") for (const t of seg.tokens) out.push(t.value);
   }
   return out;
 }
-function primarySource(doc) {
+function primarySource2(doc) {
   for (const sf of doc.sources.values()) {
     if (typeof sf.text === "string" && sf.text.length > 0) return sf;
   }
   return null;
 }
-function collectKept(doc) {
+function collectKept2(doc) {
   const out = [];
   const seen = /* @__PURE__ */ new Set();
   const visit = (id) => {
@@ -5082,15 +5575,15 @@ function collectKept(doc) {
   visit(doc.root);
   return out;
 }
-function strictlyContains(a, b) {
+function strictlyContains2(a, b) {
   if (a.file !== b.file) return false;
   if (a.start <= b.start && b.end <= a.end) return !(a.start === b.start && a.end === b.end);
   return false;
 }
-function editClasses(ms, doc, sf, el) {
+function editClasses2(ms, doc, sf, el) {
   const classes = el.classes;
   if (classes.hasDynamic || classes.opaque) return false;
-  const tokens = staticTokensOf2(classes);
+  const tokens = staticTokensOf3(classes);
   const valueSpan = classes.valueSpan;
   if (valueSpan && valueSpan.file === sf.id) {
     const current = sf.text.slice(valueSpan.start, valueSpan.end);
@@ -5154,10 +5647,10 @@ function transferKeyOnUnwrap(ms, doc, sf, region, kept) {
   const inside = [];
   for (const n of kept) {
     if (n.kind !== "element" || !n.span || n.span.file !== sf.id) continue;
-    if (strictlyContains(region.span, n.span)) inside.push(n);
+    if (strictlyContains2(region.span, n.span)) inside.push(n);
   }
   const maximal = inside.filter(
-    (n) => !inside.some((o) => o !== n && o.span && n.span && strictlyContains(o.span, n.span))
+    (n) => !inside.some((o) => o !== n && o.span && n.span && strictlyContains2(o.span, n.span))
   );
   if (maximal.length !== 1) return;
   const child = maximal[0];
@@ -5166,25 +5659,25 @@ function transferKeyOnUnwrap(ms, doc, sf, region, kept) {
   if (extractKeyAttr(sf.text.slice(childOpen.start, childOpen.end))) return;
   ms.appendLeft(childOpen.start + 1 + child.tag.length, ` ${keyAttr}`);
 }
-function surgicalPrint(doc) {
-  const sf = primarySource(doc);
+function surgicalPrint2(doc) {
+  const sf = primarySource2(doc);
   if (!sf) return null;
-  const ms = new import_magic_string.default(sf.text);
-  const kept = collectKept(doc);
+  const ms = new import_magic_string2.default(sf.text);
+  const kept = collectKept2(doc);
   const keptSpans = [];
   for (const n of kept) if (n.span && n.span.file === sf.id) keptSpans.push(n.span);
   const removed = [];
-  for (const id of backrefIds(doc)) {
+  for (const id of backrefIds2(doc)) {
     if (doc.nodes.has(id)) continue;
     const back = doc.backref.get(id);
     if (!back || back.span.file !== sf.id) continue;
-    const unwrapped = keptSpans.some((k) => strictlyContains(back.span, k));
+    const unwrapped = keptSpans.some((k) => strictlyContains2(back.span, k));
     removed.push({ backref: back, unwrapped });
   }
   const fullRemovals = removed.filter((r) => !r.unwrapped).map((r) => r.backref.span);
   for (const r of removed) {
-    const span = r.backref.span;
-    const coveredByFull = fullRemovals.some((f) => f !== span && strictlyContains(f, span));
+    const span2 = r.backref.span;
+    const coveredByFull = fullRemovals.some((f) => f !== span2 && strictlyContains2(f, span2));
     if (coveredByFull) continue;
     if (r.unwrapped) {
       transferKeyOnUnwrap(ms, doc, sf, r.backref, kept);
@@ -5195,15 +5688,15 @@ function surgicalPrint(doc) {
         ms.remove(close.start, close.end);
       }
     } else {
-      ms.remove(span.start, span.end);
+      ms.remove(span2.start, span2.end);
     }
   }
   for (const n of kept) {
-    if (n.kind === "element") editClasses(ms, doc, sf, n);
+    if (n.kind === "element") editClasses2(ms, doc, sf, n);
   }
   return ms.toString();
 }
-function backrefIds(doc) {
+function backrefIds2(doc) {
   const out = [];
   const max = doc.alloc.peek;
   for (let i = 1; i < max; i += 1) {
@@ -5218,7 +5711,7 @@ function classText(doc, classes) {
   if (dynamic && dynamic.kind === "dynamic") {
     return `className={${exprText(doc, dynamic.expr).text}}`;
   }
-  const tokens = staticTokensOf2(classes);
+  const tokens = staticTokensOf3(classes);
   return `className="${tokens.join(" ")}"`;
 }
 function attrText(doc, name, value) {
@@ -5271,15 +5764,15 @@ function rePrint(doc) {
   if (!root || root.kind !== "fragment") return printNode(doc, doc.root);
   return root.children.map((c) => printNode(doc, c)).join("");
 }
-function doPrint(doc) {
-  const surgical = surgicalPrint(doc);
+function doPrint2(doc) {
+  const surgical = surgicalPrint2(doc);
   return surgical ?? rePrint(doc);
 }
 var jsxBackend = {
   name: "babel-jsx",
   langs: JSX_LANGS2,
   print(doc, _plan, _ctx) {
-    const code = doPrint(doc);
+    const code = doPrint2(doc);
     return { code, map: null, edits: [], diagnostics: [] };
   }
 };
@@ -5294,6 +5787,11 @@ function jsxKindOf(id) {
   if (clean.endsWith(".jsx")) return "jsx";
   return null;
 }
+function htmlKindOf(id) {
+  const clean = (id.split("?", 1)[0] ?? id).toLowerCase();
+  if (clean.endsWith(".html") || clean.endsWith(".htm")) return "html";
+  return null;
+}
 function eolOf2(doc) {
   for (const src of doc.sources.values()) return src.eol;
   return "\n";
@@ -5361,9 +5859,51 @@ function runJsxPipeline(code, id, kind, resolver, patterns, safety) {
   const { doc: optimized } = runPasses(doc, passes, ctx);
   return finishPipeline(optimized, id, resolver);
 }
+function prepareHtml(code, id, resolver, patterns, safety, gate) {
+  const parsed = createHtmlFrontend().parse(code, {
+    id,
+    kind: "html",
+    resolver,
+    normalizer,
+    config: {},
+    onDiagnostic: () => {
+    }
+  });
+  const doc = parsed.doc;
+  const ctx = {
+    doc,
+    safetyCeiling: safety,
+    normalizer,
+    selectors: buildSelectorIndex(doc, resolver),
+    resolver,
+    gate
+  };
+  return { doc, ctx, passes: buildPasses(patterns) };
+}
+function finishHtmlPipeline(optimized, id, resolver) {
+  syncClassesFromComputed(optimized, resolver, normalizer);
+  const printed = createHtmlBackend().print(
+    optimized,
+    { moduleId: id, ops: [], provenance: /* @__PURE__ */ new Map() },
+    {
+      normalizer,
+      resolver,
+      sink: createSyntheticSink(),
+      eol: eolOf2(optimized),
+      onDiagnostic: () => {
+      }
+    }
+  );
+  return printed.code;
+}
+function runHtmlPipeline(code, id, resolver, patterns, safety) {
+  const { doc, ctx, passes } = prepareHtml(code, id, resolver, patterns, safety, "provably-safe");
+  const { doc: optimized } = runPasses(doc, passes, ctx);
+  return finishHtmlPipeline(optimized, id, resolver);
+}
 
 // src/index.ts
-var DEFAULT_INCLUDE = [".jsx", ".tsx", ".html"];
+var DEFAULT_INCLUDE = [".jsx", ".tsx", ".html", ".htm"];
 function resolveOptions(options) {
   return {
     provider: options.provider ?? "auto",
@@ -5399,9 +5939,15 @@ function createDomflax(options = {}) {
     transform(code, id) {
       if (!isSupported(id, resolved.include)) return { code, map: null };
       const kind = jsxKindOf(id);
-      if (kind === null) return { code, map: null };
-      const out = runJsxPipeline(code, id, kind, getResolver(), patterns, resolved.safety);
-      return { code: out, map: null };
+      if (kind !== null) {
+        const out = runJsxPipeline(code, id, kind, getResolver(), patterns, resolved.safety);
+        return { code: out, map: null };
+      }
+      if (htmlKindOf(id) !== null) {
+        const out = runHtmlPipeline(code, id, getResolver(), patterns, resolved.safety);
+        return { code: out, map: null };
+      }
+      return { code, map: null };
     }
   };
 }