marko 6.1.23 → 6.2.0

package/dist/translator/index.js

@@ -96,6 +96,7 @@ let AccessorPrefix$1 = /* @__PURE__ */ function(AccessorPrefix) {
 	AccessorPrefix["DynamicHTMLLastChild"] = "DynamicHTMLLastChild:";
 	AccessorPrefix["EventAttributes"] = "EventAttributes:";
 	AccessorPrefix["Getter"] = "Getter:";
+	AccessorPrefix["KeyedScopes"] = "KeyedScopes:";
 	AccessorPrefix["Lifecycle"] = "Lifecycle:";
 	AccessorPrefix["Promise"] = "Promise:";
 	AccessorPrefix["TagVariableChange"] = "TagVariableChange:";
@@ -799,7 +800,8 @@ function isControlFlowTag(tag) {
 		case "else":
 		case "for":
 		case "await":
-		case "try": return true;
+		case "try":
+		case "show": return true;
 	}
 	return false;
 }
@@ -1073,6 +1075,7 @@ let AccessorPrefix = /* @__PURE__ */ function(AccessorPrefix) {
 	AccessorPrefix["DynamicHTMLLastChild"] = "H";
 	AccessorPrefix["EventAttributes"] = "I";
 	AccessorPrefix["Getter"] = "J";
+	AccessorPrefix["KeyedScopes"] = "O";
 	AccessorPrefix["Lifecycle"] = "K";
 	AccessorPrefix["Promise"] = "L";
 	AccessorPrefix["TagVariableChange"] = "M";
@@ -1534,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;
@@ -1643,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;
@@ -2240,6 +2247,7 @@ const pureDOMFunctions = new Set([
 	"_child_setup",
 	"_if",
 	"_if_closure",
+	"_show",
 	"_try",
 	"_dynamic_tag",
 	"_dynamic_tag_content",
@@ -2250,6 +2258,7 @@ const pureDOMFunctions = new Set([
 	"_closure_get",
 	"_or",
 	"_for_closure",
+	"_for_selector",
 	"_for_in",
 	"_for_of",
 	"_for_to",
@@ -2824,7 +2833,79 @@ function forEachIdentifierPath(nodePath, cb) {
 	}
 }
 //#endregion
+//#region src/translator/util/for-selector.ts
+const forSelectorsBySection = /* @__PURE__ */ new WeakMap();
+const forSelectorValues = /* @__PURE__ */ new WeakSet();
+function getForSelectorKey(bodySection, closure) {
+	const selectors = forSelectorsBySection.get(bodySection);
+	if (selectors?.closures.has(getCanonicalBinding(closure))) return selectors.keyBinding;
+}
+function isForSelectorValue(binding) {
+	return forSelectorValues.has(binding);
+}
+function detectForSelector(bodySection, keyBinding) {
+	let closures;
+	for (const expr of keyBinding.reads) {
+		if (expr.section !== bodySection) continue;
+		forEach(expr.referencedBindings, (closure) => {
+			const canonical = getCanonicalBinding(closure);
+			if (closure.type !== 6 && isDirectClosure(bodySection, closure) && !closures?.has(canonical) && onlyComparesKey(closure, canonical, bodySection, keyBinding)) {
+				(closures ||= /* @__PURE__ */ new Set()).add(canonical);
+				forSelectorValues.add(closure);
+			}
+		});
+	}
+	if (closures) forSelectorsBySection.set(bodySection, {
+		keyBinding,
+		closures
+	});
+}
+function onlyComparesKey(closure, canonical, bodySection, keyBinding) {
+	let found = false;
+	for (let chain = closure; chain; chain = chain.upstreamAlias) for (const expr of chain.reads) {
+		if (expr.section !== bodySection) continue;
+		let other = false;
+		forEach(getExpressionReads(expr), (read) => {
+			const resolved = read.extra.read;
+			const at = resolved && resolvesTo(resolved, canonical);
+			if (!at) return;
+			if (at === 2 || resolved.getter || !readsKey(read.comparedTo?.extra?.read, keyBinding)) other = true;
+			else found = true;
+		});
+		if (other) return false;
+	}
+	return found;
+}
+function resolvesTo(read, canonical) {
+	let binding = read.binding;
+	let through = 0;
+	forEach(read.props, (prop) => {
+		if (binding) {
+			if (getCanonicalBinding(binding) === canonical) through = 2;
+			binding = binding.propertyAliases.get(prop);
+		}
+	});
+	return binding && getCanonicalBinding(binding) === canonical ? 1 : through;
+}
+function readsKey(read, keyBinding) {
+	if (!read || read.getter) return false;
+	let binding = read.binding;
+	forEach(read.props, (prop) => {
+		binding = binding?.propertyAliases.get(prop);
+	});
+	return !!binding && getCanonicalBinding(binding) === getCanonicalBinding(keyBinding);
+}
+//#endregion
 //#region src/translator/util/to-property-name.ts
+function getMemberExpressionPropString(expr) {
+	switch (expr.property.type) {
+		case "StringLiteral": return expr.property.value;
+		case "NumericLiteral": return "" + expr.property.value;
+		case "Identifier":
+			if (expr.computed) return;
+			return expr.property.name;
+	}
+}
 function isValidPropertyIdentifier(name) {
 	return /^[a-z_$][a-z0-9_$]*$/i.test(name);
 }
@@ -2974,6 +3055,8 @@ function getSignal(section, referencedBindings, name) {
 			export: !!exportName,
 			hasSideEffect: !!(referencedBindings && (Array.isArray(referencedBindings) || referencedBindings.type === 0 || referencedBindings.type === 1 || referencedBindings.section !== section || referencedBindings.closureSections || referencedBindings.hoists)),
 			hasDynamicSubscribers: false,
+			forcePersist: false,
+			inline: void 0,
 			extraArgs: void 0,
 			prependStatements: void 0,
 			buildAssignment: void 0
@@ -2981,8 +3064,18 @@ function getSignal(section, referencedBindings, name) {
 		if (isOutputHTML()) return signal;
 		else if (!referencedBindings) signal.build = () => getSignalFn(signal);
 		else if (Array.isArray(referencedBindings)) {
-			subscribe(referencedBindings, signal);
-			signal.build = () => {
+			const collapseSource = collapsedIntersectionSource.get(referencedBindings);
+			subscribe(collapseSource || referencedBindings, signal);
+			if (collapseSource) {
+				const sourceSignal = getSignal(section, collapseSource);
+				forEach(referencedBindings, (member) => {
+					const memberSignal = getSignal(section, member);
+					const inline = member.type === 5 && !member.upstreamAlias && member.reads.size === 1 && sourceSignal.values.find((v) => v.signal === memberSignal);
+					if (inline) memberSignal.inline = inline;
+					else memberSignal.hasSideEffect = memberSignal.forcePersist = true;
+				});
+				signal.build = () => getSignalFn(signal);
+			} else signal.build = () => {
 				const { id, scopeOffset } = intersectionMeta.get(referencedBindings);
 				return callRuntime("_or", _marko_compiler.types.numericLiteral(id), getSignalFn(signal), scopeOffset || referencedBindings.length > 2 ? _marko_compiler.types.numericLiteral(referencedBindings.length - 1) : void 0, scopeOffset && getScopeAccessorLiteral(scopeOffset, true));
 			};
@@ -3010,7 +3103,8 @@ function initValue(binding, isLet = false) {
 	signal.build = () => {
 		if (isPureMemberForwarder(binding)) return;
 		const fn = getSignalFn(signal);
-		if (binding.upstreamAlias && binding.property === void 0 && binding.excludeProperties === void 0 || !signal.hasSideEffect || !signalHasStatements(signal)) return fn;
+		const isDirectAlias = binding.upstreamAlias && binding.property === void 0 && binding.excludeProperties === void 0;
+		if (!signal.forcePersist && (isDirectAlias || !signal.hasSideEffect || !signalHasStatements(signal))) return fn;
 		return callRuntime(isLet ? signal.extraArgs ? "_let_change" : "_let" : "_const", getScopeAccessorLiteral(binding, true, isLet), fn);
 	};
 	for (const alias of binding.aliases) if (alias.type !== 6) initValue(alias);
@@ -3018,7 +3112,7 @@ function initValue(binding, isLet = false) {
 	return signal;
 }
 function signalHasStatements(signal) {
-	if (signal.extraArgs || signal.render.length || signal.effect.length || signal.values.length || signal.intersection) return true;
+	if (signal.extraArgs || signal.forcePersist || signal.render.length || signal.effect.length || signal.values.length || signal.intersection) return true;
 	const binding = signal.referencedBindings;
 	if (binding) {
 		if (!Array.isArray(binding) && (binding.closureSections || binding.type === 0 || binding.section === signal.section && (binding.hoists || binding.aliases.size || hasNonConstantPropertyAlias(binding)))) return true;
@@ -3026,7 +3120,7 @@ function signalHasStatements(signal) {
 	return false;
 }
 function isPureMemberForwarder(binding) {
-	if (binding.property === void 0 || binding.reads.size || binding.exposed || binding.aliases.size || binding.assignmentSections || getSerializeReason(binding.section, binding) || getSignal(binding.section, binding).hasSideEffect) return false;
+	if (binding.property === void 0 || binding.reads.size || binding.exposed || binding.aliases.size || binding.assignmentSections || isForSelectorValue(binding) || getSerializeReason(binding.section, binding) || getSignal(binding.section, binding).hasSideEffect) return false;
 	for (const alias of binding.propertyAliases.values()) if (alias.type !== 6) return true;
 	return false;
 }
@@ -3078,12 +3172,15 @@ function getSignalFn(signal) {
 		for (const [key, alias] of binding.propertyAliases) if (alias.type !== 6) pushMemberForwards(signal.render, toMemberExpression(createScopeReadExpression(binding), key, binding.nullable), alias);
 		if (assertsHoists) signal.render.push(_marko_compiler.types.expressionStatement(callRuntime("_assert_hoist", createScopeReadExpression(binding))));
 	}
-	for (const value of signal.values) if (signalHasStatements(value.signal)) signal.render.push(_marko_compiler.types.expressionStatement(_marko_compiler.types.callExpression(value.signal.identifier, [
-		scopeIdentifier,
-		value.value,
-		...getTranslatedExtraArgs(value.signal)
-	])));
-	else signal.render.push(_marko_compiler.types.expressionStatement(withLeadingComment(value.value, getDebugNames(value.signal.referencedBindings))));
+	for (const value of signal.values) {
+		if (value.signal.inline) continue;
+		if (signalHasStatements(value.signal)) signal.render.push(_marko_compiler.types.expressionStatement(_marko_compiler.types.callExpression(value.signal.identifier, [
+			scopeIdentifier,
+			value.value,
+			...getTranslatedExtraArgs(value.signal)
+		])));
+		else signal.render.push(_marko_compiler.types.expressionStatement(withLeadingComment(value.value, getDebugNames(value.signal.referencedBindings))));
+	}
 	forEach(signal.intersection, (intersection) => {
 		signal.render.push(_marko_compiler.types.expressionStatement(_marko_compiler.types.callExpression(intersection.identifier, [scopeIdentifier])));
 	});
@@ -3785,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;
 	}
@@ -3797,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);
@@ -3842,13 +3940,17 @@ 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 keyBinding = paramsBinding.propertyAliases.get(forType === "of" ? "1" : "0");
-			if (keyBinding && !getKnownAttrValues(tag.node).by) {
-				keyBinding.type = 6;
-				keyBinding.scopeAccessor = getAccessorProp().LoopKey;
+			const byAttr = getKnownAttrValues(tag.node).by;
+			const keyBinding = getLoopKeyBinding(byAttr, paramsBinding, forType);
+			if (keyBinding) {
+				if (!byAttr) {
+					keyBinding.type = 6;
+					keyBinding.scopeAccessor = getAccessorProp().LoopKey;
+				}
+				onFinalizeReferences(() => detectForSelector(bodySection, keyBinding));
 			}
 		}
 		bodySection.sectionAccessor = {
@@ -3897,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) {
@@ -3935,7 +4037,9 @@ var for_default = {
 				const { node } = tag;
 				const { referencedBindings } = node.extra;
 				const nodeRef = getOptimizedOnlyChildNodeBinding(tag, tagSection);
-				setClosureSignalBuilder(tag, (_closure, render) => {
+				setClosureSignalBuilder(tag, (closure, render) => {
+					const selectorKeyBinding = getForSelectorKey(bodySection, closure);
+					if (selectorKeyBinding) return callRuntime("_for_selector", getScopeAccessorLiteral(nodeRef, true), getScopeAccessorLiteral(closure, true), getScopeAccessorLiteral(selectorKeyBinding, true), render);
 					return callRuntime("_for_closure", getScopeAccessorLiteral(nodeRef, true), render);
 				});
 				const forType = getForType(node);
@@ -4009,6 +4113,40 @@ function getForType(tag) {
 		case "until": return attr.name;
 	}
 }
+function getLoopKeyBinding(byAttr, paramsBinding, forType) {
+	if (!paramsBinding) return;
+	if (byAttr) {
+		const keyChain = getByKeyChain(byAttr);
+		if (!keyChain) return;
+		let keyBinding = paramsBinding.propertyAliases.get("0");
+		for (const property of keyChain) keyBinding = keyBinding?.propertyAliases.get(property);
+		return keyBinding;
+	}
+	return paramsBinding.propertyAliases.get(forType === "of" ? "1" : "0");
+}
+function getByKeyChain(byAttr) {
+	if (byAttr.type === "StringLiteral") return [byAttr.value];
+	if (byAttr.type === "ArrowFunctionExpression" || byAttr.type === "FunctionExpression") {
+		const itemParam = byAttr.params[0];
+		let body = byAttr.body;
+		if (body.type === "BlockStatement") {
+			const [statement] = body.body;
+			body = body.body.length === 1 && statement.type === "ReturnStatement" ? statement.argument : void 0;
+		}
+		if (itemParam?.type === "Identifier" && body) return getStaticMemberChain(body, itemParam.name);
+	}
+}
+function getStaticMemberChain(node, rootName) {
+	const chain = [];
+	let cur = node;
+	while (cur.type === "MemberExpression" || cur.type === "OptionalMemberExpression") {
+		const property = getMemberExpressionPropString(cur);
+		if (property === void 0) return;
+		chain.push(property);
+		cur = cur.object;
+	}
+	if (cur.type === "Identifier" && cur.name === rootName) return chain.reverse();
+}
 function forTypeToRuntime(type) {
 	switch (type) {
 		case "of": return "forOf";
@@ -4986,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) {
@@ -5011,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({
@@ -5069,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));
@@ -5181,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":
@@ -5202,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).`);
@@ -5543,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;
@@ -6721,7 +6859,11 @@ function finalizeReferences() {
 	forEachSection((section) => {
 		const { id, bindings } = section;
 		const isOwnedBinding = ({ section }) => section.id === id;
-		let intersections = intersectionsBySection.get(section) || [];
+		let intersections = (intersectionsBySection.get(section) || []).filter((intersection) => {
+			const collapseSource = getCollapsibleIntersectionSource(intersection, section);
+			if (collapseSource) collapsedIntersectionSource.set(intersection, collapseSource);
+			return !collapseSource;
+		});
 		if (intersections.length) {
 			const anchors = /* @__PURE__ */ new Map();
 			for (const intersection of intersections) for (let i = intersection.length; i--;) if (isOwnedBinding(intersection[i])) {
@@ -6754,6 +6896,7 @@ function finalizeReferences() {
 	});
 	const programSection = (0, _marko_compiler_babel_utils.getProgram)().node.extra.section;
 	if (programSection.returnValueExpr) programSection.returnSerializeReason = getSerializeSourcesForExpr(programSection.returnValueExpr);
+	for (const finalize of getReferenceFinalizers()) finalize();
 	readsByExpression.clear();
 	fnReadsByExpression.clear();
 }
@@ -6769,6 +6912,19 @@ function getMaxOwnSourceOffset(intersection, section) {
 	return scopeOffset;
 }
 const intersectionMeta = /* @__PURE__ */ new WeakMap();
+const collapsedIntersectionSource = /* @__PURE__ */ new WeakMap();
+function getCollapsibleIntersectionSource(intersection, section) {
+	let sources;
+	for (const member of intersection) {
+		if (!member.sources) return void 0;
+		const isDirectAlias = member.upstreamAlias && member.property === void 0 && member.excludeProperties === void 0;
+		if (member.section !== section || isDirectAlias) return void 0;
+		sources = mergeSources(sources, member.sources);
+	}
+	if (!sources || sources.state && sources.param) return;
+	const source = sources.state || sources.param;
+	return source && !Array.isArray(source) && source.section === section && !source.scopeOffset ? source : void 0;
+}
 function setBindingDownstream(binding, expr) {
 	getBindingValueExprs().set(binding, expr || false);
 	if (expr && expr !== true) forEach(expr, (expr) => {
@@ -6878,13 +7034,21 @@ const propsUtil = new Sorted(function compareProps(a, b) {
 });
 const [getReadsByExpression] = createProgramState(() => /* @__PURE__ */ new Map());
 const [getFunctionReadsByExpression] = createProgramState(() => /* @__PURE__ */ new Map());
+const [getReferenceFinalizers] = createProgramState(() => []);
+function onFinalizeReferences(finalize) {
+	getReferenceFinalizers().push(finalize);
+}
+function getExpressionReads(exprExtra) {
+	return getReadsByExpression().get(exprExtra);
+}
 function addRead(exprExtra, extra, binding, section, getter) {
 	const readsByExpression = getReadsByExpression();
 	const read = {
 		binding,
 		extra,
 		getter,
-		ownVar: false
+		ownVar: false,
+		comparedTo: void 0
 	};
 	binding.reads.add(exprExtra);
 	exprExtra.section = section;
@@ -6914,6 +7078,8 @@ function addReadToExpression(root, binding, getter) {
 	const section = getOrCreateSection(exprRoot);
 	const exprExtra = exprRoot.node.extra ??= { section };
 	const read = addRead(exprExtra, node.extra ??= {}, binding, section, getter);
+	const { parent } = root;
+	if (parent.type === "BinaryExpression" && (parent.operator === "===" || parent.operator === "!==")) read.comparedTo = parent.left === node ? parent.right : parent.left;
 	if (!getter && binding.type === 5) {
 		const babelBinding = root.scope.getBinding(binding.name);
 		read.ownVar = !!babelBinding && babelBinding.kind !== "param" && isReferenceInOwnBody(babelBinding.path, root);
@@ -7020,13 +7186,16 @@ function getReadReplacement(node, signal) {
 		let replacement;
 		if (read.props === void 0) {
 			if (read.getter?.invoked) return;
-			if (isOutputDOM()) if (signal?.referencedBindings === readBinding && !signal.hasSideEffect) replacement = getSignalValueIdentifier(signal);
-			else if (read.getter?.hoisted) replacement = _marko_compiler.types.callExpression(getBindingGetterIdentifier(readBinding, read.getter.hoisted), [getScopeExpression(extra.section, read.getter.hoisted)]);
-			else if (readBinding.type === 0) {
-				if (read.getter) replacement = _marko_compiler.types.callExpression(getBindingGetterIdentifier(readBinding, readBinding.section), [getScopeExpression(extra.section, readBinding.section)]);
-			} else if (!isOptimize() && read.ownVar) replacement = callRuntime("_assert_init", extra.section ? getScopeExpression(extra.section, readBinding.section) : scopeIdentifier, getScopeAccessorLiteral(readBinding));
-			else replacement = createScopeReadExpression(readBinding, extra.section);
-			else if (node.type !== "Identifier") replacement = _marko_compiler.types.identifier(readBinding.name);
+			if (isOutputDOM()) {
+				const inlined = getSignals(extra.section).get(readBinding)?.inline?.value;
+				if (inlined) replacement = _marko_compiler.types.cloneNode(inlined, true);
+				else if (signal?.referencedBindings === readBinding && !signal.hasSideEffect) replacement = getSignalValueIdentifier(signal);
+				else if (read.getter?.hoisted) replacement = _marko_compiler.types.callExpression(getBindingGetterIdentifier(readBinding, read.getter.hoisted), [getScopeExpression(extra.section, read.getter.hoisted)]);
+				else if (readBinding.type === 0) {
+					if (read.getter) replacement = _marko_compiler.types.callExpression(getBindingGetterIdentifier(readBinding, readBinding.section), [getScopeExpression(extra.section, readBinding.section)]);
+				} else if (!isOptimize() && read.ownVar) replacement = callRuntime("_assert_init", extra.section ? getScopeExpression(extra.section, readBinding.section) : scopeIdentifier, getScopeAccessorLiteral(readBinding));
+				else replacement = createScopeReadExpression(readBinding, extra.section);
+			} else if (node.type !== "Identifier") replacement = _marko_compiler.types.identifier(readBinding.name);
 			else if (read.getter?.hoisted) replacement = getBindingGetterIdentifier(readBinding, read.getter.hoisted);
 			else if (readBinding.type === 0) {
 				if (readBinding.getters.has(readBinding.section)) replacement = getBindingGetterIdentifier(readBinding, readBinding.section);
@@ -7237,15 +7406,6 @@ function createGetterRead(binding, props, getter) {
 		getter
 	};
 }
-function getMemberExpressionPropString(expr) {
-	switch (expr.property.type) {
-		case "StringLiteral": return expr.property.value;
-		case "NumericLiteral": return "" + expr.property.value;
-		case "Identifier":
-			if (expr.computed) return;
-			return expr.property.name;
-	}
-}
 function isReferencedExtra(extra) {
 	return !!(extra && !extra.pruned && extra.section);
 }
@@ -8056,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) {
@@ -8078,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,
@@ -8116,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
@@ -8271,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