styled-components-to-stylex-codemod 0.0.29 → 0.0.30

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { a as defineAdapter, i as AdapterInput, t as CollectedWarning } from "./logger-Dx-dRi_p.mjs";
+import { a as defineAdapter, i as AdapterInput, t as CollectedWarning } from "./logger-BQnWs1On.mjs";
 
 //#region src/run.d.ts
 interface RunTransformOptions {
@@ -59,6 +59,11 @@ interface RunTransformOptions {
    * @default 3
    */
   maxExamples?: number;
+  /**
+   * Suppress jscodeshift runner output.
+   * @default false
+   */
+  silent?: boolean;
 }
 interface RunTransformResult {
   /** Number of files that had errors */

package/dist/index.mjs

@@ -231,7 +231,7 @@ async function runTransform(options) {
 		transformedFiles,
 		transientPropRenames,
 		runInBand: true,
-		silent: true
+		silent: options.silent ?? false
 	});
 	if (sidecarFiles.size > 0 && !dryRun) for (const [sidecarPath, content] of sidecarFiles) await writeFile(sidecarPath, mergeSidecarContent(sidecarPath, content), "utf-8");
 	if (bridgeResults.size > 0 && !dryRun) {

package/dist/{logger-Dx-dRi_p.d.mts → logger-BQnWs1On.d.mts}

@@ -260,6 +260,19 @@ type CallResolveResultWithExpr = {
    * - Theme access in the original call is rewritten to use the wrapper `useTheme()` value.
    */
   preserveRuntimeCall?: boolean;
+  /**
+   * Additional className expressions to merge into the component's className attribute.
+   *
+   * Used for CSS modules or other class-based styles that StyleX cannot express
+   * (child selectors like `& > *`, ancestor selectors like `html:not(.class) &`, etc.).
+   *
+   * Each entry provides an expression string (e.g., `cssModuleStyles.myClass`)
+   * and its required imports.
+   *
+   * When present, the codemod merges these expressions into the rendered element's
+   * className alongside any existing static className from `.attrs()` or bridge classes.
+   */
+  extraClassNames?: ExprWithImports[];
 };
 type CallResolveRuntimeOnlyResult = {
   /**
@@ -275,7 +288,17 @@ type CallResolveRuntimeOnlyResult = {
    */
   usage?: "create";
 };
-type CallResolveResult = CallResolveResultWithExpr | CallResolveRuntimeOnlyResult;
+/**
+ * Resolved result containing only className expressions (no StyleX style object).
+ * Used for CSS modules or other class-based styles that StyleX cannot express.
+ */
+type CallResolveClassNamesResult = {
+  /**
+   * className expressions to merge into the component's className attribute.
+   */
+  extraClassNames: ExprWithImports[];
+};
+type CallResolveResult = CallResolveResultWithExpr | CallResolveRuntimeOnlyResult | CallResolveClassNamesResult;
 type ImportSource = {
   kind: "absolutePath";
   value: string;
@@ -290,6 +313,11 @@ type ImportSpec = {
     local?: string;
   }>;
 };
+/** An expression string with its required imports, used for className emission. */
+type ExprWithImports = {
+  expr: string;
+  imports: ImportSpec[];
+};
 type ResolveBaseComponentStaticValue = string | number | boolean;
 interface ResolveBaseComponentContext {
   /**

package/dist/transform.d.mts

@@ -1,4 +1,4 @@
-import { n as WarningLog, r as Adapter } from "./logger-Dx-dRi_p.mjs";
+import { n as WarningLog, r as Adapter } from "./logger-BQnWs1On.mjs";
 import { API, FileInfo, Options } from "jscodeshift";
 
 //#region src/internal/transform-types.d.ts

package/dist/transform.mjs

@@ -2229,7 +2229,7 @@ function analyzeBeforeEmitStep(ctx) {
 		if (!hadWrapperBeforePrepass && decl.needsWrapperComponent) wrapperForcedByPrepass.add(decl.localName);
 		if (ctx.bridgeComponentNames?.has(decl.localName) || ctx.bridgeComponentNames?.has("default") && exportedComponents.get(decl.localName)?.isDefault) decl.bridgeClassName = generateBridgeClassName(resolve(file.path), decl.localName);
 	}
-	for (const decl of styledDecls) if (decl.needsWrapperComponent && !wrapperForcedByPrepass.has(decl.localName) && !decl.isCssHelper && !decl.isDirectJsxResolution && decl.base.kind === "intrinsic" && !decl.bridgeClassName && !decl.attrWrapper && (decl.styleFnFromProps ?? []).length === 0 && !decl.needsUseThemeHook?.length && Object.keys(decl.variantStyleKeys ?? {}).length === 0 && !decl.enumVariant && !decl.inlineStyleProps?.length && (decl.attrsInfo?.conditionalAttrs?.length ?? 0) === 0 && (decl.attrsInfo?.defaultAttrs?.length ?? 0) === 0 && (decl.attrsInfo?.invertedBoolAttrs?.length ?? 0) === 0 && !(decl.extraStylexPropsArgs ?? []).some((arg) => arg.when) && ((decl.extraStylexPropsArgs ?? []).length > 0 || (decl.extraStyleKeys ?? []).length > 0)) decl.needsWrapperComponent = false;
+	for (const decl of styledDecls) if (decl.needsWrapperComponent && !wrapperForcedByPrepass.has(decl.localName) && !decl.isCssHelper && !decl.isDirectJsxResolution && decl.base.kind === "intrinsic" && !decl.bridgeClassName && !decl.attrWrapper && (decl.styleFnFromProps ?? []).length === 0 && !decl.needsUseThemeHook?.length && Object.keys(decl.variantStyleKeys ?? {}).length === 0 && !decl.enumVariant && !decl.inlineStyleProps?.length && (decl.attrsInfo?.conditionalAttrs?.length ?? 0) === 0 && (decl.attrsInfo?.defaultAttrs?.length ?? 0) === 0 && (decl.attrsInfo?.invertedBoolAttrs?.length ?? 0) === 0 && !(decl.extraStylexPropsArgs ?? []).some((arg) => arg.when) && ((decl.extraStylexPropsArgs ?? []).length > 0 || (decl.extraStyleKeys ?? []).length > 0 || (decl.extraClassNames ?? []).length > 0)) decl.needsWrapperComponent = false;
 	const jsxUsageCountCache = /* @__PURE__ */ new Map();
 	const relationChildStyleKeys = new Set((ctx.relationOverrides ?? []).map((o) => o.childStyleKey));
 	const getJsxUsageCount = (name) => {
@@ -9048,6 +9048,7 @@ function emitStylesAndImports(ctx) {
 			const moduleSpecifier = toModuleSpecifier(spec.from);
 			const existing = root.find(j.ImportDeclaration, { source: { value: moduleSpecifier } });
 			const toImportSpecifier = (imported, local) => {
+				if (imported === "default") return j.importDefaultSpecifier(j.identifier(local ?? "default"));
 				const impId = j.identifier(imported);
 				if (local && local !== imported) return j.importSpecifier(impId, j.identifier(local));
 				return j.importSpecifier(impId);
@@ -10239,19 +10240,60 @@ function buildInterleavedExtraStyleArgs(j, stylesIdentifier, d, propsArgExprs) {
 *
 * 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({
+/** Escape characters that are special inside template literal quasi strings. */
+function escapeTemplateRaw(s) {
+	return s.replace(/\\|`|\$\{/g, "\\$&");
+}
+function buildStaticClassNameExpr(j, staticClassName, bridgeClassVar, extraClassNames) {
+	if (!(extraClassNames && extraClassNames.length > 0)) {
+		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);
+		return;
+	}
+	const expressions = [];
+	const quasis = [];
+	const leadingText = staticClassName ? `${escapeTemplateRaw(staticClassName)} ` : "";
+	quasis.push(j.templateElement({
+		raw: leadingText,
+		cooked: staticClassName ? `${staticClassName} ` : ""
+	}, false));
+	if (bridgeClassVar) {
+		expressions.push(j.identifier(bridgeClassVar));
+		quasis.push(j.templateElement({
+			raw: " ",
+			cooked: " "
+		}, false));
+	}
+	for (let i = 0; i < extraClassNames.length; i++) {
+		expressions.push(extraClassNames[i].expr);
+		if (i === extraClassNames.length - 1) quasis.push(j.templateElement({
 			raw: "",
 			cooked: ""
-		}, true)], [j.identifier(bridgeClassVar)]);
+		}, true));
+		else quasis.push(j.templateElement({
+			raw: " ",
+			cooked: " "
+		}, false));
 	}
-	if (bridgeClassVar) return j.identifier(bridgeClassVar);
-	if (staticClassName) return j.literal(staticClassName);
+	if (expressions.length === 0) {
+		if (staticClassName) return j.literal(staticClassName);
+		return;
+	}
+	if (!staticClassName && !bridgeClassVar) quasis[0] = j.templateElement({
+		raw: "",
+		cooked: ""
+	}, false);
+	return j.templateLiteral(quasis, expressions);
 }
 /**
 * Extracts a static className value (if present) from attrsInfo.staticAttrs
@@ -10261,12 +10303,15 @@ function buildStaticClassNameExpr(j, staticClassName, bridgeClassVar) {
 * 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.
+*
+* When `extraClassNames` is provided, the expressions are merged into the
+* static className expression.
 */
-function splitAttrsInfo(j, attrsInfo, bridgeClassVar) {
+function splitAttrsInfo(j, attrsInfo, bridgeClassVar, extraClassNames) {
 	const className = attrsInfo?.staticAttrs?.className;
 	if (!attrsInfo) return {
 		attrsInfo,
-		staticClassNameExpr: buildStaticClassNameExpr(j, void 0, bridgeClassVar)
+		staticClassNameExpr: buildStaticClassNameExpr(j, void 0, bridgeClassVar, extraClassNames)
 	};
 	const normalized = {
 		...attrsInfo,
@@ -10274,7 +10319,8 @@ function splitAttrsInfo(j, attrsInfo, bridgeClassVar) {
 		conditionalAttrs: attrsInfo.conditionalAttrs ?? []
 	};
 	const hasStaticClassName = typeof className === "string";
-	if (!hasStaticClassName && !bridgeClassVar) return {
+	const hasExtraClassNames = extraClassNames && extraClassNames.length > 0;
+	if (!hasStaticClassName && !bridgeClassVar && !hasExtraClassNames) return {
 		attrsInfo: normalized,
 		staticClassNameExpr: void 0
 	};
@@ -10286,7 +10332,7 @@ function splitAttrsInfo(j, attrsInfo, bridgeClassVar) {
 				staticAttrs: rest
 			};
 		})() : normalized,
-		staticClassNameExpr: buildStaticClassNameExpr(j, hasStaticClassName ? className : void 0, bridgeClassVar)
+		staticClassNameExpr: buildStaticClassNameExpr(j, hasStaticClassName ? className : void 0, bridgeClassVar, extraClassNames)
 	};
 }
 /**
@@ -10590,10 +10636,6 @@ function buildVariantStyleExprs(opts) {
 		}), when);
 	}
 }
-/** Escape characters that are special inside template literal quasi strings. */
-function escapeTemplateRaw(s) {
-	return s.replace(/\\|`|\$\{/g, "\\$&");
-}
 /**
 * Appends conditional style args driven by theme boolean props (e.g., `theme.isDark`).
 * Returns `true` if the hook is needed (and calls `markNeedsUseThemeImport`).
@@ -11611,8 +11653,8 @@ var WrapperEmitter = class {
 	buildInterleavedExtraStyleArgs(d, propsArgExprs) {
 		return buildInterleavedExtraStyleArgs(this.j, this.stylesIdentifier, d, propsArgExprs);
 	}
-	splitAttrsInfo(attrsInfo, bridgeClassVar) {
-		return splitAttrsInfo(this.j, attrsInfo, bridgeClassVar);
+	splitAttrsInfo(attrsInfo, bridgeClassVar, extraClassNames) {
+		return splitAttrsInfo(this.j, attrsInfo, bridgeClassVar, extraClassNames);
 	}
 	buildVariantDimensionLookups(args) {
 		buildVariantDimensionLookups(this.j, args);
@@ -12002,7 +12044,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, getBridgeClassVar(d));
+		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d), d.extraClassNames);
 		const defaultAttrs = attrsInfo?.defaultAttrs ?? [];
 		const staticAttrs = attrsInfo?.staticAttrs ?? {};
 		const needsSxVar = allowClassNameProp || allowStyleProp || !!d.inlineStyleProps?.length || !!staticClassNameExpr;
@@ -12777,7 +12819,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 			restId
 		});
 		const declStmt = j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
-		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d));
+		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d), d.extraClassNames);
 		const { attrsInfo: attrsInfoWithoutForwardedAsStatic, forwardedAsStaticFallback } = splitForwardedAsStaticAttrs({
 			attrsInfo,
 			includeForwardedAs: includesForwardedAs
@@ -13132,7 +13174,7 @@ function emitShouldForwardPropWrappers(ctx) {
 		});
 		const declStmt = j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
 		const cleanupPrefixStmt = dropPrefix && (isExportedComponent || (d.supportsExternalStyles ?? false) || shouldAllowAnyPrefixProps) && includeRest ? buildPrefixCleanupStatements(j, restId, dropPrefix) : null;
-		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d));
+		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d), d.extraClassNames);
 		let attrsInfoForJsx;
 		let forwardedAsStaticFallback;
 		if (!allowClassNameProp && !allowStyleProp) {
@@ -13365,7 +13407,7 @@ function emitSimpleWithConfigWrappers(ctx) {
 			restId
 		});
 		const declStmt = j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
-		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d));
+		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d), d.extraClassNames);
 		const merging = emitStyleMerging({
 			j,
 			emitter,
@@ -13696,7 +13738,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 			});
 			const usePropsChildrenDirectly = emitter.isChildrenOnlyDestructurePattern(patternProps);
 			const declStmt = usePropsChildrenDirectly ? null : j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
-			const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d));
+			const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d), d.extraClassNames);
 			const { attrsInfo: attrsInfoWithoutForwardedAsStatic, forwardedAsStaticFallback } = splitForwardedAsStaticAttrs({
 				attrsInfo,
 				includeForwardedAs: includesForwardedAs
@@ -15739,12 +15781,21 @@ const createImportResolver = (args) => {
 };
 //#endregion
 //#region src/internal/lower-rules/state.ts
+/**
+* Builds shared state for the lower-rules pipeline.
+* Core concepts: resolver wiring, precomputed mixin values, and shared tracking maps.
+*/
 function createLowerRulesState(ctx) {
 	const { api, j, root, file, warnings, resolverImports, keyframesNames, parseExpr, rewriteCssVarsInStyleObject } = ctx;
 	const filePath = file.path;
 	const resolveValue = ctx.resolveValueSafe;
 	const resolveValueDirectional = ctx.resolveValueDirectionalSafe;
 	const resolveCall = ctx.resolveCallSafe;
+	const resolveValueOptional = (rvCtx) => {
+		const res = ctx.adapter.resolveValue(rvCtx);
+		if (res && isDirectionalResult(res)) return;
+		return res;
+	};
 	const resolveCallOptional = ctx.adapter.resolveCall.bind(ctx.adapter);
 	const resolveSelector = ctx.resolveSelectorSafe;
 	const importMap = ctx.importMap ?? /* @__PURE__ */ new Map();
@@ -15875,6 +15926,7 @@ function createLowerRulesState(ctx) {
 		parseExpr,
 		rewriteCssVarsInStyleObject,
 		resolveValue,
+		resolveValueOptional,
 		resolveValueDirectional,
 		resolveCall,
 		resolveCallOptional,
@@ -16523,6 +16575,11 @@ function isAdapterResultCssValue(result, cssProperty) {
 * or "resolvedStyles" for StyleX references (to be used in stylex.props arguments).
 */
 function buildResolvedHandlerResult(result, cssProperty, payload) {
+	if ("extraClassNames" in result && !("expr" in result)) return {
+		type: "resolvedClassNames",
+		extraClassNames: result.extraClassNames,
+		...payload
+	};
 	if (!("expr" in result)) return {
 		type: "runtimeCallOnly",
 		...payload
@@ -16537,6 +16594,7 @@ function buildResolvedHandlerResult(result, cssProperty, payload) {
 		expr: result.expr,
 		imports: result.imports,
 		...result.cssText ? { cssText: result.cssText } : {},
+		...result.extraClassNames ? { extraClassNames: result.extraClassNames } : {},
 		...payload
 	};
 }
@@ -16560,20 +16618,22 @@ function getArrowFnThemeParamInfo(fn) {
 		propsName: p.name
 	};
 	if (p?.type !== "ObjectPattern" || !Array.isArray(p.properties)) return null;
+	let themeName = null;
+	const siblingBindings = [];
 	for (const prop of p.properties) {
 		if (!prop || prop.type !== "Property" && prop.type !== "ObjectProperty") continue;
 		const key = prop.key;
-		if (!key || key.type !== "Identifier" || key.name !== "theme") continue;
+		if (!key || key.type !== "Identifier") continue;
 		const value = prop.value;
-		if (value?.type === "Identifier" && typeof value.name === "string") return {
-			kind: "themeBinding",
-			themeName: value.name
-		};
-		if (value?.type === "AssignmentPattern" && value.left?.type === "Identifier" && typeof value.left.name === "string") return {
-			kind: "themeBinding",
-			themeName: value.left.name
-		};
+		const binding = extractBindingName(value) ?? key.name;
+		if (key.name === "theme") themeName = binding;
+		else siblingBindings.push(binding);
 	}
+	if (themeName) return {
+		kind: "themeBinding",
+		themeName,
+		siblingBindings
+	};
 	return null;
 }
 /**
@@ -16782,6 +16842,17 @@ function callArgFromNode(node, propsParamName, themeBindingName) {
 	}
 	return { kind: "unknown" };
 }
+/**
+* Extracts the actual binding name from a destructured property value.
+* Handles: `{ x }` → "x", `{ x: alias }` → "alias", `{ x: alias = def }` → "alias"
+*/
+function extractBindingName(value) {
+	if (!value || typeof value !== "object") return null;
+	const v = value;
+	if (v.type === "Identifier" && typeof v.name === "string") return v.name;
+	if (v.type === "AssignmentPattern" && v.left?.type === "Identifier" && typeof v.left.name === "string") return v.left.name;
+	return null;
+}
 function callArgsFromNode(args, propsParamName, themeBindingName) {
 	if (!Array.isArray(args)) return [];
 	return args.map((arg) => callArgFromNode(arg, propsParamName, themeBindingName));
@@ -16807,7 +16878,7 @@ function tryResolveConditionalValue(node, ctx) {
 	if (!body || body.type !== "ConditionalExpression") return null;
 	const checkThemeBooleanTest = (test) => {
 		const check = (node) => {
-			if (!node || typeof node !== "object" || node.type !== "MemberExpression") return null;
+			if (!node || typeof node !== "object" || !isMemberExpression(node)) return null;
 			if (info?.kind === "propsParam" && paramName) {
 				const parts = getMemberPathFromIdentifier(node, paramName);
 				const themeProp = parts?.[1];
@@ -16836,7 +16907,7 @@ function tryResolveConditionalValue(node, ctx) {
 		return null;
 	};
 	const resolveThemeFromMemberExpr = (node) => {
-		if (!node || typeof node !== "object" || node.type !== "MemberExpression") return null;
+		if (!node || typeof node !== "object" || !isMemberExpression(node)) return null;
 		if (info?.kind === "propsParam" && paramName) {
 			const parts = getMemberPathFromIdentifier(node, paramName);
 			if (!parts || parts[0] !== "theme") return null;
@@ -16852,7 +16923,7 @@ function tryResolveConditionalValue(node, ctx) {
 	const resolveThemeBranchValue = (branch) => {
 		const themeInfo = resolveThemeFromMemberExpr(branch);
 		if (!themeInfo) return null;
-		const res = ctx.resolveValue({
+		const res = (ctx.resolveValueOptional ?? ctx.resolveValue)({
 			kind: "theme",
 			path: themeInfo.path,
 			filePath: ctx.filePath,
@@ -16960,7 +17031,7 @@ function tryResolveConditionalValue(node, ctx) {
 			const res = resolveImportedHelperCall(call, ctx, propsParamName, cssProperty, themeBindingName);
 			if (res.kind === "resolved") {
 				if ("expr" in res.result) return res.result;
-				if (res.result.preserveRuntimeCall) {
+				if ("preserveRuntimeCall" in res.result && res.result.preserveRuntimeCall) {
 					runtimeCallState.info = {
 						resolveCallContext: res.resolveCallContext,
 						resolveCallResult: res.resolveCallResult
@@ -16975,7 +17046,7 @@ function tryResolveConditionalValue(node, ctx) {
 					const innerRes = resolveImportedHelperCall(inner, ctx, propsParamName, cssProperty, themeBindingName);
 					if (innerRes.kind === "resolved") {
 						if ("expr" in innerRes.result) return innerRes.result;
-						if (innerRes.result.preserveRuntimeCall) {
+						if ("preserveRuntimeCall" in innerRes.result && innerRes.result.preserveRuntimeCall) {
 							runtimeCallState.info = {
 								resolveCallContext: innerRes.resolveCallContext,
 								resolveCallResult: innerRes.resolveCallResult
@@ -17736,10 +17807,9 @@ function tryBuildThemeBooleanInlineStyleFallback(args) {
 	const { trueValue, falseValue, trueImports, falseImports, trueBranch, falseBranch, themeBoolInfo, cssProp, paramName, info } = args;
 	if (trueValue === null === (falseValue === null)) return null;
 	const resolvedBranchIsTrue = trueValue !== null;
-	const unresolvableBranch = resolvedBranchIsTrue ? falseBranch : trueBranch;
-	if (!hasCallExpression(unresolvableBranch)) return null;
-	const transformed = replaceThemeRefsWithHookVar(unresolvableBranch, paramName, info);
+	const transformed = replaceThemeRefsWithHookVar(resolvedBranchIsTrue ? falseBranch : trueBranch, paramName, info);
 	if (!transformed) return null;
+	if (!isFullyTransformedThemeExpr(transformed, paramName, info)) return null;
 	return {
 		type: "splitThemeBooleanWithInlineStyleFallback",
 		cssProp,
@@ -17751,17 +17821,49 @@ function tryBuildThemeBooleanInlineStyleFallback(args) {
 		inlineExpr: transformed
 	};
 }
-/** Check if an expression tree contains any call expressions. */
-function hasCallExpression(node) {
-	if (!node || typeof node !== "object") return false;
-	const n = node;
-	if (n.type === "CallExpression") return true;
-	for (const key of Object.keys(n)) {
-		if (key === "loc" || key === "comments") continue;
-		const child = n[key];
-		if (child && typeof child === "object" && hasCallExpression(child)) return true;
+/**
+* Validates that a transformed expression has no dangling references to
+* the original arrow function parameter or theme binding name.
+* After `replaceThemeRefsWithHookVar`, all `<paramName>.theme.*` should
+* have been rewritten to `theme.*`. If the param name still appears,
+* the expression accesses non-theme props and can't be safely used
+* with `useTheme()` alone.
+*/
+function isFullyTransformedThemeExpr(transformed, paramName, info) {
+	const ids = /* @__PURE__ */ new Set();
+	collectFreeIdentifiers(transformed, ids);
+	if (paramName && ids.has(paramName)) return false;
+	if (info?.kind === "themeBinding") {
+		if (info.themeName !== "theme" && ids.has(info.themeName)) return false;
+		if (info.siblingBindings.some((b) => ids.has(b))) return false;
+	}
+	return true;
+}
+/**
+* Collects free variable identifiers from an AST node, excluding
+* non-computed property names in member expressions (e.g., in
+* `theme.color.bgSub`, only `theme` is a free variable; `color`
+* and `bgSub` are property accesses, not variable references).
+*/
+function collectFreeIdentifiers(node, out) {
+	if (!node || typeof node !== "object") return;
+	if (Array.isArray(node)) {
+		for (const child of node) collectFreeIdentifiers(child, out);
+		return;
+	}
+	const typed = node;
+	const nodeType = typed.type;
+	if (nodeType === "MemberExpression" || nodeType === "OptionalMemberExpression") {
+		collectFreeIdentifiers(typed.object, out);
+		if (typed.computed) collectFreeIdentifiers(typed.property, out);
+		return;
+	}
+	if (nodeType === "Identifier" && typeof typed.name === "string") out.add(typed.name);
+	for (const key of Object.keys(typed)) {
+		if (key === "loc" || key === "comments" || key === "type") continue;
+		const child = typed[key];
+		if (child && typeof child === "object") collectFreeIdentifiers(child, out);
 	}
-	return false;
 }
 /**
 * Deep-clones an expression and replaces `<paramName>.theme.*` or `theme.*`
@@ -20725,7 +20827,7 @@ const createValuePatternHandlers = (ctx) => {
 * Core concepts: per-component style buckets, helper factories, and resolver wiring.
 */
 function createDeclProcessingState(state, decl) {
-	const { api, j, root, filePath, warnings, resolverImports, parseExpr, resolveValue, resolveValueDirectional, resolveCall, resolveCallOptional, resolveSelector, importMap, cssHelperFunctions, stringMappingFns, hasLocalThemeBinding, isCssHelperTaggedTemplate, resolveCssHelperTemplate, resolveImportInScope, usedCssHelperFunctions, enumValueMap, markBail } = state;
+	const { api, j, root, filePath, warnings, resolverImports, parseExpr, resolveValue, resolveValueOptional, resolveValueDirectional, resolveCall, resolveCallOptional, resolveSelector, importMap, cssHelperFunctions, stringMappingFns, hasLocalThemeBinding, isCssHelperTaggedTemplate, resolveCssHelperTemplate, resolveImportInScope, usedCssHelperFunctions, enumValueMap, markBail } = state;
 	const styleObj = {};
 	const perPropPseudo = {};
 	const perPropMedia = {};
@@ -20839,6 +20941,7 @@ function createDeclProcessingState(state, decl) {
 		api,
 		filePath,
 		resolveValue,
+		resolveValueOptional,
 		resolveValueDirectional,
 		resolveCall,
 		resolveCallOptional,
@@ -22350,6 +22453,15 @@ function handleInterpolatedDeclaration(args) {
 		if (!imports) return;
 		for (const imp of imports) resolverImports.set(JSON.stringify(imp), imp);
 	};
+	/** Parse and store extra className expressions (from CSS modules) on the decl. */
+	const collectExtraClassNames = (entries) => {
+		decl.extraClassNames ??= [];
+		for (const cn of entries) {
+			addResolverImports(cn.imports);
+			const cnExpr = parseExpr(cn.expr);
+			if (cnExpr) decl.extraClassNames.push({ expr: cnExpr });
+		}
+	};
 	/**
 	* Try to convert an identity prop with a finite string union type into static variant
 	* buckets. Returns true if the optimization applied and the caller should `continue`.
@@ -22371,7 +22483,7 @@ function handleInterpolatedDeclaration(args) {
 	};
 	const maybeEmitPreservedRuntimeCallOverride = (args) => {
 		const { resolveCallResult, originalExpr, loc } = args;
-		if (!resolveCallResult?.preserveRuntimeCall) return "not-requested";
+		if (!resolveCallResult || !("preserveRuntimeCall" in resolveCallResult) || !resolveCallResult.preserveRuntimeCall) return "not-requested";
 		if (!d.property) {
 			warnings.push({
 				severity: "error",
@@ -22861,10 +22973,16 @@ function handleInterpolatedDeclaration(args) {
 				expr: exprAst,
 				afterBase: hasStaticPropsBefore
 			});
+			if (res.extraClassNames) collectExtraClassNames(res.extraClassNames);
 			notifyResolvedStylesArg();
 			decl.needsWrapperComponent = true;
 			continue;
 		}
+		if (res && res.type === "resolvedClassNames") {
+			collectExtraClassNames(res.extraClassNames);
+			decl.needsWrapperComponent = true;
+			continue;
+		}
 		if (res && res.type === "resolvedDirectional") {
 			let directionalFailed = false;
 			for (const entry of res.directional) {
@@ -22973,6 +23091,14 @@ function handleInterpolatedDeclaration(args) {
 			continue;
 		}
 		if (res && res.type === "splitThemeBooleanWithInlineStyleFallback") {
+			if (pseudos?.length || media || pseudoElement) {
+				bail = true;
+				continue;
+			}
+			if (isCssShorthandProperty(res.cssProp)) {
+				bail = true;
+				continue;
+			}
 			addResolverImports(res.resolvedImports);
 			if (!decl.needsUseThemeHook) decl.needsUseThemeHook = [];
 			if (!decl.needsUseThemeHook.some((e) => e.themeProp === res.themeProp)) decl.needsUseThemeHook.push({
@@ -27514,15 +27640,22 @@ function rewriteJsxStep(ctx) {
 				styleAttr = null;
 			}
 			if (promotedMerge) styleAttr = null;
-			const needsMerge = classNameAttr !== null || styleAttr !== null;
+			const extraClassNameExpr = decl.extraClassNames && decl.extraClassNames.length > 0 ? buildExtraClassNameExpr(j, decl.extraClassNames) : void 0;
 			const isIntrinsicTag = /^[a-z]/.test(finalTag) && !finalTag.includes(".");
-			const stylexAttr = ctx.adapter.useSxProp && !needsMerge && isIntrinsicTag ? (() => {
+			let effectiveClassNameAttr = classNameAttr;
+			if (extraClassNameExpr && !ctx.adapter.useSxProp) effectiveClassNameAttr = j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(extraClassNameExpr));
+			const needsMerge = effectiveClassNameAttr !== null || styleAttr !== null;
+			const useSxProp = ctx.adapter.useSxProp && !needsMerge && isIntrinsicTag;
+			const stylexAttr = useSxProp ? (() => {
 				const sxExpr = styleArgs.length === 1 && styleArgs[0] ? styleArgs[0] : j.arrayExpression([...styleArgs]);
 				return j.jsxAttribute(j.jsxIdentifier("sx"), j.jsxExpressionContainer(sxExpr));
-			})() : j.jsxSpreadAttribute(needsMerge ? buildInlineMergeCall(j, styleArgs, classNameAttr, styleAttr, ctx.adapter.styleMerger?.functionName) : j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("props")), [...styleArgs]));
+			})() : j.jsxSpreadAttribute(needsMerge ? buildInlineMergeCall(j, styleArgs, effectiveClassNameAttr, styleAttr, ctx.adapter.styleMerger?.functionName) : j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("props")), [...styleArgs]));
+			const extraClassNameAttrs = [];
+			if (extraClassNameExpr && useSxProp) extraClassNameAttrs.push(j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(extraClassNameExpr)));
 			const finalRest = [
 				...keptRestAfterVariants.slice(0, finalInsertIndex),
 				stylexAttr,
+				...extraClassNameAttrs,
 				...keptRestAfterVariants.slice(finalInsertIndex)
 			];
 			opening.attributes = [
@@ -27575,6 +27708,25 @@ function extractJsxAttrValueExpr(j, attr) {
 	if (a.value.type === "JSXExpressionContainer") return a.value.expression;
 }
 /**
+* Builds a single expression from extra className entries (CSS module classes).
+* Single entry: returns the expression directly.
+* Multiple entries: joins with a template literal `${a} ${b}`.
+*/
+function buildExtraClassNameExpr(j, extraClassNames) {
+	const exprs = extraClassNames.map((cn) => cn.expr);
+	if (exprs.length === 1 && exprs[0]) return exprs[0];
+	const qs = [];
+	for (let i = 0; i <= exprs.length; i++) {
+		const isLast = i === exprs.length;
+		const raw = i === 0 || isLast ? "" : " ";
+		qs.push(j.templateElement({
+			raw,
+			cooked: raw
+		}, isLast));
+	}
+	return j.templateLiteral(qs, exprs);
+}
+/**
 * Finds the combined style key matching the consumed props at a JSX call site.
 * Returns the style key if a matching combination exists, or undefined otherwise.
 */

package/package.json

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