tw-migrate 0.5.0 → 0.6.0

package/README.md

@@ -81,6 +81,8 @@ Everything outside this subset is retained and reported with one of the warning
 | `dynamic-html-attribute`             | An HTML attribute is not a safely writable quoted literal, so the element cannot be migrated.                                                                                       |
 | `dynamic-template-class`             | A dynamic class binding makes a Vue template's class set unprovable, so its scoped rules are retained.                                                                              |
 | `existing-tailwind-conflict`         | A generated utility may conflict with a Tailwind class already on the element.                                                                                                      |
+| `font-theme-registration-failed`     | A safe Tailwind font theme token could not be registered, so the rule is retained.                                                                                                  |
+| `font-theme-registration-required`   | The font family requires a Tailwind theme token, but the Tailwind entry cannot be edited, so the rule is retained.                                                                  |
 | `inferred-preprocessor-source`       | A linked CSS file was matched to a uniquely named preprocessor source file.                                                                                                         |
 | `media-query-definition-fallback`    | The Tailwind entry could not be edited safely, so media behavior was preserved with arbitrary variants.                                                                             |
 | `module-utilities-conflict`          | Utilities generated from different module classes on one element overlap, so their rules are retained.                                                                              |

package/dist/bin.js

@@ -4,7 +4,7 @@ import { styleText } from "node:util";
 //#region src/bin.ts
 const { version } = {
 	name: "tw-migrate",
-	version: "0.5.0",
+	version: "0.6.0",
 	description: "Preview and migrate React, Vue, and HTML CSS to Tailwind utilities",
 	keywords: [
 		"codemod",

package/dist/index.js

@@ -64,13 +64,17 @@ function sourceImport(value) {
 	return object(value) && typeof value.specifier === "string" && typeof value.typeOnly === "boolean" && typeof value.dynamic === "boolean";
 }
 function sourceAnalysisResult(value) {
-	return object(value) && Array.isArray(value.imports) && value.imports.every(sourceImport) && Array.isArray(value.staticImports) && value.staticImports.every((item) => typeof item === "string") && Array.isArray(value.defaultImports) && value.defaultImports.every((item) => object(item) && typeof item.source === "string" && typeof item.local === "string") && Array.isArray(value.vueGlobPatterns) && value.vueGlobPatterns.every((item) => typeof item === "string") && Array.isArray(value.useCssModuleLocals) && value.useCssModuleLocals.every((item) => typeof item === "string") && Array.isArray(value.unboundReferences) && value.unboundReferences.every((item) => typeof item === "string") && [
+	return object(value) && Array.isArray(value.imports) && value.imports.every(sourceImport) && Array.isArray(value.staticImports) && value.staticImports.every((item) => typeof item === "string") && Array.isArray(value.defaultImports) && value.defaultImports.every((item) => object(item) && typeof item.source === "string" && typeof item.local === "string") && Array.isArray(value.vueGlobPatterns) && value.vueGlobPatterns.every((item) => typeof item === "string") && Array.isArray(value.templatePrefixes) && value.templatePrefixes.every((item) => typeof item === "string") && Array.isArray(value.useCssModuleLocals) && value.useCssModuleLocals.every((item) => typeof item === "string") && Array.isArray(value.unboundReferences) && value.unboundReferences.every((item) => typeof item === "string") && Array.isArray(value.stylesheetLinks) && value.stylesheetLinks.every((item) => typeof item === "string") && Array.isArray(value.customProperties) && value.customProperties.every((item) => typeof item === "string") && [
 		value.vueGlobUnverifiable,
 		value.hasDynamicImport,
 		value.hasVueFallthroughMacro,
 		value.usesCssModule,
 		value.hasUnboundUseCssModule,
-		value.definesRootUseCssModule
+		value.definesRootUseCssModule,
+		value.stylesheetLinksUnverifiable,
+		value.rendersStyleElement,
+		value.injectsMarkup,
+		value.customPropertiesUnbounded
 	].every((item) => typeof item === "boolean");
 }
 const ANALYSIS_CACHE_LIMIT = 4096;
@@ -84,7 +88,7 @@ function bound(cache) {
 	}
 }
 function expressionAnalysis(path, source) {
-	return decode("expression analysis", binding.expressionAnalysis(path, source), (value) => object(value) && (typeof value.staticString === "string" || value.staticString === null) && (typeof value.vueModuleMember === "string" || value.vueModuleMember === null) && typeof value.usesCssModule === "boolean" && typeof value.referencesUseCssModule === "boolean" && Array.isArray(value.references) && value.references.every((item) => typeof item === "string"));
+	return decode("expression analysis", binding.expressionAnalysis(path, source), (value) => object(value) && (typeof value.staticString === "string" || value.staticString === null) && (typeof value.vueModuleMember === "string" || value.vueModuleMember === null) && typeof value.usesCssModule === "boolean" && typeof value.referencesUseCssModule === "boolean" && Array.isArray(value.references) && value.references.every((item) => typeof item === "string") && Array.isArray(value.templatePrefixes) && value.templatePrefixes.every((item) => typeof item === "string"));
 }
 function sourceAnalysis(path, source) {
 	const cached = sourceAnalysisCache.get(path);
@@ -97,6 +101,12 @@ function sourceAnalysis(path, source) {
 	bound(sourceAnalysisCache);
 	return analysis;
 }
+function fontFamilyStack(value) {
+	return decode("font family stack", binding.fontFamilyStack(value), (parsed) => parsed === null || object(parsed) && typeof parsed.value === "string" && object(parsed.firstFamily) && typeof parsed.firstFamily.name === "string" && (parsed.firstFamily.kind === "name" || parsed.firstFamily.kind === "generic" || parsed.firstFamily.kind === "css-wide"));
+}
+function compiledShape(css) {
+	return decode("compiled shape", binding.compiledShape(css), (value) => object(value) && Array.isArray(value.declarations) && value.declarations.every((item) => object(item) && typeof item.property === "string" && typeof item.important === "boolean" && typeof item.value === "string") && Array.isArray(value.referencedProperties) && value.referencedProperties.every((item) => typeof item === "string"));
+}
 function stylesheetAnalysis(path, source) {
 	const cached = stylesheetAnalysisCache.get(path);
 	if (cached?.source === source) return cached.analysis;
@@ -104,7 +114,7 @@ function stylesheetAnalysis(path, source) {
 		value.unverifiable,
 		value.scopeEscapesUnverifiable,
 		value.selectorsUnverifiable
-	].every((item) => typeof item === "boolean") && Array.isArray(value.scopeEscapes) && value.scopeEscapes.every((item) => typeof item === "string") && Array.isArray(value.scopeShadowCss) && value.scopeShadowCss.every((item) => typeof item === "string") && object(value.themeTokens) && Object.values(value.themeTokens).every((item) => typeof item === "string") && Array.isArray(value.globalAtRuleIdentities) && value.globalAtRuleIdentities.every((item) => typeof item === "string") && typeof value.globalAtRulesUnverifiable === "boolean");
+	].every((item) => typeof item === "boolean") && Array.isArray(value.scopeEscapes) && value.scopeEscapes.every((item) => typeof item === "string") && Array.isArray(value.scopeShadowCss) && value.scopeShadowCss.every((item) => typeof item === "string") && object(value.themeTokens) && Object.values(value.themeTokens).every((item) => typeof item === "string") && Array.isArray(value.globalAtRuleIdentities) && value.globalAtRuleIdentities.every((item) => typeof item === "string") && typeof value.globalAtRulesUnverifiable === "boolean" && Array.isArray(value.classNames) && value.classNames.every((item) => typeof item === "string") && typeof value.classReservationsUnbounded === "boolean" && Array.isArray(value.customProperties) && value.customProperties.every((item) => typeof item === "string") && typeof value.customPropertiesUnbounded === "boolean");
 	stylesheetAnalysisCache.set(path, {
 		source,
 		analysis
@@ -348,6 +358,11 @@ function stylesheetReferenceTargets(importer, reference, styleSources) {
 		join(target, `index${syntax}`)
 	])).filter((path) => styleSources.has(path));
 }
+function localHrefTarget(href) {
+	const target = href.split(/[?#]/, 1)[0];
+	if (!target || /^[a-z][a-z0-9+.-]*:|^\/\//i.test(target)) return void 0;
+	return target;
+}
 function cssImports(path, source) {
 	return stylesheetAnalysis(path, source).imports;
 }
@@ -510,6 +525,9 @@ async function collectFiles(root, include) {
 //#endregion
 //#region src/parser/html.ts
 const TEMPLATE_MARKERS = /\{\{|\}\}|\$\{|<%|%>|<#|#>|\[%|%\]/;
+/** Balanced template expressions, for masking a templated attribute value
+* before extracting its static class-prefix tokens. */
+const TEMPLATE_EXPRESSIONS = /\{\{[\s\S]*?\}\}|\$\{[\s\S]*?\}|<%[\s\S]*?%>|<#[\s\S]*?#>|\[%[\s\S]*?%\]/g;
 function parseHtmlSource(path, source) {
 	const errors = [];
 	const document = parse(source, {
@@ -524,6 +542,9 @@ function parseHtmlSource(path, source) {
 	const bases = [];
 	const elements = [];
 	const dynamicAttributes = [];
+	const dynamicClassValues = [];
+	const styleAttributeValues = [];
+	const handlerTexts = [];
 	const scriptTexts = [];
 	let hasStyle = false;
 	const unquoted = (attribute) => source[attribute.start - 1] !== "\"" && source[attribute.start - 1] !== "'";
@@ -534,6 +555,9 @@ function parseHtmlSource(path, source) {
 		}
 		if (node.tagName) {
 			const attributes = new Map((node.attrs ?? []).map((attribute) => [attribute.name, attribute.value]));
+			const style = attributes.get("style");
+			if (style !== void 0 && style !== "") styleAttributeValues.push(style);
+			for (const [name, value] of attributes) if (name.startsWith("on") && value !== "") handlerTexts.push(value);
 			const locations = node.sourceCodeLocation?.attrs;
 			if (locations) {
 				if (node.tagName === "link" && stylesheetRel(attributes.get("rel")) && !attributes.has("disabled")) {
@@ -560,15 +584,20 @@ function parseHtmlSource(path, source) {
 				}
 				let classAttribute = locatedAttribute(source, locations.class, attributes.get("class"));
 				const idAttribute = locatedAttribute(source, locations.id, attributes.get("id"));
-				const dynamic = (!classAttribute && idAttribute && locations.class ? {
+				const unparsedClass = !classAttribute && idAttribute && locations.class ? {
 					start: locations.class.startOffset,
 					end: locations.class.endOffset
-				} : void 0) ?? [classAttribute, idAttribute].find((attribute) => attribute && (!attribute.writable || TEMPLATE_MARKERS.test(attribute.value))) ?? (classAttribute && unquoted(classAttribute) ? classAttribute : void 0);
-				if (dynamic) dynamicAttributes.push({
-					start: dynamic.start,
-					end: dynamic.end
-				});
-				else if (classAttribute || idAttribute) {
+				} : void 0;
+				const dynamic = unparsedClass ?? [classAttribute, idAttribute].find((attribute) => attribute && (!attribute.writable || TEMPLATE_MARKERS.test(attribute.value))) ?? (classAttribute && unquoted(classAttribute) ? classAttribute : void 0);
+				if (dynamic) {
+					dynamicAttributes.push({
+						start: dynamic.start,
+						end: dynamic.end
+					});
+					const decoded = attributes.get("class");
+					const entityBearing = classAttribute !== void 0 && dynamic === classAttribute && classAttribute.writable === false;
+					if (dynamic !== idAttribute && decoded !== void 0 && (TEMPLATE_MARKERS.test(decoded) || entityBearing || dynamic === unparsedClass)) dynamicClassValues.push(decoded);
+				} else if (classAttribute || idAttribute) {
 					if (!classAttribute && idAttribute) {
 						const startTag = node.sourceCodeLocation?.startTag;
 						if (startTag && source[startTag.endOffset - 1] === ">") {
@@ -599,6 +628,9 @@ function parseHtmlSource(path, source) {
 			elements,
 			dynamicAttributes
 		}),
+		dynamicClassValues,
+		styleAttributeValues,
+		handlerText: handlerTexts.join(";\n"),
 		scriptText: scriptTexts.join("\n"),
 		hasStyle
 	};
@@ -778,8 +810,10 @@ function scanProof(options) {
 		} else if (directive.kind === "import" && directive.tailwind) {
 			if (directive.sourceUnreadable) return null;
 			if (directive.source === "none") automaticDisabled = true;
-			else if (directive.source !== null) if (coversChild(directive.source)) literal = true;
-			else automaticDisabled = true;
+			else if (directive.source !== null) {
+				if (coversChild(directive.source)) literal = true;
+				else automaticDisabled = true;
+			}
 		}
 	}
 	if (literal) return "literal";
@@ -965,8 +999,8 @@ function htmlLinksEntry(file, entry) {
 		return parsed.links.some((link) => {
 			const media = link.media.trim().toLowerCase();
 			if (media !== "" && media !== "all") return false;
-			const href = link.href.split(/[?#]/, 1)[0];
-			if (!href || /^[a-z][a-z0-9+.-]*:|^\/\//i.test(href)) return false;
+			const href = localHrefTarget(link.href);
+			if (href === void 0) return false;
 			return resolve(dirname(file.path), href) === entry;
 		});
 	} catch {
@@ -1142,8 +1176,8 @@ function addInferredPreprocessorContext(state) {
 	return true;
 }
 function localHtmlReference(packageRoot, base, reference) {
-	const path = reference.split(/[?#]/, 1)[0];
-	if (!path || path.startsWith("//") || /^[a-z][a-z\d+.-]*:/i.test(path)) return void 0;
+	const path = localHrefTarget(reference);
+	if (path === void 0) return void 0;
 	let decoded;
 	try {
 		decoded = decodeURIComponent(path);
@@ -1179,7 +1213,7 @@ function htmlWarning(code, file, start, end, message) {
 //#endregion
 //#region src/tailwind.ts
 function findTailwindEntries(stylePaths, styleSources) {
-	return stylePaths.filter((path) => extname(path) === ".css" && importSpecifiers(styleSources.get(path) ?? "").some((specifier) => specifier === "tailwindcss" || specifier.startsWith("tailwindcss/")));
+	return stylePaths.filter((path) => extname(path) === ".css" && importEntries(styleSources.get(path) ?? "").some(({ specifier }) => specifier === "tailwindcss" || specifier.startsWith("tailwindcss/")));
 }
 function selectTailwindEntry(entries, configuredPath) {
 	if (configuredPath) return configuredPath;
@@ -1226,9 +1260,10 @@ async function loadTailwind(packageRoot, tailwindCss, snapshots, workspaceRoot)
 	};
 	const defaultTheme = await readFile(join(dirname(packagePath), "theme.css"), "utf8");
 	const graphSources = [];
+	const referenceTokens = /* @__PURE__ */ new Set();
 	const themeTokens = {
 		...extractThemeTokens("tailwind-default.theme.css", defaultTheme),
-		...await extractThemeTokensFromGraph(tailwindCss, css, base, loadStylesheet, graphSources)
+		...await extractThemeTokensFromGraph(tailwindCss, css, base, loadStylesheet, graphSources, referenceTokens)
 	};
 	graphSources.push({
 		path: tailwindCss,
@@ -1249,6 +1284,7 @@ async function loadTailwind(packageRoot, tailwindCss, snapshots, workspaceRoot)
 		css,
 		path: tailwindCss,
 		themeTokens,
+		referenceTokens,
 		graphSources,
 		loadWith
 	};
@@ -1256,12 +1292,15 @@ async function loadTailwind(packageRoot, tailwindCss, snapshots, workspaceRoot)
 function extractThemeTokens(key, css) {
 	return stylesheetAnalysis(key, css).themeTokens;
 }
-function importSpecifiers(css) {
-	return (cssDirectives$1(css) ?? []).flatMap((directive) => directive !== null && typeof directive === "object" && "kind" in directive && directive.kind === "import" && "specifier" in directive && typeof directive.specifier === "string" ? [directive.specifier] : []);
+function importEntries(css) {
+	return (cssDirectives$1(css) ?? []).flatMap((directive) => directive !== null && typeof directive === "object" && "kind" in directive && directive.kind === "import" && "specifier" in directive && typeof directive.specifier === "string" ? [{
+		specifier: directive.specifier,
+		reference: "reference" in directive && directive.reference === true
+	}] : []);
 }
-async function extractThemeTokensFromGraph(identity, css, base, loadStylesheet, graphSources, seen = /* @__PURE__ */ new Set()) {
+async function extractThemeTokensFromGraph(identity, css, base, loadStylesheet, graphSources, referenceTokens, inReference = false, seen = /* @__PURE__ */ new Set()) {
 	const tokens = {};
-	for (const spec of importSpecifiers(css)) {
+	for (const { specifier: spec, reference } of importEntries(css)) {
 		const key = `${base}\0${spec}`;
 		if (seen.has(key)) continue;
 		seen.add(key);
@@ -1270,15 +1309,301 @@ async function extractThemeTokensFromGraph(identity, css, base, loadStylesheet,
 			path: key,
 			source: loaded.content
 		});
-		Object.assign(tokens, await extractThemeTokensFromGraph(key, loaded.content, loaded.base, loadStylesheet, graphSources, seen));
+		Object.assign(tokens, await extractThemeTokensFromGraph(key, loaded.content, loaded.base, loadStylesheet, graphSources, referenceTokens, inReference || reference, seen));
 	}
-	return Object.assign(tokens, extractThemeTokens(`${identity}.theme.css`, css));
+	const own = extractThemeTokens(`${identity}.theme.css`, css);
+	if (inReference) for (const token of Object.keys(own)) referenceTokens.add(token);
+	return Object.assign(tokens, own);
 }
 function invalidCandidates(system, candidates) {
 	const generated = system.candidatesToCss(candidates);
 	return candidates.filter((_, index) => generated[index] === null);
 }
 //#endregion
+//#region src/plan/canonicalize.ts
+const caches = /* @__PURE__ */ new WeakMap();
+function canonicalCandidate(system, candidate) {
+	if (typeof system.canonicalizeCandidates !== "function") return null;
+	let cache = caches.get(system);
+	if (cache === void 0) {
+		cache = /* @__PURE__ */ new Map();
+		caches.set(system, cache);
+	}
+	const cached = cache.get(candidate);
+	if (cached !== void 0) return cached;
+	let canonical;
+	try {
+		const results = system.canonicalizeCandidates([candidate]);
+		canonical = results.length === 1 && typeof results[0] === "string" && results[0] !== candidate ? results[0] : null;
+	} catch {
+		canonical = null;
+	}
+	cache.set(candidate, canonical);
+	return canonical;
+}
+function spellingReservations(styleSources, resolvedExtras, resolvedImports = /* @__PURE__ */ new Set()) {
+	const reservations = {
+		names: /* @__PURE__ */ new Set(),
+		prefixes: /* @__PURE__ */ new Set(),
+		unbounded: false,
+		properties: /* @__PURE__ */ new Set(),
+		propertiesUnbounded: false
+	};
+	for (const [path, source] of styleSources) scanStylesheetReservations(path, source, styleSources, reservations, resolvedImports);
+	for (const [path, source] of resolvedExtras) try {
+		const analysis = stylesheetAnalysis(path, source);
+		for (const name of analysis.classNames) reservations.names.add(name);
+		if (analysis.classReservationsUnbounded) reservations.unbounded = true;
+		for (const property of analysis.customProperties) reservations.properties.add(property);
+		if (analysis.customPropertiesUnbounded) reservations.propertiesUnbounded = true;
+		if (entryDirectiveHazard(source)) reservations.unbounded = true;
+	} catch {
+		reservations.unbounded = true;
+	}
+	return reservations;
+}
+function scanStylesheetReservations(path, source, styleSources, reservations, resolvedImports = /* @__PURE__ */ new Set()) {
+	try {
+		const analysis = stylesheetAnalysis(path, source);
+		for (const name of analysis.classNames) reservations.names.add(name);
+		if (analysis.classReservationsUnbounded) reservations.unbounded = true;
+		for (const property of analysis.customProperties) reservations.properties.add(property);
+		if (analysis.customPropertiesUnbounded) reservations.propertiesUnbounded = true;
+		if (analysis.unverifiable) reservations.unbounded = true;
+		for (const reference of analysis.references) {
+			if (reference === "tailwindcss" || reference.startsWith("tailwindcss/")) continue;
+			if (reference.startsWith("sass:")) continue;
+			if (resolvedImports.has(`${dirname(path)}\0${reference}`) || styleSources.has(reference)) continue;
+			if (stylesheetReferenceTargets(path, reference, styleSources).length === 0) reservations.unbounded = true;
+		}
+	} catch {
+		reservations.unbounded = true;
+	}
+}
+function entryDirectiveHazard(source) {
+	const directives = cssDirectives$1(source);
+	if (directives === null) return true;
+	return directives.some((directive) => {
+		if (directive === null || typeof directive !== "object" || !("kind" in directive)) return false;
+		if (directive.kind === "import") return "source" in directive && directive.source !== null || "sourceUnreadable" in directive && directive.sourceUnreadable === true;
+		if (directive.kind === "source") return "not" in directive && directive.not === true || "unreadable" in directive && directive.unreadable === true;
+		return directive.kind === "other" && "name" in directive && (directive.name === "plugin" || directive.name === "config");
+	});
+}
+function scanInlineStyleReservations(key, value, reservations) {
+	try {
+		const analysis = stylesheetAnalysis(key, `.x{${value}}`);
+		for (const property of analysis.customProperties) reservations.properties.add(property);
+		if (analysis.customPropertiesUnbounded) reservations.propertiesUnbounded = true;
+	} catch {
+		reservations.propertiesUnbounded = true;
+	}
+}
+function reservedSpelling(reservations, spelling) {
+	if (reservations.names.has(spelling)) return true;
+	for (const prefix of reservations.prefixes) if (spelling.startsWith(prefix)) return true;
+	return false;
+}
+function utilitySegment(candidate) {
+	let depth = 0;
+	let start = 0;
+	for (let index = 0; index < candidate.length; index += 1) {
+		const character = candidate[index];
+		if (character === "[" || character === "(") depth += 1;
+		else if (character === "]" || character === ")") depth -= 1;
+		else if (character === ":" && depth === 0) start = index + 1;
+	}
+	return candidate.slice(start);
+}
+function sameShape(left, right) {
+	return left.length === right.length && left.every((declaration, index) => declaration.property === right[index].property && declaration.important === right[index].important);
+}
+function acceptedCandidateAliases(system, probes, reservations) {
+	const aliases = {};
+	if (reservations.unbounded) return aliases;
+	const prefix = system.theme.prefix;
+	for (const probe of new Set(probes)) {
+		const canonical = canonicalCandidate(system, probe);
+		if (canonical === null) continue;
+		const unprefixed = prefix !== null && canonical.startsWith(`${prefix}:`) ? canonical.slice(prefix.length + 1) : null;
+		const segment = utilitySegment(canonical).replace(/!$/, "");
+		if (segment.includes("[") || reservedSpelling(reservations, canonical) || unprefixed !== null && reservedSpelling(reservations, unprefixed) || reservedSpelling(reservations, segment)) continue;
+		const [compiledProbe, compiledCanonical] = system.candidatesToCss([probe, canonical]);
+		if (compiledProbe == null || compiledCanonical == null) continue;
+		let probeShape;
+		let canonicalShape;
+		try {
+			probeShape = compiledShape(compiledProbe);
+			canonicalShape = compiledShape(compiledCanonical);
+		} catch {
+			continue;
+		}
+		if (canonicalShape.referencedProperties.length > 0 || probeShape.referencedProperties.length > 0 || !sameShape(probeShape.declarations, canonicalShape.declarations)) continue;
+		aliases[probe] = canonical;
+	}
+	return aliases;
+}
+//#endregion
+//#region src/plan/fonts.ts
+function fontTokenName(family) {
+	const collapsed = family.normalize("NFC").toLowerCase().replace(/[^\p{L}\p{N}]+/gu, "-").replace(/^-+|-+$/g, "");
+	if (collapsed === "") return "family";
+	return /^\p{N}/u.test(collapsed) ? `family-${collapsed}` : collapsed;
+}
+function aliasedCandidate(candidate, utility) {
+	const segment = utilitySegment(candidate);
+	const important = segment.endsWith("!") ? "!" : "";
+	return candidate.slice(0, candidate.length - segment.length) + utility + important;
+}
+function appendFontTheme(css, tokens) {
+	const names = Object.keys(tokens).sort();
+	if (names.length === 0) return css;
+	let output = css;
+	if (!output.endsWith("\n")) output += "\n";
+	if (!output.endsWith("\n\n")) output += "\n";
+	output += `@theme {\n${names.map((name) => `  --font-${name}: ${tokens[name]};\n`).join("")}}\n`;
+	return output;
+}
+function fontShapesAccept(system, probeCandidate, aliased, reservations, backingToken) {
+	const [compiledProbe, compiledAliased] = system.candidatesToCss([probeCandidate, aliased]);
+	if (compiledProbe == null || compiledAliased == null) return false;
+	let probeShape;
+	let aliasedShape;
+	try {
+		probeShape = compiledShape(compiledProbe);
+		aliasedShape = compiledShape(compiledAliased);
+	} catch {
+		return false;
+	}
+	if (probeShape.referencedProperties.length > 0) return false;
+	if (aliasedShape.referencedProperties.some((property) => reservations.properties.has(property))) return false;
+	if (backingToken !== void 0) {
+		if (!aliasedShape.declarations.some((declaration) => declaration.property === "font-family" && /^var\(--[\w-]+\)$/.test(declaration.value) && (declaration.value === `var(--${backingToken})` || declaration.value.endsWith(`-${backingToken})`)))) return false;
+	}
+	return sameShape(probeShape.declarations, aliasedShape.declarations);
+}
+async function registerFontTokens(options) {
+	const { system, reservations } = options;
+	if (reservations.unbounded || reservations.propertiesUnbounded) return {
+		aliases: {},
+		tokens: {},
+		failures: /* @__PURE__ */ new Set()
+	};
+	const prefix = system.theme.prefix;
+	const aliases = {};
+	const failures = /* @__PURE__ */ new Set();
+	const seen = /* @__PURE__ */ new Set();
+	const allocatedByStack = /* @__PURE__ */ new Map();
+	const proposals = [];
+	const claimed = /* @__PURE__ */ new Set();
+	const tokenStacks = fontTokenStacks(options.themeTokens, options.referenceTokens);
+	for (const probe of options.probes) {
+		if (seen.has(probe.candidate)) continue;
+		seen.add(probe.candidate);
+		if (probe.firstFamily.kind !== "name") continue;
+		if (probe.candidate in options.existingAliases) continue;
+		let reused = false;
+		for (const token of matchingFontTokens(tokenStacks, probe.value)) {
+			const aliased = aliasedCandidate(probe.candidate, token);
+			if (reservedSpelling(reservations, token) || reservedSpelling(reservations, aliased)) continue;
+			const reuseName = token.replace(/^font-/, "");
+			const owner = options.globalAllocations.get(reuseName);
+			if (owner !== void 0 && (owner === null || owner !== probe.value)) continue;
+			if (fontShapesAccept(system, probe.candidate, aliased, reservations, token)) {
+				aliases[probe.candidate] = aliased;
+				options.globalAllocations.set(reuseName, probe.value);
+				reused = true;
+				break;
+			}
+		}
+		if (reused) continue;
+		if (!options.generate) continue;
+		const stackKey = probe.value;
+		const shared = allocatedByStack.get(stackKey);
+		if (shared !== void 0) {
+			proposals.push({
+				probe,
+				name: shared
+			});
+			continue;
+		}
+		const base = fontTokenName(probe.firstFamily.name);
+		let allocated = false;
+		for (let attempt = 1; attempt <= 100; attempt += 1) {
+			const name = attempt === 1 ? base : `${base}-${attempt}`;
+			if (claimed.has(name)) continue;
+			if (reservations.properties.has(`--font-${name}`)) continue;
+			if (prefix !== null && reservations.properties.has(`--${prefix}-font-${name}`)) continue;
+			if (reservedSpelling(reservations, `font-${name}`)) continue;
+			if (options.mentionedSegments.has(`font-${name}`)) continue;
+			const global = options.globalAllocations.get(name);
+			if (global !== void 0 && (global === null || global !== probe.value)) continue;
+			const compiled = prefix !== null ? `${prefix}:font-${name}` : `font-${name}`;
+			if (system.candidatesToCss([compiled])[0] !== null) continue;
+			claimed.add(name);
+			allocatedByStack.set(stackKey, name);
+			proposals.push({
+				probe,
+				name
+			});
+			allocated = true;
+			break;
+		}
+		if (!allocated) failures.add(probe.candidate);
+	}
+	if (proposals.length === 0) return {
+		aliases,
+		tokens: {},
+		failures
+	};
+	const tokens = {};
+	for (const { probe, name } of proposals) tokens[name] = probe.value;
+	let fontSystem;
+	try {
+		fontSystem = await options.loadWith(appendFontTheme(options.entryCss, tokens));
+	} catch (error) {
+		if (isIntegrityError(error)) throw error;
+		for (const { probe } of proposals) failures.add(probe.candidate);
+		return {
+			aliases,
+			tokens: {},
+			failures
+		};
+	}
+	const before = system.candidatesToCss(options.corpus);
+	const after = fontSystem.candidatesToCss(options.corpus);
+	const corpusChanged = options.corpus.some((candidate, index) => before[index] !== after[index]);
+	const accepted = {};
+	for (const { probe, name } of proposals) {
+		const canonical = corpusChanged ? null : canonicalCandidate(fontSystem, probe.candidate);
+		const expected = aliasedCandidate(probe.candidate, `font-${name}`);
+		if (canonical !== expected || !fontShapesAccept(fontSystem, probe.candidate, expected, reservations)) {
+			failures.add(probe.candidate);
+			continue;
+		}
+		aliases[probe.candidate] = expected;
+		accepted[name] = probe.value;
+	}
+	return {
+		aliases,
+		tokens: accepted,
+		failures
+	};
+}
+function fontTokenStacks(themeTokens, referenceTokens = /* @__PURE__ */ new Set()) {
+	const stacks = /* @__PURE__ */ new Map();
+	for (const [token, value] of Object.entries(themeTokens)) {
+		if (!token.startsWith("font-")) continue;
+		if (referenceTokens.has(token)) continue;
+		const parsed = fontFamilyStack(value);
+		if (parsed !== null) stacks.set(token, parsed.value);
+	}
+	return stacks;
+}
+function matchingFontTokens(stacks, normalizedStack) {
+	return [...stacks].filter(([, stack]) => stack === normalizedStack).map(([token]) => token).sort();
+}
+//#endregion
 //#region src/plan/media.ts
 const GENERATED_NAMESPACE = "twm-media";
 /**
@@ -1535,7 +1860,9 @@ function analyzeVueSource(compiler, path, source) {
 	const { descriptor, errors } = compiler.parse(source, { filename: path });
 	const styleRanges = descriptor.styles.map((style) => ({
 		start: style.loc.start.offset,
-		end: style.loc.end.offset
+		end: style.loc.end.offset,
+		lang: style.lang ?? "css",
+		...style.src !== void 0 ? { src: style.src } : {}
 	}));
 	const byteRanges = (offset) => ({
 		warnings: warnings.map((warning) => ({
@@ -1544,6 +1871,7 @@ function analyzeVueSource(compiler, path, source) {
 			end: offset(warning.end)
 		})),
 		styleRanges: styleRanges.map((range) => ({
+			...range,
 			start: offset(range.start),
 			end: offset(range.end)
 		}))
@@ -1684,6 +2012,14 @@ function analyzeVueSource(compiler, path, source) {
 		moduleClosureBroken: false,
 		referencesUseCssModule: false,
 		expressionReferences: /* @__PURE__ */ new Set(),
+		templatePrefixes: /* @__PURE__ */ new Set(),
+		entityClassTokens: [],
+		styleAttributeValues: [],
+		styleAttributesUnverifiable: false,
+		customProperties: /* @__PURE__ */ new Set(),
+		customPropertiesUnbounded: false,
+		stylesheetLinks: [],
+		stylesheetLinksUnverifiable: false,
 		expressionPath: scriptLang === "ts" || scriptLang === "tsx" ? "Component.ts" : "Component.js"
 	};
 	visitTemplateNode(source, template.ast, state);
@@ -1699,8 +2035,11 @@ function analyzeVueSource(compiler, path, source) {
 	let setupAnalysis;
 	let scriptUsesCssModule = false;
 	let scriptHasDynamicImport = false;
+	const scriptCustomProperties = [];
+	let scriptCustomPropertiesUnbounded = false;
 	const scriptVueReferences = [];
 	const scriptVueGlobPatterns = [];
+	const scriptTemplatePrefixes = [];
 	let scriptVueGlobUnverifiable = false;
 	const styleImports = [descriptor.script, descriptor.scriptSetup].flatMap((script) => {
 		if (!script) return [];
@@ -1716,6 +2055,9 @@ function analyzeVueSource(compiler, path, source) {
 			scriptImports.push(...analysis.imports);
 			scriptVueReferences.push(...analysis.imports.filter((record) => !record.typeOnly).map((record) => record.specifier));
 			scriptVueGlobPatterns.push(...analysis.vueGlobPatterns);
+			scriptTemplatePrefixes.push(...analysis.templatePrefixes);
+			scriptCustomProperties.push(...analysis.customProperties);
+			if (analysis.customPropertiesUnbounded) scriptCustomPropertiesUnbounded = true;
 			if (analysis.vueGlobUnverifiable) scriptVueGlobUnverifiable = true;
 			return analysis.staticImports;
 		} catch {
@@ -1790,6 +2132,14 @@ function analyzeVueSource(compiler, path, source) {
 		scriptVueReferences,
 		scriptVueGlobPatterns,
 		scriptVueGlobUnverifiable,
+		templatePrefixes: [.../* @__PURE__ */ new Set([...state.templatePrefixes, ...scriptTemplatePrefixes])],
+		templateClassTokens: [...new Set(state.entityClassTokens)],
+		templateStyleValues: state.styleAttributeValues,
+		templateStylesUnverifiable: state.styleAttributesUnverifiable,
+		scriptCustomProperties: [...scriptCustomProperties, ...state.customProperties],
+		scriptCustomPropertiesUnbounded: scriptCustomPropertiesUnbounded || state.customPropertiesUnbounded,
+		templateStylesheetLinks: state.stylesheetLinks,
+		templateStylesheetLinksUnverifiable: state.stylesheetLinksUnverifiable,
 		hasOpaqueStyleBlocks: opaqueStyleBlocks,
 		styleBlockImports: styleBlockImports.map((entry) => ({
 			...entry,
@@ -1822,6 +2172,29 @@ function verifyVueSource(compiler, path, source, includeUnscoped = false) {
 function visitTemplateNode(source, node, state) {
 	if (node.type === NODE_ELEMENT) {
 		if (node.tagType === TAG_SLOT) state.hasSlot = true;
+		for (const prop of node.props ?? []) {
+			if (prop.type === PROP_ATTRIBUTE && prop.name === "style" && prop.value?.content) state.styleAttributeValues.push(prop.value.content);
+			if (prop.type === PROP_DIRECTIVE && prop.name === "bind") {
+				const argument = prop.arg?.isStatic === true ? prop.arg.content : void 0;
+				if (prop.arg === void 0 || argument === void 0 || argument === "style") state.styleAttributesUnverifiable = true;
+			}
+		}
+		if (node.tag === "link" && node.tagType === TAG_ELEMENT) {
+			let rel;
+			let href;
+			let dynamic = false;
+			for (const prop of node.props ?? []) if (prop.type === PROP_ATTRIBUTE) {
+				if (prop.name === "rel") rel = prop.value?.content ?? "";
+				if (prop.name === "href") href = prop.value?.content ?? "";
+			} else if (prop.type === PROP_DIRECTIVE && prop.name === "bind") {
+				const argument = prop.arg?.isStatic ? prop.arg.content : void 0;
+				if (argument === void 0 || argument === "rel" || argument === "href") dynamic = true;
+			}
+			if ((rel?.toLowerCase().split(/\s+/) ?? []).includes("stylesheet") || rel === void 0 && dynamic) {
+				if (href !== void 0 && !dynamic) state.stylesheetLinks.push(href);
+				else state.stylesheetLinksUnverifiable = true;
+			} else if (dynamic) state.stylesheetLinksUnverifiable = true;
+		}
 		const bindingClasses = [];
 		let classOpaque = false;
 		let moduleBinding;
@@ -1851,11 +2224,15 @@ function visitTemplateNode(source, node, state) {
 			if (!provenModuleExpression && expression?.usesCssModule) state.moduleClosureBroken = true;
 			if (expression?.referencesUseCssModule) state.referencesUseCssModule = true;
 			for (const name of expression?.references ?? []) state.expressionReferences.add(name);
+			for (const prefix of expression?.templatePrefixes ?? []) state.templatePrefixes.add(prefix);
+			for (const name of expression?.customProperties ?? []) state.customProperties.add(name);
+			if (expression?.customPropertiesUnbounded) state.customPropertiesUnbounded = true;
 			if (prop.arg && !prop.arg.isStatic && prop.arg.content) {
 				const argExpression = templateExpression(state.expressionPath, prop.arg.content);
 				state.moduleClosureBroken ||= argExpression?.usesCssModule ?? true;
 				state.referencesUseCssModule ||= argExpression?.referencesUseCssModule ?? false;
 				for (const name of argExpression?.references ?? []) state.expressionReferences.add(name);
+				for (const prefix of argExpression?.templatePrefixes ?? []) state.templatePrefixes.add(prefix);
 			}
 			if (prop.name === "html") state.vHtml = true;
 		}
@@ -1875,6 +2252,7 @@ function visitTemplateNode(source, node, state) {
 		state.moduleClosureBroken ||= interpolation?.usesCssModule ?? true;
 		state.referencesUseCssModule ||= interpolation?.referencesUseCssModule ?? false;
 		for (const name of interpolation?.references ?? []) state.expressionReferences.add(name);
+		for (const prefix of interpolation?.templatePrefixes ?? []) state.templatePrefixes.add(prefix);
 	}
 	for (const child of node.children ?? []) visitTemplateNode(source, child, state);
 }
@@ -1899,18 +2277,24 @@ function templateHandler(source) {
 			vueModuleMember: null,
 			usesCssModule: analysis.usesCssModule,
 			referencesUseCssModule: analysis.hasUnboundUseCssModule,
-			references: analysis.unboundReferences
+			references: analysis.unboundReferences,
+			templatePrefixes: analysis.templatePrefixes,
+			customProperties: analysis.customProperties,
+			customPropertiesUnbounded: analysis.customPropertiesUnbounded
 		};
 	} catch {
 		return;
 	}
 }
 function templateSite(source, node, bindingClasses, classOpaque, state) {
-	let classAttribute = literalAttribute(source, node, "class");
-	const idAttribute = literalAttribute(source, node, "id");
-	const hasClassAttr = node.props?.some((prop) => prop.type === PROP_ATTRIBUTE && prop.name === "class");
-	const hasIdAttr = node.props?.some((prop) => prop.type === PROP_ATTRIBUTE && prop.name === "id");
-	if (hasClassAttr && !classAttribute || hasIdAttr && !idAttribute) {
+	const classProp = staticAttribute(node, "class");
+	const idProp = staticAttribute(node, "id");
+	let classAttribute = literalAttribute(source, classProp);
+	const idAttribute = literalAttribute(source, idProp);
+	if (classProp && !classAttribute || idProp && !idAttribute) {
+		if (classProp && !classAttribute) {
+			for (const token of classProp.value?.content.split(/[\t\n\f\r ]+/) ?? []) if (token !== "") state.entityClassTokens.push(token);
+		}
 		state.dynamic = true;
 		return { idAttribute };
 	}
@@ -1931,8 +2315,10 @@ function templateSite(source, node, bindingClasses, classOpaque, state) {
 		matchClasses
 	};
 }
-function literalAttribute(source, node, name) {
-	const prop = node.props?.find((prop) => prop.type === PROP_ATTRIBUTE && prop.name === name);
+function staticAttribute(node, name) {
+	return node.props?.find((prop) => prop.type === PROP_ATTRIBUTE && prop.name === name);
+}
+function literalAttribute(source, prop) {
 	if (!prop?.value) return void 0;
 	const start = prop.value.loc.start.offset;
 	const end = prop.value.loc.end.offset;
@@ -2404,7 +2790,16 @@ async function preparePackageVue({ packageRoot, styleCompilers, sourceFiles, sty
 				htmlScriptText: analysis.scriptText
 			} : {},
 			sourceImports: analysis.scriptImports,
-			sourceImportsUnverifiable: analysis.scriptImportsUnverifiable
+			sourceImportsUnverifiable: analysis.scriptImportsUnverifiable,
+			templatePrefixes: analysis.templatePrefixes,
+			templateInjectsMarkup: analysis.vHtml,
+			templateClassTokens: analysis.templateClassTokens,
+			templateStyleValues: analysis.templateStyleValues,
+			templateStylesUnverifiable: analysis.templateStylesUnverifiable,
+			sourceCustomProperties: analysis.scriptCustomProperties,
+			sourceCustomPropertiesUnbounded: analysis.scriptCustomPropertiesUnbounded,
+			templateStylesheetLinks: analysis.templateStylesheetLinks,
+			templateStylesheetLinksUnverifiable: analysis.templateStylesheetLinksUnverifiable
 		});
 	}
 	return {
@@ -2538,7 +2933,8 @@ async function migrate(options = {}) {
 		styleDependents: indexStylesheetDependents(styleSources),
 		vueStyleRanges,
 		entryCatalog: tailwindEntryCatalog(styleSources, scope.pathOwners),
-		ignoredPaths: options.workspaces ? await scannerIgnoredPaths(workspaceRoot, sourceFiles.map((file) => file.path)) : /* @__PURE__ */ new Set()
+		ignoredPaths: await scannerIgnoredPaths(workspaceRoot, sourceFiles.map((file) => file.path)),
+		fontAllocations: /* @__PURE__ */ new Map()
 	};
 	const failures = [];
 	const plans = [];
@@ -2555,6 +2951,14 @@ async function migrate(options = {}) {
 		members.push(preparation);
 		groups.set(preparation.tailwind.path, members);
 	}
+	for (const [, members] of groups) for (const [token, value] of Object.entries(members[0].tailwind.themeTokens)) {
+		if (!token.startsWith("font-")) continue;
+		const parsed = fontFamilyStack(value);
+		const name = token.replace(/^font-/, "");
+		const stack = parsed && parsed.value;
+		const existing = context.fontAllocations.get(name);
+		context.fontAllocations.set(name, existing === void 0 || existing === stack ? stack : null);
+	}
 	for (const [, members] of [...groups].sort(([left], [right]) => left < right ? -1 : left > right ? 1 : 0)) for (const result of await planPreparedGroup(context, members)) if (result.failure) failures.push(result.failure);
 	else if (result.plan) plans.push(result.plan);
 	const originals = new Map([...styleSources, ...sourceFiles.map((file) => [file.path, file.source])]);
@@ -2847,6 +3251,174 @@ async function planPreparedGroup(context, members) {
 		return leftPath < rightPath ? -1 : leftPath > rightPath ? 1 : 0;
 	});
 	const entry = active[0].tailwind;
+	const reservations = spellingReservations(context.styleSources, entry.graphSources.map((graphSource) => [`${graphSource.path}.graph.css`, graphSource.source]), new Set(entry.graphSources.map((graphSource) => graphSource.path).filter((path) => path.includes("\0"))));
+	const groupFiles = new Map(active.flatMap((member) => member.files.map((file) => [file.path, file])));
+	const mentionedSegments = /* @__PURE__ */ new Set();
+	const mentionedSources = [...[...groupFiles.values()].map((file) => file.source), ...entry.graphSources.map((graphSource) => graphSource.source)];
+	const addSegment = (token) => {
+		if (token === "") return;
+		const segment = utilitySegment(token).replace(/!$/, "");
+		if (segment) mentionedSegments.add(segment);
+	};
+	for (const source of mentionedSources) {
+		for (const token of source.split(/[\s"'`<>=,;{}()\\]+/)) addSegment(token);
+		for (const inline of source.matchAll(/inline\(([^)]*)\)/g)) for (const candidate of inline[1].matchAll(/([^\s"',{}]*)\{([^{}]*)\}([^\s"',{}]*)/g)) for (const option of candidate[2].split(",")) {
+			const range = /^(\d+)\.\.(\d+)(?:\.\.(\d+))?$/.exec(option);
+			const stride = range === null ? 0 : Number(range[3] ?? "1");
+			if (range !== null && stride > 0) {
+				const from = Number(range[1]);
+				const to = Number(range[2]);
+				let steps = 0;
+				for (let value = Math.min(from, to); value <= Math.max(from, to); value += stride) {
+					addSegment(`${candidate[1]}${value}${candidate[3]}`);
+					if ((steps += 1) >= 1e3) break;
+				}
+				continue;
+			}
+			addSegment(`${candidate[1]}${option}${candidate[3]}`);
+		}
+	}
+	const fileRoots = new Map(active.flatMap((member) => member.files.map((file) => [file.path, member.packageRoot])));
+	const workspaceEntries = new Set([...context.entryCatalog.values()].flat());
+	for (const file of groupFiles.values()) {
+		if (reservations.unbounded) break;
+		if (context.ignoredPaths.has(file.path)) {
+			reservations.unbounded = true;
+			break;
+		}
+		const opaqueStylesheetLink = (link) => {
+			const resolved = localHtmlReference(fileRoots.get(file.path) ?? context.workspaceRoot, dirname(file.path), link);
+			return resolved === void 0 || !context.styleSources.has(resolved) || workspaceEntries.has(resolved) && resolved !== entry.path;
+		};
+		const opaqueStylesheetImports = (records) => {
+			for (const record of records) {
+				if (record.typeOnly) continue;
+				const specifier = record.specifier.split(/[?#]/, 1)[0];
+				if (!isStylesheetPath(specifier)) {
+					if (extname(specifier) !== "" || specifier.startsWith(".")) continue;
+					try {
+						const resolved = createRequire(file.path).resolve(specifier);
+						if (isStylesheetPath(resolved) && !context.styleSources.has(resolved)) reservations.unbounded = true;
+					} catch {}
+					continue;
+				}
+				const resolved = specifier.startsWith(".") ? resolve(dirname(file.path), specifier) : void 0;
+				if (resolved === void 0 || !context.styleSources.has(resolved) || workspaceEntries.has(resolved) && resolved !== entry.path) reservations.unbounded = true;
+			}
+		};
+		if (extname(file.path) === ".html") {
+			try {
+				const parsed = parseHtmlSource(file.path, file.source);
+				if (parsed.hasStyle) reservations.unbounded = true;
+				if (parsed.bases.length > 0) reservations.unbounded = true;
+				for (const link of parsed.links) if (opaqueStylesheetLink(link.href)) reservations.unbounded = true;
+				for (const [index, value] of parsed.styleAttributeValues.entries()) {
+					if (TEMPLATE_MARKERS.test(value)) {
+						reservations.propertiesUnbounded = true;
+						continue;
+					}
+					scanInlineStyleReservations(`${file.path}.style.${index}.css`, value, reservations);
+				}
+				for (const value of parsed.dynamicClassValues) {
+					const masked = value.replace(TEMPLATE_EXPRESSIONS, "\0");
+					if (TEMPLATE_MARKERS.test(masked)) {
+						reservations.unbounded = true;
+						continue;
+					}
+					for (const token of masked.split(/\s+/)) {
+						if (token === "") continue;
+						const index = token.indexOf("\0");
+						if (index < 0) reservations.names.add(token);
+						else if (index === 0) reservations.unbounded = true;
+						else reservations.prefixes.add(token.slice(0, index));
+					}
+				}
+				if (parsed.handlerText.trim() !== "") try {
+					const handlers = sourceAnalysis(`${file.path}.handlers.js`, parsed.handlerText);
+					for (const prefix of handlers.templatePrefixes) reservations.prefixes.add(prefix);
+					for (const property of handlers.customProperties) reservations.properties.add(property);
+					if (handlers.customPropertiesUnbounded) reservations.propertiesUnbounded = true;
+				} catch {
+					reservations.unbounded = true;
+				}
+				if (parsed.scriptText.trim() !== "") try {
+					const script = sourceAnalysis(`${file.path}.inline.js`, parsed.scriptText);
+					for (const prefix of script.templatePrefixes) reservations.prefixes.add(prefix);
+					for (const property of script.customProperties) reservations.properties.add(property);
+					if (script.customPropertiesUnbounded) reservations.propertiesUnbounded = true;
+					opaqueStylesheetImports(script.imports);
+				} catch {
+					reservations.unbounded = true;
+				}
+			} catch {
+				reservations.unbounded = true;
+			}
+			continue;
+		}
+		if (extname(file.path) === ".vue") {
+			if (file.templatePrefixes === void 0 || file.sourceImportsUnverifiable === true || file.templateInjectsMarkup === true) {
+				reservations.unbounded = true;
+				continue;
+			}
+			const styleRanges = context.vueStyleRanges.get(file.path);
+			if (styleRanges === void 0) {
+				reservations.unbounded = true;
+				continue;
+			}
+			const fileBytes = Buffer.from(file.source);
+			for (const [index, range] of styleRanges.entries()) {
+				if (range.src !== void 0) {
+					const resolved = range.src.startsWith(".") ? resolve(dirname(file.path), range.src) : void 0;
+					if (resolved === void 0 || !context.styleSources.has(resolved)) reservations.unbounded = true;
+					continue;
+				}
+				const block = fileBytes.subarray(range.start, range.end).toString();
+				if (![
+					"css",
+					"scss",
+					"sass",
+					"less"
+				].includes(range.lang)) {
+					reservations.unbounded = true;
+					continue;
+				}
+				scanStylesheetReservations(`${file.path}.block.${index}.${range.lang}`, block, context.styleSources, reservations);
+			}
+			for (const prefix of file.templatePrefixes) reservations.prefixes.add(prefix);
+			for (const token of file.templateClassTokens ?? []) reservations.names.add(token);
+			for (const property of file.sourceCustomProperties ?? []) reservations.properties.add(property);
+			if (file.sourceCustomPropertiesUnbounded === true) reservations.propertiesUnbounded = true;
+			if (file.templateStylesUnverifiable === true) reservations.propertiesUnbounded = true;
+			for (const [index, value] of (file.templateStyleValues ?? []).entries()) scanInlineStyleReservations(`${file.path}.style.${index}.css`, value, reservations);
+			if (file.templateStylesheetLinksUnverifiable === true) reservations.unbounded = true;
+			for (const link of file.templateStylesheetLinks ?? []) if (opaqueStylesheetLink(link)) reservations.unbounded = true;
+			opaqueStylesheetImports(file.sourceImports ?? []);
+			continue;
+		}
+		if (![
+			".js",
+			".jsx",
+			".ts",
+			".tsx",
+			".mjs",
+			".cjs",
+			".mts",
+			".cts"
+		].includes(extname(file.path))) continue;
+		try {
+			const analysis = sourceAnalysis(file.path, file.source);
+			for (const prefix of analysis.templatePrefixes) reservations.prefixes.add(prefix);
+			for (const property of analysis.customProperties) reservations.properties.add(property);
+			if (analysis.customPropertiesUnbounded) reservations.propertiesUnbounded = true;
+			opaqueStylesheetImports(analysis.imports);
+			if (analysis.rendersStyleElement) reservations.unbounded = true;
+			if (analysis.injectsMarkup) reservations.unbounded = true;
+			if (analysis.stylesheetLinksUnverifiable) reservations.unbounded = true;
+			for (const link of analysis.stylesheetLinks) if (opaqueStylesheetLink(link)) reservations.unbounded = true;
+		} catch {
+			reservations.unbounded = true;
+		}
+	}
 	const recoverGroup = (error, fatal = false) => {
 		if (!options.force || fatal) throw error;
 		for (const member of active) results.push({ failure: packageFailure(workspaceRoot, member.packageRoot, error) });
@@ -2900,28 +3472,30 @@ async function planPreparedGroup(context, members) {
 	if (active.length === 0) return results;
 	let names = extraction?.names;
 	let generated = extraction?.generated ?? [];
-	if (options.extractMediaQueries !== false) if (!groupWritable) {
-		names = {};
-		generated = [];
-		if (collections.some((collection) => collection.components.length > 0)) mediaWarnings.push({
-			code: "media-query-definition-fallback",
-			file: entry.path,
-			start: 0,
-			end: 0,
-			message: "The Tailwind entry could not be edited safely, so media behavior was preserved with arbitrary variants."
-		});
-	} else {
-		try {
-			extraction = planMediaExtraction({
-				collections,
-				tailwind: entry,
-				scannedSources: context.sourceFiles.map((file) => file.source)
+	if (options.extractMediaQueries !== false) {
+		if (!groupWritable) {
+			names = {};
+			generated = [];
+			if (collections.some((collection) => collection.components.length > 0)) mediaWarnings.push({
+				code: "media-query-definition-fallback",
+				file: entry.path,
+				start: 0,
+				end: 0,
+				message: "The Tailwind entry could not be edited safely, so media behavior was preserved with arbitrary variants."
 			});
-		} catch (error) {
-			return recoverGroup(error, !isRecoverablePlanningError(error));
+		} else {
+			try {
+				extraction = planMediaExtraction({
+					collections,
+					tailwind: entry,
+					scannedSources: context.sourceFiles.map((file) => file.source)
+				});
+			} catch (error) {
+				return recoverGroup(error, !isRecoverablePlanningError(error));
+			}
+			names = extraction.names;
+			generated = extraction.generated;
 		}
-		names = extraction.names;
-		generated = extraction.generated;
 	}
 	let plan = {
 		files: [],
@@ -2935,6 +3509,11 @@ async function planPreparedGroup(context, members) {
 	};
 	let augmented = entry.css;
 	const blocked = /* @__PURE__ */ new Map();
+	let candidateAliases;
+	let canonicalized = false;
+	let fontTokens = {};
+	let fontFailures = /* @__PURE__ */ new Set();
+	let composeEntry = () => entry.css;
 	finalization: for (;;) {
 		const baseIdentities = new Set(atRuleIdentities(`${entry.path}.group-base.css`, [entry.css, ...entry.graphSources.map((graphSource) => graphSource.source)].join("\n")));
 		const sheets = active.flatMap((member) => member.stylesheets.map((stylesheet) => ({
@@ -2997,6 +3576,7 @@ async function planPreparedGroup(context, members) {
 				utilityPrefix: entry.designSystem.theme.prefix,
 				themeTokens: entry.themeTokens,
 				...names ? { mediaNames: names } : {},
+				...candidateAliases ? { candidateAliases } : {},
 				...groupWritable ? {} : { entryWritable: false },
 				files
 			};
@@ -3018,7 +3598,11 @@ async function planPreparedGroup(context, members) {
 				generated
 			} : void 0;
 			const used = currentExtraction ? usedGeneratedDefinitions(currentExtraction, plan) : [];
-			augmented = currentExtraction ? appendMediaDefinitions(composed, used) : composed;
+			composeEntry = (tokens) => {
+				const withFonts = appendFontTheme(composed, tokens);
+				return currentExtraction ? appendMediaDefinitions(withFonts, used) : withFonts;
+			};
+			augmented = composeEntry(fontTokens);
 			let system;
 			try {
 				system = augmented === entry.css ? entry.designSystem : await entry.loadWith(augmented);
@@ -3041,13 +3625,65 @@ async function planPreparedGroup(context, members) {
 					continue planning;
 				}
 			}
-			const failing = invalidCandidates(currentExtraction ? system : entry.designSystem, plan.candidates);
+			const failing = invalidCandidates(system, plan.candidates);
 			if (failing.length > 0) {
 				if (!accumulateBlockedRules(blocked, plan, failing)) throw new Error(`Tailwind did not generate CSS for candidate: ${failing[0]}`);
 				continue planning;
 			}
+			if (!canonicalized) {
+				canonicalized = true;
+				const aliases = acceptedCandidateAliases(system, plan.candidateProbes ?? [], reservations);
+				const fonts = await registerFontTokens({
+					system,
+					entryCss: augmented,
+					loadWith: entry.loadWith,
+					themeTokens: entry.themeTokens,
+					probes: plan.fontFamilyProbes ?? [],
+					corpus: [.../* @__PURE__ */ new Set([...plan.candidates, ...plan.candidateProbes ?? []])],
+					reservations,
+					existingAliases: aliases,
+					generate: groupWritable,
+					mentionedSegments,
+					referenceTokens: entry.referenceTokens,
+					globalAllocations: context.fontAllocations
+				});
+				Object.assign(aliases, fonts.aliases);
+				fontTokens = fonts.tokens;
+				fontFailures = fonts.failures;
+				for (const [name, value] of Object.entries(fonts.tokens)) context.fontAllocations.set(name, value);
+				if (Object.keys(aliases).length > 0) {
+					candidateAliases = aliases;
+					continue planning;
+				}
+			}
 			break;
 		}
+		const ruleStatus = new Map(plan.rules.map((rule) => [`${rule.stylesheet}:${rule.ruleId.start}-${rule.ruleId.end}`, rule.status]));
+		const warned = /* @__PURE__ */ new Set();
+		for (const probe of plan.fontFamilyProbes ?? []) {
+			if (probe.firstFamily.kind !== "name") continue;
+			if (candidateAliases?.[probe.candidate] !== void 0) continue;
+			const ruleKey = `${probe.stylesheet}:${probe.ruleId.start}-${probe.ruleId.end}`;
+			if (ruleStatus.get(ruleKey) !== "retained" || warned.has(ruleKey)) continue;
+			const failed = fontFailures.has(probe.candidate);
+			if (groupWritable && !failed) continue;
+			warned.add(ruleKey);
+			plan.warnings.push({
+				code: groupWritable ? "font-theme-registration-failed" : "font-theme-registration-required",
+				file: sheets[probe.stylesheet].stylesheet.cssPath,
+				start: probe.authoredSpan.start,
+				end: probe.authoredSpan.end,
+				message: groupWritable ? "A safe Tailwind font theme token could not be registered, so the rule is retained." : "The font family requires a Tailwind theme token, but the Tailwind entry cannot be edited, so the rule is retained."
+			});
+		}
+		if (Object.keys(fontTokens).length > 0) {
+			const applied = new Set(plan.candidates.map((candidate) => utilitySegment(candidate).replace(/!$/, "")));
+			const pruned = Object.fromEntries(Object.entries(fontTokens).filter(([name]) => applied.has(`font-${name}`)));
+			if (Object.keys(pruned).length !== Object.keys(fontTokens).length) {
+				fontTokens = pruned;
+				augmented = composeEntry(pruned);
+			}
+		}
 		for (const [index, rules] of blocked) {
 			const cssPath = sheets[index].stylesheet.cssPath;
 			for (const { authoredSpan, candidates } of rules.values()) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tw-migrate",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Preview and migrate React, Vue, and HTML CSS to Tailwind utilities",
   "keywords": [
     "codemod",
@@ -62,11 +62,11 @@
     "vue": "catalog:"
   },
   "optionalDependencies": {
-    "tw-migrate-darwin-arm64": "0.5.0",
-    "tw-migrate-darwin-x64": "0.5.0",
-    "tw-migrate-linux-arm64-gnu": "0.5.0",
-    "tw-migrate-linux-x64-gnu": "0.5.0",
-    "tw-migrate-win32-x64-msvc": "0.5.0"
+    "tw-migrate-darwin-arm64": "0.6.0",
+    "tw-migrate-darwin-x64": "0.6.0",
+    "tw-migrate-linux-arm64-gnu": "0.6.0",
+    "tw-migrate-linux-x64-gnu": "0.6.0",
+    "tw-migrate-win32-x64-msvc": "0.6.0"
   },
   "napi": {
     "binaryName": "tw-migrate",