modern-cmdk 1.4.0 → 1.5.0

package/dist/codemod/transforms/data-attrs.mjs

@@ -1,65 +1,578 @@
-// src/codemod/transforms/data-attrs.ts
-/** Mapping from old bare attribute names to new data-attribute names */
+import { t as printOptions } from "../chunk-print-options.mjs";
+// ../modern-cmdk-codemod/src/transforms/data-attrs.ts
+/** Mapping from cmdk attribute names to the attribute modern-cmdk renders. */
 const ATTR_MAP = /* @__PURE__ */ new Map([
-	["cmdk-root", "data-command"],
+	["cmdk-root", "data-command-root"],
+	["cmdk-dialog", "data-command-dialog"],
+	["cmdk-overlay", "data-command-overlay"],
 	["cmdk-input", "data-command-input"],
 	["cmdk-list", "data-command-list"],
+	["cmdk-list-sizer", "data-command-list-inner"],
 	["cmdk-item", "data-command-item"],
 	["cmdk-group", "data-command-group"],
+	["cmdk-group-heading", "data-command-group-heading"],
+	["cmdk-group-items", "data-command-group-items"],
 	["cmdk-separator", "data-command-separator"],
 	["cmdk-empty", "data-command-empty"],
 	["cmdk-loading", "data-command-loading"]
 ]);
-/** CSS custom property renames */
+/** CSS custom property renames. */
 const CSS_VAR_MAP = /* @__PURE__ */ new Map([["--cmdk-list-height", "--command-list-height"]]);
+/** cmdk names with no modern-cmdk equivalent, each with the reason a site is reported. */
+const UNMAPPED_ATTRS = /* @__PURE__ */ new Map([["cmdk-label", "cmdk renders a visually hidden <label>; modern-cmdk puts the label on the root as aria-label and renders no label element"], ["cmdk-item-select", "a DOM event cmdk dispatches on an item to run its onSelect, not an attribute; modern-cmdk has no such event, use the item onSelect prop"]]);
+/** cmdk state attributes (always rendered as "true" or "false") and the presence attribute that replaces each. */
+const STATE_ATTRS = /* @__PURE__ */ new Map([["data-selected", "data-active"], ["data-disabled", "data-disabled"]]);
+const CMDK_NAMES = /* @__PURE__ */ new Set([...ATTR_MAP.keys(), ...UNMAPPED_ATTRS.keys()]);
+/** Imports whose bindings make a JSX element a cmdk element for the Tailwind rewrite. */
+const CMDK_SOURCES = /* @__PURE__ */ new Set(["cmdk", "modern-cmdk/react"]);
+/** The JSX attributes whose string content is a class list. */
+const CLASS_ATTRS = /* @__PURE__ */ new Set(["className", "class"]);
+const CSS_VARS_LONGEST_FIRST = [...CSS_VAR_MAP.keys()].sort((a, b) => b.length - a.length);
+/** One attribute selector inside a compound: [name], [name=value], [name~="value" i]. */
+const ATTRIBUTE_SELECTOR = /\[\s*([A-Za-z_][\w-]*)\s*(?:([~|^$*]?=)\s*("[^"]*"|'[^']*'|[^\]\s"']*)\s*)?(?:[iIsS]\s*)?\]/dy;
 /**
-* Replace all cmdk attribute selectors (bracketed) and CSS vars in a string.
-* Runs replaceAll for each ATTR_MAP entry (bracketed selectors), then for each CSS_VAR_MAP entry.
+* The start of an attribute selector cut short by a template literal's `${`: [cmdk-item=" or
+* [cmdk-item. Only the name is rewritten.
 */
-function replaceInString(input) {
-	let result = input;
-	ATTR_MAP.entries().forEach(([oldAttr, newAttr]) => {
-		result = result.replaceAll(`[${oldAttr}]`, `[${newAttr}]`);
-	});
-	CSS_VAR_MAP.entries().forEach(([oldVar, newVar]) => {
-		result = result.replaceAll(oldVar, newVar);
-	});
+const PARTIAL_ATTRIBUTE_SELECTOR = /\[\s*([A-Za-z_][\w-]*)(?=\s*[~|^$*]?=|\s*$)/dy;
+/** Tailwind presence form of the two state attributes: data-[selected]:, data-[disabled]/name:. */
+const TAILWIND_PRESENCE = /(?<!\w)data-\[(selected|disabled)\](?=[:/])/g;
+/** Tailwind value variants of the two state attributes: data-[selected=true]:, data-[disabled='false']/name:. */
+const TAILWIND_STATE = /(?<!\w)data-\[(selected|disabled)=(?:(["'])(true|false)\2|(true|false))\](?=[:/])/g;
+/** Whitespace that only pads a closing parenthesis, a comma or a combinator inside parentheses. */
+const ARGUMENT_PADDING = /\s*[),>+~]/y;
+/** Tailwind's `*:` and `**:` variants, which move a class to the element's children or descendants. */
+const CHILD_VARIANT = /(?:^|:)\*\*?:/;
+function parentMatchOf(flags) {
+	if (flags.every(Boolean)) return "all";
+	return flags.some(Boolean) ? "some" : "none";
+}
+function applyEdits(text, edits) {
+	let result = text;
+	for (const edit of [...edits].sort((a, b) => b.start - a.start)) result = result.slice(0, edit.start) + edit.text + result.slice(edit.end);
 	return result;
 }
+function unquote(value) {
+	const quote = value[0];
+	return (quote === "\"" || quote === "'") && value.endsWith(quote) ? value.slice(1, -1) : value;
+}
 /**
-* jscodeshift transform — renames cmdk data attributes in JSX and
-* CSS selectors within string/template literals.
+* Rewrite the cmdk attribute selectors and custom properties in a piece of text: a selector
+* string or template quasi (`css` false), or a whole stylesheet (`css` true).
+*
+* The text is cut into compounds (runs of simple selectors with no combinator, comma, brace or
+* whitespace at the top level). Inside any compound, a bracketed attribute whose name is in
+* ATTR_MAP gets its name replaced, operator and value kept; a name in UNMAPPED_ATTRS is reported.
+* A compound that holds a cmdk attribute also has its data-selected / data-disabled value
+* attributes rewritten: ="true" to the presence attribute, ="false" to :not(presence); any other
+* form is reported. In a stylesheet, a compound starting with `&` counts as holding a cmdk
+* attribute when the enclosing rule's selectors all end in one; under a rule where only some do,
+* each state attribute of such a compound is reported. Inside the parentheses of :not() / :is() /
+* :where() / :matches(), the compound after an argument's last combinator (its subject) joins the
+* outer compound, and the compounds before it stand alone, rewritten only if they hold a cmdk
+* attribute themselves. Inside any other parentheses (:has(), :nth-child(), url(), var(), ...)
+* every compound stands alone. `tailwind` marks a class value of a cmdk-bound element, where an
+* arbitrary variant `[&[data-selected=true]_svg]` holds the bound element's own attributes up to
+* its first `_`, `>`, `+` or `~`. Inside the parentheses of such a variant, `_` is a combinator too. A `[&...]` after a `*:` or `**:` variant, or after an earlier
+* `[&...]` variant, is not taken as the bound element.
+*/
+function rewriteSelectors(text, css, report, tailwind) {
+	return applyEdits(text, selectorEdits(text, css, report, tailwind));
+}
+/** The edits rewriteSelectors applies, as ranges of `text`; reports are made while collecting. */
+function selectorEdits(text, css, report, tailwind) {
+	const edits = [];
+	const ruleStack = [];
+	let selectorFlags = [];
+	let lastFlag = false;
+	let preludeFresh = true;
+	let preludeIsAtRule = false;
+	let attrs = [];
+	let compoundStart = -1;
+	/** Index of the first `[&` arbitrary variant of the current class token, at its start or after a `:` of a variant prefix that holds no `*:` or `**:` variant. */
+	let ampStart = -1;
+	/** Index of the first `_`, `>`, `+` or `~` at bracket depth 1, outside parentheses, of a `[&...` arbitrary variant: where the part on another element starts. */
+	let ampDescendant = -1;
+	const frames = [];
+	let brackets = 0;
+	if (!css) {
+		const whole = text.trim();
+		const reason = UNMAPPED_ATTRS.get(whole);
+		if (reason !== void 0) report(text.indexOf(whole), `${whole} has no modern-cmdk equivalent: ${reason}; left unchanged`);
+		const mapped = ATTR_MAP.get(whole);
+		if (mapped !== void 0) report(text.indexOf(whole), `${whole} is a cmdk attribute name outside a selector; modern-cmdk renders ${mapped}; left unchanged`);
+	}
+	const endCompound = (isArgument = false) => {
+		if (compoundStart === -1) return;
+		const holds = attrs.some((a) => CMDK_NAMES.has(a.name));
+		const parentMatch = text[compoundStart] === "&" ? ruleStack.at(-1) ?? "none" : "none";
+		const viaParent = parentMatch === "all";
+		const partialParent = parentMatch === "some" && !holds;
+		const ampBound = tailwind && ampStart !== -1;
+		for (const a of attrs) {
+			const target = ATTR_MAP.get(a.name);
+			if (target !== void 0) {
+				edits.push({
+					start: a.nameStart,
+					end: a.nameEnd,
+					text: target
+				});
+				continue;
+			}
+			const reason = UNMAPPED_ATTRS.get(a.name);
+			if (reason !== void 0) {
+				report(a.start, `${a.name} has no modern-cmdk equivalent: ${reason}; left unchanged`);
+				continue;
+			}
+			const presence = STATE_ATTRS.get(a.name);
+			if (presence === void 0 || a.partial) continue;
+			if (partialParent) {
+				report(a.start, `${text.slice(a.start, a.end)} under a rule whose selectors only partly hold a cmdk attribute cannot be migrated automatically; left unchanged`);
+				continue;
+			}
+			const onBound = ampBound && (ampDescendant === -1 || a.start < ampDescendant);
+			if (!(holds || viaParent || onBound)) continue;
+			const value = a.operator === "=" && a.value !== void 0 ? unquote(a.value) : void 0;
+			if (value === "true") edits.push({
+				start: a.start,
+				end: a.end,
+				text: `[${presence}]`
+			});
+			else if (value === "false") edits.push({
+				start: a.start,
+				end: a.end,
+				text: `:not([${presence}])`
+			});
+			else report(a.start, `${text.slice(a.start, a.end)} beside a cmdk attribute cannot be migrated automatically: cmdk rendered ${a.name} with a "true" or "false" value, modern-cmdk sets ${presence} only while the state holds; left unchanged`);
+		}
+		if (!isArgument) lastFlag = holds || viaParent;
+		attrs = [];
+		compoundStart = -1;
+		ampStart = -1;
+		ampDescendant = -1;
+	};
+	/** End the compound collected since the last combinator or comma: an argument's subject joins the outer compound. */
+	const endArgumentSubject = (frame) => {
+		if (!frame.subject) {
+			endCompound(true);
+			return;
+		}
+		frame.outer.attrs.push(...attrs);
+		if (frame.outer.start === -1) frame.outer.start = compoundStart;
+		attrs = [];
+		compoundStart = -1;
+	};
+	const padsArgument = (at) => {
+		ARGUMENT_PADDING.lastIndex = at;
+		return ARGUMENT_PADDING.test(text);
+	};
+	const startPrelude = () => {
+		selectorFlags = [];
+		lastFlag = false;
+		preludeFresh = true;
+		preludeIsAtRule = false;
+	};
+	for (let i = 0; i < text.length;) {
+		const c = text[i];
+		if (css && c === "/" && text[i + 1] === "*") {
+			endCompound();
+			const close = text.indexOf("*/", i + 2);
+			i = close === -1 ? text.length : close + 2;
+			continue;
+		}
+		if (css && frames.length === 0 && c === "/" && text[i + 1] === "/" && (i === 0 || /[\s;{}]/.test(text[i - 1]))) {
+			endCompound();
+			const eol = text.indexOf("\n", i);
+			i = eol === -1 ? text.length : eol;
+			continue;
+		}
+		if (brackets > 0 && /\s/.test(c)) brackets = 0;
+		const frame = frames.at(-1);
+		if (frame !== void 0 && (brackets === 0 && /[\s>+~,]/.test(c) || tailwind && frame.brackets > 0 && brackets === frame.brackets && /[_>+~,]/.test(c))) {
+			if (c === ",") {
+				endArgumentSubject(frame);
+				frame.hasContent = false;
+			} else if (!/\s/.test(c) || frame.hasContent && !padsArgument(i)) {
+				endCompound(true);
+				frame.hasContent = false;
+			}
+			i++;
+			continue;
+		}
+		if (frame === void 0 && brackets === 0 && /[\s>+~,{};]/.test(c)) {
+			endCompound();
+			if (c === ",") {
+				selectorFlags.push(lastFlag);
+				lastFlag = false;
+			} else if (c === "{") {
+				selectorFlags.push(lastFlag);
+				ruleStack.push(preludeIsAtRule ? ruleStack.at(-1) ?? "none" : parentMatchOf(selectorFlags));
+				startPrelude();
+			} else if (c === "}") {
+				ruleStack.pop();
+				startPrelude();
+			} else if (c === ";") startPrelude();
+			i++;
+			continue;
+		}
+		if (compoundStart === -1) {
+			compoundStart = i;
+			if (preludeFresh) {
+				preludeFresh = false;
+				preludeIsAtRule = c === "@";
+			}
+		}
+		if (frame !== void 0) frame.hasContent = true;
+		if (css && (c === "\"" || c === "'") && brackets === 0) {
+			let j = i + 1;
+			while (j < text.length && text[j] !== c) j += text[j] === "\\" ? 2 : 1;
+			i = j + 1;
+			continue;
+		}
+		if (c === "[") {
+			ATTRIBUTE_SELECTOR.lastIndex = i;
+			const m = ATTRIBUTE_SELECTOR.exec(text);
+			const nameSpan = m?.indices?.[1];
+			if (m !== null && nameSpan !== void 0) {
+				attrs.push({
+					start: i,
+					end: ATTRIBUTE_SELECTOR.lastIndex,
+					name: m[1],
+					nameStart: nameSpan[0],
+					nameEnd: nameSpan[1],
+					operator: m[2],
+					value: m[3],
+					partial: false
+				});
+				i = ATTRIBUTE_SELECTOR.lastIndex;
+				continue;
+			}
+			PARTIAL_ATTRIBUTE_SELECTOR.lastIndex = i;
+			const partial = PARTIAL_ATTRIBUTE_SELECTOR.exec(text);
+			const partialName = partial?.indices?.[1];
+			if (partial !== null && partialName !== void 0) {
+				attrs.push({
+					start: i,
+					end: PARTIAL_ATTRIBUTE_SELECTOR.lastIndex,
+					name: partial[1],
+					nameStart: partialName[0],
+					nameEnd: partialName[1],
+					operator: void 0,
+					value: void 0,
+					partial: true
+				});
+				i = PARTIAL_ATTRIBUTE_SELECTOR.lastIndex;
+				continue;
+			}
+			if (tailwind && brackets === 0 && ampStart === -1 && text.startsWith("[&", i) && (i === compoundStart || text[i - 1] === ":" && !CHILD_VARIANT.test(text.slice(compoundStart, i)))) {
+				ampStart = i;
+				ampDescendant = -1;
+			}
+			brackets++;
+		} else if (c === "]") {
+			if (brackets > 0) brackets--;
+		} else if (tailwind && brackets === 1 && frames.length === 0 && ampStart !== -1 && ampDescendant === -1 && /[_>+~]/.test(c)) ampDescendant = i;
+		else if (c === "(") {
+			frames.push({
+				brackets,
+				hasContent: false,
+				outer: {
+					attrs,
+					start: compoundStart,
+					ampStart,
+					ampDescendant
+				},
+				subject: /:(?:not|is|where|matches)$/i.test(text.slice(Math.max(0, i - 8), i))
+			});
+			attrs = [];
+			compoundStart = -1;
+			ampStart = -1;
+			ampDescendant = -1;
+		} else if (c === ")") {
+			const closing = frames.pop();
+			if (closing !== void 0) {
+				endArgumentSubject(closing);
+				attrs = closing.outer.attrs;
+				compoundStart = closing.outer.start;
+				ampStart = closing.outer.ampStart;
+				ampDescendant = closing.outer.ampDescendant;
+			}
+		} else if (c === "-" && text.startsWith("--cmdk-", i) && !/[\w-]/.test(text[i - 1] ?? "")) {
+			const name = CSS_VARS_LONGEST_FIRST.find((v) => text.startsWith(v, i) && !/[\w-]/.test(text[i + v.length] ?? ""));
+			if (name !== void 0) {
+				edits.push({
+					start: i,
+					end: i + name.length,
+					text: CSS_VAR_MAP.get(name)
+				});
+				i += name.length;
+				continue;
+			}
+		}
+		i++;
+	}
+	for (let open = frames.pop(); open !== void 0; open = frames.pop()) {
+		endArgumentSubject(open);
+		attrs = open.outer.attrs;
+		compoundStart = open.outer.start;
+		ampStart = open.outer.ampStart;
+		ampDescendant = open.outer.ampDescendant;
+	}
+	endCompound();
+	return edits;
+}
+/** Rewrite the Tailwind value variants of the two state attributes in a class list, reporting the presence form. */
+function rewriteTailwind(text, report) {
+	return applyEdits(text, tailwindEdits(text, report));
+}
+/** The edits rewriteTailwind applies, as ranges of `text`. */
+function tailwindEdits(text, report) {
+	const edits = [];
+	for (const m of text.matchAll(TAILWIND_PRESENCE)) {
+		const name = `data-${m[1]}`;
+		const presence = STATE_ATTRS.get(name);
+		report(m.index, `${m[0]}: on a cmdk element cannot be migrated automatically: cmdk rendered ${name} with a "true" or "false" value, modern-cmdk sets ${presence} only while the state holds; left unchanged`);
+	}
+	for (const m of text.matchAll(TAILWIND_STATE)) {
+		const presence = STATE_ATTRS.get(`data-${m[1]}`);
+		if ((m[3] ?? m[4]) === "true") edits.push({
+			start: m.index,
+			end: m.index + m[0].length,
+			text: presence
+		});
+		else report(m.index, `${m[0]}: has no modern-cmdk equivalent, ${presence} is a presence attribute with no false value (use not-${presence}:); left unchanged`);
+	}
+	return edits;
+}
+/** 1-based line of an index in a text that itself starts at `firstLine`. */
+function lineAt(text, index, firstLine) {
+	let line = firstLine;
+	for (let i = text.indexOf("\n"); i !== -1 && i < index; i = text.indexOf("\n", i + 1)) line++;
+	return line;
+}
+/**
+* Stylesheet pass for .css and .scss files: the same selector and custom property rewrite as the
+* script pass, with comments, strings outside attribute selectors and formatting untouched.
+* Each site left for manual migration is reported once with its line.
+*/
+function transformStylesheet(source, report) {
+	return rewriteSelectors(source, true, (index, message) => {
+		report(`line ${lineAt(source, index, 1)}: ${message}`);
+	}, false);
+}
+/** Stands in for `${...}` while a template literal's quasis are scanned as one text. */
+const PLACEHOLDER = "";
+/** How a placeholder reads in a report. */
+const PLACEHOLDER_TEXT = "${...}";
+function rawOf(node) {
+	return node.extra?.raw ?? node.raw;
+}
+const SIMPLE_ESCAPES = /* @__PURE__ */ new Map([
+	["n", "\n"],
+	["t", "	"],
+	["b", "\b"],
+	["f", "\f"],
+	["v", "\v"],
+	["r", "\r"]
+]);
+function decodeRaw(inner) {
+	const units = [];
+	const rawStart = [];
+	const rawEnd = [];
+	const push = (value, from, to) => {
+		for (const unit of value) for (let k = 0; k < unit.length; k++) {
+			units.push(unit.charAt(k));
+			rawStart.push(from);
+			rawEnd.push(to);
+		}
+	};
+	let i = 0;
+	while (i < inner.length) {
+		const c = inner.charAt(i);
+		if (c !== "\\") {
+			push(c, i, i + 1);
+			i++;
+			continue;
+		}
+		const next = inner.charAt(i + 1);
+		let end = i + 2;
+		let value = next;
+		if (next === "\r" && inner.charAt(i + 2) === "\n") {
+			end = i + 3;
+			value = "";
+		} else if (next === "\n" || next === "\r" || next === "\u2028" || next === "\u2029") value = "";
+		else if (SIMPLE_ESCAPES.has(next)) value = SIMPLE_ESCAPES.get(next);
+		else if (next === "x") {
+			end = i + 4;
+			value = String.fromCharCode(Number.parseInt(inner.slice(i + 2, end), 16));
+		} else if (next === "u") {
+			if (inner.charAt(i + 2) === "{") {
+				end = inner.indexOf("}", i + 3) + 1;
+				value = String.fromCodePoint(Number.parseInt(inner.slice(i + 3, end - 1), 16));
+			} else {
+				end = i + 6;
+				value = String.fromCharCode(Number.parseInt(inner.slice(i + 2, end), 16));
+			}
+		} else if (/[0-7]/.test(next)) {
+			const octal = /^[0-7]{1,3}/.exec(inner.slice(i + 1));
+			end = i + 1 + octal[0].length;
+			value = String.fromCharCode(Number.parseInt(octal[0], 8));
+		}
+		push(value, i, end);
+		i = end;
+	}
+	return {
+		cooked: units.join(""),
+		rawStart,
+		rawEnd
+	};
+}
+/** Apply edits made against `decoded.cooked` to the raw interior they came from. */
+function applyCookedEdits(inner, decoded, edits) {
+	const total = decoded.rawStart.length;
+	return applyEdits(inner, edits.map((edit) => {
+		const start = edit.start < total ? decoded.rawStart[edit.start] : inner.length;
+		return {
+			start,
+			end: edit.end > edit.start ? decoded.rawEnd[edit.end - 1] : start,
+			text: edit.text
+		};
+	}));
+}
+/**
+* jscodeshift transform — renames cmdk attributes in JSX, selectors in string and template
+* literals, and Tailwind state variants on cmdk-bound elements.
 */
 function transform(fileInfo, api) {
 	if (!fileInfo.source.includes("cmdk")) return fileInfo.source;
 	const j = api.jscodeshift;
 	const root = j(fileInfo.source);
-	let hasChanges = false;
-	ATTR_MAP.entries().forEach(([oldAttr, newAttr]) => {
-		root.find(j.JSXAttribute, { name: { name: oldAttr } }).forEach((path) => {
-			path.node.name = j.jsxIdentifier(newAttr);
-			hasChanges = true;
+	const sites = [];
+	let sampleRaw;
+	let changed = false;
+	const reportAt = (text, firstLine) => {
+		return (index, message) => {
+			const line = firstLine === void 0 ? "" : `line ${lineAt(text, index, firstLine)}: `;
+			api.report(line + message);
+		};
+	};
+	const startOf = (node) => node.start ?? 0;
+	const bound = /* @__PURE__ */ new Set();
+	root.find(j.ImportDeclaration).forEach((path) => {
+		if (!CMDK_SOURCES.has(String(path.node.source.value))) return;
+		for (const specifier of path.node.specifiers ?? []) {
+			const local = specifier.local?.name;
+			if (typeof local === "string") bound.add(local);
+		}
+	});
+	const isBound = (name) => {
+		let current = name;
+		while (current?.type === "JSXMemberExpression") current = current.object;
+		return current?.type === "JSXIdentifier" && bound.has(current.name);
+	};
+	const tailwind = /* @__PURE__ */ new WeakSet();
+	root.find(j.JSXAttribute).forEach((path) => {
+		const attrName = path.node.name;
+		if (attrName.type !== "JSXIdentifier" || !CLASS_ATTRS.has(attrName.name)) return;
+		const element = path.parent?.node;
+		if (!isBound(element?.name)) return;
+		j(path).find(j.Literal).forEach((p) => void tailwind.add(p.node));
+		j(path).find(j.TemplateLiteral).forEach((p) => void tailwind.add(p.node));
+	});
+	root.find(j.JSXAttribute).forEach((path) => {
+		const attrName = path.node.name;
+		if (attrName.type !== "JSXIdentifier") return;
+		const target = ATTR_MAP.get(attrName.name);
+		const reason = UNMAPPED_ATTRS.get(attrName.name);
+		if (target === void 0 && reason === void 0) return;
+		const node = path.node;
+		sites.push({
+			pos: startOf(node),
+			run: () => {
+				if (target !== void 0) {
+					attrName.name = target;
+					changed = true;
+				} else reportAt("", node.loc?.start?.line === void 0 ? void 0 : node.loc.start.line)(0, `${attrName.name} has no modern-cmdk equivalent: ${reason}; left unchanged`);
+			}
 		});
 	});
-	root.find(j.StringLiteral).forEach((path) => {
-		const original = path.node.value;
-		const replaced = replaceInString(original);
-		if (replaced !== original) {
-			path.node.value = replaced;
-			hasChanges = true;
-		}
+	root.find(j.Literal).forEach((path) => {
+		const node = path.node;
+		if (typeof node.value !== "string" || node.type === "JSXText") return;
+		const original = node.value;
+		const raw = rawOf(node);
+		const inJsxAttribute = path.parent?.node?.type === "JSXAttribute";
+		const useTailwind = tailwind.has(path.node);
+		sites.push({
+			pos: startOf(node),
+			run: () => {
+				const quote = raw?.[0];
+				if (!(quote === "\"" || quote === "'")) {
+					const report = reportAt(original, node.loc?.start?.line);
+					let rewritten = rewriteSelectors(original, false, report, useTailwind);
+					if (useTailwind) rewritten = rewriteTailwind(rewritten, report);
+					if (rewritten === original) return;
+					changed = true;
+					path.node.value = rewritten;
+					return;
+				}
+				const inner = raw.slice(1, -1);
+				const decoded = inJsxAttribute ? {
+					cooked: inner,
+					rawStart: Array.from({ length: inner.length }, (_, k) => k),
+					rawEnd: Array.from({ length: inner.length }, (_, k) => k + 1)
+				} : decodeRaw(inner);
+				const report = reportAt(decoded.cooked, node.loc?.start?.line);
+				const edits = selectorEdits(decoded.cooked, false, report, useTailwind);
+				if (useTailwind) edits.push(...tailwindEdits(decoded.cooked, report));
+				if (edits.length === 0) return;
+				const edited = applyCookedEdits(inner, decoded, edits);
+				if (edited === inner) return;
+				changed = true;
+				if (!inJsxAttribute) sampleRaw ??= raw;
+				path.replace(j.jsxText(quote + edited + quote));
+			}
+		});
 	});
 	root.find(j.TemplateLiteral).forEach((path) => {
-		for (const quasi of path.node.quasis) {
-			const original = quasi.value.raw;
-			const replaced = replaceInString(original);
-			if (replaced !== original) {
-				quasi.value.raw = replaced;
-				quasi.value.cooked = replaced;
-				hasChanges = true;
+		const literal = path.node;
+		const useTailwind = tailwind.has(path.node);
+		sites.push({
+			pos: startOf(literal),
+			run: () => {
+				const quasis = literal.quasis;
+				const original = quasis.map((q) => q.value.raw).join(PLACEHOLDER);
+				const firstLine = literal.loc?.start?.line;
+				const placeholderAt = [];
+				for (let k = original.indexOf(PLACEHOLDER); k !== -1; k = original.indexOf(PLACEHOLDER, k + 1)) placeholderAt.push(k);
+				const report = (index, message) => {
+					let line = "";
+					if (firstLine !== void 0) {
+						let n = lineAt(original, index, firstLine);
+						placeholderAt.forEach((at, k) => {
+							const loc = literal.expressions[k]?.loc;
+							if (at < index && loc?.start && loc.end) n += loc.end.line - loc.start.line;
+						});
+						line = `line ${n}: `;
+					}
+					api.report(line + message.replaceAll(PLACEHOLDER, PLACEHOLDER_TEXT));
+				};
+				let rewritten = rewriteSelectors(original, false, report, useTailwind);
+				if (useTailwind) rewritten = rewriteTailwind(rewritten, report);
+				if (rewritten === original) return;
+				const parts = rewritten.split(PLACEHOLDER);
+				if (parts.length !== quasis.length) return;
+				quasis.forEach((quasi, k) => {
+					const part = parts[k];
+					if (part === quasi.value.raw) return;
+					if (quasi.value.cooked === quasi.value.raw) quasi.value.cooked = part;
+					quasi.value.raw = part;
+				});
+				changed = true;
 			}
-		}
+		});
 	});
-	return hasChanges ? root.toSource() : fileInfo.source;
+	for (const site of sites.sort((a, b) => a.pos - b.pos)) site.run();
+	return changed ? root.toSource(printOptions(fileInfo.source, sampleRaw)) : fileInfo.source;
 }
-export { transform as default };
+export { ATTR_MAP, CSS_VAR_MAP, UNMAPPED_ATTRS, transform as default, transformStylesheet };