@marko/language-tools 2.4.5 → 2.4.6

package/dist/index.mjs

@@ -5,7 +5,7 @@ var __export = (target, all) => {
 };
 
 // src/parser.ts
-import { TagType, createParser } from "htmljs-parser";
+import { createParser, TagType } from "htmljs-parser";
 
 // src/util/get-node-at-offset.ts
 function getNodeAtOffset(offset, program) {
@@ -91,8 +91,8 @@ function childAtOffset(offset, children) {
 // src/parser.ts
 import {
   getLines,
-  getPosition,
-  getLocation
+  getLocation,
+  getPosition
 } from "htmljs-parser";
 var styleBlockReg = /((?:\.[^\s\\/:*?"<>|({]+)*)\s*\{/y;
 var UNFINISHED = Number.MAX_SAFE_INTEGER;
@@ -811,144 +811,203 @@ function sortBySourceThenGenerated(a, b) {
   return delta === 0 ? b.generatedStart - a.generatedStart : delta;
 }
 
-// src/extractors/style/index.ts
-function extractStyle(opts) {
-  const { parsed, lookup } = opts;
-  const extractorsByExt = /* @__PURE__ */ new Map();
-  const { read, program, code } = parsed;
-  let placeholderId = 0;
-  for (const node of program.static) {
-    if (node.type === 27 /* Style */) {
-      getExtractor(node.ext || ".css").copy(node.value);
-    }
+// src/extractors/html/keywords.ts
+var builtinTagsRegex = /^(?:a(?:(?:bbr|cronym|ddress|pplet|r(?:ea|ticle)|side|udio))?|b(?:(?:ase(?:font)?|d[io]|gsound|ig|l(?:ink|ockquote)|ody|r|utton))?|c(?:a(?:nvas|ption)|enter|ite|o(?:de|l(?:group)?|mmand|ntent))|d(?:ata(?:list)?|d|e(?:l|tails)|fn|i(?:alog|r|v)|l|t)|e(?:lement|m(?:bed)?)|f(?:i(?:eldset|g(?:caption|ure))|o(?:nt|oter|rm)|rame(?:set)?)|h(?:1|2|3|4|5|6|ead(?:er)?|group|r|tml)|i(?:(?:frame|m(?:age|g)|n(?:put|s)|sindex))?|k(?:bd|eygen)|l(?:abel|egend|i(?:(?:nk|sting))?)|m(?:a(?:in|p|r(?:k|quee)|th)|e(?:nu(?:item)?|t(?:a|er))|ulticol)|n(?:av|extid|o(?:br|embed|frames|script))|o(?:bject|l|pt(?:group|ion)|utput)|p(?:(?:aram|icture|laintext|r(?:e|ogress)))?|q|r(?:bc?|p|tc?|uby)|s(?:(?:amp|cript|e(?:ction|lect)|hadow|lot|mall|ource|pa(?:cer|n)|t(?:r(?:ike|ong)|yle)|u(?:b|mmary|p)|vg))?|t(?:able|body|d|e(?:mplate|xtarea)|foot|h(?:ead)?|i(?:me|tle)|r(?:ack)?|t)|ul?|v(?:ar|ideo)|wbr|xmp)$/;
+function isHTMLTag(tag) {
+  return builtinTagsRegex.test(tag);
+}
+function getAttributeValueType(value) {
+  if (value === void 0 || value[0] !== "=") return void 0;
+  value = value.substring(1).trim();
+  switch (value) {
+    case "NaN":
+    case "Infinity":
+    case "-Infinity":
+      return 1 /* Literal */;
+    case "null":
+    case "false":
+    case "undefined":
+      return void 0;
+    case "true":
+      return 0 /* True */;
   }
-  for (const node of program.body) {
-    visit(node);
+  if (
+    // double quote string
+    /^"(?:[^"\\]+|\\.)*"$/.test(value) || // single quote string
+    /^'(?:[^'\\]+|\\.)*'$/.test(value) || // template literal without any interpolations
+    /^`(?:[^`\\$]+|\\.|\$(?!\{))*`$/.test(value)
+  ) {
+    return 2 /* QuotedString */;
+  } else if (
+    // octal literal
+    /^-?0[oO]?[0-7](?:_?[0-7]+)*n?$/.test(value) || // hex literal
+    /^-?0[xX][0-9a-fA-F](?:_?[0-9a-fA-F]+)*n?$/.test(value) || // binary literal
+    /^-?0[bB][01](?:_?[01]+)*n?$/.test(value) || // integer or float
+    /^-?\d(?:_?\d+)*(?:[.eE]\d(?:_?\d+)*|n?|\.?)$/.test(value)
+  ) {
+    return 1 /* Literal */;
   }
-  const extractedByExt = /* @__PURE__ */ new Map();
-  for (const [ext, extractor] of extractorsByExt) {
-    extractedByExt.set(ext, extractor.end());
+  return 3 /* Dynamic */;
+}
+
+// src/extractors/html/index.ts
+function extractHTML(parsed) {
+  return new HTMLExtractor(parsed).end();
+}
+var HTMLExtractor = class {
+  #extractor;
+  #read;
+  #nodeDetails;
+  #nodeIdCounter;
+  constructor(parsed) {
+    this.#extractor = new Extractor(parsed);
+    this.#read = parsed.read.bind(parsed);
+    this.#nodeDetails = {};
+    this.#nodeIdCounter = 0;
+    parsed.program.body.forEach((node) => this.#visitNode(node));
   }
-  return extractedByExt;
-  function visit(node) {
-    var _a, _b;
+  end() {
+    return { extracted: this.#extractor.end(), nodeDetails: this.#nodeDetails };
+  }
+  #visitNode(node) {
+    var _a;
+    let hasDynamicBody = false, hasDynamicAttrs = false, isDynamic = false;
     switch (node.type) {
       case 16 /* AttrTag */:
-        if (node.body) {
-          for (const child of node.body) {
-            visit(child);
-          }
-        }
+        (_a = node.body) == null ? void 0 : _a.forEach((child) => {
+          if (this.#visitNode(child)) hasDynamicBody = true;
+        });
         break;
-      case 1 /* Tag */:
-        if (node.body) {
-          if (node.nameText === "style") {
-            const ext = node.shorthandClassNames ? read(node.shorthandClassNames.at(-1)) : ".css";
-            for (const child of node.body) {
-              switch (child.type) {
-                case 17 /* Text */:
-                  getExtractor(ext).copy(child);
-                  break;
-                case 22 /* Placeholder */:
-                  getExtractor(ext).write(`var(--_${placeholderId++})`);
-                  break;
-              }
-            }
-          } else {
-            for (const child of node.body) {
-              visit(child);
-            }
-          }
-        }
-        if (node.attrs) {
-          for (const attr of node.attrs) {
-            if (
-              // Check for string literal attribute values.
-              attr.type === 10 /* AttrNamed */ && ((_a = attr.value) == null ? void 0 : _a.type) === 13 /* AttrValue */ && /^['"]$/.test(code[attr.value.value.start])
-            ) {
-              const name = read(attr.name);
-              if (name === "#style" || name === "style" && node.nameText && name === "style" && ((_b = lookup.getTag(node.nameText)) == null ? void 0 : _b.html)) {
-                getExtractor("css").write(":root{").copy({
-                  start: attr.value.value.start + 1,
-                  end: attr.value.value.end - 1
-                }).write("}");
-              }
-            }
-          }
-        }
+      case 1 /* Tag */: {
+        const nodeId = `${this.#nodeIdCounter++}`;
+        ({ isDynamic, hasDynamicAttrs, hasDynamicBody } = this.#writeTag(
+          node,
+          nodeId
+        ));
+        this.#nodeDetails[nodeId] = { hasDynamicAttrs, hasDynamicBody };
+        break;
+      }
+      case 17 /* Text */:
+        this.#extractor.copy(node);
+        break;
+      case 22 /* Placeholder */:
+        isDynamic = this.#read({
+          start: node.start + 1,
+          end: node.start + 2
+        }) === "!";
+        this.#extractor.write("placeholder");
         break;
     }
+    return isDynamic || hasDynamicBody;
   }
-  function getExtractor(ext) {
-    let extractor = extractorsByExt.get(ext);
-    if (!extractor) {
-      extractorsByExt.set(ext, extractor = new Extractor(parsed));
+  #writeTag(node, id) {
+    const isDynamic = !node.nameText || !isHTMLTag(node.nameText);
+    let hasDynamicAttrs = false, hasDynamicBody = false;
+    if (!isDynamic) {
+      ({ hasDynamicAttrs, hasDynamicBody } = this.#writeHTMLTag(node, id));
+    } else {
+      this.#writeCustomTag(node);
     }
-    return extractor;
+    return { isDynamic, hasDynamicAttrs, hasDynamicBody };
   }
-}
-
-// src/extractors/script/index.ts
-import { relativeImportPath } from "relative-import-path";
-
-// src/extractors/script/util/script-parser.ts
-import {
-  parseExpression,
-  parse as parseStatement
-} from "@babel/parser";
-var plugins = [
-  "exportDefaultFrom",
-  "importAssertions",
-  "typescript"
-];
-var ScriptParser = class {
-  #sourceFileName;
-  #whitespace;
-  constructor(sourceFileName, code) {
-    this.#sourceFileName = sourceFileName;
-    this.#whitespace = code.replace(/[^\s]/g, " ");
+  #writeHTMLTag(node, id) {
+    var _a, _b;
+    let hasDynamicAttrs = false, hasDynamicBody = false;
+    this.#extractor.write("<");
+    this.#extractor.copy(node.name);
+    this.#extractor.write(` data-marko-node-id="${id}"`);
+    (_a = node.attrs) == null ? void 0 : _a.forEach((attr) => {
+      if (attr.type === 10 /* AttrNamed */) this.#writeAttrNamed(attr);
+      else if (attr.type === 15 /* AttrSpread */) hasDynamicAttrs = true;
+    });
+    this.#extractor.write(">");
+    if (!isVoidTag(node.nameText)) {
+      (_b = node.body) == null ? void 0 : _b.forEach((child) => {
+        if (this.#visitNode(child)) hasDynamicBody = true;
+      });
+      this.#extractor.write(`</${node.nameText}>`);
+    }
+    return { hasDynamicAttrs, hasDynamicBody };
   }
-  statementAt(offset, src) {
-    try {
-      return parseStatement(this.#whitespace.slice(0, offset) + src, {
-        plugins,
-        strictMode: true,
-        errorRecovery: true,
-        sourceType: "module",
-        allowUndeclaredExports: true,
-        allowSuperOutsideMethod: true,
-        allowAwaitOutsideFunction: true,
-        allowReturnOutsideFunction: true,
-        sourceFilename: this.#sourceFileName
-      }).program.body;
-    } catch {
-      return [];
+  #writeCustomTag(node) {
+    if (node.body) {
+      this.#extractor.write("<div>");
+      node.body.forEach((node2) => this.#visitNode(node2));
+      this.#extractor.write("</div>");
     }
   }
-  expressionAt(offset, src) {
-    try {
-      return parseExpression(this.#whitespace.slice(0, offset) + src, {
-        plugins,
-        strictMode: true,
-        errorRecovery: true,
-        sourceType: "module",
-        allowUndeclaredExports: true,
-        allowSuperOutsideMethod: true,
-        allowAwaitOutsideFunction: true,
-        allowReturnOutsideFunction: true,
-        sourceFilename: this.#sourceFileName
+  #writeAttrNamed(attr) {
+    this.#extractor.write(" ");
+    const nameString = this.#read(attr.name);
+    if (/:(?:scoped|(?:no-update(?:-if)?))$/.test(nameString)) {
+      this.#extractor.copy({
+        start: attr.name.start,
+        end: attr.name.start + nameString.lastIndexOf(":")
       });
-    } catch {
+    } else {
+      this.#extractor.copy(attr.name);
+    }
+    if (attr.value === void 0 || attr.name.start === attr.name.end || attr.value.type === 14 /* AttrMethod */) {
       return;
     }
+    const valueString = this.#read(attr.value);
+    const valueType = getAttributeValueType(valueString);
+    if (valueType === void 0) return;
+    switch (valueType) {
+      case 0 /* True */:
+        break;
+      case 1 /* Literal */:
+        this.#extractor.write('="');
+        this.#extractor.copy({
+          start: attr.value.start + valueString.search(/[^=\s]/g),
+          end: attr.value.end
+        });
+        this.#extractor.write('"');
+        break;
+      case 2 /* QuotedString */:
+        this.#extractor.write('="');
+        this.#extractor.copy({
+          start: attr.value.start + valueString.search(/[^=\s]/g) + 1,
+          end: attr.value.end - 1
+        });
+        this.#extractor.write('"');
+        break;
+      case 3 /* Dynamic */:
+        this.#extractor.write(`="dynamic"`);
+        break;
+    }
   }
 };
-
-// src/extractors/script/util/attach-scopes.ts
-import * as t from "@babel/types";
-var ATTR_UNAMED = "value";
-var Scopes = /* @__PURE__ */ new WeakMap();
-var BoundAttrMemberExpressionStartOffsets = /* @__PURE__ */ new WeakMap();
+function isVoidTag(tagName) {
+  switch (tagName) {
+    case "area":
+    case "base":
+    case "br":
+    case "col":
+    case "embed":
+    case "hr":
+    case "img":
+    case "input":
+    case "link":
+    case "meta":
+    case "param":
+    case "source":
+    case "track":
+    case "wbr":
+      return true;
+    default:
+      return false;
+  }
+}
+
+// src/extractors/script/index.ts
+import { relativeImportPath } from "relative-import-path";
+
+// src/extractors/script/util/attach-scopes.ts
+import * as t from "@babel/types";
+var ATTR_UNAMED = "value";
+var Scopes = /* @__PURE__ */ new WeakMap();
+var BoundAttrMemberExpressionStartOffsets = /* @__PURE__ */ new WeakMap();
 function crawlProgramScope(parsed, scriptParser) {
   var _a;
   const { program, read } = parsed;
@@ -1511,6 +1570,57 @@ function tryReaddirSync(dir) {
   }
 }
 
+// src/extractors/script/util/jsdoc-input-type.ts
+var MaybeInputTypedefReg = /@typedef\b[\s\S]*\bInput\b/;
+function getJSDocInputType(comment, ts) {
+  var _a, _b, _c, _d;
+  if (!MaybeInputTypedefReg.test(comment)) return;
+  const sourceFile = ts.createSourceFile(
+    "_.js",
+    comment,
+    ts.ScriptTarget.Latest,
+    false,
+    ts.ScriptKind.JS
+  );
+  const tags = (_b = (_a = sourceFile.endOfFileToken.jsDoc) == null ? void 0 : _a[0]) == null ? void 0 : _b.tags;
+  if (!(tags && hasInputTypeDef(ts, sourceFile, tags))) return;
+  let typeParameters;
+  for (const tag of tags) {
+    if (isTemplateTag(ts, tag)) {
+      let constraint = (_c = tag.constraint) == null ? void 0 : _c.type.getText(sourceFile);
+      for (const param of tag.typeParameters) {
+        const value = {
+          name: "" + param.name.escapedText,
+          constraint,
+          default: (_d = param.default) == null ? void 0 : _d.getText(sourceFile)
+        };
+        constraint = void 0;
+        if (typeParameters) {
+          typeParameters.push(value);
+        } else {
+          typeParameters = [value];
+        }
+      }
+    }
+  }
+  return { typeParameters };
+}
+function hasInputTypeDef(ts, sourceFile, tags) {
+  var _a;
+  for (const tag of tags) {
+    if (isTypeDefTag(ts, tag) && ((_a = tag.fullName) == null ? void 0 : _a.getText(sourceFile)) === "Input") {
+      return true;
+    }
+  }
+  return false;
+}
+function isTypeDefTag(ts, tag) {
+  return tag.kind === ts.SyntaxKind.JSDocTypedefTag;
+}
+function isTemplateTag(ts, tag) {
+  return tag.kind === ts.SyntaxKind.JSDocTemplateTag;
+}
+
 // src/extractors/script/util/runtime-overrides.ts
 var RuntimeOverloads = /* @__PURE__ */ new Map();
 var commentsReg = /\/\*(?:[^*]+|\*[^/])*\*\//gm;
@@ -1564,56 +1674,64 @@ function getRuntimeOverrides(runtimeTypes, generics, applyGenerics) {
   return result;
 }
 
-// src/extractors/script/util/jsdoc-input-type.ts
-var MaybeInputTypedefReg = /@typedef\b[\s\S]*\bInput\b/;
-function getJSDocInputType(comment, ts) {
-  var _a, _b, _c, _d;
-  if (!MaybeInputTypedefReg.test(comment)) return;
-  const sourceFile = ts.createSourceFile(
-    "_.js",
-    comment,
-    ts.ScriptTarget.Latest,
-    false,
-    ts.ScriptKind.JS
-  );
-  const tags = (_b = (_a = sourceFile.endOfFileToken.jsDoc) == null ? void 0 : _a[0]) == null ? void 0 : _b.tags;
-  if (!(tags && hasInputTypeDef(ts, sourceFile, tags))) return;
-  let typeParameters;
-  for (const tag of tags) {
-    if (isTemplateTag(ts, tag)) {
-      let constraint = (_c = tag.constraint) == null ? void 0 : _c.type.getText(sourceFile);
-      for (const param of tag.typeParameters) {
-        const value = {
-          name: "" + param.name.escapedText,
-          constraint,
-          default: (_d = param.default) == null ? void 0 : _d.getText(sourceFile)
-        };
-        constraint = void 0;
-        if (typeParameters) {
-          typeParameters.push(value);
-        } else {
-          typeParameters = [value];
-        }
-      }
+// src/extractors/script/util/script-parser.ts
+import {
+  parse as parseStatement,
+  parseExpression
+} from "@babel/parser";
+var plugins = [
+  "exportDefaultFrom",
+  "importAssertions",
+  "typescript"
+];
+var ScriptParser = class {
+  #parsed;
+  constructor(parsed) {
+    this.#parsed = parsed;
+  }
+  statementAt(startIndex, src) {
+    const pos = this.#parsed.positionAt(startIndex);
+    try {
+      return parseStatement(src, {
+        plugins,
+        startIndex,
+        startLine: pos.line + 1,
+        startColumn: pos.character,
+        strictMode: true,
+        errorRecovery: true,
+        sourceType: "module",
+        allowUndeclaredExports: true,
+        allowSuperOutsideMethod: true,
+        allowAwaitOutsideFunction: true,
+        allowReturnOutsideFunction: true,
+        sourceFilename: this.#parsed.filename
+      }).program.body;
+    } catch {
+      return [];
     }
   }
-  return { typeParameters };
-}
-function hasInputTypeDef(ts, sourceFile, tags) {
-  var _a;
-  for (const tag of tags) {
-    if (isTypeDefTag(ts, tag) && ((_a = tag.fullName) == null ? void 0 : _a.getText(sourceFile)) === "Input") {
-      return true;
+  expressionAt(startIndex, src) {
+    const pos = this.#parsed.positionAt(startIndex);
+    try {
+      return parseExpression(src, {
+        plugins,
+        startIndex,
+        startLine: pos.line + 1,
+        startColumn: pos.character,
+        strictMode: true,
+        errorRecovery: true,
+        sourceType: "module",
+        allowUndeclaredExports: true,
+        allowSuperOutsideMethod: true,
+        allowAwaitOutsideFunction: true,
+        allowReturnOutsideFunction: true,
+        sourceFilename: this.#parsed.filename
+      });
+    } catch {
+      return;
     }
   }
-  return false;
-}
-function isTypeDefTag(ts, tag) {
-  return tag.kind === ts.SyntaxKind.JSDocTypedefTag;
-}
-function isTemplateTag(ts, tag) {
-  return tag.kind === ts.SyntaxKind.JSDocTemplateTag;
-}
+};
 
 // src/extractors/script/index.ts
 var SEP_EMPTY = "";
@@ -1667,7 +1785,7 @@ var ScriptExtractor = class {
     this.#ts = opts.ts;
     this.#runtimeTypes = opts.runtimeTypesCode;
     this.#extractor = new Extractor(parsed);
-    this.#scriptParser = new ScriptParser(parsed.filename, parsed.code);
+    this.#scriptParser = new ScriptParser(parsed);
     this.#read = parsed.read.bind(parsed);
     this.#mutationOffsets = crawlProgramScope(this.#parsed, this.#scriptParser);
     this.#writeProgram(parsed.program);
@@ -2110,6 +2228,7 @@ constructor(_?: Return) {}
   #writeTag(tag) {
     const tagName = tag.nameText;
     const renderId = this.#getRenderId(tag);
+    let nestedTagType;
     if (renderId) {
       this.#extractor.write(
         `${varShared("assertRendered")}(${varShared(
@@ -2121,6 +2240,10 @@ constructor(_?: Return) {}
       const def = this.#lookup.getTag(tagName);
       if (def) {
         const importPath = resolveTagImport(this.#filename, def);
+        const isMarkoFile = importPath == null ? void 0 : importPath.endsWith(".marko");
+        if (isMarkoFile) {
+          nestedTagType = `import("${importPath}").Input`;
+        }
         const renderer = (importPath == null ? void 0 : importPath.endsWith(".marko")) ? `renderTemplate(import("${importPath}"))` : def.html ? `renderNativeTag("${def.name}")` : "missingTag";
         if (!def.html && REG_TAG_NAME_IDENTIFIER.test(tagName)) {
           this.#extractor.write(
@@ -2133,6 +2256,7 @@ ${varShared(renderer)})`);
           this.#extractor.write(varShared(renderer));
         }
       } else if (REG_TAG_NAME_IDENTIFIER.test(tagName)) {
+        nestedTagType = `Marko.Input<typeof ${this.#read(tag.name)}>`;
         this.#extractor.write(`${varShared("renderDynamicTag")}(
 `).copy(tag.name).write("\n)");
       } else {
@@ -2148,7 +2272,7 @@ ${varShared(renderer)})`);
     } else {
       this.#extractor.write("()()(");
     }
-    this.#writeTagInputObject(tag);
+    this.#writeTagInputObject(tag, nestedTagType);
     if (renderId) {
       this.#extractor.write(`)`);
     }
@@ -2332,7 +2456,7 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
     );
     return hasAttrs;
   }
-  #writeAttrTags({ staticAttrTags, dynamicAttrTagParents }, inMerge) {
+  #writeAttrTags({ staticAttrTags, dynamicAttrTagParents }, inMerge, nestedTagType) {
     let wasMerge = false;
     if (dynamicAttrTagParents) {
       if (staticAttrTags) {
@@ -2348,7 +2472,7 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
       }
     }
     if (staticAttrTags) {
-      this.#writeStaticAttrTags(staticAttrTags, inMerge);
+      this.#writeStaticAttrTags(staticAttrTags, inMerge, nestedTagType);
       if (dynamicAttrTagParents)
         this.#extractor.write(`}${SEP_COMMA_NEW_LINE}`);
     }
@@ -2357,7 +2481,7 @@ ${isMutatedVar(tag.parent, valueLiteral) ? `${varLocal("return")}.mutate.` : ""}
       if (wasMerge) this.#extractor.write(`)${SEP_COMMA_NEW_LINE}`);
     }
   }
-  #writeStaticAttrTags(staticAttrTags, wasMerge) {
+  #writeStaticAttrTags(staticAttrTags, wasMerge, nestedTagType) {
     if (!wasMerge) this.#extractor.write("...{");
     this.#extractor.write(
       `[${varShared("never")}](){
@@ -2387,6 +2511,15 @@ const attrTags = ${varShared(
       this.#extractor.write("]: ");
       if (isRepeated) {
         this.#extractor.write(`${varShared("repeatedAttrTag")}(
+...
+`);
+        if (nestedTagType && this.#scriptLang === "js" /* js */) {
+          this.#extractor.write(
+            `/** @satisfies {${nestedTagType}["${name}"][]} */
+`
+          );
+        }
+        this.#extractor.write(`([
 `);
       }
       for (const childNode of attrTag) {
@@ -2394,6 +2527,10 @@ const attrTags = ${varShared(
         this.#extractor.write(SEP_COMMA_NEW_LINE);
       }
       if (isRepeated) {
+        this.#extractor.write("])");
+        if (nestedTagType && this.#scriptLang === "ts" /* ts */) {
+          this.#extractor.write(` satisfies ${nestedTagType}["${name}"][]`);
+        }
         this.#extractor.write(`)${SEP_COMMA_NEW_LINE}`);
       }
     }
@@ -2454,7 +2591,7 @@ const attrTags = ${varShared(
       this.#extractor.write(SEP_COMMA_NEW_LINE);
     }
   }
-  #writeTagInputObject(tag) {
+  #writeTagInputObject(tag, nestedTagType) {
     if (!tag.params) this.#writeComments(tag);
     let hasInput = false;
     this.#extractor.write("{\n");
@@ -2475,7 +2612,7 @@ const attrTags = ${varShared(
     let hasRenderBody = false;
     if (body) {
       hasInput = true;
-      this.#writeAttrTags(body, false);
+      this.#writeAttrTags(body, false, nestedTagType);
       hasRenderBody = body.renderBody !== void 0;
     } else if (tag.close) {
       hasRenderBody = true;
@@ -2874,6 +3011,100 @@ function isEmptyRange(range) {
   return range.start === range.end;
 }
 
+// src/extractors/style/index.ts
+function extractStyle(opts) {
+  const { parsed, lookup } = opts;
+  const extractorsByExt = /* @__PURE__ */ new Map();
+  const { read, program, code } = parsed;
+  let placeholderId = 0;
+  for (const node of program.static) {
+    if (node.type === 27 /* Style */) {
+      getExtractor(node.ext || ".css").copy(node.value);
+    }
+  }
+  for (const node of program.body) {
+    visit(node);
+  }
+  const extractedByExt = /* @__PURE__ */ new Map();
+  for (const [ext, extractor] of extractorsByExt) {
+    extractedByExt.set(ext, extractor.end());
+  }
+  return extractedByExt;
+  function visit(node) {
+    var _a, _b;
+    switch (node.type) {
+      case 16 /* AttrTag */:
+        if (node.body) {
+          for (const child of node.body) {
+            visit(child);
+          }
+        }
+        break;
+      case 1 /* Tag */:
+        if (node.body) {
+          if (node.nameText === "style") {
+            const ext = node.shorthandClassNames ? read(node.shorthandClassNames.at(-1)) : ".css";
+            for (const child of node.body) {
+              switch (child.type) {
+                case 17 /* Text */:
+                  getExtractor(ext).copy(child);
+                  break;
+                case 22 /* Placeholder */:
+                  getExtractor(ext).write(`var(--_${placeholderId++})`);
+                  break;
+              }
+            }
+          } else {
+            for (const child of node.body) {
+              visit(child);
+            }
+          }
+        }
+        if (node.attrs) {
+          for (const attr of node.attrs) {
+            if (
+              // Check for string literal attribute values.
+              attr.type === 10 /* AttrNamed */ && ((_a = attr.value) == null ? void 0 : _a.type) === 13 /* AttrValue */ && /^['"]$/.test(code[attr.value.value.start])
+            ) {
+              const name = read(attr.name);
+              if (name === "#style" || name === "style" && node.nameText && name === "style" && ((_b = lookup.getTag(node.nameText)) == null ? void 0 : _b.html)) {
+                getExtractor("css").write(":root{").copy({
+                  start: attr.value.value.start + 1,
+                  end: attr.value.value.end - 1
+                }).write("}");
+              }
+            }
+          }
+        }
+        break;
+    }
+  }
+  function getExtractor(ext) {
+    let extractor = extractorsByExt.get(ext);
+    if (!extractor) {
+      extractorsByExt.set(ext, extractor = new Extractor(parsed));
+    }
+    return extractor;
+  }
+}
+
+// src/processors/index.ts
+var processors_exports = {};
+__export(processors_exports, {
+  create: () => create,
+  extensions: () => extensions,
+  has: () => has
+});
+
+// src/util/get-ext.ts
+function getExt(fileName) {
+  const extIndex = fileName.lastIndexOf(".");
+  if (extIndex !== -1) return fileName.slice(extIndex);
+}
+
+// src/processors/marko.ts
+import path3 from "path";
+
 // src/util/project.ts
 var project_exports = {};
 __export(project_exports, {
@@ -2887,9 +3118,9 @@ __export(project_exports, {
   setDefaultCompilerMeta: () => setDefaultCompilerMeta,
   setDefaultTypePaths: () => setDefaultTypePaths
 });
-import path2 from "path";
-import { createRequire } from "module";
 import { strip as stripJSONComments } from "@luxass/strip-json-comments";
+import { createRequire } from "module";
+import path2 from "path";
 var defaultTypeLibs = {};
 var defaultMeta;
 var ignoreErrors = (_err) => {
@@ -3101,22 +3332,7 @@ function interopDefault(mod) {
   return mod.default || mod;
 }
 
-// src/processors/index.ts
-var processors_exports = {};
-__export(processors_exports, {
-  create: () => create,
-  extensions: () => extensions,
-  has: () => has
-});
-
-// src/util/get-ext.ts
-function getExt(fileName) {
-  const extIndex = fileName.lastIndexOf(".");
-  if (extIndex !== -1) return fileName.slice(extIndex);
-}
-
 // src/processors/marko.ts
-import path3 from "path";
 var isRemapExtensionReg = /\.ts$/;
 var skipRemapExtensionsReg = /\.(?:[cm]?jsx?|json|marko|css|less|sass|scss|styl|stylus|pcss|postcss|sss|a?png|jpe?g|jfif|pipeg|pjp|gif|svg|ico|web[pm]|avif|mp4|ogg|mp3|wav|flac|aac|opus|woff2?|eot|[ot]tf|webmanifest|pdf|txt)$/;
 var marko_default = {
@@ -3326,195 +3542,6 @@ function has(fileName) {
 function isDefinitionFile(fileName) {
   return /\.d\.[^.]+$/.test(fileName);
 }
-
-// src/extractors/html/keywords.ts
-var builtinTagsRegex = /^(?:a(?:(?:bbr|cronym|ddress|pplet|r(?:ea|ticle)|side|udio))?|b(?:(?:ase(?:font)?|d[io]|gsound|ig|l(?:ink|ockquote)|ody|r|utton))?|c(?:a(?:nvas|ption)|enter|ite|o(?:de|l(?:group)?|mmand|ntent))|d(?:ata(?:list)?|d|e(?:l|tails)|fn|i(?:alog|r|v)|l|t)|e(?:lement|m(?:bed)?)|f(?:i(?:eldset|g(?:caption|ure))|o(?:nt|oter|rm)|rame(?:set)?)|h(?:1|2|3|4|5|6|ead(?:er)?|group|r|tml)|i(?:(?:frame|m(?:age|g)|n(?:put|s)|sindex))?|k(?:bd|eygen)|l(?:abel|egend|i(?:(?:nk|sting))?)|m(?:a(?:in|p|r(?:k|quee)|th)|e(?:nu(?:item)?|t(?:a|er))|ulticol)|n(?:av|extid|o(?:br|embed|frames|script))|o(?:bject|l|pt(?:group|ion)|utput)|p(?:(?:aram|icture|laintext|r(?:e|ogress)))?|q|r(?:bc?|p|tc?|uby)|s(?:(?:amp|cript|e(?:ction|lect)|hadow|lot|mall|ource|pa(?:cer|n)|t(?:r(?:ike|ong)|yle)|u(?:b|mmary|p)|vg))?|t(?:able|body|d|e(?:mplate|xtarea)|foot|h(?:ead)?|i(?:me|tle)|r(?:ack)?|t)|ul?|v(?:ar|ideo)|wbr|xmp)$/;
-function isHTMLTag(tag) {
-  return builtinTagsRegex.test(tag);
-}
-function getAttributeValueType(value) {
-  if (value === void 0 || value[0] !== "=") return void 0;
-  value = value.substring(1).trim();
-  switch (value) {
-    case "NaN":
-    case "Infinity":
-    case "-Infinity":
-      return 1 /* Literal */;
-    case "null":
-    case "false":
-    case "undefined":
-      return void 0;
-    case "true":
-      return 0 /* True */;
-  }
-  if (
-    // double quote string
-    /^"(?:[^"\\]+|\\.)*"$/.test(value) || // single quote string
-    /^'(?:[^'\\]+|\\.)*'$/.test(value) || // template literal without any interpolations
-    /^`(?:[^`\\$]+|\\.|\$(?!\{))*`$/.test(value)
-  ) {
-    return 2 /* QuotedString */;
-  } else if (
-    // octal literal
-    /^-?0[oO]?[0-7](?:_?[0-7]+)*n?$/.test(value) || // hex literal
-    /^-?0[xX][0-9a-fA-F](?:_?[0-9a-fA-F]+)*n?$/.test(value) || // binary literal
-    /^-?0[bB][01](?:_?[01]+)*n?$/.test(value) || // integer or float
-    /^-?\d(?:_?\d+)*(?:[.eE]\d(?:_?\d+)*|n?|\.?)$/.test(value)
-  ) {
-    return 1 /* Literal */;
-  }
-  return 3 /* Dynamic */;
-}
-
-// src/extractors/html/index.ts
-function extractHTML(parsed) {
-  return new HTMLExtractor(parsed).end();
-}
-var HTMLExtractor = class {
-  #extractor;
-  #read;
-  #nodeDetails;
-  #nodeIdCounter;
-  constructor(parsed) {
-    this.#extractor = new Extractor(parsed);
-    this.#read = parsed.read.bind(parsed);
-    this.#nodeDetails = {};
-    this.#nodeIdCounter = 0;
-    parsed.program.body.forEach((node) => this.#visitNode(node));
-  }
-  end() {
-    return { extracted: this.#extractor.end(), nodeDetails: this.#nodeDetails };
-  }
-  #visitNode(node) {
-    var _a;
-    let hasDynamicBody = false, hasDynamicAttrs = false, isDynamic = false;
-    switch (node.type) {
-      case 16 /* AttrTag */:
-        (_a = node.body) == null ? void 0 : _a.forEach((child) => {
-          if (this.#visitNode(child)) hasDynamicBody = true;
-        });
-        break;
-      case 1 /* Tag */: {
-        const nodeId = `${this.#nodeIdCounter++}`;
-        ({ isDynamic, hasDynamicAttrs, hasDynamicBody } = this.#writeTag(
-          node,
-          nodeId
-        ));
-        this.#nodeDetails[nodeId] = { hasDynamicAttrs, hasDynamicBody };
-        break;
-      }
-      case 17 /* Text */:
-        this.#extractor.copy(node);
-        break;
-      case 22 /* Placeholder */:
-        isDynamic = this.#read({
-          start: node.start + 1,
-          end: node.start + 2
-        }) === "!";
-        this.#extractor.write("placeholder");
-        break;
-    }
-    return isDynamic || hasDynamicBody;
-  }
-  #writeTag(node, id) {
-    const isDynamic = !node.nameText || !isHTMLTag(node.nameText);
-    let hasDynamicAttrs = false, hasDynamicBody = false;
-    if (!isDynamic) {
-      ({ hasDynamicAttrs, hasDynamicBody } = this.#writeHTMLTag(node, id));
-    } else {
-      this.#writeCustomTag(node);
-    }
-    return { isDynamic, hasDynamicAttrs, hasDynamicBody };
-  }
-  #writeHTMLTag(node, id) {
-    var _a, _b;
-    let hasDynamicAttrs = false, hasDynamicBody = false;
-    this.#extractor.write("<");
-    this.#extractor.copy(node.name);
-    this.#extractor.write(` data-marko-node-id="${id}"`);
-    (_a = node.attrs) == null ? void 0 : _a.forEach((attr) => {
-      if (attr.type === 10 /* AttrNamed */) this.#writeAttrNamed(attr);
-      else if (attr.type === 15 /* AttrSpread */) hasDynamicAttrs = true;
-    });
-    this.#extractor.write(">");
-    if (!isVoidTag(node.nameText)) {
-      (_b = node.body) == null ? void 0 : _b.forEach((child) => {
-        if (this.#visitNode(child)) hasDynamicBody = true;
-      });
-      this.#extractor.write(`</${node.nameText}>`);
-    }
-    return { hasDynamicAttrs, hasDynamicBody };
-  }
-  #writeCustomTag(node) {
-    if (node.body) {
-      this.#extractor.write("<div>");
-      node.body.forEach((node2) => this.#visitNode(node2));
-      this.#extractor.write("</div>");
-    }
-  }
-  #writeAttrNamed(attr) {
-    this.#extractor.write(" ");
-    const nameString = this.#read(attr.name);
-    if (/:(?:scoped|(?:no-update(?:-if)?))$/.test(nameString)) {
-      this.#extractor.copy({
-        start: attr.name.start,
-        end: attr.name.start + nameString.lastIndexOf(":")
-      });
-    } else {
-      this.#extractor.copy(attr.name);
-    }
-    if (attr.value === void 0 || attr.name.start === attr.name.end || attr.value.type === 14 /* AttrMethod */) {
-      return;
-    }
-    const valueString = this.#read(attr.value);
-    const valueType = getAttributeValueType(valueString);
-    if (valueType === void 0) return;
-    switch (valueType) {
-      case 0 /* True */:
-        break;
-      case 1 /* Literal */:
-        this.#extractor.write('="');
-        this.#extractor.copy({
-          start: attr.value.start + valueString.search(/[^=\s]/g),
-          end: attr.value.end
-        });
-        this.#extractor.write('"');
-        break;
-      case 2 /* QuotedString */:
-        this.#extractor.write('="');
-        this.#extractor.copy({
-          start: attr.value.start + valueString.search(/[^=\s]/g) + 1,
-          end: attr.value.end - 1
-        });
-        this.#extractor.write('"');
-        break;
-      case 3 /* Dynamic */:
-        this.#extractor.write(`="dynamic"`);
-        break;
-    }
-  }
-};
-function isVoidTag(tagName) {
-  switch (tagName) {
-    case "area":
-    case "base":
-    case "br":
-    case "col":
-    case "embed":
-    case "hr":
-    case "img":
-    case "input":
-    case "link":
-    case "meta":
-    case "param":
-    case "source":
-    case "track":
-    case "wbr":
-      return true;
-    default:
-      return false;
-  }
-}
 export {
   NodeType,
   processors_exports as Processors,