@marko/language-tools 2.4.5 → 2.4.7

package/dist/index.js

@@ -358,6 +358,8 @@ var Builder = class {
           );
           this.#comments = void 0;
           return import_htmljs_parser.TagType.statement;
+        case "server":
+        case "client":
         case "static":
           this.#program.static.push(
             this.#staticNode = {
@@ -850,135 +852,197 @@ 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
-var import_relative_import_path = require("relative-import-path");
-
-// src/extractors/script/util/script-parser.ts
-var import_parser4 = require("@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 (0, import_parser4.parse)(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 (0, import_parser4.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;
+    }
   }
 };
+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
+var import_relative_import_path = require("relative-import-path");
 
 // src/extractors/script/util/attach-scopes.ts
 var t = __toESM(require("@babel/types"));
@@ -1057,9 +1121,12 @@ function crawlProgramScope(parsed, scriptParser) {
         case 16 /* AttrTag */: {
           if (child.var) {
             parentScope.bindings ??= {};
-            const parsedFn = scriptParser.expressionAt(child.var.value.start - 6, `${read(child.var.value)}=0`);
+            const parsedFn = scriptParser.expressionAt(
+              child.var.value.start - 1,
+              `(${read(child.var.value)})=>0`
+            );
             if (parsedFn) {
-              const lVal = parsedFn.left;
+              const lVal = parsedFn.params[0];
               checkForMutations(parentScope, lVal);
               for (const id of getVarIdentifiers(
                 parsed,
@@ -1547,6 +1614,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;
@@ -1600,56 +1718,61 @@ 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
+var import_parser5 = require("@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 (0, import_parser5.parse)(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 (0, import_parser5.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 = "";
@@ -1703,7 +1826,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);
@@ -2146,6 +2269,7 @@ constructor(_?: Return) {}
   #writeTag(tag) {
     const tagName = tag.nameText;
     const renderId = this.#getRenderId(tag);
+    let nestedTagType;
     if (renderId) {
       this.#extractor.write(
         `${varShared("assertRendered")}(${varShared(
@@ -2157,6 +2281,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(
@@ -2169,6 +2297,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 {
@@ -2184,7 +2313,7 @@ ${varShared(renderer)})`);
     } else {
       this.#extractor.write("()()(");
     }
-    this.#writeTagInputObject(tag);
+    this.#writeTagInputObject(tag, nestedTagType);
     if (renderId) {
       this.#extractor.write(`)`);
     }
@@ -2368,7 +2497,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) {
@@ -2384,7 +2513,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}`);
     }
@@ -2393,7 +2522,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")}](){
@@ -2423,6 +2552,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) {
@@ -2430,6 +2568,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}`);
       }
     }
@@ -2490,7 +2632,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");
@@ -2511,7 +2653,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;
@@ -2883,33 +3025,127 @@ function getReturnTag(parent) {
       }
     }
   }
-}
-function isValueAttribute(attr) {
-  var _a;
-  return attr.type === 10 /* AttrNamed */ && ((_a = attr.value) == null ? void 0 : _a.type) === 13 /* AttrValue */;
-}
-function resolveTagImport(from, def) {
-  const filename = resolveTagFile(def);
-  if (filename) {
-    return from ? (0, import_relative_import_path.relativeImportPath)(from, filename) : filename;
+}
+function isValueAttribute(attr) {
+  var _a;
+  return attr.type === 10 /* AttrNamed */ && ((_a = attr.value) == null ? void 0 : _a.type) === 13 /* AttrValue */;
+}
+function resolveTagImport(from, def) {
+  const filename = resolveTagFile(def);
+  if (filename) {
+    return from ? (0, import_relative_import_path.relativeImportPath)(from, filename) : filename;
+  }
+}
+function resolveTagFile(def) {
+  return def && (def.types || def.template || def.renderer);
+}
+function isWhitespaceCode(code) {
+  return code <= 32;
+}
+function stripExt(filename) {
+  return filename.replace(REG_EXT, "");
+}
+function removeNewLines(str) {
+  return str.replace(REG_NEW_LINE, " ");
+}
+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;
   }
 }
-function resolveTagFile(def) {
-  return def && (def.types || def.template || def.renderer);
-}
-function isWhitespaceCode(code) {
-  return code <= 32;
-}
-function stripExt(filename) {
-  return filename.replace(REG_EXT, "");
-}
-function removeNewLines(str) {
-  return str.replace(REG_NEW_LINE, " ");
-}
-function isEmptyRange(range) {
-  return range.start === range.end;
+
+// 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
+var import_path3 = __toESM(require("path"));
+
 // src/util/project.ts
 var project_exports = {};
 __export(project_exports, {
@@ -2923,9 +3159,9 @@ __export(project_exports, {
   setDefaultCompilerMeta: () => setDefaultCompilerMeta,
   setDefaultTypePaths: () => setDefaultTypePaths
 });
-var import_path2 = __toESM(require("path"));
-var import_module = require("module");
 var import_strip_json_comments = require("@luxass/strip-json-comments");
+var import_module = require("module");
+var import_path2 = __toESM(require("path"));
 var defaultTypeLibs = {};
 var defaultMeta;
 var ignoreErrors = (_err) => {
@@ -3137,22 +3373,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
-var import_path3 = __toESM(require("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 = {
@@ -3362,195 +3583,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;
-  }
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   NodeType,