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

package/dist/integrations.cjs

@@ -1,4 +1,4 @@
-/*! @fluixi/compiler v1.0.0-alpha.93 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/compiler v1.0.0-alpha.95 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -136,6 +136,11 @@ var init_builtins = __esm({
 });
 
 // src/analyze/intrinsics.ts
+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;
+}
 function mayHaveIntrinsic(code) {
   return INTRINSIC_CALL.test(code);
 }
@@ -145,7 +150,7 @@ function isIntrinsicName(name) {
 function isPrimitiveModule(source) {
   return PRIMITIVE_MODULES.includes(source);
 }
-var REACTIVE_MODULE, INTRINSICS, RUNTIME_PRIMITIVES, PRIMITIVE_MODULES, INTRINSIC_CALL;
+var REACTIVE_MODULE, INTRINSICS, RUNTIME_PRIMITIVES, PRIMITIVE_MODULES, TAG_INTRINSICS, INTRINSIC_CALL;
 var init_intrinsics = __esm({
   "src/analyze/intrinsics.ts"() {
     "use strict";
@@ -208,10 +213,595 @@ var init_intrinsics = __esm({
       "@fluixi/reactive/cached-resource",
       "@fluixi/core"
     ];
+    TAG_INTRINSICS = {
+      $html: { export: "html", module: "@fluixi/core" },
+      $svg: { export: "svg", module: "@fluixi/core" },
+      $css: { export: "css", module: "@fluixi/core" }
+    };
     INTRINSIC_CALL = new RegExp(`\\$(?:${Object.keys(INTRINSICS).map((n) => n.slice(1)).join("|")})\\s*\\(`);
   }
 });
 
+// src/transform/styles.ts
+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, t4) {
+  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" && t4.owner) children.splice(i, 1);
+        else walk8(child);
+      }
+    }
+    if (t4.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: t4.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)
+  );
+}
+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);
+}
+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("");
+}
+var import_sourcemap_codec, SCOPE_ATTR, FUNCTIONS, styleIds, OPAQUE;
+var init_styles = __esm({
+  "src/transform/styles.ts"() {
+    "use strict";
+    import_sourcemap_codec = require("@jridgewell/sourcemap-codec");
+    SCOPE_ATTR = "data-fx-s";
+    FUNCTIONS = /* @__PURE__ */ new Set(["FunctionDeclaration", "FunctionExpression", "ArrowFunctionExpression", "ObjectMethod", "ClassMethod"]);
+    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`
+    };
+    OPAQUE = /(^|-)keyframes$|^font-face$|^property$|^counter-style$|^page$|^font-feature-values$/;
+  }
+});
+
 // src/resolve/load-directive.ts
 function isLoadDirective(name) {
   return name.startsWith("load:");
@@ -1079,7 +1669,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(", ")} })`;
   }
@@ -1244,6 +1834,277 @@ var init_text = __esm({
   }
 });
 
+// src/lower/entities.ts
+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;
+  });
+}
+var NAMED, REFERENCE;
+var init_entities = __esm({
+  "src/lower/entities.ts"() {
+    "use strict";
+    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
+    };
+    REFERENCE = /&(?:#[xX]([0-9a-fA-F]{1,6})|#([0-9]{1,7})|([a-zA-Z][a-zA-Z0-9]{1,31}));/g;
+  }
+});
+
 // src/lower/template.ts
 function escapeTemplate(s) {
   return s.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
@@ -1263,7 +2124,9 @@ var init_template = __esm({
     init_load_directive();
     init_imperative();
     init_text();
+    init_entities();
     init_paren();
+    init_source_locations();
     DELEGATED = /* @__PURE__ */ new Set([
       "click",
       "dblclick",
@@ -1343,7 +2206,7 @@ var init_template = __esm({
         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":
@@ -1379,7 +2242,7 @@ var init_template = __esm({
           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 } : {}
@@ -1492,13 +2355,22 @@ var init_template = __esm({
         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) {
@@ -1538,15 +2410,13 @@ var init_template = __esm({
               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;
             }
@@ -1566,18 +2436,19 @@ var init_template = __esm({
             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(", ")}]` });
@@ -1666,7 +2537,7 @@ var init_template = __esm({
           return base;
         }
         if (v.kind === "static") {
-          base.literal = v.value;
+          base.literal = decodeEntities(v.value);
           return base;
         }
         if (v.kind === "hole") {
@@ -1679,7 +2550,7 @@ var init_template = __esm({
         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;
@@ -1990,9 +2861,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) });
@@ -2008,6 +2882,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";
@@ -2016,9 +2911,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++) {
@@ -2046,6 +2969,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 });
@@ -2115,13 +3039,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);
@@ -2145,6 +3073,7 @@ var init_jsx = __esm({
     init_analyze_static();
     init_text();
     init_paren();
+    init_source_locations();
     init_imperative();
     SVG_TAGS = /* @__PURE__ */ new Set([
       "svg",
@@ -2801,6 +3730,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 ?? []),
@@ -2823,6 +3753,7 @@ function compilePieces(pieces, holes, options = {}) {
 var init_compile_template = __esm({
   "src/lower/compile-template.ts"() {
     "use strict";
+    init_styles();
     init_analyze_static();
     init_collapse_strategies();
     init_imperative();
@@ -3355,8 +4286,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(
@@ -3504,22 +4435,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);
@@ -3533,20 +4470,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) => bindHole2(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
@@ -3555,12 +4504,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: adoptTemplates2(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);
@@ -3618,13 +4568,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);
@@ -3710,6 +4666,7 @@ var init_templates = __esm({
     init_props();
     init_intrinsics2();
     init_source_locations();
+    init_styles();
     init_intrinsics();
     init_reactive_bindings();
     init_builtins();
@@ -3752,14 +4709,14 @@ var init_transform = __esm({
 });
 
 // src/transform/server-fn-id.ts
-function hash(s) {
+function hash2(s) {
   let h = 5381;
   for (let i = 0; i < s.length; i++) h = h * 33 ^ s.charCodeAt(i);
   return (h >>> 0).toString(16);
 }
 function serverFnId(filename, root, index) {
   const rel = (filename || "unknown").replace(root ? root + "/" : "", "");
-  return `${hash(rel)}:${index}`;
+  return `${hash2(rel)}:${index}`;
 }
 var init_server_fn_id = __esm({
   "src/transform/server-fn-id.ts"() {
@@ -4015,7 +4972,7 @@ function componentGlobals(rules, options = {}) {
       resolved.set(name, target);
     }
   }
-  const usableIntrinsics = intrinsics ? Object.entries(INTRINSICS).filter(([, i]) => {
+  const usableIntrinsics = intrinsics ? Object.entries({ ...INTRINSICS, ...TAG_INTRINSICS }).filter(([, i]) => {
     const pkg = packageOf(i.module);
     return !available || !pkg || available.has(pkg);
   }) : [];
@@ -4078,11 +5035,11 @@ function coveredByInclude(root, target) {
   }
   if (config.extends !== void 0) return void 0;
   if (!Array.isArray(config.include)) return true;
-  const relative2 = relativePosix(root, target);
+  const relative3 = relativePosix(root, target);
   return config.include.some((entry) => {
     if (typeof entry !== "string") return false;
     const pattern = entry.replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*\*\//g, "(?:.*/)?").replace(/\*/g, "[^/]*");
-    return new RegExp(`^${pattern}(?:/.*)?$`).test(relative2);
+    return new RegExp(`^${pattern}(?:/.*)?$`).test(relative3);
   });
 }
 function relativePosix(from, to) {
@@ -4168,13 +5125,203 @@ function writeComponentGlobals(options, root) {
 }
 function warnIfUnreachable(root, target) {
   if (coveredByInclude(root, target) !== false) return void 0;
-  const relative2 = relativePosix(root, target);
-  return `[fluixi] ${relative2} is not covered by "include" in tsconfig.json, so TypeScript will ignore it and every resolved component stays "Cannot find name". Add "${relative2}" to "include".`;
+  const relative3 = relativePosix(root, target);
+  return `[fluixi] ${relative3} is not covered by "include" in tsconfig.json, so TypeScript will ignore it and every resolved component stays "Cannot find name". Add "${relative3}" to "include".`;
 }
 
-// src/integrations.ts
+// src/vite-styles.ts
 var import_node_fs2 = require("node:fs");
 var import_node_path2 = require("node:path");
+init_styles();
+var STYLE_ID = /\.fx-(\d+)\.css(?:\?inline)?$/;
+var LITERAL_ID = /\.fx-literal-([\w$]+)\.css\?inline$/;
+var SUFFIX = /\.fx-(?:\d+|literal-[\w$]+)\.css(?:\?inline)?$/;
+var styleId = styleIds.block;
+function firstLoc(nodes) {
+  for (const node of nodes) {
+    if (node.loc) return node.loc.source;
+    if ((node.kind === "rule" || node.kind === "at-rule") && node.nodes.length) {
+      const inner = firstLoc(node.nodes);
+      if (inner) return inner;
+    }
+  }
+  return void 0;
+}
+var ownerOf = (id) => id.slice(0, id.search(SUFFIX));
+var loader = (name) => `const href = new URL(${JSON.stringify(`./${name}`)}, import.meta.url).href;
+if (typeof document !== 'undefined' && !document.querySelector(\`link[data-fx-css="\${href}"]\`)) {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = href;
+  link.dataset.fxCss = href;
+  document.head.appendChild(link);
+}
+`;
+function createComponentStyles(compile) {
+  let api;
+  let server;
+  let root = process.cwd();
+  let library;
+  const emitted = /* @__PURE__ */ new Map();
+  const fileOf = (id) => (0, import_node_fs2.existsSync)(id) ? id : (0, import_node_path2.join)(root, id);
+  const cache = /* @__PURE__ */ new Map();
+  const resolveReference = async (ref, importer, ctx, seen, modules) => {
+    const resolved = await ctx.resolve?.(ref.source, importer);
+    if (!resolved) return null;
+    const file = resolved.id.split("?")[0];
+    if (seen.has(file)) return null;
+    let code;
+    try {
+      code = (0, import_node_fs2.readFileSync)(fileOf(file), "utf8");
+    } catch {
+      return null;
+    }
+    const styles = api.styles(file);
+    let result = compile(code, file, styles);
+    if (result?.styleReferences?.length) {
+      const imported = await resolveAll(result.styleReferences, file, ctx, /* @__PURE__ */ new Set([...seen, file]), modules);
+      result = compile(code, file, { ...styles, imported, importedModules: modules });
+    }
+    const literal = result?.styleLiterals?.find((l) => l.name === ref.name);
+    if (!literal) return null;
+    const nodes = literal.nodes ?? styles.process(literal.css, file);
+    const named = firstLoc(nodes);
+    if (named) modules.set(named, { id: file, code });
+    return nodes;
+  };
+  const resolveAll = async (refs, importer, ctx, seen, modules) => {
+    const imported = /* @__PURE__ */ new Map();
+    for (const ref of refs) {
+      const nodes = await resolveReference(ref, importer, ctx, seen, modules);
+      if (nodes) imported.set(`${ref.source}#${ref.name}`, nodes);
+    }
+    return imported;
+  };
+  const run = async (code, id, ctx) => {
+    const file = fileOf(id);
+    const styles = api.styles(file);
+    let result = compile(code, file, styles);
+    if (result?.styleReferences?.length) {
+      const modules = /* @__PURE__ */ new Map();
+      const imported = await resolveAll(result.styleReferences, id, ctx, /* @__PURE__ */ new Set([file]), modules);
+      result = compile(code, file, { ...styles, imported, importedModules: modules });
+    }
+    const css = (result?.styles ?? []).map((s) => s.css);
+    const maps = (result?.styles ?? []).map((s) => s.map ?? null);
+    const literals = new Map((result?.styleLiterals ?? []).map((l) => [l.name, l.css]));
+    const before = cache.get(file);
+    cache.set(file, { source: code, css, maps, literals });
+    if (server && before) {
+      for (let i = 0; i < css.length; i++) {
+        if (before.css[i] === css[i]) continue;
+        const mod = server.moduleGraph.getModuleById(styleId(file, i));
+        if (mod) void server.reloadModule(mod);
+      }
+    }
+    const page = (result?.styles ?? []).flatMap((s, i) => s.shadow ? [] : [i]);
+    if (!result || page.length === 0) return result;
+    if (library) {
+      const name = `${(0, import_node_path2.basename)(file, (0, import_node_path2.extname)(file))}.css`;
+      if ((0, import_node_fs2.existsSync)((0, import_node_path2.join)((0, import_node_path2.dirname)(file), name))) {
+        throw new Error(`[fluixi] ${file} has <style> blocks, and ${name} next to it would be overwritten by their CSS. Rename one of them.`);
+      }
+      const out = (0, import_node_path2.join)((0, import_node_path2.relative)(library, (0, import_node_path2.dirname)(file)), name);
+      emitted.set(out, page.map((i) => css[i]).join("\n"));
+      emitted.set(`${out}.js`, loader(name));
+      return { ...result, code: `${result.code}
+import ${JSON.stringify(`./${name}`)};` };
+    }
+    const imports = page.map((i) => `
+import ${JSON.stringify(styleId(file, i))};`).join("");
+    return { ...result, code: result.code + imports };
+  };
+  return {
+    /** Looks for @fluixi-css/vite among the plugins; without it component styles stay off. */
+    connect(plugins, projectRoot) {
+      if (projectRoot) root = projectRoot;
+      api = (plugins ?? []).map((p) => p?.api?.fluixiCss).find((a) => Boolean(a));
+      api?.useComponentStyles();
+    },
+    /** Turns on library output, from the directory of a `build.lib` entry. */
+    setLibrary(entryDir) {
+      library = entryDir;
+    },
+    /** A library build's style import: left for the package's consumer to bundle. */
+    isLibraryImport(id, importer) {
+      if (library === void 0 || !importer || !id.startsWith("./") || !id.endsWith(".css")) return false;
+      return emitted.has((0, import_node_path2.join)((0, import_node_path2.relative)(library, (0, import_node_path2.dirname)(fileOf(importer))), id));
+    },
+    /** The style files a library build writes, by path under the output directory. */
+    libraryFiles() {
+      return emitted;
+    },
+    get active() {
+      return api !== void 0;
+    },
+    setServer(dev) {
+      server = dev;
+    },
+    isStyle(id) {
+      return STYLE_ID.test(id) || LITERAL_ID.test(id);
+    },
+    /**
+     * A style request as the module id Vite keeps: its owner's absolute path, then the suffix.
+     * One id per block however it was asked for (`/src/card.tsx.fx-0.css` from a page, the
+     * absolute path from the component), or the reload after an edit misses the copy in use.
+     * A css`` value imported from another module names that module relatively, as written.
+     */
+    async resolveId(id, importer, ctx) {
+      const at = id.search(SUFFIX);
+      const owner = id.slice(0, at);
+      if (!owner.startsWith(".")) return fileOf(owner) + id.slice(at);
+      const resolved = importer ? await ctx.resolve?.(owner, importer) : null;
+      return resolved ? resolved.id.split("?")[0] + id.slice(at) : null;
+    },
+    /**
+     * The style modules of a changed file, for the update Vite sends. Their ids do not name the
+     * file (they end in `.css`), so Vite would not find them itself.
+     */
+    hotModules(file, graph) {
+      const entry = cache.get(file);
+      if (!entry) return [];
+      const paths = [
+        ...entry.css.map((_, i) => styleId(file, i)),
+        ...[...entry.literals.keys()].map((name) => styleIds.literal(file, name).replace(/\?inline$/, ""))
+      ];
+      return paths.flatMap((path) => [...graph.getModulesByFile(path) ?? []]);
+    },
+    compile: run,
+    /**
+     * A block's CSS and its map back to the module, compiling the module again when the cache
+     * does not match the file.
+     */
+    async load(id, ctx) {
+      const match = STYLE_ID.exec(id);
+      const literal = LITERAL_ID.exec(id);
+      if (!match && !literal || !api) return null;
+      const file = ownerOf(id);
+      let source;
+      try {
+        source = (0, import_node_fs2.readFileSync)(fileOf(file), "utf8");
+      } catch {
+        return null;
+      }
+      if (cache.get(fileOf(file))?.source !== source) await run(source, file, ctx);
+      const entry = cache.get(fileOf(file));
+      if (literal) {
+        const css = entry?.literals.get(literal[1]);
+        if (css === void 0) throw new Error(`[fluixi] ${literal[1]} in ${file} is not a css\`\` value, so it cannot be a shadow root's styles.`);
+        return { code: css, map: null, moduleType: "css" };
+      }
+      const index = Number(match[1]);
+      return { code: entry?.css[index] ?? "", map: entry?.maps[index] ?? null, moduleType: "css" };
+    }
+  };
+}
+
+// src/integrations.ts
+var import_node_fs3 = require("node:fs");
+var import_node_path3 = require("node:path");
 async function createBabelPlugin(options = {}) {
   let pluginModule = null;
   try {
@@ -4239,27 +5386,58 @@ var RETIRED_SUBPATHS = {
   "@fluixi/core/rx": "is gone — import signals and effects from @fluixi/reactive, or the server primitives it resolved to under node from @fluixi/core/server"
 };
 function createVitePlugin(options = {}) {
+  let transformTemplates2;
+  let projectRoot = process.cwd();
+  const componentStyles = createComponentStyles((code, id, styles) => {
+    return transformTemplates2(code, id, { ...transformOptions(options, id), sourceRoot: projectRoot, styles });
+  });
   return {
     name: "vite-fluixi-jsx",
     enforce: "pre",
-    config() {
-      return {
-        esbuild: {
-          jsx: "automatic",
-          jsxImportSource: options.importSource || "@fluixi/jsx"
-        }
-      };
+    // JSX the compiler leaves alone goes to Vite's own transform: Oxc in Vite 8 (Rolldown),
+    // esbuild before, which Vite 8 warns about.
+    // In dev, CSS maps are on unless the app says otherwise, so devtools show the line a
+    // component's rule was written on. Vite leaves them off by default; a build never has them.
+    config(user) {
+      const importSource = options.importSource || "@fluixi/jsx";
+      const jsx = this && this.meta?.rolldownVersion ? { oxc: { jsx: { runtime: "automatic", importSource } } } : { esbuild: { jsx: "automatic", jsxImportSource: importSource } };
+      return user?.css?.devSourcemap === void 0 ? { ...jsx, css: { devSourcemap: true } } : jsx;
     },
     // Written once per build, and on dev-server start, rather than per transform: the
     // set of resolvable names comes from config, so nothing a file does can change it.
-    configResolved(config) {
+    async configResolved(config) {
       const outcome = writeComponentGlobals(options, config?.root ?? process.cwd());
       if (outcome.warning) console.warn(outcome.warning);
+      if (options.babel) return;
+      projectRoot = config?.root ?? projectRoot;
+      componentStyles.connect(config?.plugins, config?.root);
+      const entry = config?.command === "build" && config.build?.lib ? config.build.lib.entry : void 0;
+      const first = typeof entry === "string" ? entry : Array.isArray(entry) ? entry[0] : entry && typeof entry === "object" ? Object.values(entry)[0] : void 0;
+      if (typeof first === "string") componentStyles.setLibrary((0, import_node_path3.dirname)((0, import_node_path3.resolve)(config.root ?? process.cwd(), first)));
+      if (componentStyles.active) ({ transformTemplates: transformTemplates2 } = await Promise.resolve().then(() => (init_transform(), transform_exports)));
+    },
+    generateBundle() {
+      for (const [fileName, source] of componentStyles.libraryFiles()) this.emitFile({ type: "asset", fileName, source });
+    },
+    // An edited component's style modules go out with its update: their ids end in `.css`, so
+    // Vite does not connect them to the file.
+    handleHotUpdate(ctx) {
+      if (!componentStyles.active) return void 0;
+      const styles = componentStyles.hotModules(ctx.file, ctx.server.moduleGraph);
+      return styles.length ? [...ctx.modules, ...styles] : void 0;
+    },
+    configureServer(server) {
+      componentStyles.setServer(server);
+    },
+    load(id) {
+      return componentStyles.isStyle(id) ? componentStyles.load(id, this) : null;
     },
     // A subpath we retired resolves to nothing, and the bundler reports that as
     // `Missing "./x" specifier`, which names neither the replacement nor the file
     // that asked. Answer it here, where the rename is known.
     resolveId(id, importer) {
+      if (componentStyles.isStyle(id)) return componentStyles.resolveId(id, importer, this);
+      if (componentStyles.isLibraryImport(id, importer)) return { id, external: true };
       const moved = RETIRED_SUBPATHS[id];
       if (!moved) return null;
       throw new Error(
@@ -4271,6 +5449,11 @@ function createVitePlugin(options = {}) {
       if (!/\.(jsx|tsx|ts)$/i.test(id)) {
         return null;
       }
+      if (!options.babel && componentStyles.active) {
+        const result = await componentStyles.compile(code, id, this);
+        reportDiagnostics(result, id);
+        return result;
+      }
       if (!options.babel) return compileModule(code, id, options);
       const babelPlugin = await createBabelPlugin(options);
       try {
@@ -4366,6 +5549,7 @@ function reportDiagnostics(result, id) {
   for (const d of r?.unresolvedDiagnostics ?? []) say(d.message);
   for (const d of r?.loadDiagnostics ?? []) say(d.message);
   for (const d of r?.intrinsicDiagnostics ?? []) say(d.message);
+  for (const d of r?.styleDiagnostics ?? []) say(`${d.line}:${d.column + 1} ${d.message}`);
   for (const d of r?.propsDiagnostics ?? []) {
     say(`\`${d.name}\` was left destructured: ${d.message}. It reads once instead of tracking.`);
   }
@@ -4418,8 +5602,8 @@ function createESBuildPlugin(options = {}) {
     name: "esbuild-fluixi-jsx",
     setup(build) {
       build.onLoad({ filter: /\.[jt]sx?$/ }, async (args) => {
-        const { readFileSync: readFileSync3 } = await import("node:fs");
-        const source = readFileSync3(args.path, "utf8");
+        const { readFileSync: readFileSync4 } = await import("node:fs");
+        const source = readFileSync4(args.path, "utf8");
         try {
           const result = await compileModule(source, args.path, options);
           return {
@@ -4447,17 +5631,17 @@ function hasServerDirective(source) {
 function findServerFnModules(dir, out = []) {
   let entries;
   try {
-    entries = (0, import_node_fs2.readdirSync)(dir, { withFileTypes: true });
+    entries = (0, import_node_fs3.readdirSync)(dir, { withFileTypes: true });
   } catch {
     return out;
   }
   for (const e of entries) {
     if (e.name === "node_modules" || e.name === "dist" || e.name.startsWith(".")) continue;
-    const full = (0, import_node_path2.join)(dir, e.name);
+    const full = (0, import_node_path3.join)(dir, e.name);
     if (e.isDirectory()) findServerFnModules(full, out);
     else if (/\.[jt]sx?$/.test(e.name)) {
       try {
-        if (hasServerDirective((0, import_node_fs2.readFileSync)(full, "utf8"))) out.push(full);
+        if (hasServerDirective((0, import_node_fs3.readFileSync)(full, "utf8"))) out.push(full);
       } catch {
       }
     }
@@ -4477,7 +5661,7 @@ function serverFunctionsVitePlugin(options = {}) {
     },
     load(id) {
       if (id !== "\0" + SERVER_FNS_VMOD) return null;
-      const mods = findServerFnModules((0, import_node_path2.join)(root, "src"));
+      const mods = findServerFnModules((0, import_node_path3.join)(root, "src"));
       const setup = `import '@fluixi/start/server-fn-setup';
 `;
       const imports = mods.map((m) => `import ${JSON.stringify(m)};`).join("\n");