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

package/dist/{transform-QWWQDCXE.mjs → transform-GBP6Y4UI.mjs}

@@ -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.94 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 import {
   analyzeStatic,
   buildJsxIR,
@@ -14,7 +14,7 @@ import {
   resolveComponentSources,
   resolveReactiveBindings,
   shapeOf
-} from "./chunk-U7HCFLZ2.mjs";
+} from "./chunk-ZR2QHTEX.mjs";
 import {
   CORE_CONTROL_FLOW,
   DOM_CONTROL_FLOW,
@@ -22,16 +22,574 @@ import {
   ROUTER_COMPONENTS,
   createComponentResolver,
   isIntrinsicName,
-  mayHaveIntrinsic
-} from "./chunk-OD53TMER.mjs";
+  mayHaveIntrinsic,
+  tagIntrinsics
+} from "./chunk-HCCBEJEZ.mjs";
 import {
-  MagicString
-} from "./chunk-R7PPFBCL.mjs";
-import "./chunk-TJIH7TLX.mjs";
+  MagicString,
+  encode
+} from "./chunk-E2RWTIYE.mjs";
+import "./chunk-HIZU7WI2.mjs";
 
 // src/transform/templates.ts
 import { parse as parse2 } from "@babel/parser";
 
+// src/transform/styles.ts
+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"]]) }, module) {
+  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(dropLoc);
+      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) });
+  }
+  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 = module ? printStyleWithMap(nodes, options.minify, sourceName, module) : { 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 walk5 = (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 walk5(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 });
+    }
+  };
+  walk5(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(`${moduleId}?fx-style&index=${i}&inline&lang.css`));
+    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(`${moduleId}?fx-literal=${id.name}&inline&lang.css`) : plan.names?.imports.has(id.name) && !/\.css(\?|$)/.test(plan.names.imports.get(id.name).source) ? importOf(`${plan.names.imports.get(id.name).source}?fx-literal=${plan.names.imports.get(id.name).name}&inline&lang.css`) : 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 dropLoc(node) {
+  const { loc: _loc, ...rest } = node;
+  if (rest.kind === "rule" || rest.kind === "at-rule") return { ...rest, nodes: rest.nodes.map(dropLoc) };
+  return rest;
+}
+function printStyleWithMap(nodes, minify, sourceName, module) {
+  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) => {
+    if (loc && loc.source === sourceName) lines[lines.length - 1].push([column, 0, 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: [module.id], sourcesContent: [module.code], names: [], mappings: 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/lower/compile-template.ts
 function compilePieces(pieces, holes, options = {}) {
   const used = /* @__PURE__ */ new Set();
@@ -40,6 +598,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 ?? []),
@@ -573,8 +1132,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(
@@ -722,22 +1281,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 = parse2(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 = [];
   walk4(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);
@@ -751,20 +1316,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
@@ -773,12 +1350,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 MagicString(code);
   for (const e of outermost(edits)) {
     if (e.start === e.end) out.appendLeft(e.start, e.code);
@@ -836,13 +1414,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);