@fluixi/compiler 1.0.0-alpha.93 → 1.0.0-alpha.95

package/dist/transform/templates.cjs

@@ -36,6 +36,580 @@ module.exports = __toCommonJS(templates_exports);
 var import_parser2 = require("@babel/parser");
 var import_magic_string2 = __toESM(require("magic-string"), 1);
 
+// src/transform/styles.ts
+var import_sourcemap_codec = require("@jridgewell/sourcemap-codec");
+var SCOPE_ATTR = "data-fx-s";
+var FUNCTIONS = /* @__PURE__ */ new Set(["FunctionDeclaration", "FunctionExpression", "ArrowFunctionExpression", "ObjectMethod", "ClassMethod"]);
+function collectStyles(program, sourceName, options, tags = { html: /* @__PURE__ */ new Map([["html", "html"]]) }, module2) {
+  const plan = {
+    scopes: [],
+    templateOwners: /* @__PURE__ */ new Map(),
+    drop: /* @__PURE__ */ new Set(),
+    styles: [],
+    diagnostics: [],
+    edits: [],
+    literals: [],
+    references: [],
+    shadowClasses: /* @__PURE__ */ new Map()
+  };
+  if (!options) return plan;
+  const literalsOf = findLiterals(program, options.cssModules ?? ["@fluixi/core", "@fluixi/dom"], plan, tags.css ?? []);
+  plan.names = literalsOf;
+  const classOf = /* @__PURE__ */ new Map();
+  const shadowOf = (owner) => {
+    const cls = classOf.get(owner);
+    return cls ? plan.shadowClasses.get(cls) : void 0;
+  };
+  const resolved = /* @__PURE__ */ new Map();
+  const piecesToNodes = (quasis, expressions, at, stack) => {
+    const out = [];
+    for (let i = 0; i < quasis.length; i++) {
+      const text = quasis[i].value.cooked ?? quasis[i].value.raw;
+      if (text.trim()) {
+        try {
+          const start = quasis[i].loc?.start;
+          out.push(...options.process(text, sourceName).map((n) => start ? shiftLoc(n, sourceName, start) : n));
+        } catch (error) {
+          plan.diagnostics.push({ ...at, message: `CSS could not be processed: ${error.message}` });
+          return null;
+        }
+      }
+      const expr = expressions[i];
+      if (!expr) continue;
+      const value = expr.type === "Identifier" ? resolveLiteral(expr.name, at, stack) : void 0;
+      if (value === void 0) {
+        plan.diagnostics.push({
+          ...at,
+          message: "Only css`` values can be interpolated into styles, and only by name: ${base}. Dynamic values go through custom properties (style:--x={...} and var(--x))."
+        });
+        return null;
+      }
+      if (value === null) return null;
+      out.push(...value);
+    }
+    return out;
+  };
+  function resolveLiteral(name, at, stack) {
+    const imported = literalsOf.imports.get(name);
+    if (imported) {
+      const nodes = options?.imported?.get(`${imported.source}#${imported.name}`);
+      if (nodes) return nodes.map((n) => keepLocIn(n, options?.importedModules));
+      plan.references.push({ name: imported.name, source: imported.source, ...at });
+      plan.diagnostics.push({
+        ...at,
+        message: options?.imported ? `${name} from ${imported.source} is not a css\`\` value the build could find.` : `${name} comes from ${imported.source}: style values from another module are resolved by the build.`
+      });
+      return null;
+    }
+    const literal = literalsOf.literals.get(name);
+    if (!literal) return void 0;
+    if (stack.includes(name)) {
+      plan.diagnostics.push({ ...at, message: `css\`\` values include each other: ${[...stack, name].join(" → ")}.` });
+      return null;
+    }
+    if (!resolved.has(name)) {
+      resolved.set(name, piecesToNodes(literal.quasi.quasis, literal.quasi.expressions, at, [...stack, name]));
+    }
+    return resolved.get(name);
+  }
+  for (const [name, literal] of literalsOf.literals) {
+    const at = { line: literal.loc?.start.line ?? 0, column: literal.loc?.start.column ?? 0 };
+    const nodes = resolveLiteral(name, at, []);
+    const id = hash(`${sourceName}:css:${name}`);
+    plan.edits.push({ start: literal.start, end: literal.end, code: `({ $fxStyle: ${JSON.stringify(id)} })` });
+    if (nodes) plan.literals.push({ id, name, css: printStyle(nodes, options.minify), nodes });
+  }
+  const scopeOf = /* @__PURE__ */ new Map();
+  const names = /* @__PURE__ */ new Map();
+  const named = /* @__PURE__ */ new Map();
+  const visit = (node, owners) => {
+    if (!node || typeof node !== "object") return;
+    if (node.type === "VariableDeclarator" && node.id.type === "Identifier" && node.init && FUNCTIONS.has(node.init.type)) {
+      named.set(node.init, node.id.name);
+    }
+    if ((node.type === "ClassDeclaration" || node.type === "ClassExpression") && node.id) {
+      for (const member of node.body.body) if (member.type === "ClassMethod") named.set(member, node.id.name);
+    }
+    if (node.type === "ClassDeclaration" || node.type === "ClassExpression") {
+      for (const member of node.body.body) if (member.type === "ClassMethod") classOf.set(member, node);
+      const shadow = staticMember(node, "shadow");
+      if (shadow?.value && !(shadow.value.type === "BooleanLiteral" && shadow.value.value === false)) {
+        plan.shadowClasses.set(node, { node, styles: staticMember(node, "styles"), indexes: [] });
+      }
+    }
+    if (node.type === "TaggedTemplateExpression" && node.tag.type === "Identifier" && tags.html.get(node.tag.name) === "html") {
+      const text = node.quasi.quasis.map((q) => q.value.raw).join("");
+      if (/<style[\s>]/.test(text)) {
+        const at = { line: node.loc?.start.line ?? 0, column: node.loc?.start.column ?? 0 };
+        const owner = owners[0];
+        if (!owner) plan.diagnostics.push({ ...at, message: "<style> has to be written inside a component." });
+        else {
+          const id = idFor(owner);
+          const shadow = shadowOf(owner);
+          plan.templateOwners.set(node.start, { id, component: functionName(owner, named) });
+          for (const block of templateBlocks(node.quasi)) compileBlock(block, block.scoped, owner, at);
+        }
+      }
+    }
+    const inner = FUNCTIONS.has(node.type) ? [...owners, node] : owners;
+    if (node.type === "JSXElement" && isStyle(node)) {
+      handle(node, owners);
+      return;
+    }
+    for (const key of Object.keys(node)) {
+      if (key === "loc" || key === "leadingComments" || key === "trailingComments" || key === "innerComments") continue;
+      const value = node[key];
+      if (Array.isArray(value)) for (const v of value) visit(v, inner);
+      else if (value && typeof value === "object" && "type" in value) visit(value, inner);
+    }
+  };
+  const handle = (node, owners) => {
+    const at = { line: node.loc?.start.line ?? 0, column: node.loc?.start.column ?? 0 };
+    const pieces = blockPieces(node);
+    if (pieces === null) {
+      plan.diagnostics.push({
+        ...at,
+        message: "<style> needs its CSS as one template literal, <style>{`...`}</style>: JSX reads a bare `{` as an expression."
+      });
+      return;
+    }
+    const owner = owners[0];
+    if (!owner) {
+      plan.diagnostics.push({ ...at, message: "<style> has to be written inside a component." });
+      return;
+    }
+    compileBlock(pieces, isScoped(node), owner, at);
+    plan.drop.add(node.start);
+  };
+  const compileBlock = (pieces, scoped, owner, at) => {
+    const component = functionName(owner, named);
+    const id = idFor(owner);
+    const processed = piecesToNodes(pieces.quasis, pieces.expressions, at, []);
+    if (!processed) return;
+    let nodes = processed;
+    const shadow = shadowOf(owner);
+    if (scoped && !shadow) {
+      if (!plan.scopes.some((s) => s.value === id)) plan.scopes.push({ start: owner.start, end: owner.end, value: id });
+      nodes = scopeNodes(nodes, id, (message) => plan.diagnostics.push({ ...at, message }));
+    }
+    const printed = module2 ? printStyleWithMap(nodes, options.minify, sourceName, module2, options.importedModules) : { css: printStyle(nodes, options.minify) };
+    plan.styles.push({ id, scoped: scoped && !shadow, component, ...printed, ...shadow ? { shadow: true } : {}, ...at });
+    if (shadow) shadow.indexes.push(plan.styles.length - 1);
+  };
+  function idFor(owner) {
+    let id = scopeOf.get(owner);
+    if (!id) {
+      const component = functionName(owner, named);
+      const seen = names.get(component) ?? 0;
+      names.set(component, seen + 1);
+      id = hash(`${sourceName}:${component}${seen ? ":" + seen : ""}`);
+      scopeOf.set(owner, id);
+    }
+    return id;
+  }
+  visit(program, []);
+  return plan;
+}
+function applyTemplateStyles(ir, t) {
+  const walk8 = (node) => {
+    const children = node.children;
+    if (children) {
+      for (let i = children.length - 1; i >= 0; i--) {
+        const child = children[i];
+        if (child.kind === "element" && child.tag === "style" && t.owner) children.splice(i, 1);
+        else walk8(child);
+      }
+    }
+    if (t.scope && node.kind === "element" && node.tag !== "style" && node.props && !node.props.some((p) => p.name === SCOPE_ATTR)) {
+      node.props.unshift({ name: SCOPE_ATTR, kind: "attr", literal: t.scope });
+    }
+  };
+  walk8(ir);
+}
+function staticMember(cls, name) {
+  return cls.body.body.find(
+    (m) => m.type === "ClassProperty" && m.static && (m.key.type === "Identifier" && m.key.name === name || m.key.type === "StringLiteral" && m.key.value === name)
+  );
+}
+var styleIds = {
+  block: (owner, index) => `${owner}.fx-${index}.css`,
+  inline: (owner, index) => `${owner}.fx-${index}.css?inline`,
+  literal: (owner, name) => `${owner}.fx-literal-${name}.css?inline`
+};
+function finishShadowStyles(plan, code, moduleId) {
+  const edits = [];
+  const imports = [];
+  let next = 0;
+  const importOf = (specifier) => {
+    const local = `__fxShadow${next++}`;
+    imports.push(`import ${local} from ${JSON.stringify(specifier)};
+`);
+    return local;
+  };
+  for (const shadow of plan.shadowClasses.values()) {
+    const blocks = shadow.indexes.map((i) => importOf(styleIds.inline(moduleId, i)));
+    let value;
+    const prop = shadow.styles;
+    if (prop?.value) {
+      const start = prop.value.start;
+      let text = code.slice(start, prop.value.end);
+      const replacements = [];
+      walkIdentifiers(prop.value, (id) => {
+        const local = plan.names?.literals.has(id.name) ? importOf(styleIds.literal(moduleId, id.name)) : plan.names?.imports.has(id.name) && !/\.css(\?|$)/.test(plan.names.imports.get(id.name).source) ? importOf(styleIds.literal(plan.names.imports.get(id.name).source, plan.names.imports.get(id.name).name)) : void 0;
+        if (local) replacements.push({ at: id.start - start, length: id.name.length, with: local });
+      });
+      for (const r of replacements.sort((a, b) => b.at - a.at)) text = text.slice(0, r.at) + r.with + text.slice(r.at + r.length);
+      value = text;
+    }
+    if (!blocks.length && value === void 0) continue;
+    if (prop?.value) {
+      const merged = blocks.length ? `[${value}, ${blocks.join(", ")}]` : value;
+      edits.push({ start: prop.value.start, end: prop.value.end, code: merged });
+    } else if (blocks.length) {
+      const open = shadow.node.body.start + 1;
+      edits.push({ start: open, end: open, code: ` static styles = [${blocks.join(", ")}];` });
+    }
+  }
+  if (imports.length) edits.push({ start: 0, end: 0, code: imports.join("") });
+  return edits;
+}
+function walkIdentifiers(node, visit) {
+  if (!node || typeof node !== "object") return;
+  if (node.type === "Identifier") return visit(node);
+  if (node.type === "MemberExpression") return walkIdentifiers(node.object, visit);
+  if (node.type === "ObjectProperty") return walkIdentifiers(node.value, visit);
+  for (const key of Object.keys(node)) {
+    if (key === "loc") continue;
+    const value = node[key];
+    if (Array.isArray(value)) for (const v of value) walkIdentifiers(v, visit);
+    else if (value && typeof value === "object" && "type" in value) walkIdentifiers(value, visit);
+  }
+}
+function isStyle(node) {
+  const name = node.openingElement.name;
+  return name.type === "JSXIdentifier" && name.name === "style";
+}
+function isScoped(node) {
+  return node.openingElement.attributes.some((a) => a.type === "JSXAttribute" && a.name.type === "JSXIdentifier" && a.name.name === "scoped");
+}
+function templateBlocks(quasi) {
+  const blocks = [];
+  let open = null;
+  quasi.quasis.forEach((q, i) => {
+    const raw = q.value.raw;
+    let from = 0;
+    while (from <= raw.length) {
+      if (!open) {
+        const tag = /<style\b([^>]*)>/g;
+        tag.lastIndex = from;
+        const m = tag.exec(raw);
+        if (!m) break;
+        open = { quasis: [], expressions: [], scoped: /\bscoped\b/.test(m[1]) };
+        from = m.index + m[0].length;
+      }
+      const close = raw.indexOf("</style", from);
+      open.quasis.push(slicePiece(q, raw, from, close === -1 ? raw.length : close));
+      if (close === -1) break;
+      blocks.push(open);
+      open = null;
+      from = close;
+    }
+    const expr = quasi.expressions[i];
+    if (open && expr) open.expressions.push(expr);
+  });
+  return blocks;
+}
+function slicePiece(q, raw, from, to) {
+  const text = raw.slice(from, to);
+  const start = q.loc?.start;
+  if (!start) return { type: "TemplateElement", value: { raw: text, cooked: text } };
+  const before = raw.slice(0, from).split("\n");
+  const line = start.line + before.length - 1;
+  const column = before.length > 1 ? before[before.length - 1].length : start.column + from;
+  return { type: "TemplateElement", value: { raw: text, cooked: text }, loc: { start: { line, column } } };
+}
+function blockPieces(node) {
+  const meaningful = node.children.filter((c) => !(c.type === "JSXText" && !c.value.trim()));
+  if (meaningful.length === 0) return { quasis: [], expressions: [] };
+  if (meaningful.length !== 1) return null;
+  const only = meaningful[0];
+  if (only.type !== "JSXExpressionContainer") return null;
+  const expr = only.expression;
+  if (expr.type === "StringLiteral") return { quasis: [{ type: "TemplateElement", value: { raw: expr.value, cooked: expr.value } }], expressions: [] };
+  if (expr.type === "TemplateLiteral") return { quasis: expr.quasis, expressions: expr.expressions };
+  return null;
+}
+function findLiterals(program, modules, plan, intrinsic) {
+  const literals = /* @__PURE__ */ new Map();
+  const imports = /* @__PURE__ */ new Map();
+  const tags = new Set(intrinsic);
+  for (const statement of program.body ?? []) {
+    if (statement.type !== "ImportDeclaration") continue;
+    const source = statement.source.value;
+    const specifiers = statement.specifiers;
+    for (const sp of specifiers) {
+      if (sp.type === "ImportSpecifier") imports.set(sp.local.name, { source, name: sp.imported.name ?? sp.imported.value });
+    }
+    if (!modules.includes(source)) continue;
+    const css = specifiers.find((sp) => sp.type === "ImportSpecifier" && (sp.imported.name ?? sp.imported.value) === "css");
+    if (!css) continue;
+    const local = css.local.name;
+    tags.add(local);
+    imports.delete(local);
+    plan.edits.push({ start: statement.start, end: statement.end, code: importWithout(statement, css) });
+  }
+  if (tags.size === 0) return { literals, imports };
+  const visit = (node) => {
+    if (!node || typeof node !== "object") return;
+    if (node.type === "VariableDeclarator" && node.id.type === "Identifier" && node.init?.type === "TaggedTemplateExpression" && node.init.tag.type === "Identifier" && tags.has(node.init.tag.name)) {
+      literals.set(node.id.name, node.init);
+    }
+    for (const key of Object.keys(node)) {
+      if (key === "loc") continue;
+      const value = node[key];
+      if (Array.isArray(value)) for (const v of value) visit(v);
+      else if (value && typeof value === "object" && "type" in value) visit(value);
+    }
+  };
+  visit(program);
+  return { literals, imports };
+}
+function importWithout(statement, removed) {
+  const rest = statement.specifiers.filter((sp) => sp !== removed);
+  const source = JSON.stringify(statement.source.value);
+  if (rest.length === 0) return "";
+  const def = rest.find((sp) => sp.type === "ImportDefaultSpecifier");
+  const ns = rest.find((sp) => sp.type === "ImportNamespaceSpecifier");
+  const named = rest.filter((sp) => sp.type === "ImportSpecifier").map((sp) => {
+    const imported = sp.imported.name ?? JSON.stringify(sp.imported.value);
+    return imported === sp.local.name ? imported : `${imported} as ${sp.local.name}`;
+  });
+  const parts = [def?.local.name, ns ? `* as ${ns.local.name}` : void 0, named.length ? `{ ${named.join(", ")} }` : void 0].filter(Boolean);
+  return `import ${parts.join(", ")} from ${source};`;
+}
+function functionName(fn, named) {
+  if ((fn.type === "FunctionDeclaration" || fn.type === "FunctionExpression") && fn.id) return fn.id.name;
+  return named.get(fn) ?? "anonymous";
+}
+function hash(text) {
+  let h = 2166136261;
+  for (let i = 0; i < text.length; i++) {
+    h ^= text.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return (h >>> 0).toString(36);
+}
+var OPAQUE = /(^|-)keyframes$|^font-face$|^property$|^counter-style$|^page$|^font-feature-values$/;
+function scopeNodes(nodes, id, warn = () => {
+}) {
+  return nodes.map((node) => {
+    if (node.kind === "rule") return { ...node, selector: scopeSelector(node.selector, id, warn) };
+    if (node.kind === "at-rule" && !OPAQUE.test(node.name)) return { ...node, nodes: scopeNodes(node.nodes, id, warn) };
+    return node;
+  });
+}
+function scopeSelector(selector, id, warn = () => {
+}) {
+  return splitTop(selector, ",").map((complex) => scopeComplex(complex.trim(), `[${SCOPE_ATTR}="${id}"]`, warn)).join(", ");
+}
+function scopeComplex(selector, attr, warn) {
+  if (/:host\b|::slotted\(/.test(selector)) {
+    warn(`\`${selector}\` only means something in a shadow root; in a light-DOM component it is left as written.`);
+    return selector;
+  }
+  const parts = compounds(selector);
+  const deep = parts.findIndex((p) => p.text.startsWith(":deep("));
+  if (deep !== -1) {
+    const inner = unwrap(parts[deep].text, ":deep(");
+    const before = parts.slice(0, deep);
+    if (before.length === 0) return `${attr} ${inner}`;
+    const scopedBefore = scopeAt(before, before.length - 1, attr);
+    return `${join(scopedBefore)} ${inner}`;
+  }
+  let target = -1;
+  for (let i = parts.length - 1; i >= 0; i--) {
+    if (!parts[i].text.startsWith(":global(")) {
+      target = i;
+      break;
+    }
+  }
+  const out = target === -1 ? parts : scopeAt(parts, target, attr);
+  return join(out.map((p) => p.text.startsWith(":global(") ? { ...p, text: unwrap(p.text, ":global(") } : p));
+}
+function scopeAt(parts, index, attr) {
+  return parts.map((p, i) => i === index ? { ...p, text: insertAttr(p.text, attr) } : p);
+}
+function insertAttr(compound, attr) {
+  let depth = 0;
+  let quote = "";
+  for (let i = 0; i < compound.length; i++) {
+    const c = compound[i];
+    if (quote) {
+      if (c === "\\") i++;
+      else if (c === quote) quote = "";
+      continue;
+    }
+    if (c === "\\") {
+      i++;
+      continue;
+    }
+    if (c === '"' || c === "'") quote = c;
+    else if (c === "(" || c === "[") depth++;
+    else if (c === ")" || c === "]") depth--;
+    else if (c === ":" && depth === 0 && i > 0) return compound.slice(0, i) + attr + compound.slice(i);
+  }
+  return compound + attr;
+}
+function compounds(selector) {
+  const out = [];
+  let depth = 0;
+  let quote = "";
+  let current = "";
+  let combinator = "";
+  const push = () => {
+    if (current.trim()) out.push({ combinator: out.length ? combinator || " " : "", text: current.trim() });
+    current = "";
+    combinator = "";
+  };
+  for (let i = 0; i < selector.length; i++) {
+    const c = selector[i];
+    if (quote) {
+      current += c;
+      if (c === "\\") current += selector[++i] ?? "";
+      else if (c === quote) quote = "";
+      continue;
+    }
+    if (c === "\\") {
+      current += c + (selector[++i] ?? "");
+      continue;
+    }
+    if (c === '"' || c === "'") quote = c;
+    if (c === "(" || c === "[") depth++;
+    if (c === ")" || c === "]") depth--;
+    if (depth === 0 && (c === ">" || c === "+" || c === "~")) {
+      push();
+      combinator = c;
+      continue;
+    }
+    if (depth === 0 && /\s/.test(c)) {
+      if (current.trim()) {
+        const keep = combinator;
+        push();
+        combinator = keep;
+      }
+      continue;
+    }
+    current += c;
+  }
+  push();
+  return out;
+}
+function join(parts) {
+  return parts.map((p, i) => i === 0 ? p.text : p.combinator === " " ? ` ${p.text}` : ` ${p.combinator} ${p.text}`).join("");
+}
+function unwrap(text, prefix) {
+  return text.slice(prefix.length, text.lastIndexOf(")")).trim() + text.slice(text.lastIndexOf(")") + 1);
+}
+function splitTop(selector, separator) {
+  const parts = [];
+  let depth = 0;
+  let quote = "";
+  let start = 0;
+  for (let i = 0; i < selector.length; i++) {
+    const c = selector[i];
+    if (quote) {
+      if (c === "\\") i++;
+      else if (c === quote) quote = "";
+    } else if (c === '"' || c === "'") quote = c;
+    else if (c === "\\") i++;
+    else if (c === "(" || c === "[") depth++;
+    else if (c === ")" || c === "]") depth--;
+    else if (c === separator && depth === 0) {
+      parts.push(selector.slice(start, i));
+      start = i + 1;
+    }
+  }
+  parts.push(selector.slice(start));
+  return parts.filter((p) => p.trim());
+}
+function shiftLoc(node, source, start) {
+  const loc = node.loc && node.loc.source === source ? { source, line: start.line + node.loc.line - 1, column: node.loc.line === 1 ? start.column + node.loc.column : node.loc.column } : node.loc;
+  if (node.kind === "rule" || node.kind === "at-rule") return { ...node, loc, nodes: node.nodes.map((n) => shiftLoc(n, source, start)) };
+  return { ...node, loc };
+}
+function keepLocIn(node, modules) {
+  const keep = node.loc !== void 0 && modules?.has(node.loc.source) === true;
+  const { loc, ...rest } = node;
+  const kept = keep ? { ...rest, loc } : rest;
+  if (kept.kind === "rule" || kept.kind === "at-rule") return { ...kept, nodes: kept.nodes.map((n) => keepLocIn(n, modules)) };
+  return kept;
+}
+function printStyleWithMap(nodes, minify, sourceName, module2, others) {
+  const sources = [module2];
+  const index = /* @__PURE__ */ new Map([[sourceName, 0]]);
+  const sourceOf = (name) => {
+    if (index.has(name)) return index.get(name);
+    const other = others?.get(name);
+    if (!other) return void 0;
+    index.set(name, sources.push(other) - 1);
+    return index.get(name);
+  };
+  const lines = [[]];
+  let css = "";
+  let column = 0;
+  const emit = (text) => {
+    for (const ch of text) {
+      css += ch;
+      if (ch === "\n") {
+        lines.push([]);
+        column = 0;
+      } else column++;
+    }
+  };
+  const mark = (loc) => {
+    const at = loc ? sourceOf(loc.source) : void 0;
+    if (loc && at !== void 0) lines[lines.length - 1].push([column, at, loc.line - 1, loc.column]);
+  };
+  const write = (node, depth) => {
+    const pad = minify ? "" : "  ".repeat(depth);
+    const nl = minify ? "" : "\n";
+    const sp = minify ? "" : " ";
+    emit(pad);
+    mark(node.loc);
+    if (node.kind === "declaration") {
+      emit(`${node.property}:${sp}${node.value}${node.important ? `${sp}!important` : ""};${nl}`);
+    } else if (node.kind === "raw") {
+      emit(`${node.text}${nl}`);
+    } else {
+      emit(`${node.kind === "rule" ? node.selector : `@${node.name}${node.params ? " " + node.params : ""}`}${sp}{${nl}`);
+      for (const child of node.nodes) write(child, depth + 1);
+      emit(`${pad}}${nl}`);
+    }
+  };
+  for (const node of nodes) write(node, 0);
+  return { css, map: { version: 3, sources: sources.map((s) => s.id), sourcesContent: sources.map((s) => s.code), names: [], mappings: (0, import_sourcemap_codec.encode)(lines) } };
+}
+function printStyle(nodes, minify = false) {
+  const out = [];
+  const write = (node, depth) => {
+    const pad = minify ? "" : "  ".repeat(depth);
+    const nl = minify ? "" : "\n";
+    const sp = minify ? "" : " ";
+    if (node.kind === "declaration") {
+      out.push(`${pad}${node.property}:${sp}${node.value}${node.important ? `${sp}!important` : ""};${nl}`);
+    } else if (node.kind === "raw") {
+      out.push(`${pad}${node.text}${nl}`);
+    } else {
+      const header = node.kind === "rule" ? node.selector : `@${node.name}${node.params ? " " + node.params : ""}`;
+      out.push(`${pad}${header}${sp}{${nl}`);
+      for (const child of node.nodes) write(child, depth + 1);
+      out.push(`${pad}}${nl}`);
+    }
+  };
+  for (const node of nodes) write(node, 0);
+  return out.join("");
+}
+
 // src/optimize/analyze-static.ts
 function propReason(prop) {
   switch (prop.kind) {
@@ -533,6 +1107,16 @@ var PRIMITIVE_MODULES = [
   "@fluixi/reactive/cached-resource",
   "@fluixi/core"
 ];
+var TAG_INTRINSICS = {
+  $html: { export: "html", module: "@fluixi/core" },
+  $svg: { export: "svg", module: "@fluixi/core" },
+  $css: { export: "css", module: "@fluixi/core" }
+};
+function tagIntrinsics(bound) {
+  const tags = /* @__PURE__ */ new Map();
+  for (const [name, tag] of Object.entries(TAG_INTRINSICS)) if (!bound.has(name)) tags.set(name, tag.export);
+  return tags;
+}
 var INTRINSIC_CALL = new RegExp(`\\$(?:${Object.keys(INTRINSICS).map((n) => n.slice(1)).join("|")})\\s*\\(`);
 function mayHaveIntrinsic(code) {
   return INTRINSIC_CALL.test(code);
@@ -1036,7 +1620,7 @@ function emitComponent(name, props, children, used, templates, at) {
   }
   let obj = `{ ${bodies.map(([name2, body]) => `get ${propKey(name2)}() { return ${body}; }`).join(", ")} }`;
   if (bodies.some(([, body]) => /\bthis\b/.test(body))) {
-    const thunks = bodies.map(([name2, body]) => `${JSON.stringify(name2)}: () => ${body}`);
+    const thunks = bodies.map(([name2, body]) => `${JSON.stringify(name2)}: () => (${body})`);
     const getters = bodies.map(([name2]) => `get ${propKey(name2)}() { return _$t[${JSON.stringify(name2)}](); }`);
     obj = `((_$t) => ({ ${getters.join(", ")} }))({ ${thunks.join(", ")} })`;
   }
@@ -1235,6 +1819,271 @@ function cleanTemplateText(value) {
   return out;
 }
 
+// src/lower/entities.ts
+var NAMED = {
+  quot: 34,
+  amp: 38,
+  apos: 39,
+  lt: 60,
+  gt: 62,
+  nbsp: 160,
+  iexcl: 161,
+  cent: 162,
+  pound: 163,
+  curren: 164,
+  yen: 165,
+  brvbar: 166,
+  sect: 167,
+  uml: 168,
+  copy: 169,
+  ordf: 170,
+  laquo: 171,
+  not: 172,
+  shy: 173,
+  reg: 174,
+  macr: 175,
+  deg: 176,
+  plusmn: 177,
+  sup2: 178,
+  sup3: 179,
+  acute: 180,
+  micro: 181,
+  para: 182,
+  middot: 183,
+  cedil: 184,
+  sup1: 185,
+  ordm: 186,
+  raquo: 187,
+  frac14: 188,
+  frac12: 189,
+  frac34: 190,
+  iquest: 191,
+  Agrave: 192,
+  Aacute: 193,
+  Acirc: 194,
+  Atilde: 195,
+  Auml: 196,
+  Aring: 197,
+  AElig: 198,
+  Ccedil: 199,
+  Egrave: 200,
+  Eacute: 201,
+  Ecirc: 202,
+  Euml: 203,
+  Igrave: 204,
+  Iacute: 205,
+  Icirc: 206,
+  Iuml: 207,
+  ETH: 208,
+  Ntilde: 209,
+  Ograve: 210,
+  Oacute: 211,
+  Ocirc: 212,
+  Otilde: 213,
+  Ouml: 214,
+  times: 215,
+  Oslash: 216,
+  Ugrave: 217,
+  Uacute: 218,
+  Ucirc: 219,
+  Uuml: 220,
+  Yacute: 221,
+  THORN: 222,
+  szlig: 223,
+  agrave: 224,
+  aacute: 225,
+  acirc: 226,
+  atilde: 227,
+  auml: 228,
+  aring: 229,
+  aelig: 230,
+  ccedil: 231,
+  egrave: 232,
+  eacute: 233,
+  ecirc: 234,
+  euml: 235,
+  igrave: 236,
+  iacute: 237,
+  icirc: 238,
+  iuml: 239,
+  eth: 240,
+  ntilde: 241,
+  ograve: 242,
+  oacute: 243,
+  ocirc: 244,
+  otilde: 245,
+  ouml: 246,
+  divide: 247,
+  oslash: 248,
+  ugrave: 249,
+  uacute: 250,
+  ucirc: 251,
+  uuml: 252,
+  yacute: 253,
+  thorn: 254,
+  yuml: 255,
+  OElig: 338,
+  oelig: 339,
+  Scaron: 352,
+  scaron: 353,
+  Yuml: 376,
+  fnof: 402,
+  circ: 710,
+  tilde: 732,
+  Alpha: 913,
+  Beta: 914,
+  Gamma: 915,
+  Delta: 916,
+  Epsilon: 917,
+  Zeta: 918,
+  Eta: 919,
+  Theta: 920,
+  Iota: 921,
+  Kappa: 922,
+  Lambda: 923,
+  Mu: 924,
+  Nu: 925,
+  Xi: 926,
+  Omicron: 927,
+  Pi: 928,
+  Rho: 929,
+  Sigma: 931,
+  Tau: 932,
+  Upsilon: 933,
+  Phi: 934,
+  Chi: 935,
+  Psi: 936,
+  Omega: 937,
+  alpha: 945,
+  beta: 946,
+  gamma: 947,
+  delta: 948,
+  epsilon: 949,
+  zeta: 950,
+  eta: 951,
+  theta: 952,
+  iota: 953,
+  kappa: 954,
+  lambda: 955,
+  mu: 956,
+  nu: 957,
+  xi: 958,
+  omicron: 959,
+  pi: 960,
+  rho: 961,
+  sigmaf: 962,
+  sigma: 963,
+  tau: 964,
+  upsilon: 965,
+  phi: 966,
+  chi: 967,
+  psi: 968,
+  omega: 969,
+  thetasym: 977,
+  upsih: 978,
+  piv: 982,
+  ensp: 8194,
+  emsp: 8195,
+  thinsp: 8201,
+  zwnj: 8204,
+  zwj: 8205,
+  lrm: 8206,
+  rlm: 8207,
+  ndash: 8211,
+  mdash: 8212,
+  lsquo: 8216,
+  rsquo: 8217,
+  sbquo: 8218,
+  ldquo: 8220,
+  rdquo: 8221,
+  bdquo: 8222,
+  dagger: 8224,
+  Dagger: 8225,
+  bull: 8226,
+  hellip: 8230,
+  permil: 8240,
+  prime: 8242,
+  Prime: 8243,
+  lsaquo: 8249,
+  rsaquo: 8250,
+  oline: 8254,
+  frasl: 8260,
+  euro: 8364,
+  image: 8465,
+  weierp: 8472,
+  real: 8476,
+  trade: 8482,
+  alefsym: 8501,
+  larr: 8592,
+  uarr: 8593,
+  rarr: 8594,
+  darr: 8595,
+  harr: 8596,
+  crarr: 8629,
+  lArr: 8656,
+  uArr: 8657,
+  rArr: 8658,
+  dArr: 8659,
+  hArr: 8660,
+  forall: 8704,
+  part: 8706,
+  exist: 8707,
+  empty: 8709,
+  nabla: 8711,
+  isin: 8712,
+  notin: 8713,
+  ni: 8715,
+  prod: 8719,
+  sum: 8721,
+  minus: 8722,
+  lowast: 8727,
+  radic: 8730,
+  prop: 8733,
+  infin: 8734,
+  ang: 8736,
+  and: 8743,
+  or: 8744,
+  cap: 8745,
+  cup: 8746,
+  int: 8747,
+  there4: 8756,
+  sim: 8764,
+  cong: 8773,
+  asymp: 8776,
+  ne: 8800,
+  equiv: 8801,
+  le: 8804,
+  ge: 8805,
+  sub: 8834,
+  sup: 8835,
+  nsub: 8836,
+  sube: 8838,
+  supe: 8839,
+  oplus: 8853,
+  otimes: 8855,
+  perp: 8869,
+  sdot: 8901,
+  lceil: 8968,
+  rceil: 8969,
+  lfloor: 8970,
+  rfloor: 8971,
+  lang: 9001,
+  rang: 9002,
+  loz: 9674,
+  spades: 9824,
+  clubs: 9827,
+  hearts: 9829,
+  diams: 9830
+};
+var REFERENCE = /&(?:#[xX]([0-9a-fA-F]{1,6})|#([0-9]{1,7})|([a-zA-Z][a-zA-Z0-9]{1,31}));/g;
+function decodeEntities(value) {
+  if (!value.includes("&")) return value;
+  return value.replace(REFERENCE, (match, hex, dec, name) => {
+    const code = hex ? parseInt(hex, 16) : dec ? parseInt(dec, 10) : Object.prototype.hasOwnProperty.call(NAMED, name) ? NAMED[name] : void 0;
+    return code !== void 0 && code <= 1114111 ? String.fromCodePoint(code) : match;
+  });
+}
+
 // src/lower/template.ts
 var DELEGATED = /* @__PURE__ */ new Set([
   "click",
@@ -1321,7 +2170,7 @@ var Lowerer = class {
     switch (node.kind) {
       case "Text": {
         if (node.raw) return { kind: "text", value: node.value };
-        const cleaned = cleanTemplateText(node.value);
+        const cleaned = decodeEntities(cleanTemplateText(node.value));
         return cleaned ? { kind: "text", value: cleaned } : null;
       }
       case "Comment":
@@ -1357,7 +2206,7 @@ var Lowerer = class {
       kind: "element",
       tag: el.tag,
       svg: el.namespace === "svg",
-      props: this.lowerAttributes(el.attributes),
+      props: this.lowerAttributes(el.attributes, true),
       children,
       static: false,
       ...at ? { at } : {}
@@ -1470,13 +2319,22 @@ var Lowerer = class {
     return clone.kind === "Element" ? this.lowerElement(clone) : this.lowerComponent(clone);
   }
   // --- attributes ---------------------------------------------------------
-  lowerAttributes(attrs) {
+  /**
+   * `element`: a DOM element, where each class:/style: value that moves is its own accessor.
+   * A component gets the object as before, rebuilt whole when any value moves.
+   */
+  lowerAttributes(attrs, element = false) {
+    let anyReactive = false;
+    const entry = (name, h) => {
+      anyReactive ||= h.reactive;
+      if (!element || !h.reactive) return `${JSON.stringify(name)}: ${h.code}`;
+      const accessor = `() => ${paren(h.code, "arrowBody")}`;
+      return `${JSON.stringify(name)}: ${h.at ? markHole(accessor, h.at.line, h.at.column) : accessor}`;
+    };
     const props = [];
     const classEntries = [];
-    let classReactive = false;
     let classAt;
     const styleEntries = [];
-    let styleReactive = false;
     let styleAt;
     const usePairs = [];
     for (const a of attrs) {
@@ -1516,15 +2374,13 @@ var Lowerer = class {
           break;
         case "ClassDirective": {
           const h = this.hole(a.hole);
-          classEntries.push(`${JSON.stringify(a.name)}: ${h.code}`);
-          classReactive = classReactive || h.reactive;
+          classEntries.push(entry(a.name, h));
           classAt ??= h.at;
           break;
         }
         case "StyleDirective": {
           const h = this.hole(a.hole);
-          styleEntries.push(`${JSON.stringify(a.name)}: ${h.code}`);
-          styleReactive = styleReactive || h.reactive;
+          styleEntries.push(entry(a.name, h));
           styleAt ??= h.at;
           break;
         }
@@ -1544,18 +2400,19 @@ var Lowerer = class {
         name: "classList",
         kind: "attr",
         expr: `{ ${classEntries.join(", ")} }`,
-        reactive: classReactive,
+        reactive: !element && anyReactive,
         ...classAt ? { at: classAt } : {}
       });
     }
     if (styleEntries.length > 0) {
-      props.push({
-        name: "style",
-        kind: "attr",
-        expr: `{ ${styleEntries.join(", ")} }`,
-        reactive: styleReactive,
-        ...styleAt ? { at: styleAt } : {}
-      });
+      const entries = `{ ${styleEntries.join(", ")} }`;
+      const base = props.findIndex((p) => p.name === "style");
+      if (base === -1) props.push({ name: "style", kind: "attr", expr: entries, reactive: !element && anyReactive, ...styleAt ? { at: styleAt } : {} });
+      else {
+        const prop = props[base];
+        const value = prop.expr === void 0 ? JSON.stringify(prop.literal) : prop.reactive ? `() => ${paren(prop.expr, "arrowBody")}` : prop.expr;
+        props[base] = { name: "style", kind: "attr", expr: `[${value}, ${entries}]`, reactive: false, ...prop.at ? { at: prop.at } : {} };
+      }
     }
     if (usePairs.length > 0) {
       props.push({ name: "use", kind: "attr", expr: `[${usePairs.join(", ")}]` });
@@ -1644,7 +2501,7 @@ var Lowerer = class {
       return base;
     }
     if (v.kind === "static") {
-      base.literal = v.value;
+      base.literal = decodeEntities(v.value);
       return base;
     }
     if (v.kind === "hole") {
@@ -1657,7 +2514,7 @@ var Lowerer = class {
     let reactive = false;
     let at;
     const body = v.parts.map((p) => {
-      if ("text" in p) return escapeTemplate(p.text);
+      if ("text" in p) return escapeTemplate(decodeEntities(p.text));
       const h = this.hole(p.hole);
       reactive = reactive || h.reactive;
       at ??= h.at;
@@ -1682,6 +2539,7 @@ function compilePieces(pieces, holes, options = {}) {
     ...options.sourceFile ? { sourceFile: options.sourceFile } : {},
     ...options.positionAt ? { positionAt: options.positionAt } : {}
   });
+  if (options.templateStyles) applyTemplateStyles(ir, options.templateStyles);
   analyzeStatic(ir);
   resolveComponentSources(ir, {
     resolver: createComponentResolver(options.resolve ?? []),
@@ -1880,9 +2738,12 @@ function attrExprCode(attr, ctx) {
   }
   return null;
 }
-function buildProps(attrs, ctx) {
+function buildProps(attrs, ctx, element = false) {
   const props = [];
   const usePairs = [];
+  const classEntries = [];
+  const styleEntries = [];
+  let styleAt;
   for (const a of attrs) {
     if (a.type === "JSXSpreadAttribute") {
       props.push({ name: "", kind: "spread", expr: ctx.code(a.argument) });
@@ -1898,6 +2759,27 @@ function buildProps(attrs, ctx) {
       usePairs.push(opts != null ? `[${dir}, () => ${paren(opts, "arrowBody")}]` : `[${dir}]`);
       continue;
     }
+    if (element && (ns === "class" || ns === "style")) {
+      const key = JSON.stringify(a.name.name.name);
+      const v = a.value;
+      let value;
+      if (v == null) value = "true";
+      else if (isString(v)) value = JSON.stringify(literalOf(v));
+      else if (v.type === "JSXExpressionContainer" && v.expression?.type !== "JSXEmptyExpression") {
+        value = keyValue(v.expression, ctx);
+        if (ns === "style") styleAt ??= posOf(v.expression, ctx);
+      } else continue;
+      (ns === "class" ? classEntries : styleEntries).push(`${key}: ${value}`);
+      continue;
+    }
+    if (element && a.name.type === "JSXIdentifier" && a.name.name === "style" && a.value?.type === "JSXExpressionContainer") {
+      const entries = objectEntries(a.value.expression, ctx);
+      if (entries) {
+        styleEntries.unshift(...entries);
+        styleAt = posOf(a.value.expression, ctx);
+        continue;
+      }
+    }
     if (ns === "oncapture") {
       const evt = a.name.name.name.toLowerCase();
       const h = attrExprCode(a, ctx) ?? "undefined";
@@ -1906,9 +2788,37 @@ function buildProps(attrs, ctx) {
     }
     props.push(buildAttr(a, ctx));
   }
+  if (classEntries.length > 0) props.push({ name: "classList", kind: "attr", expr: `{ ${classEntries.join(", ")} }`, reactive: false });
+  if (styleEntries.length > 0) {
+    const entries = `{ ${styleEntries.join(", ")} }`;
+    const base = props.findIndex((p) => p.name === "style" && p.kind === "attr");
+    if (base === -1) props.push({ name: "style", kind: "attr", expr: entries, reactive: false, ...styleAt ? { at: styleAt } : {} });
+    else {
+      const prop = props[base];
+      const value = prop.literal !== void 0 ? JSON.stringify(prop.literal) : prop.reactive ? `() => ${paren(prop.expr, "arrowBody")}` : prop.expr;
+      props[base] = { name: "style", kind: "attr", expr: `[${value}, ${entries}]`, reactive: false, ...prop.at ? { at: prop.at } : {} };
+    }
+  }
   if (usePairs.length > 0) props.push({ name: "use", kind: "attr", expr: `[${usePairs.join(", ")}]` });
   return props;
 }
+function keyValue(expr, ctx) {
+  const code = ctx.code(expr);
+  if (!isReactive(expr)) return code;
+  const accessor = `() => ${paren(code, "arrowBody")}`;
+  const at = posOf(expr, ctx);
+  return at ? markHole(accessor, at.line, at.column) : accessor;
+}
+function objectEntries(expr, ctx) {
+  if (expr?.type !== "ObjectExpression") return null;
+  const entries = [];
+  for (const p of expr.properties) {
+    if (p.type !== "ObjectProperty") return null;
+    const key = p.computed ? `[${ctx.code(p.key)}]` : p.key.type === "Identifier" ? JSON.stringify(p.key.name) : JSON.stringify(String(p.key.value));
+    entries.push(`${key}: ${keyValue(p.value, ctx)}`);
+  }
+  return entries;
+}
 function buildChildren(children, ctx) {
   const out = [];
   for (let i = 0; i < children.length; i++) {
@@ -1936,6 +2846,7 @@ function buildChildren(children, ctx) {
         });
       }
     } else if (child.type === "JSXElement" || child.type === "JSXFragment") {
+      if (ctx.dropStyles?.has(child.start)) continue;
       out.push(buildNode(child, ctx));
     } else if (child.type === "JSXSpreadChild") {
       out.push({ kind: "expr", code: ctx.code(child.expression), reactive: false });
@@ -2005,13 +2916,17 @@ function buildElement(node, ctx, handled) {
   const children = each ? [each] : buildChildren(node.children, ctx);
   if (tag === CONTAINER2) return children.length === 1 ? children[0] : { kind: "fragment", children };
   const at = ctx.sourceFile && node.loc?.start ? { file: ctx.sourceFile, line: node.loc.start.line, column: node.loc.start.column } : void 0;
-  return { kind: "element", tag, svg: SVG_TAGS.has(tag), props: buildProps(attributes, ctx), children, static: false, ...at ? { at } : {} };
+  const props = buildProps(attributes, ctx, true);
+  const scope = ctx.scopes?.find((s) => node.start >= s.start && node.end <= s.end);
+  if (scope) props.unshift({ name: "data-fx-s", kind: "attr", literal: scope.value });
+  return { kind: "element", tag, svg: SVG_TAGS.has(tag), props, children, static: false, ...at ? { at } : {} };
 }
 function buildNode(node, ctx) {
   if (node.type === "JSXFragment") {
     return { kind: "fragment", children: buildChildren(node.children, ctx) };
   }
   if (directive(node, "if")) return buildIf(node, null, ctx);
+  if (ctx.dropStyles?.has(node.start)) return { kind: "fragment", children: [] };
   const { tag, component } = tagInfo(node.openingElement.name, ctx);
   if (!component) return buildElement(node, ctx, []);
   const props = buildProps(node.openingElement.attributes, ctx);
@@ -2517,8 +3432,8 @@ function isJsxRoot(node, parent, key) {
   if (!isJsx(node)) return false;
   return !(parent && isJsx(parent) && key === "children");
 }
-function isTemplateTag(node, litTag) {
-  return node.type === "TaggedTemplateExpression" && node.tag?.type === "Identifier" && (node.tag.name === litTag || node.tag.name === "svg");
+function isTemplateTag(node, tags) {
+  return node.type === "TaggedTemplateExpression" && node.tag?.type === "Identifier" && tags.has(node.tag.name);
 }
 function outermost(list) {
   return list.filter(
@@ -2666,22 +3581,28 @@ function transformTemplates(code, id, options = {}) {
   const wantsIntrinsics = options.intrinsics !== false && mayHaveIntrinsic(code);
   const wantsSources = options.sourceLocations === true && mayHaveSourceMarks(code);
   const sourceName = relativeToRoot(id, options.sourceRoot);
-  if (!mayHaveTemplate && !(wantsJsx && code.includes("<")) && !wantsIntrinsics && !wantsSources) return null;
+  const wantsStyles = options.styles !== void 0 && (code.includes("<style") || code.includes("css`"));
+  if (!mayHaveTemplate && !(wantsJsx && code.includes("<")) && !wantsIntrinsics && !wantsSources && !wantsStyles) return null;
   const ast = (0, import_parser2.parse)(code, {
     sourceType: "module",
     plugins: ["jsx", "typescript"],
     errorRecovery: true
   });
+  const intrinsicTags = options.intrinsics === false ? /* @__PURE__ */ new Map() : tagIntrinsics(moduleBindings(ast.program));
+  const templateTags = /* @__PURE__ */ new Map([[litTag, "html"], ["svg", "svg"]]);
+  for (const [name, tag] of intrinsicTags) if (tag !== "css") templateTags.set(name, tag);
+  const cssTags = [...intrinsicTags].filter(([, tag]) => tag === "css").map(([name]) => name);
   const found = [];
   walk7(ast.program, (n, parent, key) => {
-    if (wantsLit && isTemplateTag(n, litTag)) found.push(n);
+    if (wantsLit && isTemplateTag(n, templateTags)) found.push(n);
     else if (wantsJsx && isJsxRoot(n, parent, key)) found.push(n);
   });
   const props = options.propsDestructure === false ? { edits: [], diagnostics: [], used: /* @__PURE__ */ new Set() } : collectPropsEdits(ast.program, code, { runtimeModule: options.runtimeModule });
   const intrinsics = options.intrinsics === false ? { edits: [], diagnostics: [], imports: /* @__PURE__ */ new Map() } : collectIntrinsicEdits(ast.program);
   if (intrinsics.edits.length) avoidBindingClashes(ast.program, intrinsics, moduleBindings(ast.program));
   const sources = options.sourceLocations === true ? collectSourceEdits(ast.program, sourceName) : { edits: [], marked: 0 };
-  const silent = found.length === 0 && props.edits.length === 0 && sources.edits.length === 0 && intrinsics.edits.length === 0 && intrinsics.diagnostics.length === 0 && props.diagnostics.length === 0;
+  const styles = wantsStyles ? collectStyles(ast.program, sourceName, options.styles, { html: templateTags, css: cssTags }, { id, code }) : void 0;
+  const silent = found.length === 0 && props.edits.length === 0 && sources.edits.length === 0 && intrinsics.edits.length === 0 && intrinsics.diagnostics.length === 0 && props.diagnostics.length === 0 && !styles?.edits.length && !styles?.diagnostics.length;
   if (silent) return null;
   found.sort((a, b) => b.start - a.start || a.end - b.end);
   const used = new Set(props.used);
@@ -2695,20 +3616,32 @@ function transformTemplates(code, id, options = {}) {
     declared: declaredNames(ast.program)
   };
   const hoisted = /* @__PURE__ */ new Map();
-  const edits = [...props.edits, ...intrinsics.edits, ...sources.edits];
+  const edits = [...props.edits, ...intrinsics.edits, ...sources.edits, ...styles?.edits ?? []];
   for (const node of found) {
     const nested = found.some(
       (o) => o !== node && o.start <= node.start && o.end >= node.end && o.end - o.start > node.end - node.start
     );
     if (isJsx(node)) {
-      edits.push({ start: node.start, end: node.end, code: compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceName) });
+      edits.push({ start: node.start, end: node.end, code: compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceName, styles) });
       continue;
     }
     const holes = node.quasi.expressions.map(
       (e) => bindHole(code, e, edits, options.sourceLocations === true)
     );
+    const scope = styles?.scopes.find((s) => node.start >= s.start && node.end <= s.end)?.value;
+    const owner = styles?.templateOwners.get(node.start);
+    const templateStyles = options.styles && styles && (scope || owner) ? {
+      options: options.styles,
+      ...scope ? { scope } : {},
+      ...owner ? { owner } : {},
+      line: node.loc?.start.line ?? 0,
+      column: node.loc?.start.column ?? 0,
+      styles: styles.styles,
+      diagnostics: styles.diagnostics
+    } : void 0;
     const result = compilePieces(toPieces(node), holes, {
       ...options,
+      ...templateStyles ? { templateStyles } : {},
       hoistTemplates: true,
       // A tag inside a template gets the same mark a JSX tag does. Without one, the nodes it
       // makes are the only ones in the module carrying no mark, and they take whichever was
@@ -2717,12 +3650,13 @@ function transformTemplates(code, id, options = {}) {
       // Same defaults as the plugin, so moving a build over is not a rendering change.
       templateClone: options.templateClone ?? true,
       partialTemplates: nested ? false : options.partialTemplates ?? true,
-      svg: node.tag.name === "svg"
+      svg: templateTags.get(node.tag.name) === "svg"
     });
     for (const symbol of result.imports) used.add(symbol);
     collectNeeds(result.ir, needs);
     edits.push({ start: node.start, end: node.end, code: adoptTemplates(result.code, result.templates, hoisted) });
   }
+  if (styles && options.styles) edits.push(...finishShadowStyles(styles, code, id));
   const out = new import_magic_string2.default(code);
   for (const e of outermost(edits)) {
     if (e.start === e.end) out.appendLeft(e.start, e.code);
@@ -2780,13 +3714,19 @@ function transformTemplates(code, id, options = {}) {
     ...loadDiagnostics.length ? { loadDiagnostics } : {},
     ...unresolvedDiagnostics.length ? { unresolvedDiagnostics } : {},
     ...props.diagnostics.length ? { propsDiagnostics: props.diagnostics } : {},
-    ...intrinsics.diagnostics.length ? { intrinsicDiagnostics: intrinsics.diagnostics } : {}
+    ...intrinsics.diagnostics.length ? { intrinsicDiagnostics: intrinsics.diagnostics } : {},
+    ...styles?.styles.length ? { styles: styles.styles } : {},
+    ...styles?.diagnostics.length ? { styleDiagnostics: styles.diagnostics } : {},
+    ...styles?.literals.length ? { styleLiterals: styles.literals } : {},
+    ...styles?.references.length ? { styleReferences: styles.references } : {}
   };
 }
-function compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceFile) {
+function compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceFile, styles) {
   const ir = buildJsxIR(node, {
     code: (n) => slice(code, n.start, n.end, edits),
     used,
+    ...styles?.scopes.length ? { scopes: styles.scopes } : {},
+    ...styles?.drop.size ? { dropStyles: styles.drop } : {},
     ...options.sourceLocations === true && sourceFile ? { sourceFile } : {}
   });
   analyzeStatic(ir);