styled-components-to-stylex-codemod 0.0.16 → 0.0.17

package/dist/{bridge-consumer-patcher-D3fRIEkZ.mjs → bridge-consumer-patcher-DhMoL4Od.mjs}

@@ -1,5 +1,6 @@
 import { t as isSelectorContext } from "./selector-context-heuristic-CGwiJ3HL.mjs";
-import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { readFileSync, realpathSync } from "node:fs";
 
 //#region src/internal/bridge-consumer-patcher.ts
 /**
@@ -13,8 +14,12 @@ import { readFileSync } from "node:fs";
 /**
 * Build a mapping from consumer file paths to their required replacements,
 * cross-referencing prepass selector usages with successful bridge results.
+*
+* @param transformedFiles  Set of files that were actually transformed successfully.
+*   When provided, consumers in this set are skipped (they used the marker path).
+*   When absent, falls back to the prepass `consumerIsTransformed` flag.
 */
-function buildConsumerReplacements(selectorUsages, bridgeResults) {
+function buildConsumerReplacements(selectorUsages, bridgeResults, transformedFiles) {
 	const consumerReplacements = /* @__PURE__ */ new Map();
 	const bridgeLookup = /* @__PURE__ */ new Map();
 	for (const [targetPath, results] of bridgeResults) for (const result of results) {
@@ -22,7 +27,7 @@ function buildConsumerReplacements(selectorUsages, bridgeResults) {
 		if (result.exportName && result.exportName !== result.componentName) bridgeLookup.set(`${targetPath}:${result.exportName}`, result);
 	}
 	for (const [consumerPath, usages] of selectorUsages) for (const usage of usages) {
-		if (usage.consumerIsTransformed) continue;
+		if (transformedFiles ? transformedFiles.has(toRealPath(usage.consumerPath)) : usage.consumerIsTransformed) continue;
 		const bridge = bridgeLookup.get(`${usage.resolvedPath}:${usage.importedName}`);
 		if (!bridge) continue;
 		let replacements = consumerReplacements.get(consumerPath);
@@ -117,6 +122,15 @@ function hasExactImportName(importSpecifiers, name) {
 function escapeRegExp(s) {
 	return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
+/** Resolve symlinks so paths match the keys in transformedFiles (which uses realpathSync). */
+function toRealPath(filePath) {
+	const resolved = resolve(filePath);
+	try {
+		return realpathSync(resolved);
+	} catch {
+		return resolved;
+	}
+}
 
 //#endregion
 export { buildConsumerReplacements, patchConsumerFile };

package/dist/index.mjs

@@ -194,7 +194,7 @@ async function runTransform(options) {
 	].join("\n"));
 	const { createModuleResolver } = await import("./resolve-imports-BDk6Ms09.mjs");
 	const sharedResolver = createModuleResolver();
-	const { runPrepass } = await import("./run-prepass-DOMrzrA_.mjs");
+	const { runPrepass } = await import("./run-prepass-C4Lv1FHf.mjs");
 	const absoluteFiles = filePaths.map((f) => resolve(f));
 	const absoluteConsumers = consumerFilePaths.map((f) => resolve(f));
 	let prepassResult;
@@ -264,6 +264,7 @@ async function runTransform(options) {
 	})();
 	const sidecarFiles = /* @__PURE__ */ new Map();
 	const bridgeResults = /* @__PURE__ */ new Map();
+	const transformedFiles = /* @__PURE__ */ new Set();
 	const result = await run(transformPath, filePaths, {
 		parser,
 		dry: dryRun,
@@ -272,12 +273,13 @@ async function runTransform(options) {
 		crossFilePrepassResult,
 		sidecarFiles,
 		bridgeResults,
+		transformedFiles,
 		runInBand: true
 	});
 	if (sidecarFiles.size > 0 && !dryRun) for (const [sidecarPath, content] of sidecarFiles) await writeFile(sidecarPath, mergeSidecarContent(sidecarPath, content), "utf-8");
 	if (bridgeResults.size > 0 && !dryRun) {
-		const { buildConsumerReplacements, patchConsumerFile } = await import("./bridge-consumer-patcher-D3fRIEkZ.mjs");
-		const consumerReplacements = buildConsumerReplacements(crossFilePrepassResult.selectorUsages, bridgeResults);
+		const { buildConsumerReplacements, patchConsumerFile } = await import("./bridge-consumer-patcher-DhMoL4Od.mjs");
+		const consumerReplacements = buildConsumerReplacements(crossFilePrepassResult.selectorUsages, bridgeResults, transformedFiles);
 		const patchedFiles = [];
 		for (const [consumerPath, replacements] of consumerReplacements) {
 			const patched = patchConsumerFile(consumerPath, replacements);

package/dist/{run-prepass-DOMrzrA_.mjs → run-prepass-C4Lv1FHf.mjs}

@@ -234,7 +234,7 @@ function categorizeSelectorUsages(usages, componentsNeedingMarkerSidecar, compon
 	for (const usage of usages) {
 		if (usage.bridgeComponentName) continue;
 		if (usage.consumerIsTransformed) addToSetMap(componentsNeedingMarkerSidecar, usage.resolvedPath, usage.importedName);
-		else addToSetMap(componentsNeedingGlobalSelectorBridge, usage.resolvedPath, usage.importedName);
+		addToSetMap(componentsNeedingGlobalSelectorBridge, usage.resolvedPath, usage.importedName);
 	}
 }
 /**

package/dist/transform.mjs

@@ -5447,13 +5447,12 @@ function rewriteCssHelpersStep(ctx) {
 //#endregion
 //#region src/internal/emit-styles.ts
 function emitStylesAndImports(ctx) {
-	const { root, j, file, resolverImports, adapter } = ctx;
+	const { root, j, file, resolverImports } = ctx;
 	const filePath = file.path;
 	const styledImports = ctx.styledImports;
 	const resolvedStyleObjects = ctx.resolvedStyleObjects ?? /* @__PURE__ */ new Map();
 	const styledDecls = ctx.styledDecls;
 	const stylesIdentifier = ctx.stylesIdentifier ?? "styles";
-	const styleMerger = adapter.styleMerger;
 	const stylesInsertPosition = ctx.stylesInsertPosition ?? "end";
 	const preservedHeaderComments = [];
 	const addHeaderComments = (comments) => {
@@ -5693,15 +5692,6 @@ function emitStylesAndImports(ctx) {
 			insertImportDecl(j.importDeclaration(spec.names.map((n) => toImportSpecifier(n.imported, n.local)), j.literal(moduleSpecifier)));
 		};
 		for (const spec of resolverImports.values()) ensureImportDecl(spec);
-		const needsMergerImport = styledDecls.some((d) => {
-			if (!d.needsWrapperComponent) return false;
-			if (d.isPolymorphicIntrinsicWrapper) return d.supportsExternalStyles || d.usedAsValue || d.receivesClassNameOrStyleInJsx;
-			return d.supportsExternalStyles || d.usedAsValue || d.receivesClassNameOrStyleInJsx;
-		});
-		if (styleMerger && needsMergerImport) ensureImportDecl({
-			from: styleMerger.importSource,
-			names: [{ imported: styleMerger.functionName }]
-		});
 	}
 	const styleKeyToComments = /* @__PURE__ */ new Map();
 	for (const decl of styledDecls) {
@@ -6158,7 +6148,7 @@ function emitStyleMerging(args) {
 		classNameBeforeSpread: false,
 		styleAttr: null
 	};
-	if (styleMerger && (allowClassNameProp || allowStyleProp) && !staticClassNameExpr) return emitWithMerger({
+	if (styleMerger && (allowClassNameProp || allowStyleProp)) return emitWithMerger({
 		j,
 		styleMerger,
 		styleArgs,
@@ -6167,6 +6157,7 @@ function emitStyleMerging(args) {
 		allowClassNameProp,
 		allowStyleProp,
 		inlineStyleProps,
+		staticClassNameExpr,
 		emitTypes
 	});
 	return emitVerbosePattern({
@@ -6215,11 +6206,17 @@ function emitWithoutStylex(args) {
 * Generates the merger function call pattern.
 */
 function emitWithMerger(args) {
-	const { j, styleMerger, styleArgs, classNameId, styleId, allowClassNameProp, allowStyleProp, inlineStyleProps, emitTypes } = args;
+	const { j, styleMerger, styleArgs, classNameId, styleId, allowClassNameProp, allowStyleProp, inlineStyleProps, staticClassNameExpr, emitTypes } = args;
 	const firstStyleArg = styleArgs[0];
 	const mergerArgs = [styleArgs.length === 1 && firstStyleArg ? firstStyleArg : j.arrayExpression(styleArgs)];
-	if (allowClassNameProp || allowStyleProp) {
-		if (allowClassNameProp) mergerArgs.push(classNameId);
+	const classNameArg = buildMergerClassNameArg({
+		j,
+		classNameId,
+		allowClassNameProp,
+		staticClassNameExpr
+	});
+	if (allowClassNameProp || allowStyleProp || classNameArg) {
+		if (classNameArg) mergerArgs.push(classNameArg);
 		else if (allowStyleProp) mergerArgs.push(j.identifier("undefined"));
 		if (allowStyleProp) if (inlineStyleProps.length > 0) mergerArgs.push(maybeCastStyleForCustomProps(j, j.objectExpression([j.spreadElement(styleId), ...inlineStyleProps.map((p) => j.property("init", inlineStylePropKey(j, p.prop), p.expr))]), inlineStyleProps, emitTypes));
 		else mergerArgs.push(styleId);
@@ -6237,6 +6234,15 @@ function emitWithMerger(args) {
 		styleAttr: null
 	};
 }
+function buildMergerClassNameArg(args) {
+	const { j, classNameId, allowClassNameProp, staticClassNameExpr } = args;
+	const parts = [];
+	if (staticClassNameExpr) parts.push(staticClassNameExpr);
+	if (allowClassNameProp) parts.push(classNameId);
+	if (parts.length === 0) return null;
+	if (parts.length === 1) return parts[0] ?? null;
+	return j.callExpression(j.memberExpression(j.callExpression(j.memberExpression(j.arrayExpression(parts), j.identifier("filter")), [j.identifier("Boolean")]), j.identifier("join")), [j.literal(" ")]);
+}
 /**
 * Generates the verbose className/style merging pattern.
 */
@@ -10331,35 +10337,63 @@ function emitWrappersStep(ctx) {
 * Ensures the style merger import is present when the merger function is referenced.
 */
 function ensureMergerImportStep(ctx) {
-	const { root, j, adapter } = ctx;
+	const { root, j, adapter, file } = ctx;
 	if (adapter.styleMerger?.functionName && adapter.styleMerger.importSource) {
 		const mergerName = adapter.styleMerger.functionName;
-		const hasMergerUsage = root.find(j.Identifier, { name: mergerName }).filter((p) => isIdentifierReference(p)).size() > 0;
-		const hasMergerImport = root.find(j.ImportSpecifier, { imported: {
-			type: "Identifier",
-			name: mergerName
-		} }).size() > 0;
-		const hasLocalBinding = root.find(j.FunctionDeclaration, { id: { name: mergerName } }).size() > 0 || root.find(j.VariableDeclarator, { id: {
+		const hasMergerCall = root.find(j.CallExpression, { callee: {
 			type: "Identifier",
 			name: mergerName
 		} }).size() > 0;
-		if (hasMergerUsage && !hasMergerImport && !hasLocalBinding) {
+		const hasMergerImportBinding = root.find(j.ImportDeclaration).filter((p) => (p.node.specifiers ?? []).some((s) => {
+			if (s?.type !== "ImportSpecifier") return false;
+			return s.local?.type === "Identifier" && s.local.name === mergerName;
+		})).size() > 0;
+		const hasTopLevelBinding = hasTopLevelValueBinding(root, mergerName);
+		if (hasMergerCall && !hasMergerImportBinding && !hasTopLevelBinding) {
 			const source = adapter.styleMerger.importSource;
-			if (source.kind === "specifier") {
-				const decl = j.importDeclaration([j.importSpecifier(j.identifier(mergerName))], j.literal(source.value));
-				const stylexImport = root.find(j.ImportDeclaration, { source: { value: "@stylexjs/stylex" } });
-				if (stylexImport.size() > 0) stylexImport.at(stylexImport.size() - 1).insertAfter(decl);
-				else {
-					const firstImport = root.find(j.ImportDeclaration).at(0);
-					if (firstImport.size() > 0) firstImport.insertBefore(decl);
-					else root.get().node.program.body.unshift(decl);
-				}
-				ctx.markChanged();
+			const moduleSpecifier = toModuleSpecifier(source, file.path);
+			const decl = j.importDeclaration([j.importSpecifier(j.identifier(mergerName))], j.literal(moduleSpecifier));
+			const stylexImport = root.find(j.ImportDeclaration, { source: { value: "@stylexjs/stylex" } });
+			if (stylexImport.size() > 0) stylexImport.at(stylexImport.size() - 1).insertAfter(decl);
+			else {
+				const firstImport = root.find(j.ImportDeclaration).at(0);
+				if (firstImport.size() > 0) firstImport.insertBefore(decl);
+				else root.get().node.program.body.unshift(decl);
 			}
+			ctx.markChanged();
 		}
 	}
 	return CONTINUE;
 }
+function toModuleSpecifier(from, filePath) {
+	if (from.kind === "specifier") {
+		if (typeof from.value !== "string" || from.value.trim() === "") throw new Error(`Invalid styleMerger import specifier: expected non-empty string, got ${JSON.stringify(from.value)}`);
+		return from.value;
+	}
+	if (typeof from.value !== "string" || from.value.trim() === "") throw new Error(`Invalid styleMerger import absolutePath: expected non-empty string, got ${JSON.stringify(from.value)}`);
+	if (!path.isAbsolute(from.value)) throw new Error(`Invalid styleMerger import absolutePath: expected absolute path, got ${JSON.stringify(from.value)}`);
+	const baseDir = path.dirname(String(filePath));
+	let rel = path.relative(baseDir, from.value);
+	rel = rel.split(path.sep).join("/");
+	if (!rel.startsWith(".")) rel = `./${rel}`;
+	return rel;
+}
+function hasTopLevelValueBinding(root, localName) {
+	const body = root.get().node.program.body;
+	const hasBindingInDeclaration = (decl) => {
+		if (!decl || typeof decl !== "object") return false;
+		if ((decl.type === "FunctionDeclaration" || decl.type === "ClassDeclaration") && decl.id?.type === "Identifier" && decl.id.name === localName) return true;
+		if (decl.type === "VariableDeclaration") return (decl.declarations ?? []).some((d) => d?.id?.type === "Identifier" && d.id.name === localName);
+		return false;
+	};
+	for (const stmt of body) {
+		if (hasBindingInDeclaration(stmt)) return true;
+		if (stmt?.type === "ExportNamedDeclaration" || stmt?.type === "ExportDefaultDeclaration") {
+			if (hasBindingInDeclaration(stmt.declaration)) return true;
+		}
+	}
+	return false;
+}
 
 //#endregion
 //#region src/internal/transform-steps/ensure-react-import.ts
@@ -20633,8 +20667,53 @@ function postProcessTransformedAst(args) {
 				elementStyleKey,
 				markerVarName: addedMarkerVarName
 			}];
-			for (const c of node.children ?? []) if (c?.type === "JSXElement") visit(c, nextAncestors);
+			for (const child of node.children ?? []) visitJsxChild(child, nextAncestors);
 		};
+		function visitJsxChild(node, ancestors) {
+			if (!node || typeof node !== "object") return;
+			if (node.type === "JSXElement") {
+				visit(node, ancestors);
+				return;
+			}
+			if (node.type === "JSXFragment") {
+				visitJsxFragment(node, ancestors);
+				return;
+			}
+			if (node.type === "JSXExpressionContainer") visitJsxInExpression(node.expression, ancestors);
+		}
+		function visitJsxFragment(node, ancestors) {
+			for (const child of node.children ?? []) visitJsxChild(child, ancestors);
+		}
+		function visitJsxInExpression(node, ancestors) {
+			if (!node || typeof node !== "object") return;
+			if (node.type === "JSXElement") {
+				visit(node, ancestors);
+				return;
+			}
+			if (node.type === "JSXFragment") {
+				visitJsxFragment(node, ancestors);
+				return;
+			}
+			if (node.type === "ConditionalExpression") {
+				visitJsxInExpression(node.consequent, ancestors);
+				visitJsxInExpression(node.alternate, ancestors);
+				return;
+			}
+			if (node.type === "LogicalExpression") {
+				visitJsxInExpression(node.left, ancestors);
+				visitJsxInExpression(node.right, ancestors);
+				return;
+			}
+			if (node.type === "SequenceExpression") {
+				for (const expr of node.expressions ?? []) visitJsxInExpression(expr, ancestors);
+				return;
+			}
+			if (node.type === "ArrayExpression") {
+				for (const expr of node.elements ?? []) visitJsxInExpression(expr, ancestors);
+				return;
+			}
+			if (node.type === "ParenthesizedExpression" || node.type === "TSAsExpression" || node.type === "TSTypeAssertion" || node.type === "TSNonNullExpression") visitJsxInExpression(node.expression, ancestors);
+		}
 		root.find(j.JSXElement).forEach((p) => {
 			if (j(p).closest(j.JSXElement).size() > 0) return;
 			visit(p.node, []);
@@ -21253,6 +21332,10 @@ function transform(file, api, options) {
 			const bridgeResultsMap = options.bridgeResults;
 			if (bridgeResultsMap) bridgeResultsMap.set(toRealPath(file.path), result.bridgeResults);
 		}
+		if (result.code !== null) {
+			const transformedFiles = options.transformedFiles;
+			if (transformedFiles) transformedFiles.add(toRealPath(file.path));
+		}
 		return result.code;
 	} catch (e) {
 		if (!Logger.isErrorLogged(e)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components-to-stylex-codemod",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "Codemod to transform styled-components to StyleX",
   "keywords": [
     "codemod",