marko 6.1.24 → 6.2.0

package/dist/translator/index.js

@@ -800,7 +800,8 @@ function isControlFlowTag(tag) {
 		case "else":
 		case "for":
 		case "await":
-		case "try": return true;
+		case "try":
+		case "show": return true;
 	}
 	return false;
 }
@@ -1536,10 +1537,12 @@ function getNodeContentType(path, extraMember, contentInfo) {
 				case "html-comment": return 0;
 				case "html-script":
 				case "html-style": return 3;
+				case "style": return tag.node.body.body.some((child) => _marko_compiler.types.isMarkoPlaceholder(child)) ? 3 : null;
 				case "for":
 				case "if":
 				case "await":
-				case "try": return 1;
+				case "try":
+				case "show": return 1;
 				default: return null;
 			}
 			else if ((0, _marko_compiler_babel_utils.isNativeTag)(tag)) return 3;
@@ -1645,7 +1648,9 @@ function isNativeNode(tag) {
 	if (isCoreTag(tag)) switch (tag.node.name.value) {
 		case "html-comment":
 		case "html-script":
-		case "html-style": return true;
+		case "html-style":
+		case "show": return true;
+		case "style": return tag.node.body.body.some((child) => _marko_compiler.types.isMarkoPlaceholder(child));
 		default: return false;
 	}
 	return analyzeTagNameType(tag) === 0;
@@ -2242,6 +2247,7 @@ const pureDOMFunctions = new Set([
 	"_child_setup",
 	"_if",
 	"_if_closure",
+	"_show",
 	"_try",
 	"_dynamic_tag",
 	"_dynamic_tag_content",
@@ -3876,7 +3882,8 @@ function isNonHTMLText(placeholder) {
 		if (isCoreTag(parentTag)) switch (parentTag.node.name.value) {
 			case "html-comment":
 			case "html-script":
-			case "html-style": return true;
+			case "html-style":
+			case "style": return true;
 		}
 		else if (isTextOnlyNativeTag(parentTag)) return true;
 	}
@@ -3888,7 +3895,7 @@ function isTextOnlyNativeTag(tag) {
 }
 //#endregion
 //#region src/translator/core/for.ts
-const kStatefulReason$1 = Symbol("<for> stateful reason");
+const kStatefulReason$2 = Symbol("<for> stateful reason");
 var for_default = {
 	analyze(tag) {
 		const tagSection = getOrCreateSection(tag);
@@ -3933,7 +3940,7 @@ var for_default = {
 		}
 		const nodeBinding = getOptimizedOnlyChildNodeBinding(tag, tagSection);
 		const tagExtra = mergeReferences(tagSection, tag.node, getAllTagReferenceNodes(tag.node));
-		addSerializeExpr(tagSection, tagExtra, kStatefulReason$1);
+		addSerializeExpr(tagSection, tagExtra, kStatefulReason$2);
 		if (paramsBinding) {
 			setBindingDownstream(paramsBinding, tagExtra);
 			const byAttr = getKnownAttrValues(tag.node).by;
@@ -3992,7 +3999,7 @@ var for_default = {
 				forTagArgs.push(_marko_compiler.types.arrowFunctionExpression(params, _marko_compiler.types.blockStatement(bodyStatements)));
 				if (branchSerializeReason) {
 					const skipParentEnd = onlyChildParentTagName && markerSerializeReason;
-					const statefulSerializeArg = getSerializeGuard(tagSection, getSerializeReason(tagSection, kStatefulReason$1), !(skipParentEnd || singleChild));
+					const statefulSerializeArg = getSerializeGuard(tagSection, getSerializeReason(tagSection, kStatefulReason$2), !(skipParentEnd || singleChild));
 					const markerSerializeArg = getSerializeGuard(tagSection, markerSerializeReason, !statefulSerializeArg);
 					forTagArgs.push(forAttrs.by || _marko_compiler.types.numericLiteral(0), getScopeIdIdentifier(tagSection), getScopeAccessorLiteral(nodeBinding), getSerializeGuard(tagSection, branchSerializeReason, !markerSerializeArg), markerSerializeArg, statefulSerializeArg);
 					if (skipParentEnd) {
@@ -5117,7 +5124,7 @@ function toFirstStatementOrBlock(body) {
 }
 //#endregion
 //#region src/translator/core/if.ts
-const kStatefulReason = Symbol("<if> stateful reason");
+const kStatefulReason$1 = Symbol("<if> stateful reason");
 const BRANCHES_LOOKUP = /* @__PURE__ */ new WeakMap();
 const IfTag = {
 	analyze(tag) {
@@ -5142,7 +5149,7 @@ const IfTag = {
 				if (branchTag.node.attributes.length) mergeReferenceNodes.push(branchTag.node.attributes[0].value);
 			}
 			mergeReferences(ifTagSection, ifTag.node, mergeReferenceNodes);
-			addSerializeExpr(ifTagSection, ifTagExtra, kStatefulReason);
+			addSerializeExpr(ifTagSection, ifTagExtra, kStatefulReason$1);
 		}
 	},
 	translate: translateByTarget({
@@ -5200,7 +5207,7 @@ const IfTag = {
 					if (branchSerializeReasons) {
 						const skipParentEnd = onlyChildParentTagName && markerSerializeReason;
 						if (skipParentEnd) getParentTag(ifTag).node.extra[kSkipEndTag] = true;
-						const statefulSerializeArg = getSerializeGuard(ifTagSection, getSerializeReason(ifTagSection, kStatefulReason), !(skipParentEnd || singleChild));
+						const statefulSerializeArg = getSerializeGuard(ifTagSection, getSerializeReason(ifTagSection, kStatefulReason$1), !(skipParentEnd || singleChild));
 						const markerSerializeArg = getSerializeGuard(ifTagSection, markerSerializeReason, !statefulSerializeArg);
 						const cbNode = _marko_compiler.types.arrowFunctionExpression([], _marko_compiler.types.blockStatement([statement]));
 						statement = _marko_compiler.types.expressionStatement(callRuntime("_if", cbNode, getScopeIdIdentifier(ifTagSection), getScopeAccessorLiteral(nodeBinding), getSerializeGuardForAny(ifTagSection, branchSerializeReasons, !markerSerializeArg), markerSerializeArg, statefulSerializeArg, skipParentEnd ? _marko_compiler.types.stringLiteral(`</${onlyChildParentTagName}>`) : singleChild ? _marko_compiler.types.numericLiteral(0) : void 0, singleChild ? _marko_compiler.types.numericLiteral(1) : void 0));
@@ -5312,14 +5319,14 @@ function assertValidCondition(tag) {
 	(0, _marko_compiler_babel_utils.assertNoVar)(tag);
 	(0, _marko_compiler_babel_utils.assertNoArgs)(tag);
 	(0, _marko_compiler_babel_utils.assertNoParams)(tag);
-	assertHasBody(tag);
+	assertHasBody$1(tag);
 	assertNoSpreadAttrs(tag);
 	switch (getTagName(tag)) {
 		case "if":
-			assertHasValueAttribute(tag);
+			assertHasValueAttribute$1(tag);
 			break;
 		case "else-if":
-			assertHasValueAttribute(tag);
+			assertHasValueAttribute$1(tag);
 			assertHasPrecedingCondition(tag);
 			break;
 		case "else":
@@ -5333,10 +5340,10 @@ function assertHasPrecedingCondition(tag) {
 	while (prev.node && prev.isMarkoComment()) prev = prev.getPrevSibling();
 	if (!isConditionTag(prev) || getTagName(prev) === "else" && !prev.node.attributes.length) throw tag.buildCodeFrameError(`The [\`<${getTagName(tag)}>\` tag](https://markojs.com/docs/reference/core-tag#if--else) must have a preceding \`<if=cond>\` or \`<else if=cond>\`.`);
 }
-function assertHasBody(tag) {
+function assertHasBody$1(tag) {
 	if (!(tag.node.body.body.length || tag.node.attributeTags.length)) throw tag.get("name").buildCodeFrameError(`The [\`${getTagName(tag)}\` tag](https://markojs.com/docs/reference/core-tag#if--else) requires [body content](https://markojs.com/docs/reference/language#tag-content).`);
 }
-function assertHasValueAttribute(tag) {
+function assertHasValueAttribute$1(tag) {
 	const { node } = tag;
 	const [valueAttr] = node.attributes;
 	if (!_marko_compiler.types.isMarkoAttribute(valueAttr) || !valueAttr.default) throw tag.get("name").buildCodeFrameError(`The [\`${getTagName(tag)}\` tag](https://markojs.com/docs/reference/core-tag#if--else) requires a [\`value=\` attribute](https://markojs.com/docs/reference/language#shorthand-value).`);
@@ -5674,7 +5681,7 @@ var program_default = {
 				const isDOMPageEntry = output === "dom" && entry === "page" || output === "hydrate";
 				const isServerEntry = output === "html" && entry === "page";
 				if (entry && !markoOpts.linkAssets) throw program.buildCodeFrameError("The \"entry\" option requires the `linkAssets` compiler option to be configured.");
-				if (runtimeId && !/^[_$a-z][_$a-z0-9]*$/i.test(runtimeId)) throw program.buildCodeFrameError(`Invalid runtimeId: "${runtimeId}". The runtimeId must be a valid JavaScript identifier.`);
+				if (runtimeId && !/^[_a-z][_a-z0-9]*$/i.test(runtimeId)) throw program.buildCodeFrameError(`Invalid runtimeId: "${runtimeId}". The runtimeId must start with a letter or underscore and only contain letters, numbers, and underscores.`);
 				if (isLoadEntry) {
 					const entryFile = program.hub.file;
 					const { filename } = entryFile.opts;
@@ -8209,6 +8216,163 @@ var server_default = {
 	}]
 };
 //#endregion
+//#region src/translator/core/show.ts
+const kStatefulReason = Symbol("<show> stateful reason");
+const kStartBinding = Symbol("<show> range start binding");
+const kStaticDisplay = Symbol("<show> static display");
+const kSingleNodeBody = Symbol("<show> single node body");
+const kDisplayRef = Symbol("<show> hoisted display reference");
+var show_default = {
+	analyze: {
+		enter(tag) {
+			assertValidShow(tag);
+			const tagExtra = tag.node.extra ??= {};
+			const display = tag.node.attributes[0].value;
+			const displayEval = evaluate(display);
+			tagExtra[kSingleNodeBody] = isSingleNodeBody(tag);
+			if (displayEval.confident) tagExtra[kStaticDisplay] = !!displayEval.computed;
+			if (tagExtra[kStaticDisplay] === true) return;
+			const tagSection = getOrCreateSection(tag);
+			if (getOnlyChildParentTagName(tag)) getOptimizedOnlyChildNodeBinding(tag, tagSection);
+			else tagExtra[kStartBinding] = createBinding("#text", 0, tagSection);
+			if (tagExtra[kStaticDisplay] === void 0) {
+				mergeReferences(tagSection, tag.node, [display]);
+				addSerializeExpr(tagSection, tagExtra, kStatefulReason);
+			}
+		},
+		exit(tag) {
+			const tagExtra = tag.node.extra;
+			if (tagExtra[kStaticDisplay] === true) return;
+			const tagSection = getSection(tag);
+			const nodeBinding = getOptimizedOnlyChildNodeBinding(tag, tagSection);
+			if (tagExtra[kStaticDisplay] === void 0) addSerializeExpr(tagSection, tagExtra, nodeBinding);
+		}
+	},
+	translate: translateByTarget({
+		html: {
+			enter(tag) {
+				const tagExtra = tag.node.extra;
+				flushBefore(tag);
+				const staticDisplay = tagExtra[kStaticDisplay];
+				if (staticDisplay === true) return;
+				if (staticDisplay === false) {
+					writeTo(tag)`<t hidden>`;
+					return;
+				}
+				const display = tag.node.attributes[0].value;
+				if (!_marko_compiler.types.isIdentifier(display) && !isLiteral(display)) {
+					const displayRef = generateUidIdentifier("show");
+					tag.insertBefore(_marko_compiler.types.variableDeclaration("const", [_marko_compiler.types.variableDeclarator(displayRef, display)]));
+					tagExtra[kDisplayRef] = displayRef;
+				}
+			},
+			exit(tag) {
+				const tagExtra = tag.node.extra;
+				const staticDisplay = tagExtra[kStaticDisplay];
+				if (staticDisplay === false) writeTo(tag)`</t>`;
+				flushInto(tag);
+				const bodyStatements = tag.node.body.body;
+				if (staticDisplay !== void 0) {
+					for (const replacement of tag.replaceWithMultiple(bodyStatements)) replacement.skip();
+					return;
+				}
+				const tagSection = getSection(tag);
+				const display = tagExtra[kDisplayRef] || tag.node.attributes[0].value;
+				const nodeBinding = getOptimizedOnlyChildNodeBinding(tag, tagSection);
+				const onlyChildParentTagName = getOnlyChildParentTagName(tag);
+				const singleNode = tagExtra[kSingleNodeBody];
+				const statefulReason = getSerializeReason(tagSection, kStatefulReason);
+				const markerSerializeReason = getSerializeReason(tagSection, nodeBinding);
+				const skipParentEnd = onlyChildParentTagName && markerSerializeReason;
+				if (skipParentEnd) getParentTag(tag).node.extra[kSkipEndTag] = true;
+				const statefulSerializeArg = getSerializeGuard(tagSection, statefulReason, !(skipParentEnd || singleNode));
+				const markerSerializeArg = getSerializeGuard(tagSection, markerSerializeReason, !statefulSerializeArg);
+				let startMark;
+				if (!singleNode) {
+					startMark = getSerializeGuard(tagSection, markerSerializeReason, false);
+					if (skipParentEnd) startMark = _marko_compiler.types.logicalExpression("&&", startMark, getSerializeGuard(tagSection, statefulReason, false));
+				}
+				for (const replacement of tag.replaceWithMultiple([
+					_marko_compiler.types.expressionStatement(callRuntime("_show_start", _marko_compiler.types.cloneNode(display, true), startMark)),
+					...bodyStatements,
+					_marko_compiler.types.expressionStatement(callRuntime("_show_end", getScopeIdIdentifier(tagSection), getScopeAccessorLiteral(nodeBinding), display, markerSerializeArg, statefulSerializeArg, skipParentEnd ? _marko_compiler.types.stringLiteral(`</${onlyChildParentTagName}>`) : singleNode ? _marko_compiler.types.numericLiteral(0) : void 0, singleNode ? _marko_compiler.types.numericLiteral(1) : void 0))
+				])) replacement.skip();
+			}
+		},
+		dom: {
+			enter(tag) {
+				if (tag.node.extra[kStartBinding]) {
+					visit(tag, 37);
+					enterShallow(tag);
+				}
+			},
+			exit(tag) {
+				const tagExtra = tag.node.extra;
+				if (tagExtra[kStaticDisplay] === true) {
+					tag.remove();
+					return;
+				}
+				const tagSection = getSection(tag);
+				const nodeBinding = getOptimizedOnlyChildNodeBinding(tag, tagSection);
+				const startBinding = tagExtra[kStartBinding];
+				const display = tagExtra[kStaticDisplay] === false ? _marko_compiler.types.booleanLiteral(false) : tag.node.attributes[0].value;
+				if (startBinding) {
+					visit(tag, 37);
+					enterShallow(tag);
+				}
+				const signal = getSignal(tagSection, nodeBinding, "show");
+				signal.build = () => {
+					return callRuntime("_show", getScopeAccessorLiteral(nodeBinding, true), startBinding ? getScopeAccessorLiteral(startBinding, true) : void 0);
+				};
+				addValue(tagSection, tagExtra.referencedBindings, signal, display);
+				tag.remove();
+			}
+		}
+	}),
+	parseOptions: { controlFlow: true },
+	autocomplete: [{
+		snippet: "show=${1:condition}",
+		description: "Use to render content that is always mounted but only displayed when the condition is met.",
+		descriptionMoreURL: "https://markojs.com/docs/reference/core-tag#show"
+	}]
+};
+function isSingleNodeBody(tag) {
+	let elements = 0;
+	for (const child of tag.get("body").get("body")) {
+		if (child.isMarkoComment()) continue;
+		if (child.isMarkoTag() && analyzeTagNameType(child) === 0 && _marko_compiler.types.isStringLiteral(child.node.name)) elements++;
+		else return false;
+	}
+	return elements === 1;
+}
+function isLiteral(expr) {
+	switch (expr.type) {
+		case "BooleanLiteral":
+		case "NumericLiteral":
+		case "StringLiteral":
+		case "NullLiteral": return true;
+		default: return false;
+	}
+}
+function assertValidShow(tag) {
+	(0, _marko_compiler_babel_utils.assertNoVar)(tag);
+	(0, _marko_compiler_babel_utils.assertNoArgs)(tag);
+	(0, _marko_compiler_babel_utils.assertNoParams)(tag);
+	assertNoSpreadAttrs(tag);
+	assertHasBody(tag);
+	assertHasValueAttribute(tag);
+}
+function assertHasBody(tag) {
+	if (!tag.node.body.body.length) throw tag.get("name").buildCodeFrameError(`The [\`<${getTagName(tag)}>\` tag](https://markojs.com/docs/reference/core-tag#show) requires [body content](https://markojs.com/docs/reference/language#tag-content).`);
+	if (tag.node.body.attributeTags) throw tag.get("name").buildCodeFrameError(`The [\`<${getTagName(tag)}>\` tag](https://markojs.com/docs/reference/core-tag#show) does not support [attribute tags](https://markojs.com/docs/reference/language#attribute-tags).`);
+}
+function assertHasValueAttribute(tag) {
+	const { node } = tag;
+	const [valueAttr] = node.attributes;
+	if (!_marko_compiler.types.isMarkoAttribute(valueAttr) || !valueAttr.default) throw tag.get("name").buildCodeFrameError(`The [\`<${getTagName(tag)}>\` tag](https://markojs.com/docs/reference/core-tag#show) requires a [\`value=\` attribute](https://markojs.com/docs/reference/language#shorthand-value).`);
+	if (node.attributes.length > 1) throw tag.get("name").buildCodeFrameError(`The [\`<${getTagName(tag)}>\` tag](https://markojs.com/docs/reference/core-tag#show) only supports the [\`value=\` attribute](https://markojs.com/docs/reference/language#shorthand-value).`);
+}
+//#endregion
 //#region src/translator/core/static.ts
 var static_default = {
 	parse(tag) {
@@ -8231,36 +8395,109 @@ var static_default = {
 	}]
 };
 //#endregion
+//#region src/translator/util/style-interpolation.ts
+const htmlStyleTagAlternateMsg = " For a native html [`<style>` tag](https://markojs.com/docs/reference/core-tag#style) use the `html-style` core tag instead.";
+function checkStyleInterpolations(tag) {
+	const { body } = tag.node.body;
+	let stringQuote = "";
+	let inComment = false;
+	let groupDepth = 0;
+	let blockDepth = 0;
+	let valueColon = false;
+	let runPlaceholder;
+	let runAfterColon = false;
+	let runDecl = false;
+	const endRun = (selector) => {
+		if (runPlaceholder && !runAfterColon && (selector || runDecl)) throw tag.hub.buildError(runPlaceholder, selector ? styleSelectorMsg : stylePropertyMsg);
+		valueColon = false;
+		runPlaceholder = void 0;
+	};
+	for (let i = 0; i < body.length; i++) {
+		const child = body[i];
+		if (_marko_compiler.types.isMarkoPlaceholder(child)) {
+			if (stringQuote) throw tag.hub.buildError(child, styleStringMsg);
+			if (!runPlaceholder) {
+				runPlaceholder = child;
+				runAfterColon = valueColon;
+				runDecl = blockDepth > 0;
+			}
+			const prev = body[i - 1];
+			if (_marko_compiler.types.isMarkoText(prev) && cssGluedBefore.test(prev.value)) throw tag.hub.buildError(child, styleGluedBeforeMsg);
+			const next = body[i + 1];
+			if (_marko_compiler.types.isMarkoText(next) && cssGluedValue.test(next.value)) throw tag.hub.buildError(child, styleGluedMsg);
+			continue;
+		}
+		const text = child.value;
+		for (let j = 0; j < text.length; j++) {
+			const c = text[j];
+			if (inComment) {
+				if (c === "*" && text[j + 1] === "/") {
+					inComment = false;
+					j++;
+				}
+			} else if (stringQuote) {
+				if (c === "\\") j++;
+				else if (c === stringQuote) stringQuote = "";
+			} else if (c === "\\") j++;
+			else if (c === "/" && text[j + 1] === "*") {
+				inComment = true;
+				j++;
+			} else if (c === "\"" || c === "'") stringQuote = c;
+			else if (c === "(" || c === "[") groupDepth++;
+			else if (c === ")" || c === "]") {
+				if (groupDepth) groupDepth--;
+			} else if (!groupDepth) switch (c) {
+				case ":":
+					if (blockDepth) valueColon = true;
+					break;
+				case "{":
+					endRun(true);
+					blockDepth++;
+					break;
+				case ";":
+					endRun(!blockDepth);
+					break;
+				case "}":
+					endRun(false);
+					if (blockDepth) blockDepth--;
+					break;
+			}
+		}
+	}
+	endRun(!blockDepth);
+}
+const styleInterpolationMsg = "A `${...}` interpolation in a [`<style>` tag](https://markojs.com/docs/reference/core-tag#style) is substituted as a `var(--…)` custom property reference, which";
+const styleSelectorMsg = `${styleInterpolationMsg} only resolves in a declaration value, not in a selector or at-rule prelude. For a native html [\`<style>\` tag](https://markojs.com/docs/reference/core-tag#style) use the \`html-style\` core tag instead.`;
+const stylePropertyMsg = `${styleInterpolationMsg} cannot be used as a property name. For a native html [\`<style>\` tag](https://markojs.com/docs/reference/core-tag#style) use the \`html-style\` core tag instead.`;
+const styleStringMsg = `${styleInterpolationMsg} is not substituted inside a quoted CSS string — the literal text \`var(--…)\` would be rendered instead of the value. For a native html [\`<style>\` tag](https://markojs.com/docs/reference/core-tag#style) use the \`html-style\` core tag instead.`;
+const styleGluedMsg = `${styleInterpolationMsg} CSS does not re-tokenize, so a unit written directly after it (eg \`\${x}px\`) becomes the invalid \`var(--…)px\`. Move the unit into the interpolated value (so it resolves to eg \`"10px"\`) or use \`calc(var(--…) * 1px)\`.`;
+const styleGluedBeforeMsg = `${styleInterpolationMsg} CSS does not re-tokenize, so text written directly before it (eg \`10\${x}\`) merges with the \`var(--…)\` into a single invalid token. Add whitespace before the interpolation or move the text into the interpolated value.`;
+const cssGluedValue = /^(?:[%.\d]|(?:p[xtc]|in|[cm]m|q|r?em|ex|ch|r?lh|v[whib]|vmin|vmax|fr|deg|g?rad|turn|m?s|k?hz|dp(?:i|cm|px)|cq[whib]|cqmin|cqmax)(?![\w-]))/i;
+const cssGluedBefore = /[\w%]$/;
+//#endregion
 //#region src/translator/core/style.ts
 const STYLE_EXT_REG = /^style((?:\.[a-zA-Z0-9$_-]+)+)?/;
-const htmlStyleTagAlternateMsg = " For a native html [`<style>` tag](https://markojs.com/docs/reference/core-tag#style) use the `html-style` core tag instead.";
 var style_default = {
 	analyze(tag) {
 		(0, _marko_compiler_babel_utils.assertNoArgs)(tag);
 		(0, _marko_compiler_babel_utils.assertNoParams)(tag);
 		(0, _marko_compiler_babel_utils.assertNoAttributeTags)(tag);
 		const { node, hub: { file } } = tag;
-		const extClass = (STYLE_EXT_REG.exec(node.rawValue || "")?.[1]?.slice(1))?.replace(/\./g, " ");
-		for (const attr of node.attributes) {
-			if (attr.start == null && attr.type === "MarkoAttribute" && attr.name === "class" && attr.value.type === "StringLiteral" && attr.value.value === extClass) continue;
-			throw tag.hub.buildError(attr.value, "The `style` does not support html attributes." + htmlStyleTagAlternateMsg);
+		assertNoStyleAttributes(tag);
+		const names = collectDynamicStyleNames(tag);
+		if (names) {
+			checkStyleInterpolations(tag);
+			checkDynamicStylePlacement(tag);
 		}
-		for (const child of node.body.body) if (child.type !== "MarkoText") throw tag.hub.buildError(child, "The [`<style>` tag](https://markojs.com/docs/reference/core-tag#style) currently only supports static content." + htmlStyleTagAlternateMsg);
-		const importPath = getStyleImportPath(file, node);
+		const importPath = getStyleImportPath(file, node, names);
 		(node.extra ??= {}).styleImportPath = importPath;
 		if (importPath) addAssetImport(file, importPath);
+		if (names) analyzeDynamicStyle(tag, names);
 	},
-	translate(tag) {
-		const { node, hub: { file } } = tag;
-		const importPath = node.extra?.styleImportPath;
-		if (importPath) if (!node.var) (0, _marko_compiler_babel_utils.getProgram)().node.body.push(_marko_compiler.types.importDeclaration([], _marko_compiler.types.stringLiteral(importPath)));
-		else if (_marko_compiler.types.isIdentifier(node.var)) (0, _marko_compiler_babel_utils.getProgram)().node.body.push(_marko_compiler.types.importDeclaration([_marko_compiler.types.importNamespaceSpecifier(node.var)], _marko_compiler.types.stringLiteral(importPath)));
-		else {
-			const varDecl = _marko_compiler.types.variableDeclaration("const", [_marko_compiler.types.variableDeclarator(node.var, (0, _marko_compiler_babel_utils.importStar)(file, importPath, "style"))]);
-			(0, _marko_compiler_babel_utils.getProgram)().node.body.push(isOutputDOM() ? varDecl : _marko_compiler.types.markoScriptlet([varDecl], true));
-		}
-		tag.remove();
-	},
+	translate: translateByTarget({
+		html: { exit: translateHTML$1 },
+		dom: { exit: translateDOM$1 }
+	}),
 	parseOptions: {
 		html: false,
 		text: true,
@@ -8269,34 +8506,154 @@ var style_default = {
 	},
 	attributes: {}
 };
+function analyzeDynamicStyle(tag, names) {
+	const { node } = tag;
+	const section = getOrCreateSection(tag);
+	const binding = createBinding("#style", 0, section);
+	node.extra.dynamicStyle = {
+		names,
+		binding
+	};
+	let exprExtras = mergeReferences(section, node, []);
+	for (const value of dynamicStyleValues(node)) exprExtras = push(exprExtras, value.extra ??= {});
+	addSerializeExpr(section, exprExtras, binding);
+}
+function collectDynamicStyleNames(tag) {
+	let names;
+	let index = 0;
+	for (const child of tag.node.body.body) if (_marko_compiler.types.isMarkoPlaceholder(child)) {
+		if (!names) {
+			names = [];
+			index = dynamicStyleNameOffset(tag);
+		}
+		names.push(dynamicStyleName(tag, index++));
+	} else if (!_marko_compiler.types.isMarkoText(child)) throw tag.hub.buildError(child, "The [`<style>` tag](https://markojs.com/docs/reference/core-tag#style) only supports text and `${...}` interpolations." + htmlStyleTagAlternateMsg);
+	return names;
+}
+function dynamicStyleNameOffset(tag) {
+	const { start } = tag.node;
+	let offset = 0;
+	if (start != null) _marko_compiler.types.traverseFast((0, _marko_compiler_babel_utils.getProgram)().node, (node) => {
+		const dynamicStyle = node.extra?.dynamicStyle;
+		if (dynamicStyle && node.start != null && node.start < start) offset += dynamicStyle.names.length;
+	});
+	return offset;
+}
+const styleNameUnsafeReg = /[^a-zA-Z0-9_]/g;
+const encodeStyleNameChar = (c) => "-" + c.charCodeAt(0).toString(36);
+function dynamicStyleName(tag, index) {
+	const { file } = tag.hub;
+	const id = (0, _marko_compiler_babel_utils.getTemplateId)(file.markoOpts, file.opts.filename, index.toString(36));
+	return "--" + ((file.markoOpts.runtimeId || "M_") + id).replace(styleNameUnsafeReg, encodeStyleNameChar);
+}
+function checkDynamicStylePlacement(tag) {
+	for (const sibling of tag.getAllPrevSiblings()) {
+		if (isCoreTagName(sibling, "style")) continue;
+		if (sibling.isMarkoText() ? /\S/.test(sibling.node.value) : getNodeContentType(sibling, "startType") !== null) {
+			(0, _marko_compiler_babel_utils.diagnosticWarn)(tag, { label: "The `${...}` values of a [`<style>` tag](https://markojs.com/docs/reference/core-tag#style) only apply to elements rendered after it, so the content before this tag will not receive them. Move the `<style>` tag above the content it styles." });
+			return;
+		}
+	}
+}
+function assertNoStyleAttributes(tag) {
+	const { node } = tag;
+	const extClass = (STYLE_EXT_REG.exec(node.rawValue || "")?.[1]?.slice(1))?.replace(/\./g, " ");
+	for (const attr of node.attributes) {
+		if (attr.start == null && attr.type === "MarkoAttribute" && attr.name === "class" && attr.value.type === "StringLiteral" && attr.value.value === extClass) continue;
+		throw tag.hub.buildError(attr.value, "The `style` does not support html attributes." + htmlStyleTagAlternateMsg);
+	}
+}
+function translateHTML$1(tag) {
+	const { node } = tag;
+	const dynamic = node.extra?.dynamicStyle;
+	if (dynamic) {
+		const { binding } = dynamic;
+		const section = getSection(tag);
+		writeTo(tag)`${callRuntime("_style_html", buildStyleDecls(node))}`;
+		markNode(tag, binding, getSerializeReason(section, binding));
+	}
+	emitStyleImport(tag);
+	tag.remove();
+}
+function translateDOM$1(tag) {
+	const { node } = tag;
+	const dynamic = node.extra?.dynamicStyle;
+	if (dynamic) {
+		const { names, binding } = dynamic;
+		const section = getSection(tag);
+		const write = writeTo(tag);
+		const readEl = () => createScopeReadExpression(binding);
+		visit(tag, 32);
+		write`<style>`;
+		addStatement("render", section, void 0, [_marko_compiler.types.expressionStatement(callRuntime("_attr_nonce", scopeIdentifier, getScopeAccessorLiteral(binding))), _marko_compiler.types.expressionStatement(callRuntime("_style_shell", scopeIdentifier, getScopeAccessorLiteral(binding)))], void 0, true);
+		dynamicStyleValues(node).forEach((value, i) => {
+			const valueRef = value.extra?.referencedBindings;
+			addStatement("render", section, valueRef, _marko_compiler.types.expressionStatement(callRuntime("_style_rule_item", readEl(), _marko_compiler.types.stringLiteral(names[i]), value)), void 0, !valueRef);
+		});
+		write`</style>`;
+	}
+	emitStyleImport(tag);
+	tag.remove();
+}
+function dynamicStyleValues(node) {
+	const values = [];
+	for (const child of node.body.body) if (_marko_compiler.types.isMarkoPlaceholder(child)) values.push(child.value);
+	return values;
+}
+function emitStyleImport(tag) {
+	const { node, hub: { file } } = tag;
+	const importPath = node.extra?.styleImportPath;
+	if (!importPath) return;
+	if (!node.var) (0, _marko_compiler_babel_utils.getProgram)().node.body.push(_marko_compiler.types.importDeclaration([], _marko_compiler.types.stringLiteral(importPath)));
+	else if (_marko_compiler.types.isIdentifier(node.var)) (0, _marko_compiler_babel_utils.getProgram)().node.body.push(_marko_compiler.types.importDeclaration([_marko_compiler.types.importNamespaceSpecifier(node.var)], _marko_compiler.types.stringLiteral(importPath)));
+	else {
+		const varDecl = _marko_compiler.types.variableDeclaration("const", [_marko_compiler.types.variableDeclarator(node.var, (0, _marko_compiler_babel_utils.importStar)(file, importPath, "style"))]);
+		(0, _marko_compiler_babel_utils.getProgram)().node.body.push(isOutputDOM() ? varDecl : _marko_compiler.types.markoScriptlet([varDecl], true));
+	}
+}
+function buildStyleDecls(node) {
+	const { names } = node.extra.dynamicStyle;
+	const parts = [];
+	dynamicStyleValues(node).forEach((value, i) => {
+		parts.push(`${names[i]}:`);
+		parts.push(callRuntime("_escape_style_value", value));
+		parts.push(";");
+	});
+	return normalizeStringExpression(parts);
+}
 /**
 * Resolves a `<style>` block's text content to its client side import path
 * (eg `./template.marko.css`) by handing the css off to the configured
 * `resolveVirtualDependency` hook.
 */
-function getStyleImportPath(file, node) {
+function getStyleImportPath(file, node, names) {
 	const { resolveVirtualDependency } = file.markoOpts;
 	if (!resolveVirtualDependency) return;
 	const { filename, sourceMaps } = file.opts;
 	let ext = STYLE_EXT_REG.exec(node.rawValue || "")?.[1] || ".css";
 	if (node.var && !/\.module\./.test(ext)) ext = ".module" + ext;
-	let magicString;
+	const magicString = sourceMaps ? new magic_string.default(file.code, { filename }) : void 0;
 	let code = "";
 	let last = 0;
 	let map;
+	let nameIndex = 0;
 	for (const child of node.body.body) {
-		code += child.value;
-		if (sourceMaps) {
+		const placeholder = _marko_compiler.types.isMarkoPlaceholder(child);
+		const text = placeholder ? `var(${names[nameIndex++]})` : child.value;
+		if (magicString) {
 			const start = (0, _marko_compiler_babel_utils.getStart)(file, child);
-			if (start !== null) {
-				magicString ||= new magic_string.default(file.code, { filename });
+			if (start === null) magicString.appendLeft(last, text);
+			else {
+				const end = (0, _marko_compiler_babel_utils.getEnd)(file, child);
 				if (start > last) magicString.remove(last, start);
-				last = (0, _marko_compiler_babel_utils.getEnd)(file, child);
+				if (placeholder) magicString.update(start, end, text);
+				last = end;
 			}
-		}
+		} else code += text;
 	}
 	if (magicString) {
 		if (file.code.length > last) magicString.remove(last, file.code.length);
+		code = magicString.toString();
 		map = magicString.generateMap({
 			source: filename,
 			includeContent: true
@@ -8424,6 +8781,7 @@ var core_default = {
 	"<return>": return_default,
 	"<script>": script_default,
 	"<server>": server_default,
+	"<show>": show_default,
 	"<static>": static_default,
 	"<style>": style_default,
 	"<try>": try_default

package/dist/translator/util/style-interpolation.d.ts

@@ -0,0 +1,3 @@
+import { types as t } from "@marko/compiler";
+export declare const htmlStyleTagAlternateMsg = " For a native html [`<style>` tag](https://markojs.com/docs/reference/core-tag#style) use the `html-style` core tag instead.";
+export declare function checkStyleInterpolations(tag: t.NodePath<t.MarkoTag>): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marko",
-  "version": "6.1.24",
+  "version": "6.2.0",
   "description": "Optimized runtime for Marko templates.",
   "keywords": [
     "api",