@menapo/vicss 1.0.0 → 1.1.0

package/dist/{pool-BGXMhLfL.js → pool-F3qb30Fy.js}

@@ -1,10 +1,78 @@
-import { $ as keepAtom, A as getProperty, At as splitClasses, Ct as makeClassName, F as markerId, Ft as stableStringify, I as markerLabel, K as placeholder, L as markerSites, M as numberKind, Mt as toRecord, Nt as valueLabel, Ot as propertyKey, P as MarkerValue, Pt as hash, Tt as mergeClassNames, _t as VicssError, at as SPACING_STEP, b as hasPrivateAccess, ct as cssVarName, dt as isScaleName, ft as lookupToken, g as normalizeStyle, h as compileKeyframes, ht as suggestTokens, it as SCALE_NAMESPACES, jt as styleLiteral, k as PROPERTIES, kt as readableClass, lt as didYouMean, mt as scaleTokens, nt as typedPaletteNames, ot as closestNames, rt as SCALES, ut as isPlainObject, vt as classAttribute, x as privateTokenError, xt as fromRecord, yt as compareStrings } from "./print-Ds6fkgio.js";
-import { C as createLocator, _ as evaluate, a as buildRecipe, c as resolveRecipe, h as NOT_HANDLED, i as RecipeValue, m as shadowedByEarlier, n as compileTheme, o as printTable, p as isBaseClass, r as analyzeScopes, s as recipeKey, v as evaluateBinding, y as isDynamic } from "./theme-C-0LpsJx.js";
+import { $ as isPaletteAtom, A as PROPERTIES, At as readableClass, Et as mergeClassNames, F as MarkerValue, Ft as hash, I as markerId, It as stableStringify, L as markerLabel, Mt as styleLiteral, N as numberKind, Nt as toRecord, Pt as valueLabel, R as markerSites, S as privateTokenError, St as fromRecord, _ as normalizeStyle, _t as VicssError, at as SCALE_NAMESPACES, bt as compareStrings, dt as isPlainObject, et as keepAtom, ft as isScaleName, g as compileKeyframes, gt as suggestTokens, ht as scaleTokens, it as SCALES, j as getProperty, jt as splitClasses, kt as propertyKey, lt as cssVarName, ot as SPACING_STEP, pt as lookupToken, q as placeholder, rt as typedPaletteNames, st as closestNames, ut as didYouMean, wt as makeClassName, x as hasPrivateAccess, yt as classAttribute } from "./print-B_mn7wBu.js";
+import { C as createLocator, _ as evaluate, a as buildRecipe, c as resolveRecipe, h as NOT_HANDLED, i as RecipeValue, m as shadowedByEarlier, n as compileTheme, o as printTable, p as isBaseClass, r as analyzeScopes, s as recipeKey, v as evaluateBinding, y as isDynamic } from "./theme-zBcr5DHi.js";
 import { createRequire } from "node:module";
 import { existsSync, readFileSync } from "node:fs";
 import path from "node:path";
 import { availableParallelism } from "node:os";
 import { Worker } from "node:worker_threads";
+//#region src/core/attributes.ts
+/**
+* A compiled style written as an element's `style=` (PLAN §5.16): what goes
+* inline, what stays a class, and how each framework writes an inline
+* style. The compiler finds the attributes (core/compile.ts); this module
+* holds what does not need the syntax tree.
+*
+* An inline declaration beats every class rule, so a property with a
+* condition (`_hover`, `_md`, `_dark`) cannot be split between the two:
+* its base value inline would win over the class of its hover value. Such
+* a property goes to the classes whole, base value included, and so does
+* every property related to it: a shorthand over a conditional longhand
+* (`padding` inline would beat `_hover: { paddingTop }`), a longhand under a
+* conditional shorthand, and any atom on the same CSS property.
+*/
+/** `a` is `b`, or one lies below the other (`p` and `p-t`, `padding` and `padding-top`). */
+const related = (a, b) => a === b || a.startsWith(`${b}-`) || b.startsWith(`${a}-`);
+/**
+* A compiled style's classes (`CompiledStyle.classes`) split for `style=`.
+* `atomOf` finds a class's atom; a class with none (the app's own names, a
+* theme, a marker, a flattened base) stays a class, and so does a palette
+* atom, whose rule sets custom properties a declaration cannot name.
+*/
+function splitStyle(classes, atomOf) {
+	const atoms = [];
+	const kept = [];
+	for (const cls of classes.split(" ")) {
+		if (!cls) continue;
+		const atom = atomOf(cls);
+		if (atom && !isPaletteAtom(atom)) atoms.push(atom);
+		else kept.push(cls);
+	}
+	const conditional = atoms.filter((atom) => atom.chain.length > 0);
+	const inline = [];
+	for (const atom of atoms) if (atom.chain.length > 0 || conditional.some((c) => related(c.key, atom.key) || related(c.property, atom.property))) kept.push(atom.className);
+	else inline.push(atom);
+	inline.sort((a, b) => a.tier - b.tier || (a.property < b.property ? -1 : 1));
+	return {
+		declarations: inline.map((atom) => [atom.property, atom.value]),
+		classes: kept
+	};
+}
+/** `padding-top` → `paddingTop`, `-webkit-box` → `WebkitBox`, `-ms-grid` → `msGrid`; custom properties stay. */
+function camelProperty(property) {
+	if (property.startsWith("--")) return property;
+	return (property.startsWith("-ms-") ? property.slice(1) : property).replace(/-([a-z])/g, (_, ch) => ch.toUpperCase());
+}
+/**
+* The declarations as an inline style's text, `a:b;c:d`. Double quotes in a
+* value (a font family) become single ones, which CSS reads alike, so the
+* text fits a double-quoted attribute in any template unescaped.
+*/
+function inlineText(declarations) {
+	return declarations.map(([property, value]) => `${property}:${value.includes("'") ? value : value.replaceAll("\"", "'")}`).join(";");
+}
+/** The declarations as JS: an object in React and Preact's case or Solid's, else a string. */
+function inlineStyle(declarations, shape) {
+	if (shape === "string") return JSON.stringify(inlineText(declarations));
+	return `{ ${declarations.map(([property, value]) => {
+		const key = shape === "camel" ? camelProperty(property) : property;
+		return `${/^[A-Za-z_$][\w$]*$/.test(key) ? key : JSON.stringify(key)}: ${JSON.stringify(value)}`;
+	}).join(", ")} }`;
+}
+/** Text for a template literal's raw part: what would end it or start a substitution, escaped. */
+function templateText(text) {
+	return text.replace(/[`\\]|\$(?=\{)/g, (ch) => `\\${ch}`);
+}
+//#endregion
 //#region src/core/edits.ts
 /**
 * Source edits with a source map (PLAN D20): the few operations the rewrite
@@ -291,38 +359,55 @@ const RUNTIME_EXPORTS = /* @__PURE__ */ new Set([
 const SX_SHAPES = {
 	react: {
 		attribute: "className",
-		dev: "__vxSxDev"
+		dev: "__vxSxDev",
+		inline: "camel"
 	},
 	preact: {
 		attribute: "className",
-		dev: "__vxSxDev"
+		dev: "__vxSxDev",
+		inline: "camel"
 	},
 	solid: {
 		attribute: "class",
 		target: "__vxSxClass",
-		dev: "__vxSxDevClass"
+		dev: "__vxSxDevClass",
+		inline: "kebab"
 	},
 	vue: {
 		attribute: "class",
 		target: "__vxSxClass",
-		dev: "__vxSxDevClass"
+		dev: "__vxSxDevClass",
+		inline: "string"
 	},
 	svelte: {
 		attribute: "class",
 		target: "__vxSxString",
-		dev: "__vxSxDevString"
+		dev: "__vxSxDevString",
+		inline: "string"
 	},
 	astro: {
 		attribute: "class",
 		target: "__vxSxString",
-		dev: "__vxSxDevString"
+		dev: "__vxSxDevString",
+		inline: "string"
 	},
 	vanilla: {
 		attribute: "class",
 		target: "__vxSxString",
-		dev: "__vxSxDevString"
+		dev: "__vxSxDevString",
+		inline: "string"
 	}
 };
+/** The framework functions a compiled component sets `style` and `class` through. */
+const VUE = /* @__PURE__ */ new Set([
+	"vue",
+	"vue/server-renderer",
+	"@vue/server-renderer"
+]);
+const SVELTE = /* @__PURE__ */ new Set(["svelte/internal/client", "svelte/internal/server"]);
+const ASTRO = /^astro\/(?:runtime\/server(?:\/index\.js)?|compiler-runtime)$/;
+/** Template tags that read `style` as an object of their own (kit's templates). */
+const OBJECT_STYLE_TAGS = /^@menapo\/(?:markup|og)(?:\/|$)/;
 /** D18: a folded `sx()` precomputes 2^n strings for n conditional arguments. */
 const MAX_FOLD_CONDITIONS = 2;
 /** Stands for a runtime value while the normaliser checks the rest of a function style. */
@@ -579,9 +664,11 @@ var Compiler = class {
 	/** Rewrites the runtime calls under `node`. */
 	rewrite(node, editor) {
 		walk(this.root, node, (child) => {
-			if (child.type !== "CallExpression") return true;
-			const name = runtimeName(this.root, child.callee);
+			if (this.pass.skip.has(child)) return false;
 			try {
+				if (editor === this.pass.edits) this.rewriteAttributes(child);
+				if (child.type !== "CallExpression") return true;
+				const name = runtimeName(this.root, child.callee);
 				if (name === void 0) return !this.foldRecipeCall(child, editor);
 				return !this.rewriteCall(child, name, editor);
 			} catch (error) {
@@ -625,7 +712,7 @@ var Compiler = class {
 			case "keyframes":
 			case "theme": {
 				const rule = this.compileRule(root, name, call.callee, call.arguments, evaluateHere);
-				const text = name === "theme" ? `(${styleLiteral(rule.id, this.emit)})` : JSON.stringify(rule.id);
+				const text = name === "theme" ? this.styled(styleLiteral(rule.id, this.emit)) : JSON.stringify(rule.id);
 				this.replace(editor, call.start, call.end, text);
 				return true;
 			}
@@ -649,12 +736,361 @@ var Compiler = class {
 			case "group":
 			case "peer": {
 				const marker = this.markerOf(root, name, call.callee, call.arguments, evaluateHere);
-				this.replace(editor, call.start, call.end, `(${styleLiteral(marker.className, this.emit)})`);
+				this.replace(editor, call.start, call.end, this.styled(styleLiteral(marker.className, this.emit)));
 				return true;
 			}
 			default: return false;
 		}
 	}
+	/**
+	* A `style=` whose value is a compiled style the compiler can read: its
+	* properties without a condition become the inline style, in the shape
+	* the element's framework takes, and the rest become classes merged into
+	* the element's own (core/attributes.ts says why a conditional property
+	* moves whole). Elements are found where each framework's output leaves
+	* them: JSX attributes, Vue's vnode props, Svelte's setters, and the
+	* templates of Vue's and Svelte's server output, Astro and plain JS.
+	*/
+	rewriteAttributes(node) {
+		switch (node.type) {
+			case "JSXOpeningElement":
+				this.jsxStyle(node);
+				return;
+			case "TaggedTemplateExpression": {
+				const tag = unwrap(node.tag);
+				const binding = tag.type === "Identifier" ? this.root.scopes.bindingOf(tag) : void 0;
+				if (binding?.kind === "import" && OBJECT_STYLE_TAGS.test(binding.source ?? "")) this.pass.objectStyles.add(node.quasi);
+				return;
+			}
+			case "TemplateLiteral":
+				if (!this.pass.objectStyles.has(node)) this.templateStyles(node);
+				return;
+			case "ObjectExpression":
+				if (this.root.vue) this.vueStyle(node);
+				return;
+			case "CallExpression":
+				this.svelteStyle(node);
+				return;
+			default: return;
+		}
+	}
+	/** The framework function a callee names: `_normalizeStyle`, `$.set_style`, `$$addAttribute`. */
+	frameworkFunction(callee) {
+		const target = unwrap(callee);
+		const { scopes } = this.root;
+		if (target.type === "Identifier") {
+			const binding = scopes.bindingOf(target);
+			return binding?.kind === "import" && binding.source && binding.imported ? {
+				source: binding.source,
+				name: binding.imported
+			} : void 0;
+		}
+		if (target.type !== "MemberExpression") return void 0;
+		const object = unwrap(target.object);
+		const key = memberKey(target);
+		if (object.type !== "Identifier" || key === void 0) return void 0;
+		const binding = scopes.bindingOf(object);
+		return binding?.kind === "import" && binding.imported === "*" && binding.source ? {
+			source: binding.source,
+			name: key
+		} : void 0;
+	}
+	/** The argument of a call of one of `names`, from a source `sources` takes; undefined otherwise. */
+	argumentOf(node, sources, names, at = 0) {
+		const call = unwrap(node);
+		if (call.type !== "CallExpression") return void 0;
+		const fn = this.frameworkFunction(call.callee);
+		if (!fn || !names.includes(fn.name)) return void 0;
+		if (sources instanceof RegExp ? !sources.test(fn.source) : !sources.has(fn.source)) return;
+		const arg = call.arguments[at];
+		return arg && arg.type !== "SpreadElement" ? arg : void 0;
+	}
+	/**
+	* The classes of a compiled style written as `style=`: a `css()` call or a
+	* binding of one (through Vue's `_unref(x)` and `$setup.x`), undefined for
+	* anything else, which the dev check reads at runtime (vite/attributes.ts).
+	*/
+	styleClasses(node) {
+		const inner = unwrap(node);
+		const name = inner.type === "CallExpression" ? runtimeName(this.root, inner.callee) : void 0;
+		if (!(inner.type === "Identifier" || inner.type === "MemberExpression" || name === "css" || name === "theme" || inner.type === "CallExpression" && isUnref(this.root, inner.callee, inner.arguments))) return void 0;
+		const value = attempt(() => evaluate(this.setupValue(inner) ?? inner, this.root.ctx));
+		return value?.result instanceof CompiledStyle ? value.result.classes : void 0;
+	}
+	/**
+	* Vue's dev output: the script's value that a separate render function
+	* reads as `$setup.x`, which `setup()` returns in `__returned__`
+	* (`{ card, … }`). A build inlines the template, where `x` is the binding.
+	*/
+	setupValue(node) {
+		if (!this.root.vue || node.type !== "MemberExpression") return void 0;
+		const object = unwrap(node.object);
+		const key = memberKey(node);
+		if (object.type !== "Identifier" || object.name !== "$setup" && object.name !== "_ctx") return;
+		let found;
+		walk(this.root, this.root.program, (child) => {
+			if (found) return false;
+			if (child.type !== "VariableDeclarator" || child.id.type !== "Identifier" || child.id.name !== "__returned__" || child.init?.type !== "ObjectExpression") return true;
+			for (const p of child.init.properties) if (p.type === "Property" && !p.computed && p.kind === "init" && patternKey(p) === key) found = p.value;
+			return false;
+		});
+		return found;
+	}
+	/**
+	* Writes a `style=` value `value` as an inline style in `shape` (`empty`
+	* where every property moved to classes) and merges the classes into
+	* `site`. Returns whether the value was a compiled style.
+	*/
+	writeStyle(value, shape, empty, site) {
+		const classes = this.styleClasses(value);
+		if (classes === void 0) return false;
+		const split = splitStyle(classes, (cls) => this.atomIndex.get(cls));
+		const text = split.declarations.length > 0 ? inlineStyle(split.declarations, shape) : empty;
+		this.replace(this.pass.edits, value.start, value.end, text);
+		this.pass.skip.add(value);
+		if (split.classes.length > 0) this.mergeClasses(site, split.classes.join(" "));
+		return true;
+	}
+	/** `classes` (a class list) merged into an element's class, last, as `sx(own, classes)` merges. */
+	mergeClasses(site, classes) {
+		const { edits } = this.pass;
+		const emitted = (list) => {
+			for (const cls of list) if (cls.startsWith("!")) this.names.add(cls.slice(1));
+			else this.pass.folded.add(cls);
+			return list.map(this.emit).join(" ");
+		};
+		if (site.kind === "none") {
+			edits.insert(site.at, site.write(emitted(mergeClassNames([classes]))));
+			if (site.close) edits.insert(site.close.at, site.close.text);
+			return;
+		}
+		if (site.kind === "static") {
+			const own = splitClasses(site.text).map((cls) => "!" + cls).join(" ");
+			const merged = emitted(mergeClassNames([own, classes]));
+			this.replace(edits, site.start, site.end, site.write(merged));
+			return;
+		}
+		const known = this.known(site.node);
+		if (known !== void 0) {
+			this.replace(edits, site.node.start, site.node.end, JSON.stringify(emitted(mergeClassNames([known, classes]))));
+			this.pass.skip.add(site.node);
+			return;
+		}
+		for (const cls of splitClasses(classes)) this.pass.folded.add(cls);
+		const record = this.moduleConstant(styleLiteral(toRecord(classes), this.emit));
+		edits.insert(site.node.start, `${this.helper("__vxClassList")}(`);
+		edits.insert(site.node.end, `, ${record})`);
+	}
+	/** `text` as a module-level constant after the imports, by its name; inline when there are none. */
+	moduleConstant(text) {
+		const imports = this.root.program.body.filter((node) => node.type === "ImportDeclaration");
+		if (imports.length === 0) return text;
+		const local = this.hoistName("__vxClasses");
+		this.pass.edits.insert(imports.at(-1).end, this.options.keepLines ? `;const ${local} = ${text};` : `\nconst ${local} = ${text};`);
+		return local;
+	}
+	/** JSX: `style={…}` and the element's `className` or `class` attribute. */
+	jsxStyle(element) {
+		const named = (...names) => element.attributes.find((attr) => attr.type === "JSXAttribute" && attr.name.type === "JSXIdentifier" && names.includes(attr.name.name));
+		const style = named("style");
+		if (style?.value?.type !== "JSXExpressionContainer") return;
+		const value = style.value.expression;
+		if (value.type === "JSXEmptyExpression") return;
+		const own = named("className", "class");
+		let site;
+		if (!own) {
+			const attribute = this.shape.attribute;
+			site = {
+				kind: "none",
+				at: style.end,
+				write: (c) => ` ${attribute}={${JSON.stringify(c)}}`
+			};
+		} else if (own.value?.type === "Literal" && typeof own.value.value === "string") site = {
+			kind: "static",
+			start: own.value.start,
+			end: own.value.end,
+			text: own.value.value,
+			write: (c) => `{${JSON.stringify(c)}}`
+		};
+		else if (own.value?.type === "JSXExpressionContainer" && own.value.expression.type !== "JSXEmptyExpression") site = {
+			kind: "expr",
+			node: own.value.expression
+		};
+		else return;
+		this.writeStyle(value, this.shape.inline, "undefined", site);
+	}
+	/**
+	* Vue's render function: `{ class: …, style: _normalizeStyle(x) }`, the
+	* vnode's props, with the class as text or `_normalizeClass(…)`.
+	*/
+	vueStyle(props) {
+		const named = (name) => props.properties.find((p) => p.type === "Property" && !p.computed && (p.key.type === "Identifier" && p.key.name === name || p.key.type === "Literal" && p.key.value === name));
+		const style = named("style");
+		const value = style && this.argumentOf(style.value, VUE, ["normalizeStyle"]);
+		if (!style || !value) return;
+		const own = named("class");
+		let site;
+		if (!own) site = {
+			kind: "none",
+			at: style.start,
+			write: (c) => `class: ${JSON.stringify(c)}, `
+		};
+		else if (own.value.type === "Literal" && typeof own.value.value === "string") {
+			const literal = own.value;
+			site = {
+				kind: "static",
+				start: literal.start,
+				end: literal.end,
+				text: literal.value,
+				write: (c) => JSON.stringify(c)
+			};
+		} else site = {
+			kind: "expr",
+			node: this.argumentOf(own.value, VUE, ["normalizeClass"]) ?? own.value
+		};
+		this.writeStyle(value, "string", "undefined", site);
+	}
+	/**
+	* Svelte's client output: `$.set_style(node, x)`, with the same node's
+	* `$.set_class(node, 1, …)` when the class is dynamic; a static class
+	* lives in the template's HTML, which `classList.add` keeps.
+	*/
+	svelteStyle(call) {
+		const value = this.argumentOf(call, SVELTE, ["set_style"], 1);
+		const [element] = call.arguments;
+		if (!value || element?.type !== "Identifier") return;
+		const binding = this.root.scopes.bindingOf(element);
+		const own = binding && this.svelteClasses().get(binding);
+		const name = element.name;
+		const site = own ? {
+			kind: "expr",
+			node: own
+		} : {
+			kind: "none",
+			at: call.start,
+			write: (c) => `(${name}.classList.add(...${JSON.stringify(c)}.split(" ")), `,
+			close: {
+				at: call.end,
+				text: ")"
+			}
+		};
+		this.writeStyle(value, "string", "undefined", site);
+	}
+	/**
+	* Each node's class in Svelte's client output, by the node's binding: the
+	* value its `$.set_class(node, 1, …)` sets (inside `$.clsx(…)`). Read
+	* once per pass, for every `$.set_style` of the module.
+	*/
+	svelteClasses() {
+		if (this.pass.svelteClasses) return this.pass.svelteClasses;
+		const { scopes } = this.root;
+		const out = /* @__PURE__ */ new Map();
+		walk(this.root, this.root.program, (node) => {
+			if (node.type !== "CallExpression") return true;
+			const target = node.arguments[0];
+			const cls = this.argumentOf(node, SVELTE, ["set_class"], 2);
+			const binding = target?.type === "Identifier" ? scopes.bindingOf(target) : void 0;
+			if (cls && binding && !out.has(binding)) out.set(binding, this.argumentOf(cls, SVELTE, ["clsx"]) ?? cls);
+			return true;
+		});
+		return this.pass.svelteClasses = out;
+	}
+	/**
+	* A template literal's tags: `style="${x}"` (plain JS, Vue's server
+	* output through `_ssrRenderStyle(x)`), `${$.attr_style(x)}` (Svelte's
+	* server output) and `${$$addAttribute(x, "style")}` (Astro), with the
+	* tag's class written in the same three ways or as text.
+	*/
+	templateStyles(template) {
+		const { quasis, expressions } = template;
+		if (expressions.length === 0) return;
+		const raws = quasis.map((quasi) => quasi.value.raw);
+		const shift = quasis[0].start === template.start ? 1 : 0;
+		const startOf = (k) => quasis[k].start + shift;
+		const ATTRIBUTE = /\s(style|class)=("?)([^"<>]*)$/;
+		/** An expression's attribute, as the text before it or the call around it names it. */
+		const attributeOf = (i) => {
+			const expression = expressions[i];
+			const before = ATTRIBUTE.exec(raws[i]);
+			if (before) {
+				const quoted = before[2] === "\"";
+				if (before[1] === "style" && (before[3] !== "" || quoted && raws[i + 1][0] !== "\"")) return;
+				const name = before[1];
+				return {
+					name,
+					value: this.argumentOf(expression, VUE, name === "style" ? ["ssrRenderStyle"] : ["ssrRenderClass"]) ?? expression,
+					quoted
+				};
+			}
+			const svelte = this.argumentOf(expression, SVELTE, ["attr_style"]);
+			if (svelte) return {
+				name: "style",
+				value: svelte,
+				quoted: false
+			};
+			const svelteClass = this.argumentOf(expression, SVELTE, ["attr_class"]);
+			if (svelteClass) return {
+				name: "class",
+				value: this.argumentOf(svelteClass, SVELTE, ["clsx"]) ?? svelteClass,
+				quoted: false
+			};
+			const call = unwrap(expression);
+			const astro = this.argumentOf(expression, ASTRO, ["addAttribute"]);
+			const key = call.type === "CallExpression" ? call.arguments[1] : void 0;
+			if (astro && key?.type === "Literal" && (key.value === "style" || key.value === "class")) return {
+				name: key.value,
+				value: astro,
+				quoted: false
+			};
+		};
+		for (let i = 0; i < expressions.length; i++) {
+			const style = attributeOf(i);
+			if (style?.name !== "style") continue;
+			let first = i;
+			while (first > 0 && !raws[first].includes("<")) first--;
+			let last = i + 1;
+			while (last < raws.length - 1 && !raws[last].includes(">")) last++;
+			const from = raws[first].lastIndexOf("<");
+			const to = raws[last].indexOf(">");
+			let site;
+			for (let j = first; j < last && !site; j++) {
+				const attribute = j === i ? void 0 : attributeOf(j);
+				if (attribute?.name === "class") site = {
+					kind: "expr",
+					node: attribute.value
+				};
+			}
+			for (let k = first; k <= last && !site; k++) {
+				const text = raws[k];
+				const start = k === first ? from : 0;
+				const end = k === last && to !== -1 ? to : text.length;
+				const match = /\sclass="([^"]*)"/.exec(text.slice(start, end));
+				if (match) {
+					const at = startOf(k) + start + match.index + match[0].indexOf("\"") + 1;
+					site = {
+						kind: "static",
+						start: at,
+						end: at + match[1].length,
+						text: match[1],
+						write: (c) => templateText(c)
+					};
+				}
+			}
+			const at = startOf(i + 1) + (style.quoted ? 1 : 0);
+			site ??= {
+				kind: "none",
+				at,
+				write: (c) => ` class="${templateText(c)}"`
+			};
+			if (site.kind === "static" && site.start === site.end) site = {
+				kind: "none",
+				at: site.start,
+				write: (c) => templateText(c)
+			};
+			const empty = style.value === expressions[i] ? "\"\"" : "undefined";
+			this.writeStyle(style.value, "string", empty, site);
+		}
+	}
 	/** Whether `offset` lies in a function (or a class field), which may run many times. */
 	inFunction(offset) {
 		const { root } = this;
@@ -671,12 +1107,12 @@ var Compiler = class {
 		}
 		return root.functions.some(([start, end]) => offset > start && offset < end);
 	}
-	/** A module-level name for a hoisted recipe, unused in the module. */
-	hoistName() {
+	/** A module-level name for a hoisted recipe (or `base`), unused in the module. */
+	hoistName(base = "__vxRecipeTable") {
 		const { code } = this.root;
 		let name;
 		do
-			name = `__vxRecipeTable${++this.pass.hoisted}`;
+			name = `${base}${++this.pass.hoisted}`;
 		while (code.includes(name));
 		return name;
 	}
@@ -727,7 +1163,7 @@ var Compiler = class {
 			const classes = resolveRecipe(recipe, props.build(picks), fail);
 			const styles = slots ? Object.values(classes) : [classes];
 			for (const style of styles) for (const cls of Object.values(style)) this.pass.folded.add(cls);
-			leaves.push(slots ? Object.fromEntries(slots.map((slot) => [slot, styleLiteral(classes[slot], this.emit)])) : { "": styleLiteral(classes, this.emit) });
+			leaves.push(slots ? Object.fromEntries(slots.map((slot) => [slot, this.styled(styleLiteral(classes[slot], this.emit))])) : { "": this.styled(styleLiteral(classes, this.emit)) });
 		}
 		const tests = props.tests.map((test) => this.testText(test));
 		const choose = (texts, depth = 0, at = 0) => {
@@ -828,7 +1264,7 @@ var Compiler = class {
 		const style = this.compileStyle(this.root, call.callee, call.arguments);
 		const { fn, vars } = style;
 		if (!fn || !vars) {
-			this.replace(editor, call.start, call.end, `(${styleLiteral(style.classes, this.emit)})`);
+			this.replace(editor, call.start, call.end, this.styled(styleLiteral(style.classes, this.emit)));
 			return;
 		}
 		const constant = this.localName("__vxStyle");
@@ -848,7 +1284,16 @@ var Compiler = class {
 			body = `((${picks.join(", ")}) => (${style$}))(${palettes.map((p) => this.paletteClass(p.prefix, p.value)).join(", ")})`;
 		}
 		this.replace(editor, fn.body.start, fn.body.end, body);
-		this.replace(editor, fn.end, call.end, `)(${styleLiteral(style.classes, this.emit)})`);
+		this.replace(editor, fn.end, call.end, `)(${this.styled(styleLiteral(style.classes, this.emit))})`);
+	}
+	/**
+	* A compiled style literal as the output writes it: on the prototype
+	* every compiled style shares, whose `toString` is its class attribute
+	* (runtime/style.ts), so `class={card}` works. One call per constant, a
+	* few bytes, and pure, so an unused constant still drops.
+	*/
+	styled(literal) {
+		return `/*#__PURE__*/${this.helper("__vxStyled")}(${literal})`;
 	}
 	/** A name for a binding the output adds, unused in the module. */
 	localName(base) {
@@ -2027,7 +2472,9 @@ function newPass(code, keepLines) {
 		helpers: /* @__PURE__ */ new Map(),
 		hoisted: 0,
 		devSx: false,
-		errors: []
+		errors: [],
+		skip: /* @__PURE__ */ new Set(),
+		objectStyles: /* @__PURE__ */ new Set()
 	};
 }
 function notSearched(source) {