transone-cli 0.6.3 → 0.7.0

package/dist/{index-8k9x2k6m.js → index-x5rrsfyb.js}

@@ -498,8 +498,8 @@ function validateApiHost(host, label) {
 }
 
 // src/target/web-target.ts
-import { mkdir, rm, writeFile } from "fs/promises";
-import { dirname as dirname2, isAbsolute as isAbsolute2, relative as relative2, resolve as resolve3, sep as sep2 } from "path";
+import { mkdir, rm as rm2, writeFile as writeFile2 } from "fs/promises";
+import { dirname as dirname3, isAbsolute as isAbsolute2, relative as relative2, resolve as resolve5, sep as sep2 } from "path";
 
 // src/build-output.ts
 function isEntryJavaScriptOutput(output) {
@@ -512,9 +512,126 @@ function isJavaScriptPath(path) {
   return /\.(?:[cm]?js)$/i.test(path);
 }
 
+// src/document-styles.ts
+import { createHash, randomUUID } from "crypto";
+import { rename, rm, writeFile } from "fs/promises";
+import { resolve as resolve2 } from "path";
+async function emitDocumentStyles(html, outDir, assetUrl, stylesheets, componentStylesheets = []) {
+  const styles = [];
+  const linked = new Set;
+  let hasHead = false;
+  let hasHtml = false;
+  let current;
+  new HTMLRewriter().on("html", {
+    element() {
+      hasHtml = true;
+    }
+  }).on("head", {
+    element() {
+      hasHead = true;
+    }
+  }).on("head link", {
+    element(element) {
+      if (!element.getAttribute("rel")?.toLowerCase().split(/\s+/).includes("stylesheet"))
+        return;
+      const href = element.getAttribute("href");
+      if (href !== null)
+        linked.add(href);
+    }
+  }).on("head style", {
+    element(element) {
+      const attributes = [...element.attributes];
+      const type = element.getAttribute("type")?.trim().toLowerCase();
+      current = {
+        css: "",
+        attributes,
+        eligible: (!type || type === "text/css") && attributes.every(([name]) => ["type", "media", "title", "nonce"].includes(name))
+      };
+      styles.push(current);
+    },
+    text(chunk) {
+      if (current)
+        current.css += chunk.text;
+    }
+  }).transform(html);
+  const replacements = new Map;
+  const assets = new Set;
+  for (const [index2, style] of styles.entries()) {
+    if (!style.eligible || !style.css.trim() || hasRelativeResources(style.css))
+      continue;
+    const hash = createHash("sha256").update(style.css).digest("hex").slice(0, 16);
+    const path = resolve2(outDir, `document-${hash}.css`);
+    await writeStylesheet(path, style.css);
+    assets.add(path);
+    const attributes = style.attributes.map(([name, value]) => ` ${name}="${escapeAttribute(value)}"`).join("");
+    replacements.set(index2, `<link rel="stylesheet" href="${escapeAttribute(assetUrl(path))}"${attributes}>`);
+  }
+  const missing = [...new Set(stylesheets)].filter((href) => !linked.has(href));
+  const componentLinks = renderStylesheetLinks([...new Set(componentStylesheets)].filter((href) => !linked.has(href)));
+  const importedLinks = renderStylesheetLinks(missing);
+  if (!hasHead && (importedLinks || componentLinks)) {
+    const head = `<head>${importedLinks}${componentLinks}</head>`;
+    const output2 = hasHtml ? new HTMLRewriter().on("html", {
+      element(element) {
+        element.prepend(head, { html: true });
+      }
+    }).transform(html) : html.replace(/^(\s*<!doctype[^>]*>)?/i, (doctype) => doctype + head);
+    return { html: output2, assets: [...assets] };
+  }
+  let index = 0;
+  const output = new HTMLRewriter().on("head", {
+    element(element) {
+      element.prepend(importedLinks, { html: true });
+      element.append(componentLinks, { html: true });
+    }
+  }).on("head style", {
+    element(element) {
+      const replacement = replacements.get(index++);
+      if (replacement !== undefined)
+        element.replace(replacement, { html: true });
+    }
+  }).transform(html);
+  return { html: output, assets: [...assets] };
+}
+function renderStylesheetLinks(hrefs) {
+  return hrefs.map((href) => `<link rel="stylesheet" href="${escapeAttribute(href)}">`).join("");
+}
+async function emitComponentStyles(styles, outDir) {
+  const css = [...styles.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([, value]) => value).join(`
+`);
+  if (!css)
+    return [];
+  const hash = createHash("sha256").update(css).digest("hex").slice(0, 16);
+  const path = resolve2(outDir, `components-${hash}.css`);
+  await writeStylesheet(path, css);
+  return [path];
+}
+function escapeAttribute(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function hasRelativeResources(css) {
+  if (/\\|@import\b|(?:-webkit-)?image(?:-set)?\(/i.test(css))
+    return true;
+  for (const match of css.matchAll(/url\(\s*(['"]?)(.*?)\1\s*\)/gi)) {
+    const url = match[2].trim();
+    if (url && !/^(?:\/|[a-z][a-z\d+.-]*:)/i.test(url))
+      return true;
+  }
+  return false;
+}
+async function writeStylesheet(path, css) {
+  const temporary = `${path}.${randomUUID()}.tmp`;
+  try {
+    await writeFile(temporary, css);
+    await rename(temporary, path);
+  } finally {
+    await rm(temporary, { force: true });
+  }
+}
+
 // src/safe-path.ts
 import { lstat, realpath } from "fs/promises";
-import { dirname, isAbsolute, relative, resolve as resolve2, sep } from "path";
+import { dirname, isAbsolute, relative, resolve as resolve3, sep } from "path";
 async function assertSafeSubdirectory(root, path, errorMessage) {
   try {
     const canonicalRoot = await realpath(root);
@@ -528,8 +645,8 @@ async function assertSafeSubdirectory(root, path, errorMessage) {
 }
 async function assertSafeSubdirectoryDoesNotContain(root, path, protectedPath, errorMessage) {
   try {
-    const lexicalPath = resolve2(path);
-    const lexicalProtectedPath = resolve2(protectedPath);
+    const lexicalPath = resolve3(path);
+    const lexicalProtectedPath = resolve3(protectedPath);
     const canonicalRoot = await realpath(root);
     const canonicalPath = await canonicalizePotentialPath(path);
     const canonicalProtectedPath = await realpath(protectedPath);
@@ -543,7 +660,7 @@ async function assertSafeSubdirectoryDoesNotContain(root, path, protectedPath, e
 async function canonicalizePotentialPath(path) {
   const ancestor = await findExistingAncestor(path);
   const canonicalAncestor = await realpath(ancestor);
-  return resolve2(canonicalAncestor, relative(ancestor, path));
+  return resolve3(canonicalAncestor, relative(ancestor, path));
 }
 async function findExistingAncestor(path) {
   let candidate = path;
@@ -573,6 +690,846 @@ function isPathWithinOrEqual(parent, candidate) {
   return pathFromParent === "" || pathFromParent !== ".." && !pathFromParent.startsWith(`..${sep}`) && !isAbsolute(pathFromParent);
 }
 
+// src/web-styles.ts
+import { dirname as dirname2, extname } from "path";
+import ts from "typescript";
+var ROOT_RPX_RULE = ":root{--tu-rpx:calc(min(100vw, 750px) / 750);}";
+var RPX_PATTERN = /(-?\d+(?:\.\d+)?)rpx/g;
+var SOURCE_FILTER = /\.(?:[cm]?js|jsx|tsx?)$/;
+function createWebStylesPlugin(disabledFiles = new Set) {
+  const styles = new Map;
+  const runtimeFiles = new Set;
+  const candidates = new Set;
+  const owners = new Map;
+  let unknownSelector = false;
+  let unknownInheritance = false;
+  return {
+    name: "transone-web-styles",
+    styles,
+    runtimeFiles,
+    setup(build) {
+      styles.clear();
+      runtimeFiles.clear();
+      candidates.clear();
+      owners.clear();
+      unknownSelector = false;
+      unknownInheritance = false;
+      build.onLoad({ filter: SOURCE_FILTER }, async ({ path }) => {
+        styles.delete(path);
+        const contents = await Bun.file(path).text();
+        if (!contents.includes("styleManager") && !contents.includes("extends"))
+          return;
+        const source = ts.createSourceFile(path, contents, ts.ScriptTarget.Latest, true, scriptKind(path));
+        const extracted = extractStyles(source);
+        if (extracted.bodies.length)
+          candidates.add(path);
+        for (const { selector, owner } of extracted.selectors) {
+          const selectorOwners = owners.get(selector) ?? new Map;
+          selectorOwners.set(`${path}:${owner}`, path);
+          owners.set(selector, selectorOwners);
+          if (selectorOwners.size > 1)
+            for (const file of selectorOwners.values())
+              runtimeFiles.add(file);
+        }
+        unknownSelector ||= extracted.unknownSelector;
+        unknownInheritance ||= extracted.unknownInheritance;
+        if (unknownSelector || unknownInheritance)
+          for (const file of candidates)
+            runtimeFiles.add(file);
+        if (!extracted.bodies.length || disabledFiles.has(path))
+          return;
+        styles.set(path, extracted.css);
+        let transformed = contents;
+        for (const body of extracted.bodies.sort((left, right) => right.getStart(source) - left.getStart(source))) {
+          transformed = transformed.slice(0, body.getStart(source)) + "{}" + transformed.slice(body.end);
+        }
+        return {
+          contents: transformed,
+          loader: sourceLoader(path),
+          resolveDir: dirname2(path)
+        };
+      });
+    }
+  };
+}
+function extractStyles(source) {
+  const bindings = collectBindings(source);
+  const unsafeBindings = findUnsafeBindings(source, bindings);
+  const classes = topLevelClasses(source);
+  const descendants = [];
+  walk(source, (node) => {
+    if (ts.isClassDeclaration(node) || ts.isClassExpression(node))
+      descendants.push(node);
+  });
+  const { names: componentNames, roots: componentRoots } = componentBindings(source, classes, unsafeBindings);
+  const selectorAnalysis = collectSelectors(classes, componentNames, bindings, unsafeBindings);
+  const css = [];
+  const bodies = [];
+  for (const declaration of classes) {
+    if (!extendsComponent(declaration, componentNames))
+      continue;
+    const methods = declaration.members.filter((member) => ts.isMethodDeclaration(member) && memberName(member) === "initStyles");
+    if (methods.length !== 1)
+      continue;
+    const method = methods[0];
+    if (!method.body || method.parameters.length || method.asteriskToken || hasModifier(method, ts.SyntaxKind.StaticKeyword) || hasModifier(method, ts.SyntaxKind.AsyncKeyword) || ts.canHaveDecorators(method) && ts.getDecorators(method)?.length || ts.canHaveDecorators(declaration) && ts.getDecorators(declaration)?.length || hasManagerAccessOutside(declaration, method) || hasUnsafeAncestor(declaration, classes, componentRoots) || hasUnsafeDescendant(declaration, descendants))
+      continue;
+    const entries = new Map;
+    let safe = true;
+    for (const statement of method.body.statements) {
+      if (ts.isEmptyStatement(statement))
+        continue;
+      if (!ts.isExpressionStatement(statement)) {
+        safe = false;
+        break;
+      }
+      for (const expression of splitComma(statement.expression)) {
+        const entry = readAddStyle(expression, bindings, unsafeBindings, declaration);
+        if (!entry) {
+          safe = false;
+          break;
+        }
+        entries.set(entry.name, entry.style);
+      }
+      if (!safe)
+        break;
+    }
+    if (!safe || !entries.size)
+      continue;
+    const rendered = [...entries.values()].map(renderStyle).join("");
+    if (hasRelativeResource(rendered))
+      continue;
+    css.push(rendered);
+    bodies.push(method.body);
+  }
+  return {
+    css: bodies.length ? ROOT_RPX_RULE + `
+` + css.join(`
+`) : "",
+    bodies,
+    ...selectorAnalysis,
+    unknownInheritance: hasUnknownUnsafeAncestor(descendants, componentRoots, bindings)
+  };
+}
+function collectSelectors(classes, componentNames, bindings, unsafe) {
+  const selectors = [];
+  let unknownSelector = false;
+  for (const declaration of classes) {
+    if (!extendsComponent(declaration, componentNames))
+      continue;
+    const method = declaration.members.find((member) => ts.isMethodDeclaration(member) && memberName(member) === "initStyles");
+    if (!method?.body)
+      continue;
+    let calls = 0;
+    walk(declaration, (node) => {
+      if (!ts.isCallExpression(node) || !isAddStyleCall(node))
+        return;
+      calls++;
+      const options = node.arguments[1] && unwrap(node.arguments[1]);
+      let selector;
+      let hover = false;
+      if (options && ts.isObjectLiteralExpression(options)) {
+        const evaluate = (expression) => staticValue(expression, bindings, unsafe, declaration.name?.text);
+        selector = objectMember(options, "selector", evaluate).value;
+        const hoverMember = objectMember(options, "hover", evaluate);
+        hover = hoverMember.present && (hoverMember.value === undefined || !!hoverMember.value);
+      } else if (options) {
+        const value = staticValue(options, bindings, unsafe, declaration.name?.text);
+        if (isRecord2(value)) {
+          selector = value.selector;
+          hover = !!value.hover;
+        }
+      }
+      if (typeof selector !== "string") {
+        unknownSelector = true;
+        return;
+      }
+      const items = splitSelectorList(selector);
+      const hoverItems = hover ? splitSelectorList(selector + ":hover") : [];
+      if (!items || !hoverItems) {
+        unknownSelector = true;
+        return;
+      }
+      for (const item of [...items, ...hoverItems]) {
+        selectors.push({
+          selector: item,
+          owner: String(declaration.getStart())
+        });
+      }
+    });
+    if (!calls && method.body.statements.some((statement) => !ts.isEmptyStatement(statement)))
+      unknownSelector = true;
+  }
+  return { selectors, unknownSelector };
+}
+function objectMember(object, key, evaluate) {
+  let result = {
+    value: undefined,
+    present: false
+  };
+  for (const property of object.properties) {
+    if (ts.isSpreadAssignment(property)) {
+      const value = evaluate(property.expression);
+      if (!isRecord2(value))
+        result = { value: undefined, present: true };
+      else if (Object.prototype.hasOwnProperty.call(value, key))
+        result = { value: value[key], present: true };
+      continue;
+    }
+    const name = ts.isComputedPropertyName(property.name) ? evaluate(property.name.expression) : ts.isIdentifier(property.name) || ts.isStringLiteral(property.name) || ts.isNumericLiteral(property.name) ? property.name.text : undefined;
+    if (name === undefined) {
+      result = { value: undefined, present: true };
+      continue;
+    }
+    if (name !== key)
+      continue;
+    result = {
+      value: ts.isPropertyAssignment(property) ? evaluate(property.initializer) : ts.isShorthandPropertyAssignment(property) ? evaluate(property.name) : undefined,
+      present: true
+    };
+  }
+  return result;
+}
+function hasUnknownUnsafeAncestor(classes, roots, bindings) {
+  const reachesUnknown = (name, seen) => {
+    if (!name || seen.has(name))
+      return true;
+    if (roots.has(name))
+      return false;
+    seen.add(name);
+    const ancestor = classes.find((declaration) => classBinding(declaration) === name);
+    if (ancestor) {
+      if (!ancestor.heritageClauses?.some((clause) => clause.token === ts.SyntaxKind.ExtendsKeyword))
+        return false;
+      return reachesUnknown(baseName(ancestor), seen);
+    }
+    const initializer = bindings.get(name)?.expression;
+    if (initializer) {
+      const alias = unwrap(initializer);
+      if (ts.isIdentifier(alias))
+        return reachesUnknown(alias.text, seen);
+      if (ts.isPropertyAccessExpression(alias) && ts.isIdentifier(alias.expression))
+        return reachesUnknown(`${alias.expression.text}.${alias.name.text}`, seen);
+    }
+    return true;
+  };
+  return classes.some((declaration) => {
+    if (!declaration.heritageClauses?.some((clause) => clause.token === ts.SyntaxKind.ExtendsKeyword))
+      return false;
+    let unsafe = declaration.members.some((member) => memberName(member) === "styleManager");
+    walk(declaration, (node) => {
+      if (unsafeManagerAccess(node))
+        unsafe = true;
+    });
+    return unsafe && reachesUnknown(baseName(declaration), new Set);
+  });
+}
+function splitSelectorList(selector) {
+  const items = [];
+  const delimiters = [];
+  let quote;
+  let escaped = false;
+  let start = 0;
+  for (let index = 0;index < selector.length; index++) {
+    const character = selector[index];
+    if (escaped) {
+      escaped = false;
+      continue;
+    }
+    if (character === "\\") {
+      escaped = true;
+      continue;
+    }
+    if (quote) {
+      if (character === quote)
+        quote = undefined;
+      continue;
+    }
+    if (character === '"' || character === "'") {
+      quote = character;
+      continue;
+    }
+    if (character === "/" && selector[index + 1] === "*" || character === "{" || character === "}")
+      return;
+    if (character === "(" || character === "[") {
+      delimiters.push(character);
+    } else if (character === ")" || character === "]") {
+      if (delimiters.pop() !== (character === ")" ? "(" : "["))
+        return;
+    } else if (character === "," && delimiters.length === 0) {
+      const item2 = selector.slice(start, index).trim();
+      if (!item2)
+        return;
+      items.push(item2);
+      start = index + 1;
+    }
+  }
+  if (quote || escaped || delimiters.length)
+    return;
+  const item = selector.slice(start).trim();
+  return item ? [...items, item] : undefined;
+}
+function sourceLoader(path) {
+  const extension = extname(path);
+  return extension === ".tsx" ? "tsx" : extension === ".jsx" ? "jsx" : extension === ".ts" ? "ts" : "js";
+}
+function scriptKind(path) {
+  const loader = sourceLoader(path);
+  return loader === "tsx" ? ts.ScriptKind.TSX : loader === "jsx" ? ts.ScriptKind.JSX : loader === "ts" ? ts.ScriptKind.TS : ts.ScriptKind.JS;
+}
+function memberName(member) {
+  return member.name && (ts.isIdentifier(member.name) || ts.isStringLiteral(member.name)) ? member.name.text : undefined;
+}
+function hasModifier(node, kind) {
+  return ts.canHaveModifiers(node) && !!ts.getModifiers(node)?.some((modifier) => modifier.kind === kind);
+}
+function topLevelClasses(source) {
+  const classes = [];
+  for (const statement of source.statements) {
+    if (ts.isClassDeclaration(statement))
+      classes.push(statement);
+    if (ts.isVariableStatement(statement)) {
+      for (const declaration of statement.declarationList.declarations) {
+        if (declaration.initializer && ts.isClassExpression(declaration.initializer))
+          classes.push(declaration.initializer);
+      }
+    }
+  }
+  return classes;
+}
+function classBinding(declaration) {
+  const parent = declaration.parent;
+  return ts.isVariableDeclaration(parent) && ts.isIdentifier(parent.name) ? parent.name.text : declaration.name?.text;
+}
+function componentBindings(source, classes, unsafe) {
+  const names = new Set;
+  for (const statement of source.statements) {
+    if (ts.isVariableStatement(statement)) {
+      for (const declaration of statement.declarationList.declarations) {
+        const initializer = declaration.initializer && unwrap(declaration.initializer);
+        if (!initializer)
+          continue;
+        if (isTransoneRequire(initializer)) {
+          if (ts.isIdentifier(declaration.name) && !unsafe.has(declaration.name.text))
+            names.add(`${declaration.name.text}.Component`);
+          if (ts.isObjectBindingPattern(declaration.name)) {
+            for (const binding of declaration.name.elements) {
+              const imported = binding.propertyName ?? binding.name;
+              if (ts.isIdentifier(imported) && imported.text === "Component" && ts.isIdentifier(binding.name) && !binding.initializer && !binding.dotDotDotToken && !unsafe.has(binding.name.text))
+                names.add(binding.name.text);
+            }
+          }
+        } else if (ts.isPropertyAccessExpression(initializer) && initializer.name.text === "Component" && isTransoneRequire(initializer.expression) && ts.isIdentifier(declaration.name) && !unsafe.has(declaration.name.text))
+          names.add(declaration.name.text);
+      }
+    }
+    if (!ts.isImportDeclaration(statement) || !ts.isStringLiteral(statement.moduleSpecifier) || statement.moduleSpecifier.text !== "transone" || statement.importClause?.isTypeOnly)
+      continue;
+    const named = statement.importClause?.namedBindings;
+    if (named && ts.isNamedImports(named)) {
+      for (const binding of named.elements) {
+        if (!binding.isTypeOnly && (binding.propertyName?.text ?? binding.name.text) === "Component")
+          names.add(binding.name.text);
+      }
+    } else if (named && ts.isNamespaceImport(named))
+      names.add(`${named.name.text}.Component`);
+  }
+  const managers = new Set(classes.filter((declaration) => isBundledStyleManager(declaration, source)).map(classBinding));
+  for (const declaration of classes) {
+    if (!["mount", "mountToNode", "update", "unmount"].every((name2) => declaration.members.some((member) => memberName(member) === name2)))
+      continue;
+    const constructor = declaration.members.find((member) => ts.isConstructorDeclaration(member));
+    if (!constructor?.body)
+      continue;
+    let createsManager = 0;
+    let unsafeConstructor = false;
+    let initializesState = false;
+    let initializesStyles = false;
+    walk(constructor.body, (node) => {
+      if (unsafeManagerAccess(node)) {
+        const assignment = node.parent;
+        if (thisProperty(node) === "styleManager" && ts.isBinaryExpression(assignment) && assignment.operatorToken.kind === ts.SyntaxKind.EqualsToken && assignment.left === node && ts.isNewExpression(assignment.right) && ts.isIdentifier(assignment.right.expression) && managers.has(assignment.right.expression.text))
+          createsManager++;
+        else
+          unsafeConstructor = true;
+      }
+      if (ts.isCallExpression(node)) {
+        if (thisProperty(node.expression) === "initState")
+          initializesState = true;
+        if (thisProperty(node.expression) === "initStyles")
+          initializesStyles = true;
+      }
+    });
+    const name = classBinding(declaration);
+    if (createsManager === 1 && !unsafeConstructor && initializesState && initializesStyles && name)
+      names.add(name);
+  }
+  const roots = new Set(names);
+  let changed = true;
+  while (changed) {
+    changed = false;
+    for (const declaration of classes) {
+      const name = classBinding(declaration);
+      if (name && !names.has(name) && extendsComponent(declaration, names)) {
+        names.add(name);
+        changed = true;
+      }
+    }
+  }
+  return { names, roots };
+}
+function isBundledStyleManager(declaration, source) {
+  const method = (name) => declaration.members.find((member) => ts.isMethodDeclaration(member) && memberName(member) === name);
+  const mutatesMap = (name, operation, count) => {
+    const member = method(name);
+    if (!member?.body || member.parameters.length !== count)
+      return false;
+    const calls = [];
+    for (const statement of member.body.statements) {
+      if (!ts.isExpressionStatement(statement))
+        return false;
+      calls.push(...splitComma(statement.expression));
+    }
+    if (calls.length !== 2 || !ts.isCallExpression(calls[0]) || !ts.isCallExpression(calls[1]))
+      return false;
+    const write = calls[0];
+    const update = calls[1];
+    return ts.isPropertyAccessExpression(write.expression) && write.expression.name.text === operation && thisProperty(write.expression.expression) === "styles" && write.arguments.length === count && write.arguments.every((argument, index) => ts.isIdentifier(argument) && ts.isIdentifier(member.parameters[index].name) && argument.text === member.parameters[index].name.text) && thisProperty(update.expression) === "updateStyles" && update.arguments.length === 0;
+  };
+  if (!mutatesMap("addStyle", "set", 2) || !mutatesMap("removeStyle", "delete", 1) || !method("clearStyles") || !method("destroy") || !method("convertToCSS") || !method("updateStyles"))
+    return false;
+  const ensure = method("ensureStyleElement");
+  if (!ensure?.body)
+    return false;
+  let createsStyleElement = false;
+  walk(ensure.body, (node) => {
+    if (ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression) && ts.isIdentifier(node.expression.expression) && node.expression.expression.text === "document" && node.expression.name.text === "createElement" && node.arguments.length === 1 && ts.isStringLiteral(node.arguments[0]) && node.arguments[0].text === "style")
+      createsStyleElement = true;
+  });
+  if (!createsStyleElement)
+    return false;
+  let hasRpxRule = false;
+  walk(source, (node) => {
+    if (ts.isStringLiteral(node) && node.text === ROOT_RPX_RULE)
+      hasRpxRule = true;
+  });
+  return hasRpxRule;
+}
+function isTransoneRequire(node) {
+  return ts.isCallExpression(node) && ts.isIdentifier(node.expression) && node.expression.text === "require" && node.arguments.length === 1 && ts.isStringLiteral(node.arguments[0]) && node.arguments[0].text === "transone";
+}
+function baseName(declaration) {
+  const base = declaration.heritageClauses?.find((clause) => clause.token === ts.SyntaxKind.ExtendsKeyword)?.types[0]?.expression;
+  if (base && ts.isIdentifier(base))
+    return base.text;
+  if (base && ts.isPropertyAccessExpression(base) && ts.isIdentifier(base.expression))
+    return `${base.expression.text}.${base.name.text}`;
+  return;
+}
+function extendsComponent(declaration, names) {
+  const name = baseName(declaration);
+  return name !== undefined && names.has(name);
+}
+function thisProperty(expression) {
+  if (ts.isPropertyAccessExpression(expression) && expression.expression.kind === ts.SyntaxKind.ThisKeyword)
+    return expression.name.text;
+  if (ts.isElementAccessExpression(expression) && expression.expression.kind === ts.SyntaxKind.ThisKeyword && expression.argumentExpression && ts.isStringLiteral(expression.argumentExpression))
+    return expression.argumentExpression.text;
+  return;
+}
+function hasManagerAccessOutside(declaration, method) {
+  let unsafe = false;
+  for (const member of declaration.members) {
+    if (member === method)
+      continue;
+    if (memberName(member) === "styleManager")
+      return true;
+    walk(member, (node) => {
+      if (unsafeManagerAccess(node))
+        unsafe = true;
+    });
+  }
+  return unsafe;
+}
+function unsafeManagerAccess(node) {
+  if (thisProperty(node) === "styleManager")
+    return true;
+  if (ts.isElementAccessExpression(node) && node.expression.kind === ts.SyntaxKind.ThisKeyword)
+    return true;
+  if (node.kind !== ts.SyntaxKind.ThisKeyword)
+    return false;
+  const parent = node.parent;
+  return !(ts.isPropertyAccessExpression(parent) && parent.expression === node) && !(ts.isElementAccessExpression(parent) && parent.expression === node);
+}
+function hasUnsafeAncestor(declaration, classes, roots, seen = new Set) {
+  const name = baseName(declaration);
+  if (!name || roots.has(name) || seen.has(name))
+    return false;
+  seen.add(name);
+  const ancestor = classes.find((candidate) => classBinding(candidate) === name);
+  if (!ancestor)
+    return false;
+  const initStyles = ancestor.members.find((member) => ts.isMethodDeclaration(member) && memberName(member) === "initStyles");
+  let unsafe = false;
+  for (const member of ancestor.members) {
+    if (member === initStyles)
+      continue;
+    walk(member, (node) => {
+      if (unsafeManagerAccess(node))
+        unsafe = true;
+    });
+  }
+  return unsafe || hasUnsafeAncestor(ancestor, classes, roots, seen);
+}
+function hasUnsafeDescendant(declaration, classes, seen = new Set) {
+  const name = classBinding(declaration);
+  if (!name || seen.has(name))
+    return false;
+  seen.add(name);
+  return classes.some((child) => {
+    if (baseName(child) !== name)
+      return false;
+    let unsafe = false;
+    walk(child, (node) => {
+      if (unsafeManagerAccess(node))
+        unsafe = true;
+    });
+    return unsafe || hasUnsafeDescendant(child, classes, seen);
+  });
+}
+function collectBindings(source) {
+  const bindings = new Map;
+  for (const statement of source.statements) {
+    if (!ts.isVariableStatement(statement))
+      continue;
+    for (const declaration of statement.declarationList.declarations) {
+      if (ts.isIdentifier(declaration.name) && declaration.initializer) {
+        bindings.set(declaration.name.text, {
+          expression: declaration.initializer,
+          declaration,
+          exported: hasModifier(statement, ts.SyntaxKind.ExportKeyword)
+        });
+      }
+    }
+  }
+  return bindings;
+}
+function rootIdentifier(node) {
+  if (ts.isIdentifier(node))
+    return node.text;
+  if (ts.isPropertyAccessExpression(node) || ts.isElementAccessExpression(node))
+    return rootIdentifier(node.expression);
+  return;
+}
+function findUnsafeBindings(source, bindings) {
+  const unsafe = new Set;
+  const markWritten = (node) => {
+    const name = rootIdentifier(node);
+    if (name) {
+      unsafe.add(name);
+      return;
+    }
+    if (ts.isPropertyAssignment(node)) {
+      markWritten(node.initializer);
+      return;
+    }
+    ts.forEachChild(node, markWritten);
+  };
+  walk(source, (node) => {
+    if (ts.isBinaryExpression(node) && node.operatorToken.kind >= ts.SyntaxKind.FirstAssignment && node.operatorToken.kind <= ts.SyntaxKind.LastAssignment) {
+      markWritten(node.left);
+    }
+    if ((ts.isPrefixUnaryExpression(node) || ts.isPostfixUnaryExpression(node)) && (node.operator === ts.SyntaxKind.PlusPlusToken || node.operator === ts.SyntaxKind.MinusMinusToken)) {
+      const name = rootIdentifier(node.operand);
+      if (name)
+        unsafe.add(name);
+    }
+    if (ts.isDeleteExpression(node)) {
+      const name = rootIdentifier(node.expression);
+      if (name)
+        unsafe.add(name);
+    }
+    if (ts.isForOfStatement(node) || ts.isForInStatement(node)) {
+      markWritten(node.initializer);
+    }
+  });
+  for (const [name, binding] of bindings) {
+    if (!containsObject(binding.expression, bindings, new Set))
+      continue;
+    if (binding.exported) {
+      unsafe.add(name);
+      continue;
+    }
+    walk(source, (node) => {
+      if (!ts.isIdentifier(node) || node.text !== name || !isReference(node))
+        return;
+      let parent = node.parent;
+      while (parent && !ts.isStatement(parent) && !ts.isVariableDeclaration(parent) && !ts.isCallExpression(parent) && !ts.isExportSpecifier(parent))
+        parent = parent.parent;
+      if (parent && ts.isCallExpression(parent) && isAddStyleCall(parent))
+        return;
+      if (parent && ts.isVariableDeclaration(parent) && ts.isVariableDeclarationList(parent.parent) && ts.isVariableStatement(parent.parent.parent) && parent.parent.parent.parent === source)
+        return;
+      unsafe.add(name);
+    });
+  }
+  let changed = true;
+  while (changed) {
+    changed = false;
+    for (const [name, binding] of bindings) {
+      const dependencies = new Set;
+      walk(binding.expression, (node) => {
+        if (ts.isIdentifier(node) && isReference(node) && bindings.has(node.text))
+          dependencies.add(node.text);
+      });
+      for (const dependency of dependencies) {
+        if (unsafe.has(dependency) && !unsafe.has(name)) {
+          unsafe.add(name);
+          changed = true;
+        }
+        if (unsafe.has(name) && containsObject(bindings.get(dependency).expression, bindings, new Set) && !unsafe.has(dependency)) {
+          unsafe.add(dependency);
+          changed = true;
+        }
+      }
+    }
+  }
+  return unsafe;
+}
+function isReference(node) {
+  const parent = node.parent;
+  if ((ts.isVariableDeclaration(parent) || ts.isParameter(parent) || ts.isBindingElement(parent)) && parent.name === node)
+    return false;
+  if ((ts.isPropertyAccessExpression(parent) || ts.isPropertyAssignment(parent) || ts.isMethodDeclaration(parent) || ts.isPropertyDeclaration(parent)) && parent.name === node)
+    return false;
+  return true;
+}
+function containsObject(expression, bindings, seen) {
+  const node = unwrap(expression);
+  if (ts.isObjectLiteralExpression(node) || ts.isArrayLiteralExpression(node))
+    return true;
+  if (ts.isIdentifier(node) && !seen.has(node.text)) {
+    seen.add(node.text);
+    const binding = bindings.get(node.text);
+    return !!binding && containsObject(binding.expression, bindings, seen);
+  }
+  return false;
+}
+function unwrap(expression) {
+  while (ts.isParenthesizedExpression(expression) || ts.isAsExpression(expression) || ts.isTypeAssertionExpression(expression) || ts.isNonNullExpression(expression) || ts.isSatisfiesExpression(expression))
+    expression = expression.expression;
+  return expression;
+}
+function splitComma(expression) {
+  const node = unwrap(expression);
+  return ts.isBinaryExpression(node) && node.operatorToken.kind === ts.SyntaxKind.CommaToken ? [...splitComma(node.left), ...splitComma(node.right)] : [node];
+}
+function isAddStyleCall(node) {
+  const callee = node.expression;
+  return !node.questionDotToken && ts.isPropertyAccessExpression(callee) && !callee.questionDotToken && callee.name.text === "addStyle" && thisProperty(callee.expression) === "styleManager";
+}
+function readAddStyle(expression, bindings, unsafe, declaration) {
+  if (!ts.isCallExpression(expression) || !isAddStyleCall(expression) || expression.arguments.length !== 2)
+    return;
+  const evaluate = (node) => staticValue(node, bindings, unsafe, declaration.name?.text);
+  const name = evaluate(expression.arguments[0]);
+  const options = evaluate(expression.arguments[1]);
+  if (typeof name !== "string" || !isRecord2(options) || typeof options.selector !== "string" || !isProperties(options.properties) || Object.keys(options).some((key) => !["selector", "properties", "hover", "media"].includes(key)))
+    return;
+  if (options.hover !== undefined && !isProperties(options.hover))
+    return;
+  if (options.media !== undefined && (!isRecord2(options.media) || !Object.values(options.media).every(isProperties)))
+    return;
+  return { name, style: options };
+}
+function staticValue(expression, bindings, unsafe, className, seen = new Set) {
+  const node = unwrap(expression);
+  const evaluate = (value) => staticValue(value, bindings, unsafe, className, seen);
+  if (ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node))
+    return node.text;
+  if (ts.isNumericLiteral(node))
+    return Number(node.text);
+  if (node.kind === ts.SyntaxKind.TrueKeyword)
+    return true;
+  if (node.kind === ts.SyntaxKind.FalseKeyword)
+    return false;
+  if (node.kind === ts.SyntaxKind.NullKeyword)
+    return null;
+  if (ts.isIdentifier(node)) {
+    const binding = bindings.get(node.text);
+    if (!binding || unsafe.has(node.text) || seen.has(node.text) || node.text === className || identifierIsShadowed(node) || binding.declaration.getStart() >= node.getStart())
+      return;
+    const next = new Set(seen);
+    next.add(node.text);
+    return staticValue(binding.expression, bindings, unsafe, className, next);
+  }
+  if (ts.isTemplateExpression(node)) {
+    let value = node.head.text;
+    for (const span of node.templateSpans) {
+      const item = evaluate(span.expression);
+      if (item === undefined || isRecord2(item))
+        return;
+      value += String(item) + span.literal.text;
+    }
+    return value;
+  }
+  if (ts.isObjectLiteralExpression(node)) {
+    const result = Object.create(null);
+    for (const property of node.properties) {
+      if (ts.isShorthandPropertyAssignment(property)) {
+        const value2 = evaluate(property.name);
+        if (value2 === undefined || property.objectAssignmentInitializer)
+          return;
+        result[property.name.text] = value2;
+        continue;
+      }
+      if (!ts.isPropertyAssignment(property))
+        return;
+      const name = ts.isComputedPropertyName(property.name) ? evaluate(property.name.expression) : ts.isIdentifier(property.name) || ts.isStringLiteral(property.name) || ts.isNumericLiteral(property.name) ? property.name.text : undefined;
+      const value = evaluate(property.initializer);
+      if (typeof name !== "string" && typeof name !== "number" || name === "__proto__" || value === undefined)
+        return;
+      result[String(name)] = value;
+    }
+    return result;
+  }
+  if (ts.isPropertyAccessExpression(node) || ts.isElementAccessExpression(node)) {
+    const object = evaluate(node.expression);
+    const key = ts.isPropertyAccessExpression(node) ? node.name.text : node.argumentExpression && evaluate(node.argumentExpression);
+    if (isRecord2(object) && (typeof key === "string" || typeof key === "number"))
+      return object[String(key)];
+    return;
+  }
+  if (ts.isPrefixUnaryExpression(node)) {
+    const operand = evaluate(node.operand);
+    if (operand === undefined || isRecord2(operand))
+      return;
+    if (node.operator === ts.SyntaxKind.ExclamationToken)
+      return !operand;
+    if (typeof operand !== "number")
+      return;
+    if (node.operator === ts.SyntaxKind.MinusToken)
+      return -operand;
+    if (node.operator === ts.SyntaxKind.PlusToken)
+      return operand;
+  }
+  if (ts.isConditionalExpression(node)) {
+    const condition = evaluate(node.condition);
+    return condition === undefined || isRecord2(condition) ? undefined : evaluate(condition ? node.whenTrue : node.whenFalse);
+  }
+  if (ts.isBinaryExpression(node)) {
+    const left = evaluate(node.left);
+    const right = evaluate(node.right);
+    if (left === undefined || right === undefined || isRecord2(left) || isRecord2(right))
+      return;
+    if (node.operatorToken.kind === ts.SyntaxKind.PlusToken) {
+      if (typeof left === "string" || typeof right === "string")
+        return String(left) + String(right);
+      if (typeof left === "number" && typeof right === "number")
+        return left + right;
+      return;
+    }
+    if (typeof left !== "number" || typeof right !== "number")
+      return;
+    switch (node.operatorToken.kind) {
+      case ts.SyntaxKind.MinusToken:
+        return left - right;
+      case ts.SyntaxKind.AsteriskToken:
+        return left * right;
+      case ts.SyntaxKind.SlashToken:
+        return left / right;
+      case ts.SyntaxKind.PercentToken:
+        return left % right;
+      case ts.SyntaxKind.AsteriskAsteriskToken:
+        return left ** right;
+    }
+  }
+  return;
+}
+function identifierIsShadowed(identifier) {
+  for (let parent = identifier.parent;parent && !ts.isSourceFile(parent); parent = parent.parent) {
+    if (!ts.isFunctionLike(parent))
+      continue;
+    let shadowed = false;
+    walk(parent, (node) => {
+      if ((ts.isVariableDeclaration(node) || ts.isParameter(node) || ts.isBindingElement(node) || ts.isClassDeclaration(node) || ts.isFunctionDeclaration(node)) && node.name && ts.isIdentifier(node.name) && node.name.text === identifier.text)
+        shadowed = true;
+    });
+    if (shadowed)
+      return true;
+  }
+  return false;
+}
+function isRecord2(value) {
+  return typeof value === "object" && value !== null;
+}
+function isProperties(value) {
+  return isRecord2(value) && Object.values(value).every((item) => typeof item === "string" || typeof item === "number" && Number.isFinite(item));
+}
+function renderProperties(properties) {
+  return Object.entries(properties).map(([key, value]) => `${key.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${String(value).replace(RPX_PATTERN, (_match, number) => `calc(${number} * var(--tu-rpx))`)};`).join(`
+`);
+}
+function renderStyle(style) {
+  let css = `${style.selector} {
+${renderProperties(style.properties)}
+}
+`;
+  if (style.hover)
+    css += `${style.selector}:hover {
+${renderProperties(style.hover)}
+}
+`;
+  for (const [query, properties] of Object.entries(style.media ?? {})) {
+    css += `@media ${query} {
+${style.selector} {
+${renderProperties(properties)}
+}
+}
+`;
+  }
+  return css;
+}
+function hasRelativeResource(css) {
+  if (css.includes("\\") || /@import\b|(?:-webkit-)?image(?:-set)?\s*\(/i.test(css))
+    return true;
+  for (const match of css.matchAll(/url\s*\(\s*(?:(["'])(.*?)\1|([^)]*))\s*\)/gi)) {
+    const url = (match[2] ?? match[3] ?? "").trim();
+    if (!/^(?:\/|[a-z][a-z\d+.-]*:)/i.test(url))
+      return true;
+  }
+  return false;
+}
+function walk(node, visit) {
+  visit(node);
+  ts.forEachChild(node, (child) => walk(child, visit));
+}
+
+// src/web-bundle.ts
+import { resolve as resolve4 } from "path";
+async function buildWebBundle(options) {
+  const { outdir, ...inMemoryOptions } = options;
+  let stylesPlugin = createWebStylesPlugin();
+  let result = await Bun.build({ ...inMemoryOptions, plugins: [stylesPlugin] });
+  if (result.success && stylesPlugin.styles.size && stylesPlugin.runtimeFiles.size) {
+    stylesPlugin = createWebStylesPlugin(stylesPlugin.runtimeFiles);
+    result = await Bun.build({ ...inMemoryOptions, plugins: [stylesPlugin] });
+  }
+  const outputs = [];
+  if (result.success) {
+    for (const output of result.outputs) {
+      const path = resolve4(outdir, output.path);
+      const contents = await output.arrayBuffer();
+      await Bun.write(path, contents);
+      outputs.push({ path, kind: output.kind, type: output.type });
+    }
+  }
+  return {
+    result: { success: result.success, logs: result.logs, outputs },
+    styles: stylesPlugin.styles
+  };
+}
+
 // src/target/web-target.ts
 var INVALID_OUTPUT_DIRECTORY_MESSAGE = "Build output must be a subdirectory of the project root";
 
@@ -588,7 +1545,7 @@ class WebTarget {
     for (const [route, entry] of Object.entries(config.pages)) {
       await renderProjectHtml(config, {}, entry, route);
     }
-    await rm(config.build.outDir, { recursive: true, force: true });
+    await rm2(config.build.outDir, { recursive: true, force: true });
     await mkdir(config.build.outDir, { recursive: true });
     const builtByEntry = new Map;
     const failures = [];
@@ -610,7 +1567,7 @@ class WebTarget {
         throw new Error(`Missing built assets for entry: ${entry}`);
       }
       const pageHtmlPath = htmlPath(config, route);
-      const html = await renderProjectHtml(config, {
+      const rendered = await renderProjectHtml(config, {
         head: page.stylesheetAssets.map((asset) => ({
           tag: "link",
           attributes: {
@@ -623,35 +1580,39 @@ class WebTarget {
           src: toAssetUrl(config.build.outDir, pageHtmlPath, asset)
         }))
       }, page.entry, route);
-      await mkdir(dirname2(pageHtmlPath), { recursive: true });
-      await writeFile(pageHtmlPath, html);
-      assetsBuilt.push(...page.assets, pageHtmlPath);
+      const { html, assets: documentStyles } = await emitDocumentStyles(rendered, config.build.outDir, (asset) => toAssetUrl(config.build.outDir, pageHtmlPath, asset), page.stylesheetAssets.map((asset) => toAssetUrl(config.build.outDir, pageHtmlPath, asset)), page.componentStylesheetAssets.map((asset) => toAssetUrl(config.build.outDir, pageHtmlPath, asset)));
+      await mkdir(dirname3(pageHtmlPath), { recursive: true });
+      await writeFile2(pageHtmlPath, html);
+      assetsBuilt.push(...page.assets, ...documentStyles, pageHtmlPath);
     }
     return {
       root: config.root,
       outDir: config.build.outDir,
-      assetsBuilt
+      assetsBuilt: [...new Set(assetsBuilt)]
     };
   }
 }
 async function buildPage(config, entry) {
   let result;
+  let styles;
   try {
-    result = await Bun.build({
+    const bundle = await buildWebBundle({
       entrypoints: [entry],
       outdir: config.build.outDir,
       target: "browser",
       format: "esm",
       minify: process.env.TRANSONE_MINIFY !== "0",
-      naming: { entry: "[name].[ext]", chunk: "[name]-[hash].[ext]" },
+      naming: { entry: "[name]-[hash].[ext]", chunk: "[name]-[hash].[ext]" },
       throw: false
     });
+    result = bundle.result;
+    styles = bundle.styles;
   } catch (error) {
     return pageFailureReason(entry, [errorMessage(error)]);
   }
-  const assets = result.outputs.map((output) => resolve3(output.path));
-  const javascriptAssets = result.outputs.filter(isEntryJavaScriptOutput).map((output) => resolve3(output.path));
-  const stylesheetAssets = result.outputs.filter(isStylesheetOutput).map((output) => resolve3(output.path));
+  const assets = result.outputs.map((output) => resolve5(output.path));
+  const javascriptAssets = result.outputs.filter(isEntryJavaScriptOutput).map((output) => resolve5(output.path));
+  const stylesheetAssets = result.outputs.filter(isStylesheetOutput).map((output) => resolve5(output.path));
   if (!result.success || assets.length === 0 || javascriptAssets.length === 0) {
     return pageFailureReason(entry, result.logs.map((log) => log.message), {
       success: result.success,
@@ -659,11 +1620,13 @@ async function buildPage(config, entry) {
       hasJavaScript: javascriptAssets.length > 0
     });
   }
+  const componentStylesheetAssets = await emitComponentStyles(styles, config.build.outDir);
   return {
     entry,
-    assets,
+    assets: [...assets, ...componentStylesheetAssets],
     javascriptAssets,
-    stylesheetAssets
+    stylesheetAssets,
+    componentStylesheetAssets
   };
 }
 function pageFailureReason(entry, logs, state) {
@@ -686,20 +1649,20 @@ ${failures.map((failure) => `- ${failure}`).join(`
 }
 function htmlPath(config, route) {
   if (route === "/") {
-    return resolve3(config.build.outDir, "index.html");
+    return resolve5(config.build.outDir, "index.html");
   }
   const relativeRoute = route.replace(/^\/+/, "");
   if (config.build.directoryPages) {
-    return resolve3(config.build.outDir, relativeRoute, "index.html");
+    return resolve5(config.build.outDir, relativeRoute, "index.html");
   }
-  return resolve3(config.build.outDir, `${relativeRoute}.html`);
+  return resolve5(config.build.outDir, `${relativeRoute}.html`);
 }
 function toAssetUrl(outDir, fromHtmlFile, asset) {
   const fromOutDir = relative2(outDir, asset).split(sep2).join("/");
   if (fromOutDir === "" || fromOutDir === ".." || fromOutDir.startsWith("../") || isAbsolute2(fromOutDir)) {
     throw new Error(`Build asset must be inside the output directory: ${asset}`);
   }
-  const fromHtmlDir = dirname2(fromHtmlFile);
+  const fromHtmlDir = dirname3(fromHtmlFile);
   const assetPath = relative2(fromHtmlDir, asset).split(sep2).join("/");
   return `./${assetPath}`;
 }
@@ -864,9 +1827,9 @@ var mpBytedanceTarget = new MpTarget(MP_BYTEDANCE_DIALECT);
 var mpXiaohongshuTarget = new MpTarget(MP_XIAOHONGSHU_DIALECT);
 
 // src/app/build-app.ts
-import { cp, mkdir as mkdir2, rm as rm2, writeFile as writeFile2 } from "fs/promises";
+import { cp, mkdir as mkdir2, rm as rm3, writeFile as writeFile3 } from "fs/promises";
 import { existsSync as existsSync3 } from "fs";
-import { dirname as dirname3, join, resolve as resolve4 } from "path";
+import { dirname as dirname4, join, resolve as resolve6 } from "path";
 
 // src/app/errors.ts
 import { basename } from "path";
@@ -882,79 +1845,79 @@ var STYLE_KEYS = new Set(["color", "backgroundColor", "fontSize", "fontWeight",
 async function analyzeNativeScreen(entry) {
   if (!existsSync2(entry))
     throw nativeError(entry, "\u6E90\u6587\u4EF6\u4E0D\u5B58\u5728");
-  const ts = await loadTypescript();
-  const source = ts.createSourceFile(entry, readFileSync(entry, "utf8"), ts.ScriptTarget.Latest, true);
-  const component = source.statements.find((s) => ts.isClassDeclaration(s));
+  const ts2 = await loadTypescript();
+  const source = ts2.createSourceFile(entry, readFileSync(entry, "utf8"), ts2.ScriptTarget.Latest, true);
+  const component = source.statements.find((s) => ts2.isClassDeclaration(s));
   if (!component)
     throw nativeError(entry, "\u672A\u627E\u5230 Component \u7C7B");
-  const state = readState(ts, component, entry);
+  const state = readState(ts2, component, entry);
   const actions = new Map;
   for (const member of component.members)
-    if (ts.isMethodDeclaration(member) && ts.isIdentifier(member.name)) {
-      const action = readAction(ts, member, entry);
+    if (ts2.isMethodDeclaration(member) && ts2.isIdentifier(member.name)) {
+      const action = readAction(ts2, member, entry);
       if (action)
         actions.set(member.name.text, action);
     }
-  const render = component.members.find((m) => ts.isMethodDeclaration(m) && m.name.getText(source) === "render");
-  const value = render?.body?.statements.find(ts.isReturnStatement)?.expression;
-  if (!value || !ts.isObjectLiteralExpression(value))
+  const render = component.members.find((m) => ts2.isMethodDeclaration(m) && m.name.getText(source) === "render");
+  const value = render?.body?.statements.find(ts2.isReturnStatement)?.expression;
+  if (!value || !ts2.isObjectLiteralExpression(value))
     throw nativeError(entry, "render() \u5FC5\u987B\u8FD4\u56DE\u9759\u6001 VNode \u5BF9\u8C61");
-  const root = readNode(ts, value, entry, new Set(state.map((item) => item.key)), actions);
+  const root = readNode(ts2, value, entry, new Set(state.map((item) => item.key)), actions);
   if (root.kind !== "container")
     throw nativeError(entry, "\u6839\u8282\u70B9\u5FC5\u987B\u662F\u5BB9\u5668\u8282\u70B9");
   return { name: component.name?.text ?? "App", state, root };
 }
-function readState(ts, component, file) {
-  const method = component.members.find((m) => ts.isMethodDeclaration(m) && m.name.getText() === "initState");
-  const value = method?.body?.statements.find(ts.isReturnStatement)?.expression;
+function readState(ts2, component, file) {
+  const method = component.members.find((m) => ts2.isMethodDeclaration(m) && m.name.getText() === "initState");
+  const value = method?.body?.statements.find(ts2.isReturnStatement)?.expression;
   if (!value)
     return [];
-  if (!ts.isObjectLiteralExpression(value))
+  if (!ts2.isObjectLiteralExpression(value))
     throw nativeError(file, "initState() \u5FC5\u987B\u8FD4\u56DE\u5BF9\u8C61\u5B57\u9762\u91CF");
   return value.properties.map((item) => {
-    if (!ts.isPropertyAssignment(item) || !ts.isIdentifier(item.name))
+    if (!ts2.isPropertyAssignment(item) || !ts2.isIdentifier(item.name))
       throw nativeError(file, "state \u5FC5\u987B\u4F7F\u7528\u6807\u8BC6\u7B26\u5C5E\u6027");
-    const literal = literalValue(ts, item.initializer);
+    const literal = literalValue(ts2, item.initializer);
     if (literal === undefined)
       throw nativeError(file, `state.${item.name.text} \u5FC5\u987B\u662F\u5B57\u9762\u91CF`);
     return { key: item.name.text, value: literal };
   });
 }
-function readAction(ts, method, file) {
+function readAction(ts2, method, file) {
   const expression = method.body?.statements[0];
-  if (!expression || !ts.isExpressionStatement(expression) || !ts.isBinaryExpression(expression.expression))
+  if (!expression || !ts2.isExpressionStatement(expression) || !ts2.isBinaryExpression(expression.expression))
     return;
   const binary = expression.expression;
-  if (!ts.isPropertyAccessExpression(binary.left) || !ts.isPropertyAccessExpression(binary.left.expression) || binary.left.expression.expression.kind !== ts.SyntaxKind.ThisKeyword || binary.left.expression.name.text !== "state")
+  if (!ts2.isPropertyAccessExpression(binary.left) || !ts2.isPropertyAccessExpression(binary.left.expression) || binary.left.expression.expression.kind !== ts2.SyntaxKind.ThisKeyword || binary.left.expression.name.text !== "state")
     return;
-  const value = literalValue(ts, binary.right);
+  const value = literalValue(ts2, binary.right);
   const key = binary.left.name.text;
-  if ((binary.operatorToken.kind === ts.SyntaxKind.PlusEqualsToken || binary.operatorToken.kind === ts.SyntaxKind.MinusEqualsToken) && typeof value === "number")
-    return { kind: "increment", key, by: binary.operatorToken.kind === ts.SyntaxKind.MinusEqualsToken ? -value : value };
-  if (binary.operatorToken.kind === ts.SyntaxKind.EqualsToken && value !== undefined)
+  if ((binary.operatorToken.kind === ts2.SyntaxKind.PlusEqualsToken || binary.operatorToken.kind === ts2.SyntaxKind.MinusEqualsToken) && typeof value === "number")
+    return { kind: "increment", key, by: binary.operatorToken.kind === ts2.SyntaxKind.MinusEqualsToken ? -value : value };
+  if (binary.operatorToken.kind === ts2.SyntaxKind.EqualsToken && value !== undefined)
     return { kind: "set-literal", key, value };
   throw nativeError(file, `\u65B9\u6CD5 ${method.name.getText()} \u4E0D\u652F\u6301\u539F\u751F\u7F16\u8BD1`);
 }
-function readNode(ts, node, file, state, actions) {
-  const tag = stringValue(ts, get(ts, node, "tag"), file, "VNode tag");
-  const style = readStyle(ts, get(ts, node, "props"), file);
-  const children = get(ts, node, "children");
-  const childNodes = children && ts.isArrayLiteralExpression(children) ? [...children.elements].filter(ts.isExpression) : [];
+function readNode(ts2, node, file, state, actions) {
+  const tag = stringValue(ts2, get(ts2, node, "tag"), file, "VNode tag");
+  const style = readStyle(ts2, get(ts2, node, "props"), file);
+  const children = get(ts2, node, "children");
+  const childNodes = children && ts2.isArrayLiteralExpression(children) ? [...children.elements].filter(ts2.isExpression) : [];
   if (CONTAINERS.has(tag))
     return { kind: "container", children: childNodes.map((child) => {
-      if (!ts.isObjectLiteralExpression(child))
+      if (!ts2.isObjectLiteralExpression(child))
         throw nativeError(file, "\u5BB9\u5668 children \u53EA\u652F\u6301\u9759\u6001 VNode");
-      return readNode(ts, child, file, state, actions);
+      return readNode(ts2, child, file, state, actions);
     }), ...style ? { style } : {} };
-  const parts = childNodes.flatMap((child) => readText(ts, child, file, state));
+  const parts = childNodes.flatMap((child) => readText(ts2, child, file, state));
   if (TEXT.has(tag))
     return { kind: "text", parts, ...style ? { style } : {} };
   if (tag === "button")
-    return { kind: "button", parts, action: readClick(ts, get(ts, node, "listeners"), file, actions), ...style ? { style } : {} };
+    return { kind: "button", parts, action: readClick(ts2, get(ts2, node, "listeners"), file, actions), ...style ? { style } : {} };
   throw nativeError(file, `\u4E0D\u652F\u6301\u7684\u539F\u751F\u8282\u70B9: ${tag}`);
 }
-function readText(ts, expression, file, state) {
-  const value = literalValue(ts, expression);
+function readText(ts2, expression, file, state) {
+  const value = literalValue(ts2, expression);
   if (typeof value !== "string")
     throw nativeError(file, "\u6587\u672C children \u5FC5\u987B\u662F\u5B57\u7B26\u4E32\u5B57\u9762\u91CF");
   const result = [];
@@ -974,30 +1937,30 @@ function readText(ts, expression, file, state) {
     result.push({ kind: "literal", value: value.slice(cursor) });
   return result;
 }
-function readClick(ts, listeners, file, actions) {
-  if (!listeners || !ts.isObjectLiteralExpression(listeners))
+function readClick(ts2, listeners, file, actions) {
+  if (!listeners || !ts2.isObjectLiteralExpression(listeners))
     throw nativeError(file, "button \u5FC5\u987B\u58F0\u660E listeners.click");
-  const handler = get(ts, listeners, "click");
-  const body = handler && ts.isArrowFunction(handler) ? handler.body : undefined;
-  const expression = body && ts.isCallExpression(body) ? body : body && ts.isBlock(body) && ts.isExpressionStatement(body.statements[0]) ? body.statements[0].expression : undefined;
-  if (!expression || !ts.isCallExpression(expression) || !ts.isPropertyAccessExpression(expression.expression) || expression.expression.expression.kind !== ts.SyntaxKind.ThisKeyword)
+  const handler = get(ts2, listeners, "click");
+  const body = handler && ts2.isArrowFunction(handler) ? handler.body : undefined;
+  const expression = body && ts2.isCallExpression(body) ? body : body && ts2.isBlock(body) && ts2.isExpressionStatement(body.statements[0]) ? body.statements[0].expression : undefined;
+  if (!expression || !ts2.isCallExpression(expression) || !ts2.isPropertyAccessExpression(expression.expression) || expression.expression.expression.kind !== ts2.SyntaxKind.ThisKeyword)
     throw nativeError(file, "click \u53EA\u652F\u6301\u8C03\u7528 this.method()");
   const action = actions.get(expression.expression.name.text);
   if (!action)
     throw nativeError(file, `click \u65B9\u6CD5 ${expression.expression.name.text} \u4E0D\u652F\u6301\u539F\u751F\u7F16\u8BD1`);
   return action;
 }
-function readStyle(ts, props, file) {
-  if (!props || !ts.isObjectLiteralExpression(props))
+function readStyle(ts2, props, file) {
+  if (!props || !ts2.isObjectLiteralExpression(props))
     return;
-  const style = get(ts, props, "style");
-  if (!style || !ts.isObjectLiteralExpression(style))
+  const style = get(ts2, props, "style");
+  if (!style || !ts2.isObjectLiteralExpression(style))
     return;
   const out = {};
   for (const item of style.properties) {
-    if (!ts.isPropertyAssignment(item) || !ts.isIdentifier(item.name) || !STYLE_KEYS.has(item.name.text))
+    if (!ts2.isPropertyAssignment(item) || !ts2.isIdentifier(item.name) || !STYLE_KEYS.has(item.name.text))
       throw nativeError(file, "\u4E0D\u652F\u6301\u7684\u539F\u751F\u6837\u5F0F\u5C5E\u6027");
-    const value = literalValue(ts, item.initializer);
+    const value = literalValue(ts2, item.initializer);
     const keyword = item.name.text === "color" || item.name.text === "backgroundColor" || item.name.text === "fontWeight" || item.name.text === "textAlign";
     if (keyword && (typeof value === "string" || typeof value === "number")) {
       out[item.name.text] = value;
@@ -1009,24 +1972,24 @@ function readStyle(ts, props, file) {
   }
   return out;
 }
-function get(ts, node, name) {
-  const item = node.properties.find((p) => ts.isPropertyAssignment(p) && p.name.getText().replace(/['"]/g, "") === name);
-  return item && ts.isPropertyAssignment(item) ? item.initializer : undefined;
+function get(ts2, node, name) {
+  const item = node.properties.find((p) => ts2.isPropertyAssignment(p) && p.name.getText().replace(/['"]/g, "") === name);
+  return item && ts2.isPropertyAssignment(item) ? item.initializer : undefined;
 }
-function stringValue(ts, expression, file, label) {
-  const value = expression && literalValue(ts, expression);
+function stringValue(ts2, expression, file, label) {
+  const value = expression && literalValue(ts2, expression);
   if (typeof value !== "string")
     throw nativeError(file, `${label} \u5FC5\u987B\u662F\u5B57\u7B26\u4E32`);
   return value;
 }
-function literalValue(ts, value) {
-  if (ts.isStringLiteral(value) || ts.isNoSubstitutionTemplateLiteral(value))
+function literalValue(ts2, value) {
+  if (ts2.isStringLiteral(value) || ts2.isNoSubstitutionTemplateLiteral(value))
     return value.text;
-  if (ts.isNumericLiteral(value))
+  if (ts2.isNumericLiteral(value))
     return Number(value.text);
-  if (value.kind === ts.SyntaxKind.TrueKeyword)
+  if (value.kind === ts2.SyntaxKind.TrueKeyword)
     return true;
-  if (value.kind === ts.SyntaxKind.FalseKeyword)
+  if (value.kind === ts2.SyntaxKind.FalseKeyword)
     return false;
   return;
 }
@@ -1044,17 +2007,17 @@ async function buildNativeApp(config, dialect) {
     files[`${dialect.resourceDirectory}/transone.config.json`] = `${JSON.stringify({ host: config.app.host }, null, 2)}
 `;
   }
-  await rm2(config.app.outDir, { recursive: true, force: true });
+  await rm3(config.app.outDir, { recursive: true, force: true });
   const assetsBuilt = [];
   for (const [relative3, content] of Object.entries(files).sort(([a], [b]) => a.localeCompare(b))) {
     const target = join(config.app.outDir, relative3);
-    await mkdir2(dirname3(target), { recursive: true });
-    await writeFile2(target, content, "utf8");
+    await mkdir2(dirname4(target), { recursive: true });
+    await writeFile3(target, content, "utf8");
     assetsBuilt.push(target);
   }
   if (existsSync3(config.app.publicDir))
     await cp(config.app.publicDir, join(config.app.outDir, dialect.resourceDirectory), { recursive: true });
-  return { root: config.root, outDir: resolve4(config.app.outDir), assetsBuilt };
+  return { root: config.root, outDir: resolve6(config.app.outDir), assetsBuilt };
 }
 
 // src/target/app-target.ts
@@ -1310,8 +2273,8 @@ class TargetRegistry {
 var targetRegistry = new TargetRegistry;
 
 // src/build.ts
-import { mkdir as mkdir3, rm as rm3 } from "fs/promises";
-import { dirname as dirname4, resolve as resolve5 } from "path";
+import { mkdir as mkdir3, rm as rm4 } from "fs/promises";
+import { dirname as dirname5, resolve as resolve7 } from "path";
 async function build(options = {}) {
   const config = await resolveConfig(options);
   if (options.library) {
@@ -1325,7 +2288,7 @@ async function buildLibrary(config) {
   if (!library) {
     throw new Error("TransOne library build requires config.library");
   }
-  await rm3(library.outDir, { recursive: true, force: true });
+  await rm4(library.outDir, { recursive: true, force: true });
   await mkdir3(library.outDir, { recursive: true });
   if (library.dts) {
     for (const tsconfig of library.tsconfigs) {
@@ -1336,7 +2299,7 @@ async function buildLibrary(config) {
   const result = await Bun.build({
     entrypoints: [library.entry],
     outdir: library.outDir,
-    root: dirname4(library.entry),
+    root: dirname5(library.entry),
     target: "browser",
     format: "esm",
     sourcemap: library.sourcemap ? "linked" : undefined,
@@ -1350,7 +2313,7 @@ async function buildLibrary(config) {
 ${result.logs.map((log) => log.message).join(`
 `)}`);
   }
-  const assetsBuilt = result.outputs.map((output) => resolve5(output.path));
+  const assetsBuilt = result.outputs.map((output) => resolve7(output.path));
   return { root: config.root, outDir: library.outDir, assetsBuilt };
 }
 async function runTsc(root, tsconfig) {
@@ -1369,7 +2332,7 @@ async function runTsc(root, tsconfig) {
 import { existsSync as existsSync4, mkdirSync, writeFileSync } from "fs";
 import { basename as basename2, join as join2 } from "path";
 var TRANSONE_FRAMEWORK_VERSION = "0.4.0";
-var TRANSONE_CLI_VERSION = "0.6.3";
+var TRANSONE_CLI_VERSION = "0.7.0";
 var GITHUB_URL = "https://github.com/geektech-team/transone";
 function createProject(options = {}) {
   const root = options.root ?? process.cwd();
@@ -1522,14 +2485,14 @@ app.mount();
 }
 
 // src/server.ts
-import { randomUUID } from "crypto";
-import { rm as rm4 } from "fs/promises";
+import { randomUUID as randomUUID2 } from "crypto";
+import { rm as rm5 } from "fs/promises";
 import {
   basename as basename3,
-  extname,
+  extname as extname2,
   isAbsolute as isAbsolute4,
   relative as relative4,
-  resolve as resolve6,
+  resolve as resolve8,
   sep as sep3
 } from "path";
 
@@ -1849,11 +2812,11 @@ async function createServerInstance(options, watch2) {
   for (const [route, entry] of Object.entries(config.pages)) {
     await renderProjectHtml(config, {}, entry, route);
   }
-  const developmentOutDir = resolve6(config.root, "dist", "dev", "h5");
+  const developmentOutDir = resolve8(config.root, "dist", "dev", "h5");
   await assertSafeSubdirectory(config.root, developmentOutDir, INVALID_DEVELOPMENT_DIRECTORY_MESSAGE);
   const proxy = createProxyHandler(config.server.proxy);
   const sessionId = createGenerationId();
-  const sessionOutDir = resolve6(developmentOutDir, sessionId);
+  const sessionOutDir = resolve8(developmentOutDir, sessionId);
   const artifacts = new Map;
   const buildProject = createDevelopmentBuilder(sessionId, sessionOutDir, artifacts);
   const liveReload = watch2 ? createLiveReloadHub() : undefined;
@@ -1931,13 +2894,14 @@ async function serveProjectRequest(request, config, pages, getBundle, artifacts,
     }
     try {
       const { renderProjectHtml } = await import("./project-ybacfze8.js");
-      const html = await renderProjectHtml(config, {
+      const rendered = await renderProjectHtml(config, {
         head: bundle.stylesheets.map(({ pathname: href }) => ({
           tag: "link",
           attributes: { rel: "stylesheet", href }
         })),
         scripts: [{ type: "module", src: bundle.entry.pathname }]
       }, entry, route);
+      const html = await emitDevelopmentDocumentStyles(rendered, bundle);
       publishDevelopmentBundle(bundle, artifacts);
       return new Response(liveReload ? injectLiveReloadScript(html) : html, {
         headers: {
@@ -1987,13 +2951,14 @@ async function serveProjectRequest(request, config, pages, getBundle, artifacts,
     if (!(bundle instanceof Response)) {
       try {
         const { renderProjectHtml } = await import("./project-ybacfze8.js");
-        const html = await renderProjectHtml(config, {
+        const rendered = await renderProjectHtml(config, {
           head: bundle.stylesheets.map(({ pathname: href }) => ({
             tag: "link",
             attributes: { rel: "stylesheet", href }
           })),
           scripts: [{ type: "module", src: bundle.entry.pathname }]
         }, config.entry, "/");
+        const html = await emitDevelopmentDocumentStyles(rendered, bundle);
         publishDevelopmentBundle(bundle, artifacts);
         return new Response(liveReload ? injectLiveReloadScript(html) : html, {
           headers: {
@@ -2101,7 +3066,7 @@ function isWatchedFile(instance, relativePath) {
   if (segments.some((segment) => IGNORED_WATCH_SEGMENTS.has(segment))) {
     return false;
   }
-  const absolutePath = resolve6(instance.config.root, relativePath);
+  const absolutePath = resolve8(instance.config.root, relativePath);
   if (isWithinOrEqual(instance.config.build.outDir, absolutePath)) {
     return false;
   }
@@ -2109,7 +3074,7 @@ function isWatchedFile(instance, relativePath) {
   if (base.startsWith(".") && absolutePath !== instance.config.configFile) {
     return false;
   }
-  return WATCHED_EXTENSIONS.has(extname(base).toLowerCase());
+  return WATCHED_EXTENSIONS.has(extname2(base).toLowerCase());
 }
 function toRelativePath2(root, absolutePath) {
   return relative4(root, absolutePath).split(sep3).join("/");
@@ -2118,6 +3083,19 @@ function isWithinOrEqual(parent, candidate) {
   const pathFromParent = relative4(parent, candidate);
   return pathFromParent === "" || pathFromParent !== ".." && !pathFromParent.startsWith(`..${sep3}`) && !isAbsolute4(pathFromParent);
 }
+async function emitDevelopmentDocumentStyles(rendered, bundle) {
+  const generationUrl = bundle.generationUrl;
+  const result = await emitDocumentStyles(rendered, bundle.outDir, (path) => `${generationUrl}/${basename3(path)}`, bundle.stylesheets.map((stylesheet) => stylesheet.pathname), bundle.componentStylesheets.map((stylesheet) => stylesheet.pathname));
+  for (const path of result.assets) {
+    const pathname = `${generationUrl}/${basename3(path)}`;
+    bundle.artifacts.set(pathname, {
+      filePath: path,
+      pathname,
+      type: "text/css; charset=utf-8"
+    });
+  }
+  return result.html;
+}
 function createDevelopmentBuilder(sessionId, sessionOutDir, artifacts) {
   let queue = Promise.resolve();
   let disposed = false;
@@ -2168,7 +3146,7 @@ function createDevelopmentBuilder(sessionId, sessionOutDir, artifacts) {
     retirementTimers.forEach((timer) => clearTimeout(timer));
     retirementTimers.clear();
     disposal = queue.then(async () => {
-      await rm4(sessionOutDir, { recursive: true, force: true });
+      await rm5(sessionOutDir, { recursive: true, force: true });
       latestBundles.clear();
       artifacts.clear();
     });
@@ -2181,14 +3159,14 @@ function releaseDevelopmentBundle(bundle) {
   bundle.retire?.();
 }
 async function removeDevelopmentBundle(bundle, artifacts) {
-  await rm4(bundle.outDir, { recursive: true, force: true });
+  await rm5(bundle.outDir, { recursive: true, force: true });
   for (const pathname of bundle.artifacts.keys()) {
     artifacts.delete(pathname);
   }
 }
 async function buildProjectBundle(entry, sessionId, sessionOutDir) {
   const generationId = createGenerationId();
-  const generationOutDir = resolve6(sessionOutDir, generationId);
+  const generationOutDir = resolve8(sessionOutDir, generationId);
   const generationUrl = `${DEVELOPMENT_URL_PREFIX}/${sessionId}/${generationId}`;
   const buildOptions = {
     entrypoints: [entry],
@@ -2196,7 +3174,6 @@ async function buildProjectBundle(entry, sessionId, sessionOutDir) {
     target: "browser",
     format: "esm",
     sourcemap: "inline",
-    write: true,
     throw: false,
     publicPath: `${generationUrl}/`,
     naming: {
@@ -2207,7 +3184,7 @@ async function buildProjectBundle(entry, sessionId, sessionOutDir) {
   };
   let success = false;
   try {
-    const result = await Bun.build(buildOptions);
+    const { result, styles } = await buildWebBundle(buildOptions);
     const entryArtifact = result.outputs.find(isEntryJavaScriptOutput);
     if (!result.success || !entryArtifact) {
       result.logs.forEach((log) => console.error(log));
@@ -2230,11 +3207,20 @@ async function buildProjectBundle(entry, sessionId, sessionOutDir) {
     if (!entry2) {
       throw new Error("Development entry output was not indexed");
     }
+    const componentStylesheets = (await emitComponentStyles(styles, generationOutDir)).map((filePath) => ({
+      filePath,
+      pathname: `${generationUrl}/${basename3(filePath)}`,
+      type: "text/css; charset=utf-8"
+    }));
+    for (const output of componentStylesheets)
+      pendingArtifacts.set(output.pathname, output);
     success = true;
     return {
       outDir: generationOutDir,
+      generationUrl,
       activeRequests: 0,
       entry: entry2,
+      componentStylesheets,
       stylesheets: result.outputs.filter(isStylesheetOutput).map((output) => outputs.get(output)).filter((output) => output !== undefined),
       artifacts: pendingArtifacts
     };
@@ -2243,7 +3229,7 @@ async function buildProjectBundle(entry, sessionId, sessionOutDir) {
     return buildFailureResponse();
   } finally {
     if (!success) {
-      await rm4(generationOutDir, { recursive: true, force: true });
+      await rm5(generationOutDir, { recursive: true, force: true });
     }
   }
 }
@@ -2260,7 +3246,7 @@ function publishDevelopmentBundle(bundle, artifacts) {
   }
 }
 function createDevelopmentOutput(generationOutDir, generationUrl, output) {
-  const filePath = resolve6(output.path);
+  const filePath = resolve8(output.path);
   const pathFromGeneration = relative4(generationOutDir, filePath);
   if (pathFromGeneration === "" || pathFromGeneration === ".." || pathFromGeneration.startsWith(`..${sep3}`) || isAbsolute4(pathFromGeneration)) {
     throw new Error(`Development output must not escape outside its generation directory: ${output.path}`);
@@ -2273,7 +3259,7 @@ function createDevelopmentOutput(generationOutDir, generationUrl, output) {
   };
 }
 function createGenerationId() {
-  return randomUUID().replace(/-/g, "");
+  return randomUUID2().replace(/-/g, "");
 }
 function buildFailureResponse() {
   return new Response("Failed to build project bundle", {
@@ -2284,5 +3270,5 @@ function buildFailureResponse() {
 
 export { TARGET_TYPES, isTargetType, MP_TARGET_TYPES, isMpTargetType, defineConfig, resolveConfig, WebTarget, MpTarget, mpWeixinTarget, mpAlipayTarget, mpBytedanceTarget, mpXiaohongshuTarget, TargetRegistry, targetRegistry, build, createProject, startDevServer };
 
-//# debugId=8A1F36BF60A5A63464756E2164756E21
-//# sourceMappingURL=index-8k9x2k6m.js.map
+//# debugId=E2D8EB9E7C04701664756E2164756E21
+//# sourceMappingURL=index-x5rrsfyb.js.map