styled-components-to-stylex-codemod 0.0.15 → 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-BcidTT9f.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-BcidTT9f.mjs → run-prepass-C4Lv1FHf.mjs}

@@ -234,11 +234,16 @@ 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);
 	}
 }
-/** Regex matching `export const XGlobalSelector = ".sc2sx-` pattern (global for matchAll). */
-const BRIDGE_EXPORT_RE = /export\s+const\s+(\w+GlobalSelector)\s*=\s*["']\.sc2sx-/g;
+/**
+* Regex matching bridge GlobalSelector export patterns (global for matchAll).
+* Matches both:
+*   - Old format: `export const XGlobalSelector = ".sc2sx-..."`
+*   - New format: `` export const XGlobalSelector = `.${xBridgeClass}` ``
+*/
+const BRIDGE_EXPORT_RE = /export\s+const\s+(\w+GlobalSelector)\s*=\s*(?:["']\.sc2sx-|`\.\$\{)/g;
 /**
 * Detect whether an imported name is a bridge GlobalSelector from an
 * already-converted StyleX file.
@@ -302,10 +307,7 @@ function walkForImportsAndTemplates(node, imports, templates) {
 		imports.push(n);
 		return;
 	}
-	if (n.type === "TaggedTemplateExpression") {
-		templates.push(n);
-		return;
-	}
+	if (n.type === "TaggedTemplateExpression") templates.push(n);
 	for (const key of Object.keys(n)) {
 		if (key === "type" || key === "start" || key === "end" || key === "loc") continue;
 		const val = n[key];
@@ -352,13 +354,32 @@ function findStyledImportNameFromNodes(importNodes) {
 	}
 }
 /**
+* Find local names of `css` imported from styled-components.
+* Handles aliased imports like `import { css as sc } from "styled-components"`.
+*/
+function findCssImportNamesFromNodes(importNodes) {
+	const names = /* @__PURE__ */ new Set();
+	for (const node of importNodes) {
+		if (node.source?.value !== "styled-components") continue;
+		const specifiers = node.specifiers;
+		if (!specifiers) continue;
+		for (const spec of specifiers) if (spec.type === "ImportSpecifier") {
+			if (getNodeName(spec.imported) === "css") {
+				const localName = getNodeName(spec.local);
+				if (localName) names.add(localName);
+			}
+		}
+	}
+	return names;
+}
+/**
 * Find local names of imported components used as selectors inside
-* styled-components template literals.
+* styled-components template literals (both `styled` and `css` tagged templates).
 */
-function findComponentSelectorLocalsFromNodes(templateNodes, styledImportName) {
+function findComponentSelectorLocalsFromNodes(templateNodes, styledImportName, cssImportNames) {
 	const selectorLocals = /* @__PURE__ */ new Set();
 	for (const node of templateNodes) {
-		if (!isStyledTag(node.tag, styledImportName)) continue;
+		if (!isStyledTag(node.tag, styledImportName) && !isCssTag(node.tag, cssImportNames)) continue;
 		const quasi = node.quasi;
 		if (!quasi) continue;
 		const quasis = quasi.quasis;
@@ -399,6 +420,11 @@ function isStyledTag(tag, styledName) {
 	}
 	return false;
 }
+/** Check if a template tag is the `css` helper from styled-components. */
+function isCssTag(tag, cssImportNames) {
+	if (!tag || !cssImportNames || cssImportNames.size === 0) return false;
+	return tag.type === "Identifier" && typeof tag.name === "string" && cssImportNames.has(tag.name);
+}
 /** Check if a placeholder at the given position is in a CSS selector context. */
 function isPlaceholderInSelectorContext(rawCss, pos, length) {
 	const after = rawCss.slice(pos + length).trimStart();
@@ -759,10 +785,12 @@ function scanFileForSelectorsAst(filePath, source, transformSet, resolver, parse
 	const cached = cache && hash ? cache.get(hash) : void 0;
 	let importMap;
 	let styledImportName;
+	let cssImportNames;
 	let selectorLocals;
 	if (cached) {
 		importMap = cached.importMap;
 		styledImportName = cached.styledImportName;
+		cssImportNames = cached.cssImportNames;
 		selectorLocals = cached.selectorLocals;
 	} else {
 		let ast;
@@ -781,14 +809,16 @@ function scanFileForSelectorsAst(filePath, source, transformSet, resolver, parse
 		walkForImportsAndTemplates(program, importNodes, taggedTemplateNodes);
 		importMap = buildImportMapFromNodes(importNodes);
 		styledImportName = findStyledImportNameFromNodes(importNodes);
-		selectorLocals = styledImportName ? findComponentSelectorLocalsFromNodes(taggedTemplateNodes, styledImportName) : /* @__PURE__ */ new Set();
+		cssImportNames = findCssImportNamesFromNodes(importNodes);
+		selectorLocals = styledImportName || cssImportNames.size > 0 ? findComponentSelectorLocalsFromNodes(taggedTemplateNodes, styledImportName ?? "", cssImportNames) : /* @__PURE__ */ new Set();
 		if (cache && hash) cache.set(hash, {
 			importMap,
 			styledImportName,
+			cssImportNames,
 			selectorLocals
 		});
 	}
-	if (importMap.size === 0 || !styledImportName || selectorLocals.size === 0) return [];
+	if (importMap.size === 0 || !styledImportName && cssImportNames.size === 0 || selectorLocals.size === 0) return [];
 	const consumerIsTransformed = transformSet.has(filePath);
 	const usages = [];
 	for (const localName of selectorLocals) {

package/dist/transform.mjs

@@ -1148,6 +1148,20 @@ function generateBridgeClassName(filePath, componentName) {
 function bridgeExportName(componentName) {
 	return `${componentName}GlobalSelector`;
 }
+/**
+* Generate the internal const variable name for the bridge class value.
+* E.g., "Foo" → "fooBridgeClass", "ScrollableDiv" → "scrollableDivBridgeClass"
+*/
+function bridgeClassVarName(componentName) {
+	return `${componentName.charAt(0).toLowerCase()}${componentName.slice(1)}BridgeClass`;
+}
+/**
+* If a declaration has a bridge className, return the internal const variable
+* name that references it. Returns `undefined` when no bridge is needed.
+*/
+function getBridgeClassVar(decl) {
+	return decl.bridgeClassName ? bridgeClassVarName(decl.localName) : void 0;
+}
 
 //#endregion
 //#region src/internal/transform-steps/analyze-before-emit.ts
@@ -1232,15 +1246,7 @@ function analyzeBeforeEmitStep(ctx) {
 		if (decl.base.kind === "intrinsic" && decl.withConfig?.componentId) decl.needsWrapperComponent = true;
 		if (extendedBy.has(decl.localName) && componentsWithStaticProps.has(decl.localName)) decl.needsWrapperComponent = true;
 		if (exportedComponents.has(decl.localName)) decl.needsWrapperComponent = true;
-		if (ctx.bridgeComponentNames?.has(decl.localName) || ctx.bridgeComponentNames?.has("default") && exportedComponents.get(decl.localName)?.isDefault) {
-			decl.bridgeClassName = generateBridgeClassName(resolve(file.path), decl.localName);
-			if (!decl.attrsInfo) decl.attrsInfo = {
-				staticAttrs: {},
-				conditionalAttrs: []
-			};
-			const existing = typeof decl.attrsInfo.staticAttrs.className === "string" ? decl.attrsInfo.staticAttrs.className + " " : "";
-			decl.attrsInfo.staticAttrs.className = existing + decl.bridgeClassName;
-		}
+		if (ctx.bridgeComponentNames?.has(decl.localName) || ctx.bridgeComponentNames?.has("default") && exportedComponents.get(decl.localName)?.isDefault) decl.bridgeClassName = generateBridgeClassName(resolve(file.path), decl.localName);
 	}
 	const isUsedInJsx = (name) => isComponentUsedInJsx(root, j, name);
 	const canInlineImportedComponentWrapper = (decl) => {
@@ -5441,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) => {
@@ -5687,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) {
@@ -6077,17 +6073,28 @@ function emitBridgeExportsStep(ctx) {
 	const { j, root } = ctx;
 	const bridgeResults = [];
 	for (const decl of bridgeDecls) {
-		const varName = bridgeExportName(decl.localName);
+		const exportVarName = bridgeExportName(decl.localName);
+		const internalVarName = bridgeClassVarName(decl.localName);
 		const className = decl.bridgeClassName;
-		const declaration = j.variableDeclaration("const", [j.variableDeclarator(j.identifier(varName), j.stringLiteral(`.${className}`))]);
-		const exportDecl = j.exportNamedDeclaration(declaration);
+		const internalDecl = j.variableDeclaration("const", [j.variableDeclarator(j.identifier(internalVarName), j.stringLiteral(className))]);
+		const templateLiteral = j.templateLiteral([j.templateElement({
+			raw: ".",
+			cooked: "."
+		}, false), j.templateElement({
+			raw: "",
+			cooked: ""
+		}, true)], [j.identifier(internalVarName)]);
+		const exportDeclaration = j.variableDeclaration("const", [j.variableDeclarator(j.identifier(exportVarName), templateLiteral)]);
+		const exportDecl = j.exportNamedDeclaration(exportDeclaration);
 		exportDecl.comments = [j.commentBlock("* @deprecated Migrate consumer to stylex.defineMarker() — bridge className for unconverted styled-components consumers ", true, false)];
-		root.find(j.Program).get().node.body.push(exportDecl);
+		const body = root.find(j.Program).get().node.body;
+		body.push(internalDecl);
+		body.push(exportDecl);
 		bridgeResults.push({
 			componentName: decl.localName,
 			exportName: ctx.exportedComponents?.get(decl.localName)?.exportName,
 			className,
-			globalSelectorVarName: varName
+			globalSelectorVarName: exportVarName
 		});
 	}
 	ctx.bridgeResults = bridgeResults;
@@ -6141,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,
@@ -6150,6 +6157,7 @@ function emitStyleMerging(args) {
 		allowClassNameProp,
 		allowStyleProp,
 		inlineStyleProps,
+		staticClassNameExpr,
 		emitTypes
 	});
 	return emitVerbosePattern({
@@ -6198,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);
@@ -6220,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.
 */
@@ -6836,7 +6859,8 @@ function emitSimpleWithConfigWrappers(ctx) {
 				invertedBoolAttrs: d.attrsInfo?.invertedBoolAttrs ?? [],
 				staticAttrs: d.attrsInfo?.staticAttrs ?? {},
 				inlineStyleProps: d.inlineStyleProps ?? [],
-				attrsAsTag: d.attrsInfo?.attrsAsTag
+				attrsAsTag: d.attrsInfo?.attrsAsTag,
+				bridgeClassVar: getBridgeClassVar(d)
 			}), d));
 			continue;
 		}
@@ -6852,7 +6876,7 @@ function emitSimpleWithConfigWrappers(ctx) {
 			restId
 		});
 		const declStmt = j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
-		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo);
+		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d));
 		const merging = emitStyleMerging({
 			j,
 			emitter,
@@ -7146,7 +7170,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 				restId: restId ?? void 0
 			});
 			const declStmt = j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
-			const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo);
+			const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d));
 			const { attrsInfo: attrsInfoWithoutForwardedAsStatic, forwardedAsStaticFallback } = splitForwardedAsStaticAttrs({
 				attrsInfo,
 				includeForwardedAs: includesForwardedAs
@@ -7207,7 +7231,8 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 			invertedBoolAttrs: d.attrsInfo?.invertedBoolAttrs ?? [],
 			staticAttrs: d.attrsInfo?.staticAttrs ?? {},
 			inlineStyleProps: d.inlineStyleProps ?? [],
-			attrsAsTag: d.attrsInfo?.attrsAsTag
+			attrsAsTag: d.attrsInfo?.attrsAsTag,
+			bridgeClassVar: getBridgeClassVar(d)
 		}), d));
 	}
 }
@@ -7621,7 +7646,7 @@ function emitComponentWrappers(emitter) {
 			if (!firstPart) jsxTagName = j.jsxIdentifier(renderedComponent);
 			else jsxTagName = j.jsxMemberExpression(j.jsxIdentifier(firstPart), j.jsxIdentifier(parts.slice(1).join(".")));
 		} else jsxTagName = j.jsxIdentifier(renderedComponent);
-		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo);
+		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d));
 		const defaultAttrs = attrsInfo?.defaultAttrs ?? [];
 		const staticAttrs = attrsInfo?.staticAttrs ?? {};
 		const needsSxVar = allowClassNameProp || allowStyleProp || !!d.inlineStyleProps?.length || !!staticClassNameExpr;
@@ -8566,7 +8591,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 			}),
 			j.restElement(restId)
 		]), propsId)]);
-		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo);
+		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d));
 		const { attrsInfo: attrsInfoWithoutForwardedAsStatic, forwardedAsStaticFallback } = splitForwardedAsStaticAttrs({
 			attrsInfo,
 			includeForwardedAs: includesForwardedAs
@@ -8840,7 +8865,7 @@ function emitShouldForwardPropWrappers(ctx) {
 			});
 			const declStmt = j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
 			const cleanupPrefixStmt = dropPrefix && (isExportedComponent || shouldAllowAnyPrefixProps) && includeRest ? buildPrefixCleanupStatements(j, restId, dropPrefix) : null;
-			const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo);
+			const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d));
 			const { attrsInfo: attrsInfoWithoutForwardedAsStatic, forwardedAsStaticFallback } = splitForwardedAsStaticAttrs({
 				attrsInfo,
 				includeForwardedAs: includesForwardedAs
@@ -9280,32 +9305,59 @@ function splitExtraStyleArgs(j, stylesIdentifier, d) {
 	};
 }
 /**
+* Build a static className expression combining an optional literal string
+* and/or a bridge class variable identifier.
+*
+* Returns `undefined` when neither is provided.
+*/
+function buildStaticClassNameExpr(j, staticClassName, bridgeClassVar) {
+	if (staticClassName && bridgeClassVar) {
+		const raw = escapeTemplateRaw(`${staticClassName} `);
+		return j.templateLiteral([j.templateElement({
+			raw,
+			cooked: `${staticClassName} `
+		}, false), j.templateElement({
+			raw: "",
+			cooked: ""
+		}, true)], [j.identifier(bridgeClassVar)]);
+	}
+	if (bridgeClassVar) return j.identifier(bridgeClassVar);
+	if (staticClassName) return j.literal(staticClassName);
+}
+/**
 * Extracts a static className value (if present) from attrsInfo.staticAttrs
 * so it can be passed to the style merger separately, and returns the
 * remaining attrsInfo without that className entry.
+*
+* When `bridgeClassVar` is provided, it is used as an identifier expression
+* for the bridge class name. If a static className also exists, a template
+* literal combining both is produced.
 */
-function splitAttrsInfo(j, attrsInfo) {
+function splitAttrsInfo(j, attrsInfo, bridgeClassVar) {
 	const className = attrsInfo?.staticAttrs?.className;
 	if (!attrsInfo) return {
 		attrsInfo,
-		staticClassNameExpr: void 0
+		staticClassNameExpr: buildStaticClassNameExpr(j, void 0, bridgeClassVar)
 	};
 	const normalized = {
 		...attrsInfo,
 		staticAttrs: attrsInfo.staticAttrs ?? {},
 		conditionalAttrs: attrsInfo.conditionalAttrs ?? []
 	};
-	if (typeof className !== "string") return {
+	const hasStaticClassName = typeof className === "string";
+	if (!hasStaticClassName && !bridgeClassVar) return {
 		attrsInfo: normalized,
 		staticClassNameExpr: void 0
 	};
-	const { className: _omit, ...rest } = normalized.staticAttrs;
 	return {
-		attrsInfo: {
-			...normalized,
-			staticAttrs: rest
-		},
-		staticClassNameExpr: j.literal(className)
+		attrsInfo: hasStaticClassName ? (() => {
+			const { className: _omit, ...rest } = normalized.staticAttrs;
+			return {
+				...normalized,
+				staticAttrs: rest
+			};
+		})() : normalized,
+		staticClassNameExpr: buildStaticClassNameExpr(j, hasStaticClassName ? className : void 0, bridgeClassVar)
 	};
 }
 /**
@@ -9499,6 +9551,10 @@ function collectDestructurePropsFromStyleFns(emitter, args) {
 	}
 	for (const prop of d.shouldForwardProp?.dropProps ?? []) if (prop && !destructureProps.includes(prop)) destructureProps.push(prop);
 }
+/** Escape characters that are special inside template literal quasi strings. */
+function escapeTemplateRaw(s) {
+	return s.replace(/\\|`|\$\{/g, "\\$&");
+}
 
 //#endregion
 //#region src/internal/emit-wrappers/wrapper-emitter.ts
@@ -10014,7 +10070,7 @@ var WrapperEmitter = class {
 		return false;
 	}
 	emitMinimalWrapper(args) {
-		const { localName, tagName, propsTypeName, inlineTypeText, styleArgs, destructureProps, propDefaults, allowClassNameProp = false, allowStyleProp = false, allowAsProp = false, includeRest = true, defaultAttrs = [], conditionalAttrs = [], invertedBoolAttrs = [], staticAttrs = {}, inlineStyleProps = [], attrsAsTag } = args;
+		const { localName, tagName, propsTypeName, inlineTypeText, styleArgs, destructureProps, propDefaults, allowClassNameProp = false, allowStyleProp = false, allowAsProp = false, includeRest = true, defaultAttrs = [], conditionalAttrs = [], invertedBoolAttrs = [], staticAttrs = {}, inlineStyleProps = [], attrsAsTag, bridgeClassVar } = args;
 		const { j } = this;
 		const expandedDestructureProps = new Set(destructureProps.filter(Boolean));
 		const collectCondIdentifiers = (node) => {
@@ -10097,6 +10153,7 @@ var WrapperEmitter = class {
 			const { className: _omitClassName, ...rest } = staticAttrs;
 			return rest;
 		})();
+		const staticClassNameExpr = buildStaticClassNameExpr(j, staticClassName, bridgeClassVar);
 		const merging = emitStyleMerging({
 			j,
 			emitter: this,
@@ -10106,7 +10163,7 @@ var WrapperEmitter = class {
 			allowClassNameProp,
 			allowStyleProp,
 			inlineStyleProps,
-			staticClassNameExpr: staticClassName ? j.literal(staticClassName) : void 0
+			staticClassNameExpr
 		});
 		const jsxAttrs = [];
 		for (const a of defaultAttrs) jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier(a.attrName), j.jsxExpressionContainer(j.logicalExpression("??", j.identifier(a.jsxProp), this.literalExpr(a.value)))));
@@ -10187,8 +10244,8 @@ var WrapperEmitter = class {
 	splitExtraStyleArgs(d) {
 		return splitExtraStyleArgs(this.j, this.stylesIdentifier, d);
 	}
-	splitAttrsInfo(attrsInfo) {
-		return splitAttrsInfo(this.j, attrsInfo);
+	splitAttrsInfo(attrsInfo, bridgeClassVar) {
+		return splitAttrsInfo(this.j, attrsInfo, bridgeClassVar);
 	}
 	buildVariantDimensionLookups(args) {
 		buildVariantDimensionLookups(this.j, args);
@@ -10280,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: {
+		const hasMergerCall = root.find(j.CallExpression, { callee: {
 			type: "Identifier",
 			name: mergerName
 		} }).size() > 0;
-		const hasLocalBinding = root.find(j.FunctionDeclaration, { id: { name: mergerName } }).size() > 0 || root.find(j.VariableDeclarator, { id: {
-			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
@@ -20582,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, []);
@@ -21202,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.15",
+  "version": "0.0.17",
   "description": "Codemod to transform styled-components to StyleX",
   "keywords": [
     "codemod",