styled-components-to-stylex-codemod 0.0.3 → 0.0.6

package/README.md

@@ -230,10 +230,12 @@ When the codemod encounters an interpolation inside a styled template literal, i
 - theme access (`props.theme...`) via `resolveValue({ kind: "theme", path })`
 - prop access (`props.foo`) and conditionals (`props.foo ? "a" : "b"`, `props.foo && "color: red;"`)
 - simple helper calls (`transitionSpeed("slowTransition")`) via `resolveValue({ kind: "call", calleeImportedName, calleeSource, args, ... })`
+- helper calls applied to prop values (e.g. `shadow(props.shadow)`) by emitting a StyleX style function that calls the helper at runtime
+- conditional CSS blocks via ternary (e.g. `props.$dim ? "opacity: 0.5;" : ""`)
 
 If the pipeline can’t resolve an interpolation:
 
-- for `withConfig({ shouldForwardProp })` wrappers, the transform preserves the value as an inline style so output keeps visual parity
+- for some dynamic value cases, the transform preserves the value as a wrapper inline style so output keeps visual parity (at the cost of using `style={...}` for that prop)
 - otherwise, the declaration containing that interpolation is **dropped** and a warning is produced (manual follow-up required)
 
 ### Limitations

package/dist/index.d.mts

@@ -1,10 +1,5 @@
-import { a as defineAdapter, i as Adapter, r as TransformWarning } from "./transform-types-t2Vk9Bka.mjs";
+import { i as defineAdapter, r as Adapter, t as CollectedWarning } from "./logger-BS4Evg0n.mjs";
 
-//#region src/internal/logger.d.ts
-interface CollectedWarning extends TransformWarning {
-  filePath: string;
-}
-//#endregion
 //#region src/run.d.ts
 interface RunTransformOptions {
   /**

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { a as describeValue, i as assertValidAdapter, n as logWarning, t as flushWarnings } from "./logger-Dhb8r1Ry.mjs";
+import { n as assertValidAdapter, r as describeValue, t as Logger } from "./logger-Dlnt1fYP.mjs";
 import { run } from "jscodeshift/src/Runner.js";
 import { fileURLToPath } from "node:url";
 import { dirname, join } from "node:path";
@@ -69,7 +69,7 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 */
 async function runTransform(options) {
 	if (!options || typeof options !== "object") throw new Error([
-		"[styled-components-to-stylex] runTransform(options) was called with an invalid argument.",
+		"runTransform(options) was called with an invalid argument.",
 		"Expected: runTransform({ files: string | string[], adapter: Adapter, ... })",
 		`Received: ${describeValue(options)}`,
 		"",
@@ -80,14 +80,14 @@ async function runTransform(options) {
 	].join("\n"));
 	const filesValue = options.files;
 	if (typeof filesValue !== "string" && !Array.isArray(filesValue)) throw new Error([
-		"[styled-components-to-stylex] runTransform(options): `files` is required.",
+		"runTransform(options): `files` is required.",
 		"Expected: files: string | string[]",
 		`Received: files=${describeValue(filesValue)}`
 	].join("\n"));
-	if (typeof filesValue === "string" && filesValue.trim() === "") throw new Error(["[styled-components-to-stylex] runTransform(options): `files` must be a non-empty string.", "Example: files: \"src/**/*.tsx\""].join("\n"));
+	if (typeof filesValue === "string" && filesValue.trim() === "") throw new Error(["runTransform(options): `files` must be a non-empty string.", "Example: files: \"src/**/*.tsx\""].join("\n"));
 	if (Array.isArray(filesValue)) {
-		if (filesValue.length === 0) throw new Error(["[styled-components-to-stylex] runTransform(options): `files` must not be an empty array.", "Example: files: [\"src/**/*.ts\", \"src/**/*.tsx\"]"].join("\n"));
-		if (filesValue.find((p) => typeof p !== "string" || p.trim() === "") !== void 0) throw new Error(["[styled-components-to-stylex] runTransform(options): `files` array must contain non-empty strings.", `Received: files=${describeValue(filesValue)}`].join("\n"));
+		if (filesValue.length === 0) throw new Error(["runTransform(options): `files` must not be an empty array.", "Example: files: [\"src/**/*.ts\", \"src/**/*.tsx\"]"].join("\n"));
+		if (filesValue.find((p) => typeof p !== "string" || p.trim() === "") !== void 0) throw new Error(["runTransform(options): `files` array must contain non-empty strings.", `Received: files=${describeValue(filesValue)}`].join("\n"));
 	}
 	const { files, dryRun = false, print = false, parser = "tsx", formatterCommand } = options;
 	const adapter = options.adapter;
@@ -101,9 +101,8 @@ async function runTransform(options) {
 			try {
 				return adapter.resolveValue(ctx);
 			} catch (e) {
-				const kind = ctx?.kind;
-				const details = kind === "theme" ? `path=${String(ctx.path ?? "")}` : kind === "cssVariable" ? `name=${String(ctx.name ?? "")}` : kind === "call" ? `callee=${String(ctx.calleeImportedName ?? "")} source=${String(ctx.calleeSource?.value ?? "")} file=${String(ctx.callSiteFilePath ?? "")}` : "";
-				logWarning(`[styled-components-to-stylex] adapter.resolveValue threw${kind ? ` (kind=${kind}${details ? ` ${details}` : ""})` : ""}: ${e?.stack ?? String(e)}\n`);
+				const msg = `adapter.resolveValue threw an error: ${e instanceof Error ? e.message : String(e)}`;
+				Logger.error(msg, ctx);
 				throw e;
 			}
 		}
@@ -113,7 +112,7 @@ async function runTransform(options) {
 	const cwd = process.cwd();
 	for (const pattern of patterns) for await (const file of glob(pattern, { cwd })) filePaths.push(file);
 	if (filePaths.length === 0) {
-		logWarning("No files matched the provided glob pattern(s)\n");
+		Logger.warn("No files matched the provided glob pattern(s)");
 		return {
 			errors: 0,
 			unchanged: 0,
@@ -156,7 +155,7 @@ async function runTransform(options) {
 				proc.on("error", reject);
 			});
 		} catch (e) {
-			logWarning(`[styled-components-to-stylex] Formatter command failed: ${e instanceof Error ? e.message : String(e)}\n`);
+			Logger.warn(`Formatter command failed: ${e instanceof Error ? e.message : String(e)}`);
 		}
 	}
 	return {
@@ -165,7 +164,7 @@ async function runTransform(options) {
 		skipped: result.skip,
 		transformed: result.ok,
 		timeElapsed: parseFloat(result.timeElapsed) || 0,
-		warnings: flushWarnings()
+		warnings: Logger.flushWarnings()
 	};
 }
 

package/dist/{transform-types-t2Vk9Bka.d.mts → logger-BS4Evg0n.d.mts}

@@ -1,6 +1,3 @@
-import "stylis";
-import { Options } from "jscodeshift";
-
 //#region src/adapter.d.ts
 /**
  * Adapter - Single user entry point for customizing the codemod.
@@ -159,35 +156,20 @@ interface Adapter {
  */
 declare function defineAdapter(adapter: Adapter): Adapter;
 //#endregion
-//#region src/internal/transform-types.d.ts
-/**
- * Warning emitted during transformation for unsupported features
- */
-interface TransformWarning {
+//#region src/internal/logger.d.ts
+type Severity = "info" | "warning" | "error";
+interface WarningLog {
+  severity: Severity;
   type: "unsupported-feature" | "dynamic-node";
-  feature: string;
   message: string;
   loc?: {
     line: number;
     column: number;
   };
+  context?: unknown;
 }
-/**
- * Result of the transform including any warnings
- */
-interface TransformResult {
-  code: string | null;
-  warnings: TransformWarning[];
-}
-/**
- * Options for the transform
- */
-interface TransformOptions extends Options {
-  /**
-   * Adapter for customizing the transform.
-   * Controls value resolution and resolver-provided imports.
-   */
-  adapter: Adapter;
+interface CollectedWarning extends WarningLog {
+  filePath: string;
 }
 //#endregion
-export { defineAdapter as a, Adapter as i, TransformResult as n, TransformWarning as r, TransformOptions as t };
+export { defineAdapter as i, WarningLog as n, Adapter as r, CollectedWarning as t };

package/dist/{logger-Dhb8r1Ry.mjs → logger-Dlnt1fYP.mjs}

@@ -25,7 +25,7 @@ function assertValidAdapter(candidate, where) {
 	const resolveValue = obj?.resolveValue;
 	const shouldSupportExternalStyling = obj?.shouldSupportExternalStyling;
 	if (!candidate || typeof candidate !== "object") throw new Error([
-		`[styled-components-to-stylex] ${where}: expected an adapter object.`,
+		`${where}: expected an adapter object.`,
 		`Received: ${describeValue(candidate)}`,
 		"",
 		"Adapter requirements:",
@@ -40,7 +40,7 @@ function assertValidAdapter(candidate, where) {
 		`Docs/examples: ${ADAPTER_DOCS_URL}`
 	].join("\n"));
 	if (typeof resolveValue !== "function") throw new Error([
-		`[styled-components-to-stylex] ${where}: adapter.resolveValue must be a function.`,
+		`${where}: adapter.resolveValue must be a function.`,
 		`Received: resolveValue=${describeValue(resolveValue)}`,
 		"",
 		"Adapter shape:",
@@ -50,11 +50,11 @@ function assertValidAdapter(candidate, where) {
 		"",
 		`Docs/examples: ${ADAPTER_DOCS_URL}`
 	].join("\n"));
-	if (typeof shouldSupportExternalStyling !== "function") throw new Error([`[styled-components-to-stylex] ${where}: adapter.shouldSupportExternalStyling must be a function.`, `Received: shouldSupportExternalStyling=${describeValue(shouldSupportExternalStyling)}`].join("\n"));
+	if (typeof shouldSupportExternalStyling !== "function") throw new Error([`${where}: adapter.shouldSupportExternalStyling must be a function.`, `Received: shouldSupportExternalStyling=${describeValue(shouldSupportExternalStyling)}`].join("\n"));
 	const styleMerger = obj?.styleMerger;
 	if (styleMerger !== null && styleMerger !== void 0) {
 		if (typeof styleMerger !== "object") throw new Error([
-			`[styled-components-to-stylex] ${where}: adapter.styleMerger must be null or an object.`,
+			`${where}: adapter.styleMerger must be null or an object.`,
 			`Received: styleMerger=${describeValue(styleMerger)}`,
 			"",
 			"Expected shape:",
@@ -64,9 +64,9 @@ function assertValidAdapter(candidate, where) {
 			"  }"
 		].join("\n"));
 		const { functionName, importSource } = styleMerger;
-		if (typeof functionName !== "string" || !functionName.trim()) throw new Error([`[styled-components-to-stylex] ${where}: adapter.styleMerger.functionName must be a non-empty string.`, `Received: functionName=${describeValue(functionName)}`].join("\n"));
+		if (typeof functionName !== "string" || !functionName.trim()) throw new Error([`${where}: adapter.styleMerger.functionName must be a non-empty string.`, `Received: functionName=${describeValue(functionName)}`].join("\n"));
 		if (!importSource || typeof importSource !== "object") throw new Error([
-			`[styled-components-to-stylex] ${where}: adapter.styleMerger.importSource must be an object.`,
+			`${where}: adapter.styleMerger.importSource must be an object.`,
 			`Received: importSource=${describeValue(importSource)}`,
 			"",
 			"Expected shape:",
@@ -75,42 +75,82 @@ function assertValidAdapter(candidate, where) {
 			"  { kind: \"absolutePath\", value: \"/path/to/module.ts\" }"
 		].join("\n"));
 		const { kind, value } = importSource;
-		if (kind !== "specifier" && kind !== "absolutePath") throw new Error([`[styled-components-to-stylex] ${where}: adapter.styleMerger.importSource.kind must be "specifier" or "absolutePath".`, `Received: kind=${describeValue(kind)}`].join("\n"));
-		if (typeof value !== "string" || !value.trim()) throw new Error([`[styled-components-to-stylex] ${where}: adapter.styleMerger.importSource.value must be a non-empty string.`, `Received: value=${describeValue(value)}`].join("\n"));
+		if (kind !== "specifier" && kind !== "absolutePath") throw new Error([`${where}: adapter.styleMerger.importSource.kind must be "specifier" or "absolutePath".`, `Received: kind=${describeValue(kind)}`].join("\n"));
+		if (typeof value !== "string" || !value.trim()) throw new Error([`${where}: adapter.styleMerger.importSource.value must be a non-empty string.`, `Received: value=${describeValue(value)}`].join("\n"));
 	}
 }
 const ADAPTER_DOCS_URL = `https://github.com/skovhus/styled-components-to-stylex-codemod#adapter`;
 
 //#endregion
 //#region src/internal/logger.ts
-/**
-* Clear collected warnings and return them.
-*/
-function flushWarnings() {
-	const result = collected;
-	collected = [];
-	return result;
-}
-/**
-* Log a warning message to stderr.
-* All codemod warnings go through this so tests can mock it.
-*/
-function logWarning(message) {
-	process.stderr.write(message);
-}
-/**
-* Log transform warnings to stderr and collect them.
-*/
-function logWarnings(warnings, filePath) {
-	for (const warning of warnings) {
-		collected.push({
-			...warning,
-			filePath
-		});
-		logWarning(`[styled-components-to-stylex] Warning${warning.loc ? ` (${filePath}:${warning.loc.line}:${warning.loc.column})` : ` (${filePath})`}: ${warning.message}\n`);
+var Logger = class Logger {
+	static flushWarnings() {
+		const result = collected;
+		collected = [];
+		return result;
 	}
-}
+	/**
+	* Log a warning message to stderr.
+	* All codemod warnings go through this so tests can mock it.
+	*/
+	static warn(message, context) {
+		Logger.writeWithSpacing(message, context);
+	}
+	/**
+	* Log an error message to stderr.
+	*/
+	static error(message, context) {
+		Logger.writeWithSpacing(`${Logger.colorizeErrorLabel("Error")} ${message}`, context);
+	}
+	/**
+	* Log transform warnings to stderr and collect them.
+	*/
+	static logWarnings(warnings, filePath) {
+		for (const warning of warnings) {
+			collected.push({
+				...warning,
+				filePath
+			});
+			const location = warning.loc ? `${filePath}:${warning.loc.line}:${warning.loc.column}` : `${filePath}`;
+			const label = Logger.colorizeSeverityLabel(warning.severity);
+			Logger.writeWithSpacing(`${label} ${location}\n${warning.message}`, warning.context);
+		}
+	}
+	static writeWithSpacing(message, context) {
+		const trimmed = message.replace(/\s+$/u, "");
+		const serialized = Logger.formatContext(context);
+		process.stderr.write(`${trimmed}${serialized ? `\n${serialized}` : ""}\n\n`);
+	}
+	static colorizeSeverityLabel(severity) {
+		if (severity === "error") return Logger.colorizeErrorLabel("Error");
+		if (severity === "info") return Logger.colorizeInfoLabel("Info");
+		return Logger.colorizeWarnLabel("Warning");
+	}
+	static colorizeWarnLabel(label) {
+		if (!process.stderr.isTTY) return label;
+		return `${WARN_BG_COLOR}${WARN_TEXT_COLOR}${label}${RESET_COLOR}`;
+	}
+	static colorizeErrorLabel(label) {
+		if (!process.stderr.isTTY) return label;
+		return `${ERROR_BG_COLOR}${ERROR_TEXT_COLOR}${label}${RESET_COLOR}`;
+	}
+	static colorizeInfoLabel(label) {
+		if (!process.stderr.isTTY) return label;
+		return `${INFO_BG_COLOR}${INFO_TEXT_COLOR}${label}${RESET_COLOR}`;
+	}
+	static formatContext(context) {
+		if (typeof context === "undefined") return null;
+		return JSON.stringify(context, null, 2);
+	}
+};
 let collected = [];
+const WARN_BG_COLOR = "\x1B[43m";
+const WARN_TEXT_COLOR = "\x1B[30m";
+const ERROR_BG_COLOR = "\x1B[41m";
+const ERROR_TEXT_COLOR = "\x1B[37m";
+const INFO_BG_COLOR = "\x1B[44m";
+const INFO_TEXT_COLOR = "\x1B[37m";
+const RESET_COLOR = "\x1B[0m";
 
 //#endregion
-export { describeValue as a, assertValidAdapter as i, logWarning as n, logWarnings as r, flushWarnings as t };
+export { assertValidAdapter as n, describeValue as r, Logger as t };

package/dist/transform.d.mts

@@ -1,8 +1,28 @@
-import { n as TransformResult, r as TransformWarning, t as TransformOptions } from "./transform-types-t2Vk9Bka.mjs";
+import { n as WarningLog, r as Adapter } from "./logger-BS4Evg0n.mjs";
+import "stylis";
 import { API, FileInfo, Options } from "jscodeshift";
 
-//#region src/transform.d.ts
+//#region src/internal/transform-types.d.ts
 
+/**
+ * Result of the transform including any log entries
+ */
+interface TransformResult {
+  code: string | null;
+  warnings: WarningLog[];
+}
+/**
+ * Options for the transform
+ */
+interface TransformOptions extends Options {
+  /**
+   * Adapter for customizing the transform.
+   * Controls value resolution and resolver-provided imports.
+   */
+  adapter: Adapter;
+}
+//#endregion
+//#region src/transform.d.ts
 /**
  * Transform styled-components to StyleX
  *
@@ -15,4 +35,4 @@ declare function transform(file: FileInfo, api: API, options: Options): string |
  */
 declare function transformWithWarnings(file: FileInfo, api: API, options: TransformOptions): TransformResult;
 //#endregion
-export { type TransformOptions, type TransformResult, type TransformWarning, transform as default, transformWithWarnings };
+export { type TransformOptions, type TransformResult, transform as default, transformWithWarnings };

package/dist/transform.mjs

@@ -1,4 +1,4 @@
-import { i as assertValidAdapter, r as logWarnings } from "./logger-Dhb8r1Ry.mjs";
+import { n as assertValidAdapter, t as Logger } from "./logger-Dlnt1fYP.mjs";
 import path, { dirname, resolve } from "node:path";
 import { existsSync, readFileSync } from "node:fs";
 import { compile } from "stylis";
@@ -427,6 +427,14 @@ function collectStyledDeclsImpl(args) {
 		}
 		return out;
 	};
+	const shouldForceWrapperForAttrs = (attrsInfo) => {
+		if (!attrsInfo) return false;
+		const props = /* @__PURE__ */ new Set();
+		for (const c of attrsInfo.conditionalAttrs ?? []) if (typeof c?.jsxProp === "string") props.add(c.jsxProp);
+		for (const a of attrsInfo.defaultAttrs ?? []) if (typeof a?.jsxProp === "string") props.add(a.jsxProp);
+		for (const inv of attrsInfo.invertedBoolAttrs ?? []) if (typeof inv?.jsxProp === "string") props.add(inv.jsxProp);
+		return [...props].some((p) => p.startsWith("$"));
+	};
 	const parseShouldForwardProp = (arg0) => {
 		if (!arg0 || arg0.type !== "ObjectExpression") return;
 		const prop = (arg0.properties ?? []).find((p) => {
@@ -661,6 +669,7 @@ function collectStyledDeclsImpl(args) {
 				templateExpressions: parsed.slots.map((s) => s.expression),
 				rawCss: parsed.rawCss,
 				...attrsInfo ? { attrsInfo } : {},
+				...shouldForceWrapperForAttrs(attrsInfo) ? { needsWrapperComponent: true } : {},
 				...shouldForwardProp ? { shouldForwardProp } : {},
 				...shouldForwardProp ? { shouldForwardPropFromWithConfig: true } : {},
 				...withConfigMeta ? { withConfig: withConfigMeta } : {},
@@ -690,6 +699,7 @@ function collectStyledDeclsImpl(args) {
 				templateExpressions: parsed.slots.map((s) => s.expression),
 				rawCss: parsed.rawCss,
 				...attrsInfo ? { attrsInfo } : {},
+				...shouldForceWrapperForAttrs(attrsInfo) ? { needsWrapperComponent: true } : {},
 				...propsType ? { propsType } : {},
 				...leadingComments ? { leadingComments } : {}
 			});
@@ -716,6 +726,7 @@ function collectStyledDeclsImpl(args) {
 				templateExpressions: parsed.slots.map((s) => s.expression),
 				rawCss: parsed.rawCss,
 				...attrsInfo ? { attrsInfo } : {},
+				...shouldForceWrapperForAttrs(attrsInfo) ? { needsWrapperComponent: true } : {},
 				...propsType ? { propsType } : {},
 				...leadingComments ? { leadingComments } : {}
 			});
@@ -1479,6 +1490,84 @@ function tryResolveConditionalCssBlock(node) {
 	}
 	return null;
 }
+function tryResolveConditionalCssBlockTernary(node) {
+	const expr = node.expr;
+	if (!isArrowFunctionExpression(expr)) return null;
+	const paramName = getArrowFnSingleParamName(expr);
+	if (!paramName) return null;
+	if (expr.body.type !== "ConditionalExpression") return null;
+	const test = expr.body.test;
+	if (!test || test.type !== "MemberExpression") return null;
+	const testPath = getMemberPathFromIdentifier(test, paramName);
+	if (!testPath || testPath.length !== 1) return null;
+	const when = testPath[0];
+	const consText = literalToString(expr.body.consequent);
+	const altText = literalToString(expr.body.alternate);
+	if (consText === null || altText === null) return null;
+	const consStyle = consText.trim() ? parseCssDeclarationBlock(consText) : null;
+	const altStyle = altText.trim() ? parseCssDeclarationBlock(altText) : null;
+	if (!consStyle && !altStyle) return null;
+	const variants = [];
+	if (altStyle) variants.push({
+		nameHint: "falsy",
+		when: `!${when}`,
+		style: altStyle
+	});
+	if (consStyle) variants.push({
+		nameHint: "truthy",
+		when,
+		style: consStyle
+	});
+	return {
+		type: "splitVariants",
+		variants
+	};
+}
+function tryResolveArrowFnCallWithSinglePropArg(node) {
+	if (!node.css.property) return null;
+	const expr = node.expr;
+	if (!isArrowFunctionExpression(expr)) return null;
+	const paramName = getArrowFnSingleParamName(expr);
+	if (!paramName) return null;
+	const body = expr.body;
+	if (!body || body.type !== "CallExpression") return null;
+	if (body.callee?.type !== "Identifier" || typeof body.callee.name !== "string") return null;
+	const calleeIdent = body.callee.name;
+	const args = body.arguments ?? [];
+	if (args.length !== 1) return null;
+	const arg0 = args[0];
+	if (!arg0 || arg0.type !== "MemberExpression") return null;
+	const path$1 = getMemberPathFromIdentifier(arg0, paramName);
+	if (!path$1 || path$1.length !== 1) return null;
+	const propName = path$1[0];
+	return {
+		type: "emitStyleFunction",
+		nameHint: `${sanitizeIdentifier(node.css.property)}FromProp`,
+		params: "value: any",
+		body: `{ ${Object.keys(styleFromSingleDeclaration(node.css.property, "value"))[0]}: value }`,
+		call: propName,
+		valueTransform: {
+			kind: "call",
+			calleeIdent
+		}
+	};
+}
+function tryResolveInlineStyleValueForConditionalExpression(node) {
+	if (!node.css.property) return null;
+	const expr = node.expr;
+	if (!isArrowFunctionExpression(expr)) return null;
+	if (expr.body?.type !== "ConditionalExpression") return null;
+	{
+		const paramName = getArrowFnSingleParamName(expr);
+		const test = expr.body.test;
+		const testPath = paramName && test?.type === "MemberExpression" ? getMemberPathFromIdentifier(test, paramName) : null;
+		if (testPath && testPath[0] === "theme") return {
+			type: "keepOriginal",
+			reason: "Theme-dependent conditional values require a project-specific theme source (e.g. useTheme()); cannot safely preserve."
+		};
+	}
+	return { type: "emitInlineStyleValueFromProps" };
+}
 function tryResolvePropAccess(node) {
 	if (!node.css.property) return null;
 	const expr = node.expr;
@@ -1503,7 +1592,7 @@ function tryResolvePropAccess(node) {
 * Order matters: more-specific transforms first, then fall back to prop-access emission.
 */
 function resolveDynamicNode(node, ctx) {
-	return tryResolveThemeAccess(node, ctx) ?? tryResolveCallExpression(node, ctx) ?? tryResolveConditionalValue(node, ctx) ?? tryResolveConditionalCssBlock(node) ?? tryResolvePropAccess(node);
+	return tryResolveThemeAccess(node, ctx) ?? tryResolveCallExpression(node, ctx) ?? tryResolveConditionalValue(node, ctx) ?? tryResolveConditionalCssBlockTernary(node) ?? tryResolveConditionalCssBlock(node) ?? tryResolveArrowFnCallWithSinglePropArg(node) ?? tryResolvePropAccess(node) ?? tryResolveInlineStyleValueForConditionalExpression(node);
 }
 function literalToStaticValue$1(node) {
 	if (!node || typeof node !== "object") return null;
@@ -1815,8 +1904,8 @@ function tryHandleInterpolatedBorder(args) {
 			},
 			warn: (w) => {
 				warnings.push({
+					severity: "warning",
 					type: "dynamic-node",
-					feature: w.feature,
 					message: w.message,
 					...w.loc ? { loc: w.loc } : {}
 				});
@@ -2162,6 +2251,90 @@ function lowerRules(args) {
 			target[key] = map;
 		};
 		const toKebab = (s) => s.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[^a-zA-Z0-9-]/g, "-").toLowerCase();
+		const isAstNode$1 = (v) => !!v && typeof v === "object" && !Array.isArray(v) && typeof v.type === "string";
+		const mergeStyleObjects = (target, source) => {
+			for (const [key, value] of Object.entries(source)) {
+				const existing = target[key];
+				if (existing && value && typeof existing === "object" && typeof value === "object" && !Array.isArray(existing) && !Array.isArray(value) && !isAstNode$1(existing) && !isAstNode$1(value)) mergeStyleObjects(existing, value);
+				else target[key] = value;
+			}
+		};
+		const isCssHelperTaggedTemplate = (expr) => {
+			if (!expr || expr.type !== "TaggedTemplateExpression") return false;
+			if (expr.tag?.type !== "Identifier") return false;
+			const localName = expr.tag.name;
+			const imp = importMap.get(localName);
+			return !!imp && imp.importedName === "css" && imp.source?.kind === "specifier" && imp.source.value === "styled-components";
+		};
+		const resolveHelperExprToAst = (expr, paramName) => {
+			if (!expr || typeof expr !== "object") return null;
+			if (expr.type === "StringLiteral" || expr.type === "NumericLiteral" || expr.type === "Literal") return expr;
+			const path$1 = paramName && (expr.type === "MemberExpression" || expr.type === "OptionalMemberExpression") ? getMemberPathFromIdentifier(expr, paramName) : null;
+			if (!path$1 || path$1[0] !== "theme") return null;
+			const res = resolveValue({
+				kind: "theme",
+				path: path$1.slice(1).join(".")
+			});
+			if (!res) return null;
+			for (const imp of res.imports ?? []) resolverImports.set(JSON.stringify(imp), imp);
+			return parseExpr$1(res.expr) ?? null;
+		};
+		const resolveCssHelperTemplate = (template, paramName) => {
+			const parsed = parseStyledTemplateLiteral(template);
+			const wrappedRawCss = `& { ${parsed.rawCss} }`;
+			const rules = normalizeStylisAstToIR(compile(wrappedRawCss), parsed.slots, { rawCss: wrappedRawCss });
+			const slotExprById = new Map(parsed.slots.map((s) => [s.index, s.expression]));
+			const out = {};
+			const normalizePseudoElement = (pseudo) => {
+				if (!pseudo) return null;
+				if (pseudo === ":before" || pseudo === ":after") return `::${pseudo.slice(1)}`;
+				return pseudo.startsWith("::") ? pseudo : null;
+			};
+			for (const rule of rules) {
+				if (rule.atRuleStack.length > 0) return null;
+				const selector = (rule.selector ?? "").trim();
+				let target = out;
+				if (selector !== "&") {
+					const pseudoElement = parsePseudoElement(selector);
+					const simplePseudo = parseSimplePseudo(selector);
+					const normalizedPseudoElement = normalizePseudoElement(pseudoElement ?? (simplePseudo === ":before" || simplePseudo === ":after" ? simplePseudo : null));
+					if (normalizedPseudoElement) {
+						const nested = out[normalizedPseudoElement] ?? {};
+						out[normalizedPseudoElement] = nested;
+						target = nested;
+					} else if (simplePseudo) {
+						const nested = out[simplePseudo] ?? {};
+						out[simplePseudo] = nested;
+						target = nested;
+					} else return null;
+				}
+				for (const d of rule.declarations) {
+					if (!d.property) return null;
+					if (d.value.kind === "static") {
+						for (const mapped of cssDeclarationToStylexDeclarations(d)) {
+							let value = cssValueToJs$1(mapped.value, d.important);
+							if (mapped.prop === "content" && typeof value === "string") {
+								const m = value.match(/^['"]([\s\S]*)['"]$/);
+								if (m) value = `"${m[1]}"`;
+								else if (!value.startsWith("\"") && !value.endsWith("\"")) value = `"${value}"`;
+							}
+							target[mapped.prop] = value;
+						}
+						continue;
+					}
+					if (d.important) return null;
+					const parts = d.value.parts ?? [];
+					if (parts.length !== 1 || parts[0]?.kind !== "slot") return null;
+					const slotId = parts[0].slotId;
+					const expr = slotExprById.get(slotId);
+					if (!expr) return null;
+					const exprAst = resolveHelperExprToAst(expr, paramName);
+					if (!exprAst) return null;
+					for (const mapped of cssDeclarationToStylexDeclarations(d)) target[mapped.prop] = exprAst;
+				}
+			}
+			return out;
+		};
 		const tryHandleMappedFunctionColor = (d) => {
 			if ((d.property ?? "").trim() !== "background") return false;
 			if (d.value.kind !== "interpolated") return false;
@@ -2238,6 +2411,68 @@ function lowerRules(args) {
 			}
 			return true;
 		};
+		const tryHandleCssHelperConditionalBlock = (d) => {
+			if (d.value.kind !== "interpolated") return false;
+			if (d.property) return false;
+			const parts = d.value.parts ?? [];
+			if (parts.length !== 1 || parts[0]?.kind !== "slot") return false;
+			const slotId = parts[0].slotId;
+			const expr = decl.templateExpressions[slotId];
+			if (!expr || expr.type !== "ArrowFunctionExpression") return false;
+			const paramName = expr.params?.[0]?.type === "Identifier" ? expr.params[0].name : null;
+			if (!paramName) return false;
+			if (expr.body?.type !== "ConditionalExpression") return false;
+			const readPropName = (node) => {
+				const path$1 = getMemberPathFromIdentifier(node, paramName);
+				if (!path$1 || path$1.length !== 1) return null;
+				return path$1[0];
+			};
+			const testInfo = (() => {
+				const test = expr.body.test;
+				if (!test || typeof test !== "object") return null;
+				if (test.type === "MemberExpression" || test.type === "OptionalMemberExpression") {
+					const propName = readPropName(test);
+					return propName ? {
+						when: propName,
+						propName
+					} : null;
+				}
+				if (test.type === "UnaryExpression" && test.operator === "!") {
+					const propName = readPropName(test.argument);
+					return propName ? {
+						when: `!${propName}`,
+						propName
+					} : null;
+				}
+				if (test.type === "BinaryExpression" && (test.operator === "===" || test.operator === "!==") && (test.left?.type === "MemberExpression" || test.left?.type === "OptionalMemberExpression")) {
+					const propName = readPropName(test.left);
+					const rhs = literalToStaticValue(test.right);
+					if (!propName || rhs === null) return null;
+					const rhsValue = JSON.stringify(rhs);
+					return {
+						when: `${propName} ${test.operator} ${rhsValue}`,
+						propName
+					};
+				}
+				return null;
+			})();
+			if (!testInfo) return false;
+			const cons = expr.body.consequent;
+			const alt = expr.body.alternate;
+			if (!isCssHelperTaggedTemplate(cons) || !isCssHelperTaggedTemplate(alt)) return false;
+			const consStyle = resolveCssHelperTemplate(cons.quasi, paramName);
+			const altStyle = resolveCssHelperTemplate(alt.quasi, paramName);
+			if (!consStyle || !altStyle) return false;
+			mergeStyleObjects(styleObj, altStyle);
+			const when = testInfo.when;
+			const existingBucket = variantBuckets.get(when);
+			const nextBucket = existingBucket ? { ...existingBucket } : {};
+			mergeStyleObjects(nextBucket, consStyle);
+			variantBuckets.set(when, nextBucket);
+			variantStyleKeys[when] ??= `${decl.styleKey}${toSuffixFromProp$1(when)}`;
+			if (testInfo.propName && !testInfo.propName.startsWith("$")) ensureShouldForwardPropDrop(decl, testInfo.propName);
+			return true;
+		};
 		for (const rule of decl.rules) {
 			const selTrim = rule.selector.trim();
 			if (selTrim === "& + &" || /^&\s*\+\s*&$/.test(selTrim)) {
@@ -2301,9 +2536,9 @@ function lowerRules(args) {
 				else if (!hasExprPlaceholder && /\s+[a-zA-Z]/.test(s)) bail = true;
 				if (bail) {
 					warnings.push({
+						severity: "warning",
 						type: "unsupported-feature",
-						feature: "complex-selectors",
-						message: "Complex selectors (grouped selectors, descendant element selectors, class-conditioned selectors, or :not() chains) are not currently supported; skipping this file."
+						message: "Complex selectors (grouped selectors, descendant element selectors, class-conditioned selectors, or :not() chains) are not currently supported"
 					});
 					break;
 				}
@@ -2433,6 +2668,7 @@ function lowerRules(args) {
 							}
 						}
 					}
+					if (tryHandleCssHelperConditionalBlock(d)) continue;
 					if (tryHandleLogicalOrDefault(d)) continue;
 					{
 						const tryHandleEnumIfChainValue = () => {
@@ -2617,10 +2853,11 @@ function lowerRules(args) {
 								})();
 								if (!indexedExprAst) {
 									warnings.push({
+										severity: "error",
 										type: "dynamic-node",
-										feature: "adapter-resolveValue",
 										message: `Adapter returned an unparseable expression for ${decl.localName}; dropping this declaration.`
 									});
+									bail = true;
 									continue;
 								}
 								const param = j.identifier(indexPropName);
@@ -2677,8 +2914,8 @@ function lowerRules(args) {
 						warn: (w) => {
 							const loc$1 = w.loc;
 							warnings.push({
+								severity: "warning",
 								type: "dynamic-node",
-								feature: w.feature,
 								message: w.message,
 								...loc$1 ? { loc: loc$1 } : {}
 							});
@@ -2694,8 +2931,8 @@ function lowerRules(args) {
 						const exprAst = parseExpr$1(wrapExprWithStaticParts(res.expr, prefix, suffix));
 						if (!exprAst) {
 							warnings.push({
+								severity: "error",
 								type: "dynamic-node",
-								feature: "adapter-resolveValue",
 								message: `Adapter returned an unparseable expression for ${decl.localName}; dropping this declaration.`,
 								...loc ? { loc } : {}
 							});
@@ -2738,8 +2975,8 @@ function lowerRules(args) {
 							const exprAst = parseExpr$1(wrapExprWithStaticParts(expr, staticPrefix, staticSuffix));
 							if (!exprAst) {
 								warnings.push({
+									severity: "error",
 									type: "dynamic-node",
-									feature: "adapter-resolveValue",
 									message: `Adapter returned an unparseable expression for ${decl.localName}; dropping this declaration.`,
 									...loc ? { loc } : {}
 								});
@@ -2787,8 +3024,8 @@ function lowerRules(args) {
 							if (cssProp === "border" && expandBorderShorthand(target, parsed.exprAst)) return;
 							if (pseudos?.length) {
 								const existing = target[stylexProp];
-								const isAstNode$1 = !!existing && typeof existing === "object" && !Array.isArray(existing) && "type" in existing && typeof existing.type === "string";
-								const map = existing && typeof existing === "object" && !Array.isArray(existing) && !isAstNode$1 ? existing : {};
+								const isAstNode$2 = !!existing && typeof existing === "object" && !Array.isArray(existing) && "type" in existing && typeof existing.type === "string";
+								const map = existing && typeof existing === "object" && !Array.isArray(existing) && !isAstNode$2 ? existing : {};
 								if (!("default" in map)) map.default = existing ?? null;
 								for (const ps of pseudos) map[ps] = parsed.exprAst;
 								target[stylexProp] = map;
@@ -2830,6 +3067,21 @@ function lowerRules(args) {
 						}
 						continue;
 					}
+					if (res && res.type === "emitInlineStyleValueFromProps") if (!d.property) {} else {
+						const e = decl.templateExpressions[slotId];
+						if (e?.type === "ArrowFunctionExpression") {
+							decl.needsWrapperComponent = true;
+							const valueExpr = j.callExpression(e, [j.identifier("props")]);
+							for (const out of cssDeclarationToStylexDeclarations(d)) {
+								if (!out.prop) continue;
+								inlineStyleProps.push({
+									prop: out.prop,
+									expr: valueExpr
+								});
+							}
+							continue;
+						}
+					}
 					if (res && res.type === "emitStyleFunction") {
 						const jsxProp = res.call;
 						{
@@ -2845,14 +3097,20 @@ function lowerRules(args) {
 									const param = j.identifier(out.prop);
 									const valueId = j.identifier(out.prop);
 									annotateParamFromJsxProp(param, jsxProp);
+									if (jsxProp?.startsWith?.("$")) ensureShouldForwardPropDrop(decl, jsxProp);
 									const buildValueExpr = () => {
+										const transformed = (() => {
+											const vt = res.valueTransform;
+											if (vt?.kind === "call" && typeof vt.calleeIdent === "string") return j.callExpression(j.identifier(vt.calleeIdent), [valueId]);
+											return valueId;
+										})();
 										const v = d.value;
-										if (!v || v.kind !== "interpolated") return valueId;
+										if (!v || v.kind !== "interpolated") return transformed;
 										const parts = v.parts ?? [];
 										const slotParts = parts.filter((p$1) => p$1?.kind === "slot");
-										if (slotParts.length !== 1) return valueId;
-										if (slotParts[0].slotId !== slotId) return valueId;
-										if (!parts.some((p$1) => p$1?.kind === "static" && p$1.value !== "")) return valueId;
+										if (slotParts.length !== 1) return transformed;
+										if (slotParts[0].slotId !== slotId) return transformed;
+										if (!parts.some((p$1) => p$1?.kind === "static" && p$1.value !== "")) return transformed;
 										const quasis = [];
 										const exprs = [];
 										let q = "";
@@ -2867,7 +3125,7 @@ function lowerRules(args) {
 													cooked: q
 												}, false));
 												q = "";
-												exprs.push(valueId);
+												exprs.push(transformed);
 												continue;
 											}
 										}
@@ -2890,8 +3148,8 @@ function lowerRules(args) {
 					}
 					if (res && res.type === "keepOriginal") {
 						warnings.push({
+							severity: "warning",
 							type: "dynamic-node",
-							feature: "dynamic-call",
 							message: res.reason,
 							...loc ? { loc } : {}
 						});
@@ -2910,9 +3168,9 @@ function lowerRules(args) {
 						continue;
 					}
 					warnings.push({
+						severity: "warning",
 						type: "dynamic-node",
-						feature: "dynamic-interpolation",
-						message: `Unresolved interpolation for ${decl.localName}; skipping file (manual follow-up required).`,
+						message: `Unsupported interpolation for ${decl.localName}.`,
 						...loc ? { loc } : {}
 					});
 					bail = true;
@@ -3056,9 +3314,9 @@ function lowerRules(args) {
 			decl.needsWrapperComponent = true;
 		} else resolvedStyleObjects.set(decl.styleKey, styleObj);
 		{
-			const isAstNode$1 = (v) => !!v && typeof v === "object" && !Array.isArray(v) && "type" in v && typeof v.type === "string";
+			const isAstNode$2 = (v) => !!v && typeof v === "object" && !Array.isArray(v) && "type" in v && typeof v.type === "string";
 			const isPseudoOrMediaMap = (v) => {
-				if (!v || typeof v !== "object" || Array.isArray(v) || isAstNode$1(v)) return false;
+				if (!v || typeof v !== "object" || Array.isArray(v) || isAstNode$2(v)) return false;
 				const keys = Object.keys(v);
 				if (keys.length === 0) return false;
 				return keys.includes("default") || keys.some((k) => k.startsWith(":") || k.startsWith("@media") || k.startsWith("::"));
@@ -3325,11 +3583,11 @@ function emitStylesAndImports(args) {
 	{
 		const toModuleSpecifier = (from) => {
 			if (from.kind === "specifier") {
-				if (typeof from.value !== "string" || from.value.trim() === "") throw new Error(`[styled-components-to-stylex] Invalid import specifier: expected non-empty string, got ${JSON.stringify(from.value)}`);
+				if (typeof from.value !== "string" || from.value.trim() === "") throw new Error(`Invalid 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(`[styled-components-to-stylex] Invalid import absolutePath: expected non-empty string, got ${JSON.stringify(from.value)}`);
-			if (!path.isAbsolute(from.value)) throw new Error(`[styled-components-to-stylex] Invalid import absolutePath: expected absolute path, got ${JSON.stringify(from.value)}`);
+			if (typeof from.value !== "string" || from.value.trim() === "") throw new Error(`Invalid import absolutePath: expected non-empty string, got ${JSON.stringify(from.value)}`);
+			if (!path.isAbsolute(from.value)) throw new Error(`Invalid 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("/");
@@ -4066,6 +4324,9 @@ function emitIntrinsicWrappers(ctx) {
 			for (const p of props) if (p) extraProps.add(p);
 		}
 		for (const p of d.styleFnFromProps ?? []) if (p?.jsxProp) extraProps.add(p.jsxProp);
+		for (const a of d.attrsInfo?.defaultAttrs ?? []) if (a?.jsxProp) extraProps.add(a.jsxProp);
+		for (const c of d.attrsInfo?.conditionalAttrs ?? []) if (c?.jsxProp) extraProps.add(c.jsxProp);
+		for (const inv of d.attrsInfo?.invertedBoolAttrs ?? []) if (inv?.jsxProp) extraProps.add(inv.jsxProp);
 		const dropPrefixFromFilter = d.shouldForwardProp?.dropPrefix;
 		const usedAttrs = getUsedAttrs(d.localName);
 		const shouldAllowAnyPrefixProps = !!dropPrefixFromFilter && (usedAttrs.has("*") || [...usedAttrs].some((n) => n.startsWith(dropPrefixFromFilter) && !extraProps.has(n)));
@@ -4091,12 +4352,6 @@ function emitIntrinsicWrappers(ctx) {
 					if (!allowStyleProp) omitted$1.push("\"style\"");
 					return joinIntersection(omitted$1.length ? `Omit<${base$1}, ${omitted$1.join(" | ")}>` : base$1, extrasTypeText);
 				}
-				if (!d.shouldForwardPropFromWithConfig) {
-					const supplementalLines = [];
-					if (allowClassNameProp) supplementalLines.push(`  className?: string;`);
-					if (allowStyleProp) supplementalLines.push(`  style?: React.CSSProperties;`);
-					return withChildren(joinIntersection(extrasTypeText, supplementalLines.length > 0 ? `{\n${supplementalLines.join("\n")}\n}` : "{}"));
-				}
 				const base = `React.ComponentProps<"${tagName}">`;
 				const omitted = [];
 				if (!allowClassNameProp) omitted.push("\"className\"");
@@ -4142,6 +4397,9 @@ function emitIntrinsicWrappers(ctx) {
 		const destructureParts = [];
 		for (const p of dropProps) destructureParts.push(p);
 		for (const p of knownPrefixProps) if (!destructureParts.includes(p)) destructureParts.push(p);
+		for (const a of d.attrsInfo?.defaultAttrs ?? []) if (a?.jsxProp && !destructureParts.includes(a.jsxProp)) destructureParts.push(a.jsxProp);
+		for (const c of d.attrsInfo?.conditionalAttrs ?? []) if (c?.jsxProp && !destructureParts.includes(c.jsxProp)) destructureParts.push(c.jsxProp);
+		for (const inv of d.attrsInfo?.invertedBoolAttrs ?? []) if (inv?.jsxProp && !destructureParts.includes(inv.jsxProp)) destructureParts.push(inv.jsxProp);
 		const propsParamId = j.identifier("props");
 		annotatePropsParam(propsParamId, d.localName);
 		const propsId = j.identifier("props");
@@ -4166,7 +4424,19 @@ function emitIntrinsicWrappers(ctx) {
 			const declStmt$1 = j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps$1), propsId)]);
 			const cleanupPrefixStmt$1 = dropPrefix && shouldAllowAnyPrefixProps && includeRest ? j.forOfStatement(j.variableDeclaration("const", [j.variableDeclarator(j.identifier("k"), null)]), j.callExpression(j.memberExpression(j.identifier("Object"), j.identifier("keys")), [restId]), j.blockStatement([j.ifStatement(j.callExpression(j.memberExpression(j.identifier("k"), j.identifier("startsWith")), [j.literal(dropPrefix)]), j.expressionStatement(j.unaryExpression("delete", j.memberExpression(restId, j.identifier("k"), true))))])) : null;
 			const sxDecl = j.variableDeclaration("const", [j.variableDeclarator(j.identifier("sx"), j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("props")), styleArgs))]);
-			const openingAttrs$1 = [...includeRest ? [j.jsxSpreadAttribute(restId)] : [], j.jsxSpreadAttribute(j.identifier("sx"))];
+			const openingAttrs$1 = [];
+			for (const a of d.attrsInfo?.defaultAttrs ?? []) {
+				const propExpr = j.identifier(a.jsxProp);
+				const fallback = typeof a.value === "string" ? j.literal(a.value) : typeof a.value === "number" ? j.literal(a.value) : typeof a.value === "boolean" ? j.booleanLiteral(a.value) : j.literal(String(a.value));
+				openingAttrs$1.push(j.jsxAttribute(j.jsxIdentifier(a.attrName), j.jsxExpressionContainer(j.logicalExpression("??", propExpr, fallback))));
+			}
+			for (const cond of d.attrsInfo?.conditionalAttrs ?? []) openingAttrs$1.push(j.jsxAttribute(j.jsxIdentifier(cond.attrName), j.jsxExpressionContainer(j.conditionalExpression(j.identifier(cond.jsxProp), j.literal(cond.value), j.identifier("undefined")))));
+			for (const inv of d.attrsInfo?.invertedBoolAttrs ?? []) openingAttrs$1.push(j.jsxAttribute(j.jsxIdentifier(inv.attrName), j.jsxExpressionContainer(j.binaryExpression("!==", j.identifier(inv.jsxProp), j.booleanLiteral(true)))));
+			for (const [key, value] of Object.entries(d.attrsInfo?.staticAttrs ?? {})) if (typeof value === "string") openingAttrs$1.push(j.jsxAttribute(j.jsxIdentifier(key), j.literal(value)));
+			else if (typeof value === "boolean") openingAttrs$1.push(j.jsxAttribute(j.jsxIdentifier(key), value ? null : j.jsxExpressionContainer(j.literal(false))));
+			else if (typeof value === "number") openingAttrs$1.push(j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(j.literal(value))));
+			if (includeRest) openingAttrs$1.push(j.jsxSpreadAttribute(restId));
+			openingAttrs$1.push(j.jsxSpreadAttribute(j.identifier("sx")));
 			if (d.inlineStyleProps && d.inlineStyleProps.length) openingAttrs$1.push(j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(j.objectExpression([j.spreadElement(j.memberExpression(j.identifier("sx"), j.identifier("style"))), ...d.inlineStyleProps.map((p) => j.property("init", j.identifier(p.prop), p.expr))]))));
 			const openingEl$1 = j.jsxOpeningElement(j.jsxIdentifier(tagName), openingAttrs$1, false);
 			const jsx$1 = isVoid ? {
@@ -4272,6 +4542,7 @@ function emitIntrinsicWrappers(ctx) {
 		if (!allowClassNameProp && !allowStyleProp) {
 			const usedAttrs = getUsedAttrs(d.localName);
 			const includeRest = usedAttrs.has("*") || !!d.usedAsValue || usedAttrs.size > 0;
+			const destructureProps = [...new Set([...(d.attrsInfo?.conditionalAttrs ?? []).map((c) => c.jsxProp).filter(Boolean), ...(d.attrsInfo?.invertedBoolAttrs ?? []).map((inv) => inv.jsxProp).filter(Boolean)])];
 			emitted.push(...withLeadingCommentsOnFirstFunction$1(emitMinimalWrapper$1({
 				j,
 				localName: d.localName,
@@ -4279,11 +4550,15 @@ function emitIntrinsicWrappers(ctx) {
 				propsTypeName: propsTypeNameFor(d.localName),
 				emitTypes,
 				styleArgs,
-				destructureProps: [],
+				destructureProps,
 				allowClassNameProp: false,
 				allowStyleProp: false,
 				includeRest,
 				patternProp: patternProp$1,
+				defaultAttrs: d.attrsInfo?.defaultAttrs ?? [],
+				conditionalAttrs: d.attrsInfo?.conditionalAttrs ?? [],
+				invertedBoolAttrs: d.attrsInfo?.invertedBoolAttrs ?? [],
+				staticAttrs: d.attrsInfo?.staticAttrs ?? {},
 				inlineStyleProps: d.inlineStyleProps ?? [],
 				styleMerger
 			}), d));
@@ -4584,10 +4859,10 @@ function emitIntrinsicWrappers(ctx) {
 			allowStyleProp: false,
 			includeRest: shouldIncludeRest,
 			patternProp: patternProp$1,
-			...d.attrsInfo?.defaultAttrs ? { defaultAttrs: d.attrsInfo.defaultAttrs } : {},
-			...d.attrsInfo?.conditionalAttrs ? { conditionalAttrs: d.attrsInfo.conditionalAttrs } : {},
-			...d.attrsInfo?.invertedBoolAttrs ? { invertedBoolAttrs: d.attrsInfo.invertedBoolAttrs } : {},
-			...d.attrsInfo?.staticAttrs ? { staticAttrs: d.attrsInfo.staticAttrs } : {},
+			defaultAttrs: d.attrsInfo?.defaultAttrs ?? [],
+			conditionalAttrs: d.attrsInfo?.conditionalAttrs ?? [],
+			invertedBoolAttrs: d.attrsInfo?.invertedBoolAttrs ?? [],
+			staticAttrs: d.attrsInfo?.staticAttrs ?? {},
 			inlineStyleProps: d.inlineStyleProps ?? [],
 			styleMerger
 		}), d));
@@ -5286,7 +5561,7 @@ function emitWrappersImpl(args) {
 			case "a": return "React.AnchorHTMLAttributes<HTMLAnchorElement>";
 			case "button": return "React.ButtonHTMLAttributes<HTMLButtonElement>";
 			case "div": return "React.HTMLAttributes<HTMLDivElement>";
-			case "input": return "React.InputHTMLAttributes<HTMLInputElement>";
+			case "input": return "React.ComponentProps<\"input\">";
 			case "img": return "React.ImgHTMLAttributes<HTMLImageElement>";
 			case "label": return "React.LabelHTMLAttributes<HTMLLabelElement>";
 			case "select": return "React.SelectHTMLAttributes<HTMLSelectElement>";
@@ -5618,25 +5893,6 @@ function shouldSkipForThemeProvider(args) {
 	if (!themeProviderLocalForSkip) return false;
 	return root.find(j.JSXIdentifier, { name: themeProviderLocalForSkip }).size() > 0;
 }
-function shouldSkipForCssHelper(args) {
-	const { root, j, styledImports } = args;
-	const cssImportForSkip = findStyledComponentsNamedImport({
-		styledImports,
-		j,
-		importedName: "css"
-	});
-	const cssLocalForSkip = cssImportForSkip?.local?.type === "Identifier" ? cssImportForSkip.local.name : cssImportForSkip?.imported?.type === "Identifier" ? cssImportForSkip.imported.name : void 0;
-	if (!cssLocalForSkip) return false;
-	const usedAsTaggedTemplate = root.find(j.TaggedTemplateExpression, { tag: {
-		type: "Identifier",
-		name: cssLocalForSkip
-	} }).size() > 0;
-	const usedAsCall = root.find(j.CallExpression, { callee: {
-		type: "Identifier",
-		name: cssLocalForSkip
-	} }).size() > 0;
-	return usedAsTaggedTemplate || usedAsCall;
-}
 function collectThemeProviderSkipWarnings(args) {
 	const { root, j, styledImports } = args;
 	const warnings = [];
@@ -5649,9 +5905,9 @@ function collectThemeProviderSkipWarnings(args) {
 	if (!themeProviderLocalForSkip) return warnings;
 	if (!(root.find(j.JSXIdentifier, { name: themeProviderLocalForSkip }).size() > 0)) return warnings;
 	const warning = {
+		severity: "warning",
 		type: "unsupported-feature",
-		feature: "ThemeProvider",
-		message: "ThemeProvider usage is project-specific; skipping this file (manual follow-up required)."
+		message: "ThemeProvider usage is project-specific"
 	};
 	if (themeProviderImportForSkip?.loc) warning.loc = {
 		line: themeProviderImportForSkip.loc.start.line,
@@ -5678,9 +5934,9 @@ function collectCssHelperSkipWarnings(args) {
 		name: cssLocalForSkip
 	} }).size() > 0)) return warnings;
 	const warning = {
+		severity: "warning",
 		type: "unsupported-feature",
-		feature: "css-helper",
-		message: "`css` helper usage from styled-components is project-specific and not safely transformable; skipping this file (manual follow-up required)."
+		message: "`css` helper usage from styled-components is not supported"
 	};
 	if (cssImportForSkip?.loc) warning.loc = {
 		line: cssImportForSkip.loc.start.line,
@@ -5695,8 +5951,8 @@ function collectCreateGlobalStyleWarnings(styledImports) {
 		const specifiers = importPath.node.specifiers ?? [];
 		for (const specifier of specifiers) if (specifier.type === "ImportSpecifier" && specifier.imported.type === "Identifier" && specifier.imported.name === "createGlobalStyle") {
 			const warning = {
+				severity: "warning",
 				type: "unsupported-feature",
-				feature: "createGlobalStyle",
 				message: "createGlobalStyle is not supported in StyleX. Global styles should be handled separately (e.g., in a CSS file or using CSS reset libraries)."
 			};
 			if (specifier.loc) warning.loc = {
@@ -5717,9 +5973,9 @@ function shouldSkipForCreateGlobalStyle(args) {
 }
 function universalSelectorUnsupportedWarning(loc) {
 	return {
+		severity: "warning",
 		type: "unsupported-feature",
-		feature: "universal-selector",
-		message: "Universal selectors (`*`) are currently unsupported; skipping this file (manual follow-up required).",
+		message: "Universal selectors (`*`) are currently unsupported",
 		...loc ? { loc } : {}
 	};
 }
@@ -5844,14 +6100,14 @@ function createResolveValueSafe(args) {
 		if (typeof res === "undefined") {
 			bailRef.value = true;
 			warnings.push({
+				severity: "error",
 				type: "dynamic-node",
-				feature: "adapter-resolveValue",
 				message: [
 					"Adapter.resolveValue returned undefined. This usually means your adapter forgot to return a value.",
 					"Return null to leave a value unresolved, or return { expr, imports } to resolve it.",
-					`Skipping transformation for this file to avoid producing incorrect output.`,
-					`resolveValue was called with: ${formatResolveValueContext(ctx)}`
-				].join(" ")
+					"Skipping transformation for this file to avoid producing incorrect output."
+				].join(" "),
+				context: ctx
 			});
 			return null;
 		}
@@ -5862,32 +6118,6 @@ function createResolveValueSafe(args) {
 		bailRef
 	};
 }
-function formatResolveValueContext(ctx) {
-	const c = ctx;
-	const kind = c?.kind;
-	if (kind === "theme") return `kind=theme path=${JSON.stringify(String(c?.path ?? ""))}`;
-	if (kind === "cssVariable") {
-		const parts = [`kind=cssVariable name=${JSON.stringify(String(c?.name ?? ""))}`];
-		if (typeof c?.fallback === "string") parts.push(`fallback=${JSON.stringify(c.fallback)}`);
-		if (typeof c?.definedValue === "string") parts.push(`definedValue=${JSON.stringify(c.definedValue)}`);
-		return parts.join(" ");
-	}
-	if (kind === "call") {
-		const args = Array.isArray(c?.args) ? c.args : [];
-		return [
-			"kind=call",
-			`calleeImportedName=${JSON.stringify(String(c?.calleeImportedName ?? ""))}`,
-			`calleeSource=${JSON.stringify(c?.calleeSource ?? null)}`,
-			`callSiteFilePath=${JSON.stringify(String(c?.callSiteFilePath ?? ""))}`,
-			`args=${JSON.stringify(args)}`
-		].join(" ");
-	}
-	try {
-		return `ctx=${JSON.stringify(ctx)}`;
-	} catch {
-		return `ctx=${String(ctx)}`;
-	}
-}
 
 //#endregion
 //#region src/internal/css-vars.ts
@@ -6106,7 +6336,7 @@ function getStaticPropertiesFromImport(args) {
 */
 function transform(file, api, options) {
 	const result = transformWithWarnings(file, api, options);
-	logWarnings(result.warnings, file.path);
+	Logger.logWarnings(result.warnings, file.path);
 	return result.code;
 }
 /**
@@ -6154,18 +6384,6 @@ function transformWithWarnings(file, api, options) {
 			styledImports
 		})
 	};
-	if (shouldSkipForCssHelper({
-		root,
-		j,
-		styledImports
-	})) return {
-		code: null,
-		warnings: collectCssHelperSkipWarnings({
-			root,
-			j,
-			styledImports
-		})
-	};
 	warnings.push(...collectCreateGlobalStyleWarnings(styledImports));
 	const keyframesImport = styledImports.find(j.ImportSpecifier).nodes().find((s) => s.imported.type === "Identifier" && s.imported.name === "keyframes");
 	const keyframesLocal = keyframesImport?.local?.type === "Identifier" ? keyframesImport.local.name : keyframesImport?.imported?.type === "Identifier" ? keyframesImport.imported.name : void 0;
@@ -6199,17 +6417,90 @@ function transformWithWarnings(file, api, options) {
 	});
 	const cssImport = styledImports.find(j.ImportSpecifier).nodes().find((s) => s.imported.type === "Identifier" && s.imported.name === "css");
 	const cssLocal = cssImport?.local?.type === "Identifier" ? cssImport.local.name : cssImport?.imported?.type === "Identifier" ? cssImport.imported.name : void 0;
+	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);
+	});
+	const isStyledTag = (tag) => {
+		if (!tag || typeof tag !== "object") return false;
+		if (tag.type === "Identifier") return styledLocalNames.has(tag.name);
+		if (tag.type === "MemberExpression" || tag.type === "OptionalMemberExpression") return isStyledTag(tag.object);
+		if (tag.type === "CallExpression") return isStyledTag(tag.callee);
+		return false;
+	};
+	const hasUnsupportedCssHelperUsage = (() => {
+		if (!cssLocal) return false;
+		if (root.find(j.CallExpression, { callee: {
+			type: "Identifier",
+			name: cssLocal
+		} }).size() > 0) return true;
+		const cssTagged = root.find(j.TaggedTemplateExpression, { tag: {
+			type: "Identifier",
+			name: cssLocal
+		} });
+		let unsupported = false;
+		cssTagged.forEach((p) => {
+			if (unsupported) return;
+			const cssNode = p.node;
+			let cur = p;
+			let arrow = null;
+			while (cur && cur.parentPath) {
+				cur = cur.parentPath;
+				if (!cur?.node) break;
+				if (cur.node.type === "ArrowFunctionExpression") {
+					arrow = cur.node;
+					break;
+				}
+			}
+			if (!arrow) {
+				unsupported = true;
+				return;
+			}
+			if (arrow.body?.type !== "ConditionalExpression") {
+				unsupported = true;
+				return;
+			}
+			const cond = arrow.body;
+			if (cond.consequent !== cssNode && cond.alternate !== cssNode) {
+				unsupported = true;
+				return;
+			}
+			let hasStyledAncestor = false;
+			let anc = cur;
+			while (anc && anc.parentPath) {
+				anc = anc.parentPath;
+				if (anc?.node?.type === "TaggedTemplateExpression" && isStyledTag(anc.node.tag)) {
+					hasStyledAncestor = true;
+					break;
+				}
+			}
+			if (!hasStyledAncestor) {
+				unsupported = true;
+				return;
+			}
+		});
+		return unsupported;
+	})();
+	const isIdentifierReference = (p) => {
+		const parent = p?.parent?.node;
+		if (!parent) return true;
+		if (parent.type === "ImportSpecifier" || parent.type === "ImportDefaultSpecifier" || parent.type === "ImportNamespaceSpecifier") return false;
+		if ((parent.type === "MemberExpression" || parent.type === "OptionalMemberExpression") && parent.property === p.node && parent.computed === false) return false;
+		if ((parent.type === "Property" || parent.type === "ObjectProperty") && parent.key === p.node && parent.computed === false) return false;
+		if (parent.type === "TSPropertySignature" && parent.key === p.node) return false;
+		return true;
+	};
 	const cssHelperNames = /* @__PURE__ */ new Set();
+	if (hasUnsupportedCssHelperUsage) return {
+		code: null,
+		warnings: collectCssHelperSkipWarnings({
+			root,
+			j,
+			styledImports
+		})
+	};
 	if (cssLocal) {
-		const isIdentifierReference = (p) => {
-			const parent = p?.parent?.node;
-			if (!parent) return true;
-			if (parent.type === "ImportSpecifier" || parent.type === "ImportDefaultSpecifier" || parent.type === "ImportNamespaceSpecifier") return false;
-			if ((parent.type === "MemberExpression" || parent.type === "OptionalMemberExpression") && parent.property === p.node && parent.computed === false) return false;
-			if ((parent.type === "Property" || parent.type === "ObjectProperty") && parent.key === p.node && parent.computed === false) return false;
-			if (parent.type === "TSPropertySignature" && parent.key === p.node) return false;
-			return true;
-		};
 		const isStillReferenced = () => root.find(j.Identifier, { name: cssLocal }).filter((p) => isIdentifierReference(p)).size() > 0;
 		root.find(j.VariableDeclarator, { init: { type: "TaggedTemplateExpression" } }).forEach((p) => {
 			const init = p.node.init;
@@ -6308,8 +6599,8 @@ function transformWithWarnings(file, api, options) {
 	});
 	if (hasComponentSelector) {
 		const warning = {
+			severity: "warning",
 			type: "unsupported-feature",
-			feature: "component-selector",
 			message: "Component selectors like `${OtherComponent}:hover &` are not directly representable in StyleX. Manual refactor is required to preserve relationship/hover semantics."
 		};
 		if (componentSelectorLoc) warnings.push({
@@ -6324,8 +6615,8 @@ function transformWithWarnings(file, api, options) {
 	}
 	if (hasSpecificityHack) {
 		const warning = {
+			severity: "warning",
 			type: "unsupported-feature",
-			feature: "specificity",
 			message: "Styled-components specificity hacks like `&&` / `&&&` are not representable in StyleX. The output may not preserve selector specificity and may require manual adjustments."
 		};
 		if (specificityHackLoc) warnings.push({
@@ -6965,6 +7256,7 @@ function transformWithWarnings(file, api, options) {
 			}
 			continue;
 		}
+		if (decl.needsWrapperComponent) continue;
 		root.find(j.JSXElement, { openingElement: { name: {
 			type: "JSXIdentifier",
 			name: decl.localName
@@ -7086,6 +7378,32 @@ function transformWithWarnings(file, api, options) {
 		stylesIdentifier,
 		styleMerger: adapter.styleMerger
 	});
+	if (adapter.styleMerger?.functionName && adapter.styleMerger.importSource) {
+		const mergerName = adapter.styleMerger.functionName;
+		const hasMergerUsage = root.find(j.Identifier, { name: mergerName }).filter((p) => isIdentifierReference(p)).size() > 0;
+		const hasMergerImport = root.find(j.ImportSpecifier, { imported: {
+			type: "Identifier",
+			name: mergerName
+		} }).size() > 0;
+		const hasLocalBinding = root.find(j.FunctionDeclaration, { id: { name: mergerName } }).size() > 0 || root.find(j.VariableDeclarator, { id: {
+			type: "Identifier",
+			name: mergerName
+		} }).size() > 0;
+		if (hasMergerUsage && !hasMergerImport && !hasLocalBinding) {
+			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);
+				}
+				hasChanges = true;
+			}
+		}
+	}
 	for (const [componentName, statements] of staticPropertyAssignments.entries()) {
 		if (statements.length === 0) continue;
 		const wrapperFn = root.find(j.FunctionDeclaration, { id: { name: componentName } }).at(0);
@@ -7103,6 +7421,22 @@ function transformWithWarnings(file, api, options) {
 		preserveReactImport
 	});
 	if (post.changed) hasChanges = true;
+	if (cssLocal) {
+		const isStillReferenced = () => root.find(j.Identifier, { name: cssLocal }).filter((p) => isIdentifierReference(p)).size() > 0;
+		if (!isStillReferenced()) styledImports.forEach((imp) => {
+			const specs = imp.node.specifiers ?? [];
+			const next = specs.filter((s) => {
+				if (s.type !== "ImportSpecifier") return true;
+				if (s.imported.type !== "Identifier") return true;
+				return s.imported.name !== "css";
+			});
+			if (next.length !== specs.length) {
+				imp.node.specifiers = next;
+				if (imp.node.specifiers.length === 0) j(imp).remove();
+				hasChanges = true;
+			}
+		});
+	}
 	if (post.needsReactImport) {
 		const firstImport = root.find(j.ImportDeclaration).at(0);
 		const reactImport = j.importDeclaration([j.importDefaultSpecifier(j.identifier("React"))], j.literal("react"));

package/package.json

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