styled-components-to-stylex-codemod 0.0.33 → 0.0.34

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { a as defineAdapter, i as AdapterInput, t as CollectedWarning } from "./logger-C-Mherh5.mjs";
+import { a as ImportSource, i as AdapterInput, o as MarkerFileContext, s as defineAdapter, t as CollectedWarning } from "./logger-xD1SimCA.mjs";
 
 //#region src/run.d.ts
 interface RunTransformOptions {
@@ -107,4 +107,4 @@ interface RunTransformResult {
  */
 declare function runTransform(options: RunTransformOptions): Promise<RunTransformResult>;
 //#endregion
-export { type AdapterInput, defineAdapter, runTransform };
+export { type AdapterInput, type ImportSource, type MarkerFileContext, defineAdapter, runTransform };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { a as assertValidAdapterInput, n as defineAdapter, o as describeValue } from "./adapter-Cu-LRuPc.mjs";
+import { o as assertValidAdapterInput, r as defineAdapter, s as describeValue, t as mergeMarkerDeclarations } from "./merge-markers-B58_cRdA.mjs";
 import { t as Logger } from "./logger-C2O81VeU.mjs";
 import { run } from "jscodeshift/src/Runner.js";
 import { fileURLToPath } from "node:url";
@@ -204,7 +204,8 @@ async function runTransform(options) {
 		resolveCall: resolveCallWithLogging,
 		resolveSelector: resolveSelectorWithLogging,
 		resolveBaseComponent: adapterInput.resolveBaseComponent ? resolveBaseComponentWithLogging : void 0,
-		resolveThemeCall: resolvedAdapter.resolveThemeCall
+		resolveThemeCall: resolvedAdapter.resolveThemeCall,
+		markerFile: resolvedAdapter.markerFile
 	};
 	const transformPath = (() => {
 		const adjacent = join(__dirname, "transform.mjs");
@@ -307,10 +308,6 @@ function createAutoPrepassFailureError(err, consumerPatterns, parser) {
 /**
 * Merge new sidecar marker content into an existing .stylex.ts file, preserving
 * user-owned exports (e.g. defineVars). If the file doesn't exist, returns content as-is.
-*
-* New marker declarations (`export const XMarker = stylex.defineMarker()`) are
-* appended only if they don't already exist in the file. The stylex import is
-* ensured at the top.
 */
 function mergeSidecarContent(sidecarPath, newContent) {
 	let existing;
@@ -319,17 +316,7 @@ function mergeSidecarContent(sidecarPath, newContent) {
 	} catch {
 		return newContent;
 	}
-	const markerLineRe = /^export const \w+ = stylex\.defineMarker\(\);$/gm;
-	const newMarkers = [];
-	for (const m of newContent.matchAll(markerLineRe)) newMarkers.push(m[0]);
-	if (newMarkers.length === 0) return newContent;
-	const markersToAdd = newMarkers.filter((line) => !existing.includes(line));
-	if (markersToAdd.length === 0) return existing;
-	let merged = existing;
-	if (!merged.includes("@stylexjs/stylex")) merged = `import * as stylex from "@stylexjs/stylex";\n\n${merged}`;
-	const trailingNewline = merged.endsWith("\n") ? "" : "\n";
-	merged = merged + trailingNewline + markersToAdd.join("\n") + "\n";
-	return merged;
+	return mergeMarkerDeclarations(existing, newContent);
 }
 /** Run formatter commands on a list of files, logging warnings on failure. */
 async function runFormatters(commands, files) {

package/dist/{logger-C-Mherh5.d.mts → logger-xD1SimCA.d.mts}

@@ -500,6 +500,10 @@ type ExternalInterfaceResult = {
   elementProps?: boolean; /** Whether cross-file consumers use JSX spread ({...props}) */
   spreadProps?: boolean;
 };
+interface MarkerFileContext {
+  /** Absolute path of the file being transformed */
+  filePath: string;
+}
 /**
  * Configuration for a custom style merger function that combines stylex.props()
  * results with external className/style props.
@@ -659,6 +663,22 @@ interface Adapter {
    * @default false
    */
   usePhysicalProperties?: boolean;
+  /**
+   * Optional function to customize where marker sidecar files (`stylex.defineMarker()`)
+   * are written. By default, markers are placed in a `.stylex.ts` file next to the source.
+   *
+   * When provided, the function receives the source file path and returns an `ImportSource`
+   * that determines both the import path in the transformed file and the file path where
+   * markers are written.
+   *
+   * Example:
+   * ```typescript
+   * markerFile(ctx) {
+   *   return { kind: "absolutePath", value: "/path/to/shared/markers.stylex.ts" };
+   * }
+   * ```
+   */
+  markerFile?: (context: MarkerFileContext) => ImportSource;
 }
 /**
  * User-facing adapter input type accepted by `defineAdapter()`.
@@ -686,6 +706,7 @@ interface AdapterInput {
   themeHook?: Adapter["themeHook"];
   useSxProp: Adapter["useSxProp"];
   usePhysicalProperties?: Adapter["usePhysicalProperties"];
+  markerFile?: Adapter["markerFile"];
 }
 /**
  * Helper for nicer user authoring + type inference.
@@ -777,4 +798,4 @@ interface CollectedWarning extends WarningLog {
   filePath: string;
 }
 //#endregion
-export { defineAdapter as a, AdapterInput as i, WarningLog as n, Adapter as r, CollectedWarning as t };
+export { ImportSource as a, AdapterInput as i, WarningLog as n, MarkerFileContext as o, Adapter as r, defineAdapter as s, CollectedWarning as t };

package/dist/{adapter-Cu-LRuPc.mjs → merge-markers-B58_cRdA.mjs}

@@ -133,6 +133,14 @@ function assertAdapterShape(candidate, where, allowAutoExtIf) {
 			absolutePathExample: "/path/to/module.ts"
 		});
 	}
+	const markerFile = obj?.markerFile;
+	if (markerFile !== void 0 && markerFile !== null && typeof markerFile !== "function") throw new Error([
+		`${where}: adapter.markerFile must be a function when provided.`,
+		`Received: markerFile=${describeValue(markerFile)}`,
+		"",
+		"Expected signature:",
+		"  markerFile(ctx: { filePath: string }) => { kind: \"specifier\" | \"absolutePath\", value: string }"
+	].join("\n"));
 	const themeHook = obj?.themeHook;
 	if (themeHook !== null && themeHook !== void 0) {
 		if (typeof themeHook !== "object") throw new Error([
@@ -269,4 +277,33 @@ function defineAdapter(adapter) {
 	return adapter;
 }
 //#endregion
-export { assertValidAdapterInput as a, assertValidAdapter as i, defineAdapter as n, describeValue as o, isDirectionalResult as r, DEFAULT_THEME_HOOK as t };
+//#region src/internal/merge-markers.ts
+/**
+* Shared utility for merging marker sidecar content.
+* Core concepts: deduplication of defineMarker declarations across files.
+*/
+/** Regex matching a marker block: optional JSDoc comment followed by the export line. */
+const MARKER_BLOCK_RE = /(?:\/\*\*[^]*?\*\/\n)?export const \w+ = stylex\.defineMarker\(\);/gm;
+/** Regex matching just the export line (used for dedup checks). */
+const MARKER_EXPORT_RE = /^export const \w+ = stylex\.defineMarker\(\);$/gm;
+/**
+* Merge marker declarations from `incoming` into `base`, appending only new
+* marker blocks (JSDoc + export). Returns `base` unchanged if all markers already exist.
+*/
+function mergeMarkerDeclarations(base, incoming) {
+	const incomingExports = [...incoming.matchAll(MARKER_EXPORT_RE)].map((m) => m[0]);
+	if (incomingExports.length === 0) return base;
+	const newExportLines = incomingExports.filter((line) => !base.includes(line));
+	if (newExportLines.length === 0) return base;
+	const newExportSet = new Set(newExportLines);
+	const blocksToAdd = [...incoming.matchAll(MARKER_BLOCK_RE)].map((m) => m[0]).filter((block) => {
+		const exportLine = block.match(MARKER_EXPORT_RE);
+		return exportLine && newExportSet.has(exportLine[0]);
+	});
+	if (blocksToAdd.length === 0) return base;
+	let merged = base;
+	if (!merged.includes("@stylexjs/stylex")) merged = `import * as stylex from "@stylexjs/stylex";\n\n${merged}`;
+	return merged.trimEnd() + "\n\n" + blocksToAdd.join("\n\n") + "\n";
+}
+//#endregion
+export { assertValidAdapter as a, isDirectionalResult as i, DEFAULT_THEME_HOOK as n, assertValidAdapterInput as o, defineAdapter as r, describeValue as s, mergeMarkerDeclarations as t };

package/dist/transform.d.mts

@@ -1,4 +1,4 @@
-import { n as WarningLog, r as Adapter } from "./logger-C-Mherh5.mjs";
+import { n as WarningLog, r as Adapter } from "./logger-xD1SimCA.mjs";
 import { API, FileInfo, Options } from "jscodeshift";
 
 //#region src/internal/transform-types.d.ts
@@ -10,6 +10,8 @@ interface TransformResult {
   warnings: WarningLog[];
   /** Content for the sidecar .stylex.ts file (defineMarker declarations). Undefined when no markers needed. */
   sidecarContent?: string;
+  /** Absolute file path for the sidecar file, when adapter.markerFile provides a custom location. */
+  sidecarFilePath?: string;
   /** Bridge components emitted for unconverted consumer selectors. */
   bridgeResults?: BridgeComponentResult[];
   /** Transient prop renames for exported components, keyed by export name. */

package/dist/transform.mjs

@@ -1,9 +1,9 @@
-import { i as assertValidAdapter, r as isDirectionalResult, t as DEFAULT_THEME_HOOK } from "./adapter-Cu-LRuPc.mjs";
+import { a as assertValidAdapter, i as isDirectionalResult, n as DEFAULT_THEME_HOOK, t as mergeMarkerDeclarations } from "./merge-markers-B58_cRdA.mjs";
 import { t as Logger } from "./logger-C2O81VeU.mjs";
 import { a as isValidIdentifierName, c as lowerFirst, i as isPrettierIgnoreComment, l as normalizeWhitespace, n as escapeRegex, o as kebabToCamelCase, r as isBackgroundImageValue, s as looksLikeLength, t as capitalize, u as sanitizeIdentifier } from "./string-utils-5EMAWj3q.mjs";
 import { n as parseStyledTemplateLiteral, t as PLACEHOLDER_RE } from "./styled-css-C3QKH6Od.mjs";
 import { t as toRealPath } from "./path-utils-BlOXGcCF.mjs";
-import path, { basename, dirname, isAbsolute, join, resolve } from "node:path";
+import path, { basename, dirname, isAbsolute, join, relative, resolve, sep } from "node:path";
 import { existsSync, readFileSync, realpathSync } from "node:fs";
 import valueParser from "postcss-value-parser";
 import { compile } from "stylis";
@@ -1412,6 +1412,8 @@ var TransformContext = class {
 	ancestorAttrsByStyleKey;
 	/** Content for the sidecar .stylex.ts file (defineMarker declarations), populated by emitStylesStep */
 	sidecarStylexContent;
+	/** Absolute file path for the sidecar file, when adapter.markerFile provides a custom location */
+	sidecarFilePath;
 	/** Bridge components emitted for unconverted consumer selectors. */
 	bridgeResults;
 	/** Transient prop renames for exported components (for consumer patching). */
@@ -4973,7 +4975,13 @@ function collectStyledDefaultImportLocalNames(styledImports) {
 	const styledLocalNames = /* @__PURE__ */ new Set();
 	styledImports.forEach((imp) => {
 		const specs = imp.node.specifiers ?? [];
-		for (const spec of specs) if (spec.type === "ImportDefaultSpecifier" && spec.local?.type === "Identifier") styledLocalNames.add(spec.local.name);
+		for (const spec of specs) {
+			if (spec.type === "ImportDefaultSpecifier" && spec.local?.type === "Identifier") {
+				styledLocalNames.add(spec.local.name);
+				continue;
+			}
+			if (spec.type === "ImportSpecifier" && spec.imported?.type === "Identifier" && spec.imported.name === "styled" && spec.local?.type === "Identifier") styledLocalNames.add(spec.local.name);
+		}
 	});
 	return styledLocalNames;
 }
@@ -7202,7 +7210,8 @@ function collectStyledDeclsStep(ctx) {
 	const { styledImports, root, j, cssLocal } = ctx;
 	if (!styledImports) return CONTINUE;
 	const styledDefaultSpecifier = styledImports.find(j.ImportDefaultSpecifier).nodes()[0];
-	const styledDefaultImport = styledDefaultSpecifier?.local?.type === "Identifier" ? styledDefaultSpecifier.local.name : void 0;
+	const namedStyledSpecifier = !styledDefaultSpecifier ? styledImports.find(j.ImportSpecifier).filter((p) => p.node.imported?.type === "Identifier" && p.node.imported.name === "styled").nodes()[0] : void 0;
+	const styledDefaultImport = styledDefaultSpecifier?.local?.type === "Identifier" ? styledDefaultSpecifier.local.name : namedStyledSpecifier?.local?.type === "Identifier" ? namedStyledSpecifier.local.name : void 0;
 	ctx.styledDefaultImport = styledDefaultImport;
 	if (extractStyledCallArgs({
 		root,
@@ -7708,18 +7717,20 @@ function tryHandleAnimation(args) {
 			timeSlots.sort((a, b) => a.originalIndex - b.originalIndex);
 			for (let i = tokens.length - 1; i >= 0; i--) if (INTERPOLATED_TIME_RE.test(tokens[i])) tokens.splice(i, 1);
 			const classified = classifyAnimationTokens(tokens);
-			classified.duration = null;
-			classified.delay = null;
+			let durationValue = null;
+			let delayValue = null;
 			for (let i = 0; i < timeSlots.length && i < 2; i++) {
 				const slot = timeSlots[i];
 				const longhand = i === 0 ? "animationDuration" : "animationDelay";
-				if (slot.kind === "static") if (longhand === "animationDuration") classified.duration = slot.value;
-				else classified.delay = slot.value;
+				if (slot.kind === "static") if (longhand === "animationDuration") durationValue = slot.value;
+				else delayValue = slot.value;
 				else {
+					const expr = decl.templateExpressions[slot.slotId];
 					const fallbackValue = computeInterpolatedTimeFallback(decl, slot.slotId, slot.unit);
-					if (longhand === "animationDuration") classified.duration = fallbackValue ?? `0${slot.unit}`;
-					else classified.delay = fallbackValue ?? `0${slot.unit}`;
-					interpolatedAnimTimes.push({
+					const timeValue = buildInterpolatedTimeExpression(j, decl, slot.slotId, slot.unit) ?? fallbackValue ?? `0${slot.unit}`;
+					if (longhand === "animationDuration") durationValue = timeValue;
+					else delayValue = timeValue;
+					if (expr?.type === "ArrowFunctionExpression") interpolatedAnimTimes.push({
 						slotId: slot.slotId,
 						unit: slot.unit,
 						longhand,
@@ -7728,8 +7739,8 @@ function tryHandleAnimation(args) {
 					});
 				}
 			}
-			durations.push(classified.duration);
-			delays.push(classified.delay);
+			durations.push(durationValue);
+			delays.push(delayValue);
 			timings.push(classified.timing);
 			directions.push(classified.direction);
 			fillModes.push(classified.fillMode);
@@ -7748,7 +7759,7 @@ function tryHandleAnimation(args) {
 		if (animNames.length === 1 && firstAnim && firstAnim.kind === "ident") applyProp("animationName", j.identifier(firstAnim.name), null);
 		else applyProp("animationName", buildCommaTemplate(animNames), null);
 		const anyValues = (values) => values.some((value) => value !== null);
-		const joinWithDefaults = (values, fallback) => values.map((value) => value ?? fallback).join(", ");
+		const joinWithDefaults = (values, fallback) => buildCommaSeparatedValues(j, values, fallback);
 		if (anyValues(durations)) applyProp("animationDuration", joinWithDefaults(durations, "0s"), null);
 		if (anyValues(timings)) applyProp("animationTimingFunction", joinWithDefaults(timings, "ease"), null);
 		if (anyValues(delays)) applyProp("animationDelay", joinWithDefaults(delays, "0s"), null);
@@ -7762,6 +7773,36 @@ function tryHandleAnimation(args) {
 	}
 	return false;
 }
+function buildCommaSeparatedValues(j, values, fallback) {
+	const parts = values.map((value) => value ?? fallback);
+	if (parts.length === 1) {
+		const first = parts[0];
+		return typeof first === "string" ? first : cloneAstNode(first);
+	}
+	const quasis = [];
+	const exprs = [];
+	let text = "";
+	for (let i = 0; i < parts.length; i++) {
+		if (i > 0) text += ", ";
+		const part = parts[i];
+		if (typeof part === "string") {
+			text += part;
+			continue;
+		}
+		quasis.push(j.templateElement({
+			raw: text,
+			cooked: text
+		}, false));
+		exprs.push(cloneAstNode(part));
+		text = "";
+	}
+	if (exprs.length === 0) return text;
+	quasis.push(j.templateElement({
+		raw: text,
+		cooked: text
+	}, true));
+	return j.templateLiteral(quasis, exprs);
+}
 /** Matches placeholder tokens with optional time unit suffix (e.g., `__SC_EXPR_1__ms`). */
 const INTERPOLATED_TIME_RE = /^__SC_EXPR_(\d+)__(ms|s)$/;
 /** Matches any placeholder token (with or without suffix) to exclude from timeline detection. */
@@ -7780,6 +7821,13 @@ function computeInterpolatedTimeFallback(decl, slotId, unit) {
 	}
 	return null;
 }
+function buildInterpolatedTimeExpression(j, decl, slotId, unit) {
+	const expr = decl.templateExpressions[slotId];
+	if (!expr || expr.type === "ArrowFunctionExpression") return null;
+	const staticVal = literalToStaticValue(expr);
+	if (staticVal !== null) return j.stringLiteral(`${staticVal}${unit}`);
+	return buildTemplateWithStaticParts(j, cloneAstNode(expr), "", unit);
+}
 /**
 * Emits dynamic style functions for interpolated animation time tokens.
 * For each interpolated token, creates a style function like:
@@ -7873,8 +7921,20 @@ function buildMultiAnimationCallArg(j, interpSegments, valuesList, defaultFallba
 			}, false));
 			exprs.push(interp.expr);
 			prefix = interp.unit;
-		} else prefix += valuesList[i] ?? defaultFallback;
+		} else {
+			const value = valuesList[i] ?? defaultFallback;
+			if (typeof value === "string") prefix += value;
+			else {
+				quasis.push(j.templateElement({
+					raw: prefix,
+					cooked: prefix
+				}, false));
+				exprs.push(cloneAstNode(value));
+				prefix = "";
+			}
+		}
 	}
+	if (exprs.length === 0) return prefix;
 	quasis.push(j.templateElement({
 		raw: prefix,
 		cooked: prefix
@@ -7887,10 +7947,19 @@ function convertStyledKeyframes(args) {
 	return convertStyledKeyframesImpl(args);
 }
 function parseKeyframesTemplate(args) {
-	const { template } = args;
+	const { template, j, scopePath } = args;
 	if (!template || template.type !== "TemplateLiteral") return null;
-	if ((template.expressions?.length ?? 0) > 0) return null;
-	const ast = compile(`@keyframes __SC_KEYFRAMES__ { ${(template.quasis ?? []).map((q) => q.value?.raw ?? "").join("")} }`);
+	const slotExprById = /* @__PURE__ */ new Map();
+	for (let i = 0; i < (template.expressions?.length ?? 0); i++) {
+		const expr = template.expressions[i];
+		if (!expr) return null;
+		if (!isStaticSafeKeyframesSlotExpression(expr, scopePath)) return null;
+		slotExprById.set(i, expr);
+	}
+	const ast = compile(`@keyframes __SC_KEYFRAMES__ { ${(template.quasis ?? []).map((q, i) => {
+		const raw = q.value?.raw ?? "";
+		return i < (template.expressions?.length ?? 0) ? `${raw}__SC_EXPR_${i}__` : raw;
+	}).join("")} }`);
 	const frames = {};
 	const visit = (node) => {
 		if (!node) return;
@@ -7911,7 +7980,10 @@ function parseKeyframesTemplate(args) {
 				const propRaw = typeof c.props === "string" && c.props ? c.props : typeof c.value === "string" && c.value.includes(":") ? (c.value.split(":")[0] ?? "").trim() : "";
 				const valueRaw = typeof c.children === "string" ? c.children.trim() : typeof c.value === "string" && c.value.includes(":") ? c.value.split(":").slice(1).join(":").replace(/;$/, "").trim() : "";
 				if (!propRaw) continue;
-				applyStaticDeclsToStyleObj(styleObj, propRaw.trim(), valueRaw);
+				applyStaticDeclsToStyleObj(styleObj, propRaw.trim(), valueRaw, {
+					j,
+					slotExprById
+				});
 			}
 			frames[frameKey] = styleObj;
 			return;
@@ -7931,7 +8003,11 @@ function convertStyledKeyframesImpl(args) {
 		if (p.node.id.type !== "Identifier") return;
 		const localName = p.node.id.name;
 		const template = init?.quasi;
-		const frames = parseKeyframesTemplate({ template });
+		const frames = parseKeyframesTemplate({
+			template,
+			j,
+			scopePath: p
+		});
 		if (!frames) return;
 		p.node.init = j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("keyframes")), [objectToAst(j, frames)]);
 		keyframesNames.add(localName);
@@ -7996,7 +8072,7 @@ function extractInlineKeyframes(rules) {
 * Expands static CSS declarations into a style object via cssDeclarationToStylexDeclarations.
 * Handles shorthand expansion and coerces numeric strings to numbers.
 */
-function applyStaticDeclsToStyleObj(styleObj, property, valueRaw) {
+function applyStaticDeclsToStyleObj(styleObj, property, valueRaw, options) {
 	for (const out of cssDeclarationToStylexDeclarations({
 		property,
 		value: {
@@ -8007,9 +8083,91 @@ function applyStaticDeclsToStyleObj(styleObj, property, valueRaw) {
 		valueRaw
 	})) if (out.value.kind === "static") {
 		const v = out.value.value.trim();
+		const exprValue = resolvePlaceholderValueToAst(v, options);
+		if (exprValue) {
+			styleObj[out.prop] = exprValue;
+			continue;
+		}
 		styleObj[out.prop] = /^-?\d*\.?\d+$/.test(v) ? Number(v) : v;
 	}
 }
+function resolvePlaceholderValueToAst(value, options) {
+	const j = options?.j;
+	const slotExprById = options?.slotExprById;
+	if (!j || !slotExprById || !/__SC_EXPR_\d+__/.test(value)) return null;
+	const placeholderRe = /__SC_EXPR_(\d+)__/g;
+	const quasis = [];
+	const exprs = [];
+	let lastIndex = 0;
+	let match;
+	while (match = placeholderRe.exec(value)) {
+		const expr = slotExprById.get(Number(match[1]));
+		if (!expr) return null;
+		const prefix = value.slice(lastIndex, match.index);
+		quasis.push(j.templateElement({
+			raw: prefix,
+			cooked: prefix
+		}, false));
+		exprs.push(cloneAstNode(expr));
+		lastIndex = match.index + match[0].length;
+	}
+	if (exprs.length === 0) return null;
+	const suffix = value.slice(lastIndex);
+	quasis.push(j.templateElement({
+		raw: suffix,
+		cooked: suffix
+	}, true));
+	if (quasis.length === 2 && quasis[0].value.raw === "" && quasis[1].value.raw === "") return exprs[0];
+	return j.templateLiteral(quasis, exprs);
+}
+function isStaticSafeKeyframesSlotExpression(expr, scopePath, seenIdentifiers = /* @__PURE__ */ new Set()) {
+	if (isFunctionLikeExpression(expr)) return false;
+	const staticValue = literalToStaticValue(expr);
+	if (staticValue !== null) return typeof staticValue === "string" || typeof staticValue === "number";
+	if (expr.type === "Identifier") return isStaticSafeIdentifierBinding(expr.name, scopePath, seenIdentifiers);
+	if (expr.type === "UnaryExpression") return isStaticSafeKeyframesSlotExpression(expr.argument, scopePath, seenIdentifiers);
+	if (expr.type === "BinaryExpression" || expr.type === "LogicalExpression") return isStaticSafeKeyframesSlotExpression(expr.left, scopePath, seenIdentifiers) && isStaticSafeKeyframesSlotExpression(expr.right, scopePath, seenIdentifiers);
+	if (expr.type === "ConditionalExpression") return isStaticSafeKeyframesSlotExpression(expr.test, scopePath, seenIdentifiers) && isStaticSafeKeyframesSlotExpression(expr.consequent, scopePath, seenIdentifiers) && isStaticSafeKeyframesSlotExpression(expr.alternate, scopePath, seenIdentifiers);
+	if (expr.type === "TemplateLiteral") return expr.expressions.every((slotExpr) => isStaticSafeKeyframesSlotExpression(slotExpr, scopePath, seenIdentifiers));
+	if (expr.type === "ParenthesizedExpression") return isStaticSafeKeyframesSlotExpression(expr.expression, scopePath, seenIdentifiers);
+	if (expr.type === "TSAsExpression" || expr.type === "TSTypeAssertion" || expr.type === "TSSatisfiesExpression") return isStaticSafeKeyframesSlotExpression(expr.expression, scopePath, seenIdentifiers);
+	return false;
+}
+function isFunctionLikeExpression(expr) {
+	return expr.type === "ArrowFunctionExpression" || expr.type === "FunctionExpression";
+}
+function isStaticSafeIdentifierBinding(name, scopePath, seenIdentifiers) {
+	if (seenIdentifiers.has(name)) return false;
+	seenIdentifiers.add(name);
+	const scope = scopePath.scope?.lookup?.(name);
+	if (!scope || typeof scope.getBindings !== "function") {
+		seenIdentifiers.delete(name);
+		return false;
+	}
+	const refs = scope.getBindings()?.[name];
+	if (!Array.isArray(refs) || refs.length !== 1) {
+		seenIdentifiers.delete(name);
+		return false;
+	}
+	const idPath = refs[0];
+	const declarator = idPath?.parent?.value;
+	if (!declarator || declarator.type !== "VariableDeclarator" || declarator.id !== idPath.value) {
+		seenIdentifiers.delete(name);
+		return false;
+	}
+	const declaration = idPath?.parent?.parent?.value;
+	if (!declaration || declaration.type !== "VariableDeclaration" || declaration.kind !== "const") {
+		seenIdentifiers.delete(name);
+		return false;
+	}
+	if (!declarator.init) {
+		seenIdentifiers.delete(name);
+		return false;
+	}
+	const isStatic = isStaticSafeKeyframesSlotExpression(declarator.init, scopePath, seenIdentifiers);
+	seenIdentifiers.delete(name);
+	return isStatic;
+}
 /**
 * Expands a static `animation` shorthand value into longhand properties,
 * replacing the animation name with a keyframes identifier when it matches
@@ -10031,14 +10189,37 @@ function emitStylesStep(ctx) {
 function emitDefineMarkerDeclarations(ctx, crossFileMarkers) {
 	const j = ctx.j;
 	const markerNames = [...crossFileMarkers.values()];
-	ctx.sidecarStylexContent = `import * as stylex from "@stylexjs/stylex";\n\n${markerNames.map((name) => `export const ${name} = stylex.defineMarker();`).join("\n")}\n`;
-	const sidecarImportPath = `./${basename(ctx.file.path).replace(/\.\w+$/, "")}.stylex`;
+	ctx.sidecarStylexContent = `import * as stylex from "@stylexjs/stylex";\n\n${markerNames.map((name) => {
+		return `/** Custom marker for ${name.replace(/Marker$/, "")} */\nexport const ${name} = stylex.defineMarker();`;
+	}).join("\n\n")}\n`;
+	let sidecarImportPath;
+	const adapterMarkerFile = ctx.adapter.markerFile;
+	if (adapterMarkerFile) {
+		const importSource = adapterMarkerFile({ filePath: ctx.file.path });
+		sidecarImportPath = importSourceToModuleSpecifier(importSource, ctx.file.path);
+		ctx.sidecarFilePath = importSourceToAbsolutePath(importSource, ctx.file.path);
+	} else sidecarImportPath = `./${basename(ctx.file.path).replace(/\.\w+$/, "")}.stylex`;
 	const importDecl = j.importDeclaration(markerNames.map((name) => j.importSpecifier(j.identifier(name))), j.literal(sidecarImportPath));
 	const programBody = ctx.root.get().node.program.body;
 	const lastImportIdx = programBody.reduce((last, node, i) => node?.type === "ImportDeclaration" ? i : last, -1);
 	const insertAt = lastImportIdx >= 0 ? lastImportIdx + 1 : 0;
 	programBody.splice(insertAt, 0, importDecl);
 }
+/** Convert an ImportSource to a module specifier string for use in import declarations. */
+function importSourceToModuleSpecifier(source, filePath) {
+	if (source.kind === "specifier") return source.value;
+	let rel = relative(dirname(filePath), source.value).split(sep).join("/");
+	rel = rel.replace(/\.tsx?$/, "");
+	if (!rel.startsWith(".")) rel = `./${rel}`;
+	return rel;
+}
+/** Resolve an ImportSource to an absolute file path for writing the sidecar file. */
+function importSourceToAbsolutePath(source, filePath) {
+	if (source.kind === "absolutePath") return source.value;
+	let resolved = join(dirname(filePath), source.value);
+	if (!/\.[jt]sx?$/.test(resolved)) resolved += ".ts";
+	return resolved;
+}
 //#endregion
 //#region src/internal/transform-steps/emit-bridge-exports.ts
 /**
@@ -14960,6 +15141,7 @@ function finalize(ctx) {
 		code,
 		warnings: ctx.warnings,
 		sidecarContent: ctx.sidecarStylexContent,
+		sidecarFilePath: ctx.sidecarFilePath,
 		bridgeResults: ctx.bridgeResults,
 		transientPropRenames: ctx.transientPropRenames
 	};
@@ -15940,6 +16122,15 @@ function createCssHelperResolver(args) {
 		}
 		return null;
 	};
+	/**
+	* Extracts the theme path from a ternary test that accesses `props.theme.*`.
+	* e.g., `props.theme.isDark` → "isDark", `props.theme.mode` → "mode"
+	*/
+	const extractThemePathFromCondTest = (test, paramName) => {
+		if (!test || !paramName) return null;
+		const path = getMemberPathFromIdentifier(test, paramName);
+		return path && path[0] === "theme" && path.length > 1 ? path.slice(1).join(".") : null;
+	};
 	const resolveCssHelperTemplate = (template, paramName, loc) => {
 		const bail = (type, context, exprLoc) => {
 			warnings.push({
@@ -16078,6 +16269,38 @@ function createCssHelperResolver(args) {
 					return bail("Conditional `css` block: failed to parse expression", { property: d.property }, exprLoc);
 				}
 				const resolved = resolveHelperExprToAst(expr, paramName);
+				if (!resolved && expr.type === "ConditionalExpression") {
+					const ternaryExpr = expr;
+					const themePath = extractThemePathFromCondTest(ternaryExpr.test, paramName);
+					if (themePath) {
+						const consResolved = resolveTernaryBranchToAst(ternaryExpr.consequent);
+						const altResolved = resolveTernaryBranchToAst(ternaryExpr.alternate);
+						if (consResolved && altResolved) {
+							const buildVariantStyle = (branchResolved) => {
+								const variantStyle = {};
+								for (const mapped of cssDeclarationToStylexDeclarations(d)) if (hasStaticParts) {
+									const { prefix, suffix } = extractPrefixSuffix(parts);
+									const ast = parseExpr(wrapExprWithStaticParts(branchResolved.exprString, prefix, suffix));
+									if (ast) variantStyle[mapped.prop] = mergeIntoContext(ast, mapped.prop, target);
+								} else variantStyle[mapped.prop] = mergeIntoContext(branchResolved.ast, mapped.prop, target);
+								return variantStyle;
+							};
+							const consStyle = buildVariantStyle(consResolved);
+							const altStyle = buildVariantStyle(altResolved);
+							conditionalVariants.push({
+								when: `theme.${themePath}`,
+								propName: "",
+								style: consStyle
+							});
+							conditionalVariants.push({
+								when: `!theme.${themePath}`,
+								propName: "",
+								style: altStyle
+							});
+							continue;
+						}
+					}
+				}
 				if (!resolved && hasThemeAccessInExpr(expr, paramName)) return bail("Conditional `css` block: failed to parse expression", { property: d.property }, exprLoc);
 				if (resolved) if (hasStaticParts) {
 					const { prefix, suffix } = extractPrefixSuffix(parts);
@@ -19767,6 +19990,24 @@ function createCssHelperConditionalHandler(ctx) {
 			};
 			return replace(cloned, void 0);
 		};
+		/** Apply conditional variants, composing with an outer condition, and inject useTheme() for theme refs. */
+		const applyConditionalVariantsInline = (conditionalVariants, outerCondition) => {
+			for (const cv of conditionalVariants) {
+				applyVariant({
+					when: `${outerCondition} && ${cv.when}`,
+					propName: cv.propName
+				}, cv.style);
+				if (cv.propName) ensureShouldForwardPropDrop(decl, cv.propName);
+				if (cv.when.startsWith("theme.") || cv.when.startsWith("!theme.")) {
+					if (!decl.needsUseThemeHook) decl.needsUseThemeHook = [];
+					if (!decl.needsUseThemeHook.some((e) => e.trueStyleKey === null && e.falseStyleKey === null)) decl.needsUseThemeHook.push({
+						themeProp: "__variantCondition",
+						trueStyleKey: null,
+						falseStyleKey: null
+					});
+				}
+			}
+		};
 		const resolveCssBranchToInlineMap = (node) => {
 			let tpl = null;
 			if (isCssHelperTaggedTemplate(node)) tpl = node.quasi;
@@ -19911,13 +20152,8 @@ function createCssHelperConditionalHandler(ctx) {
 					}
 				}
 				if (Object.keys(consStyle).length > 0) applyVariant(testInfo, consStyle);
-				for (const cv of conditionalVariants) {
-					applyVariant({
-						when: `${testInfo.when} && ${cv.when}`,
-						propName: cv.propName
-					}, cv.style);
-					ensureShouldForwardPropDrop(decl, cv.propName);
-				}
+				applyConditionalVariantsInline(conditionalVariants, testInfo.when);
+				dropAllTestInfoProps(testInfo);
 				return true;
 			}
 			if (body.right?.type === "StringLiteral" || body.right?.type === "Literal" && typeof body.right.value === "string") {
@@ -20374,15 +20610,7 @@ function createCssHelperConditionalHandler(ctx) {
 			if (!isCssHelperTaggedTemplate(node)) return null;
 			return resolveCssHelperTemplate(node.quasi, paramName, decl.loc);
 		};
-		const applyConditionalVariants = (conditionalVariants, outerCondition) => {
-			for (const cv of conditionalVariants) {
-				applyVariant({
-					when: `${outerCondition} && ${cv.when}`,
-					propName: cv.propName
-				}, cv.style);
-				ensureShouldForwardPropDrop(decl, cv.propName);
-			}
-		};
+		const applyConditionalVariants = applyConditionalVariantsInline;
 		if (consIsCss && altIsCss) {
 			const consResolved = resolveCssBranch(cons);
 			const altResolved = resolveCssBranch(alt);
@@ -27810,7 +28038,13 @@ function preflight(ctx) {
 	const styledLocalNames = /* @__PURE__ */ new Set();
 	styledImports.forEach((imp) => {
 		const specs = imp.node.specifiers ?? [];
-		for (const spec of specs) if (spec.type === "ImportDefaultSpecifier" && spec.local?.type === "Identifier") styledLocalNames.add(spec.local.name);
+		for (const spec of specs) {
+			if (spec.type === "ImportDefaultSpecifier" && spec.local?.type === "Identifier") {
+				styledLocalNames.add(spec.local.name);
+				continue;
+			}
+			if (spec.type === "ImportSpecifier" && spec.imported?.type === "Identifier" && spec.imported.name === "styled" && spec.local?.type === "Identifier") styledLocalNames.add(spec.local.name);
+		}
 	});
 	ctx.styledLocalNames = styledLocalNames;
 	ctx.isStyledTag = (tag) => isStyledTag(styledLocalNames, tag);
@@ -28449,9 +28683,9 @@ function transform(file, api, options) {
 		if (result.sidecarContent) {
 			const sidecarFiles = options.sidecarFiles;
 			if (sidecarFiles) {
-				const dir = dirname(file.path);
-				const fileBase = basename(file.path).replace(/\.\w+$/, "");
-				sidecarFiles.set(join(dir, `${fileBase}.stylex.ts`), result.sidecarContent);
+				const sidecarPath = result.sidecarFilePath ?? join(dirname(file.path), `${basename(file.path).replace(/\.\w+$/, "")}.stylex.ts`);
+				const existing = sidecarFiles.get(sidecarPath);
+				sidecarFiles.set(sidecarPath, existing ? mergeMarkerDeclarations(existing, result.sidecarContent) : result.sidecarContent);
 			}
 		}
 		if (result.bridgeResults && result.bridgeResults.length > 0) {

package/package.json

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