styled-components-to-stylex-codemod 0.0.25 → 0.0.26

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { a as defineAdapter, i as AdapterInput, t as CollectedWarning } from "./logger-B_bwk2gd.mjs";
+import { a as defineAdapter, i as AdapterInput, t as CollectedWarning } from "./logger-DKOqU7as.mjs";
 
 //#region src/run.d.ts
 interface RunTransformOptions {

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { a as assertValidAdapterInput, o as describeValue, r as defineAdapter, t as Logger } from "./logger-StI3W9gi.mjs";
+import { o as assertValidAdapterInput, r as defineAdapter, s as describeValue, t as Logger } from "./logger-Bt4qdjjb.mjs";
 import { run } from "jscodeshift/src/Runner.js";
 import { fileURLToPath } from "node:url";
 import { dirname, join, resolve } from "node:path";
@@ -143,7 +143,7 @@ async function runTransform(options) {
 	].join("\n"));
 	const { createModuleResolver } = await import("./resolve-imports-CN7ulI4X.mjs");
 	const sharedResolver = createModuleResolver();
-	const { runPrepass } = await import("./run-prepass-Dl49r3ug.mjs");
+	const { runPrepass } = await import("./run-prepass-BInfVTeK.mjs");
 	const absoluteFiles = filePaths.map((f) => resolve(f));
 	const absoluteConsumers = consumerFilePaths.map((f) => resolve(f));
 	let prepassResult;

package/dist/{logger-StI3W9gi.mjs → logger-Bt4qdjjb.mjs}

@@ -182,6 +182,12 @@ const ADAPTER_DOCS_URL = `https://github.com/skovhus/styled-components-to-stylex
 * Adapter entry point for customizing the codemod.
 * Core concepts: value resolution hooks and adapter validation.
 */
+/**
+* Type guard: checks whether a resolve result is a directional expansion.
+*/
+function isDirectionalResult(r) {
+	return "directional" in r;
+}
 const DEFAULT_THEME_HOOK = {
 	functionName: "useTheme",
 	importSource: {
@@ -199,6 +205,15 @@ const DEFAULT_THEME_HOOK = {
 *   export default defineAdapter({
 *     resolveValue(ctx) {
 *       if (ctx.kind === "theme") {
+*         // For shorthand properties with multi-value tokens, return directional entries
+*         if (ctx.cssProperty === "padding" && ctx.path === "input.padding") {
+*           return {
+*             directional: [
+*               { prop: "paddingBlock", expr: "$input.paddingBlock", imports: [{ from: { kind: "specifier", value: "./tokens" }, names: [{ imported: "$input" }] }] },
+*               { prop: "paddingInline", expr: "$input.paddingInline", imports: [{ from: { kind: "specifier", value: "./tokens" }, names: [{ imported: "$input" }] }] },
+*             ],
+*           };
+*         }
 *         return {
 *           expr: `tokens.${ctx.path}`,
 *           imports: [
@@ -486,4 +501,4 @@ const SECTION_COLOR = "\x1B[36m";
 const RESET_COLOR = "\x1B[0m";
 
 //#endregion
-export { assertValidAdapterInput as a, assertValidAdapter as i, DEFAULT_THEME_HOOK as n, describeValue as o, defineAdapter as r, Logger as t };
+export { assertValidAdapter as a, isDirectionalResult as i, DEFAULT_THEME_HOOK as n, assertValidAdapterInput as o, defineAdapter as r, describeValue as s, Logger as t };

package/dist/{logger-B_bwk2gd.d.mts → logger-DKOqU7as.d.mts}

@@ -19,6 +19,12 @@ type ThemeResolveContext = {
     line: number;
     column: number;
   };
+  /**
+   * CSS property being set (when available).
+   * Useful for adapters to return directional results for shorthand properties.
+   * Example: "padding", "margin", "border"
+   */
+  cssProperty?: string;
 };
 type CssVariableResolveContext = {
   kind: "cssVariable";
@@ -68,6 +74,12 @@ type ImportedValueResolveContext = {
     line: number;
     column: number;
   };
+  /**
+   * CSS property being set (when available).
+   * Useful for adapters to return directional results for shorthand properties.
+   * Example: "padding", "margin", "border"
+   */
+  cssProperty?: string;
 };
 type CallResolveContext = {
   /**
@@ -133,6 +145,21 @@ type CallResolveContext = {
  * Helper calls are handled separately via `adapter.resolveCall(...)`.
  */
 type ResolveValueContext = ThemeResolveContext | CssVariableResolveContext | ImportedValueResolveContext;
+/**
+ * Result for `adapter.resolveValue(...)` when returning directional expansion
+ * instead of a single value. Use this for shorthand CSS properties (e.g., `padding`)
+ * whose theme token resolves to a multi-value string (e.g., `"6px 12px"`).
+ *
+ * Instead of assigning the opaque token to the shorthand (which StyleX would expand
+ * incorrectly to all longhands), the adapter returns pre-split directional entries.
+ */
+type ResolveValueDirectionalResult = {
+  /** Directional expansion entries — use instead of shorthand property */directional: Array<{
+    /** camelCase CSS property (e.g., "paddingBlock", "paddingInline") */prop: string; /** JS expression string to inline into generated output */
+    expr: string; /** Import statements required by `expr` */
+    imports: ImportSpec[];
+  }>;
+};
 /**
  * Result for `adapter.resolveValue(...)` (theme + css variables + imported values).
  */
@@ -423,7 +450,11 @@ interface ExternalInterfaceContext {
 type ExternalInterfaceResult = {
   styles: boolean;
   as: boolean;
-  ref: boolean;
+  ref: boolean; /** Whether cross-file consumers pass className prop (undefined → derive from `styles`) */
+  className?: boolean; /** Whether cross-file consumers pass style prop (undefined → derive from `styles`) */
+  style?: boolean; /** Whether cross-file consumers pass element-specific props (onClick, aria-*, etc.) */
+  elementProps?: boolean; /** Whether cross-file consumers use JSX spread ({...props}) */
+  spreadProps?: boolean;
 };
 /**
  * Configuration for a custom style merger function that combines stylex.props()
@@ -470,10 +501,12 @@ interface Adapter {
    *
    * Return:
    * - `{ expr, imports }` for theme, css variables, and imported values.
+   * - `{ directional: [...] }` for shorthand properties (e.g., `padding`) whose token
+   *   resolves to a multi-value string. Each entry specifies a longhand property and expression.
    * - Optionally return `{ dropDefinition: true }` for css variables to remove the local `--x: ...` definition.
    * - `undefined` to bail/skip the file (for cssVariable: keeps the original `var(...)` unchanged)
    */
-  resolveValue: (context: ResolveValueContext) => ResolveValueResult | undefined;
+  resolveValue: (context: ResolveValueContext) => ResolveValueResult | ResolveValueDirectionalResult | undefined;
   /**
    * Resolver for helper calls found inside template interpolations.
    *
@@ -594,6 +627,15 @@ interface AdapterInput {
  *   export default defineAdapter({
  *     resolveValue(ctx) {
  *       if (ctx.kind === "theme") {
+ *         // For shorthand properties with multi-value tokens, return directional entries
+ *         if (ctx.cssProperty === "padding" && ctx.path === "input.padding") {
+ *           return {
+ *             directional: [
+ *               { prop: "paddingBlock", expr: "$input.paddingBlock", imports: [{ from: { kind: "specifier", value: "./tokens" }, names: [{ imported: "$input" }] }] },
+ *               { prop: "paddingInline", expr: "$input.paddingInline", imports: [{ from: { kind: "specifier", value: "./tokens" }, names: [{ imported: "$input" }] }] },
+ *             ],
+ *           };
+ *         }
  *         return {
  *           expr: `tokens.${ctx.path}`,
  *           imports: [
@@ -648,7 +690,7 @@ declare function defineAdapter<T extends AdapterInput>(adapter: T): T;
 //#endregion
 //#region src/internal/logger.d.ts
 type Severity = "info" | "warning" | "error";
-type WarningType = "`css` helper function switch must return css templates in all branches" | "`css` helper usage as a function call (css(...)) is not supported" | "`css` helper used outside of a styled component template cannot be statically transformed" | "Adapter helper call in border interpolation did not resolve to a single CSS value" | "Adapter resolveCall returned an unparseable styles expression" | "Adapter resolveCall returned an unparseable value expression" | "Adapter resolveCall returned StyleX styles for helper call where a CSS value was expected" | "Adapter resolveCall returned undefined for helper call" | "Adapter resolveBaseComponent threw an error" | "Adapter resolved StyleX styles cannot be applied under nested selectors/at-rules" | "Adapter resolved StyleX styles inside pseudo selector but did not provide cssText for property expansion — add cssText to resolveCall result to enable pseudo-wrapping" | 'Adapter resolveCall cssText could not be parsed as CSS declarations — expected semicolon-separated property: value pairs (e.g. "white-space: nowrap; overflow: hidden;")' | "Adapter resolveValue returned an unparseable value expression" | "Adapter resolveValue returned undefined for imported value" | "Arrow function: body is not a recognized pattern (expected ternary, logical, call, or member expression)" | "Arrow function: conditional branches could not be resolved to static or theme values" | "Arrow function: helper call body is not supported" | "Arrow function: indexed theme lookup pattern not matched" | "Arrow function: logical expression pattern not supported" | "Arrow function: prop access cannot be converted to style function for this CSS property" | "Arrow function: theme access path could not be resolved" | "Component selectors like `${OtherComponent}:hover &` are not directly representable in StyleX. Manual refactor is required" | "Conditional `css` block: !important is not supported in StyleX" | "Conditional `css` block: @-rules (e.g., @media, @supports) are not supported" | "CSS block contains unsupported at-rule (only @media and @container are supported; @supports, etc. require manual handling)" | "Conditional `css` block: dynamic interpolation could not be resolved to a single component prop" | "Conditional `css` block: failed to parse expression" | "Conditional `css` block: missing CSS property name" | "Conditional `css` block: missing interpolation expression" | "Conditional `css` block: mixed static/dynamic values with non-theme expressions cannot be safely transformed" | "Conditional `css` block: multiple interpolation slots in a single property value" | "Conditional `css` block: ternary branch value could not be resolved (imported values require adapter support)" | "Conditional `css` block: ternary expressions inside pseudo selectors are not supported" | "Conditional `css` block: media query interpolation must be a simple imported reference (expressions like `value + 1` are not supported)" | "Conditional `css` block: unsupported selector" | "Directional border helper styles are not supported" | "Multi-slot border interpolation could not be resolved" | "Resolved border helper value could not be expanded to longhand properties" | "Resolved conditional border variant could not be expanded to longhand properties" | "createGlobalStyle is not supported in StyleX. Global styles should be handled separately (e.g., in a CSS file or using CSS reset libraries)" | "Dynamic styles inside pseudo elements (::before/::after) are not supported by StyleX. See https://github.com/facebook/stylex/issues/1396" | "Failed to parse theme expressions" | "Heterogeneous background values (mix of gradients and colors) not currently supported" | "Higher-order styled factory wrappers (e.g. hoc(styled)) are not supported" | "Imported CSS helper mixins: cannot determine inherited properties for correct pseudo selector handling" | "Local helper function returns CSS that cannot be decomposed into individual properties" | "Local helper function computes CSS values that cannot be statically traced to the component prop" | "Styled-components specificity hacks like `&&` / `&&&` are not representable in StyleX" | "Theme-dependent block-level conditional could not be fully resolved (branches may contain dynamic interpolations)" | "Theme-dependant call expression could not be resolved (e.g. theme helper calls like theme.highlight() are not supported)" | "Theme value with fallback (props.theme.X ?? / || default) cannot be resolved statically — use adapter.resolveValue to map theme paths to StyleX tokens" | "Theme-dependent nested prop access requires a project-specific theme source (e.g. useTheme())" | "Theme-dependent template literals require a project-specific theme source (e.g. useTheme())" | "Theme prop overrides on styled components are not supported" | "Universal selectors (`*`) are currently unsupported" | "Unsupported call expression (expected imported helper(...) or imported helper(...)(...))" | "Unsupported conditional test in shouldForwardProp" | "Unsupported shouldForwardProp pattern (only !prop.startsWith(), ![].includes(prop), and prop !== are supported)" | "Unsupported interpolation: arrow function" | "Unsupported interpolation: call expression" | "Unsupported interpolation: identifier" | "Unsupported interpolation: member expression" | "Unsupported interpolation: property" | "Unsupported interpolation: unknown" | "Unsupported nested conditional interpolation" | "Unsupported prop-based inline style expression cannot be safely inlined" | "Unsupported prop-based inline style props.theme access is not supported" | "Unsupported selector interpolation: imported value in selector position" | "Unsupported: media query interpolation must be a simple imported reference (expressions like `value + 1` are not supported)" | "Unsupported selector: class selector" | "Unsupported selector: comma-separated selectors must all be simple pseudos or pseudo-elements" | "Unsupported selector: descendant pseudo selector (space before pseudo)" | "Unsupported selector: descendant/child/sibling selector" | "Unsupported selector: interpolated pseudo selector" | "Unsupported selector: sibling combinator" | "Unsupported selector: unresolved interpolation in sibling selector" | "Unsupported selector: ambiguous element selector" | "Unsupported selector: attribute selector on unsupported element" | "Unsupported selector: element selector on exported component" | "Unsupported selector: element selector with combined ancestor and child pseudos" | "Unsupported selector: element selector with dynamic children" | "Unsupported selector: element selector with plain intrinsic children" | "Unsupported selector: element selector pseudo collision" | "Unsupported selector: cross-file component selector target has no JSX usage in this file" | "Unsupported selector: unresolved interpolation in cross-file component selector" | "Unsupported selector: unresolved interpolation in descendant component selector" | "Unsupported selector: unresolved interpolation in element selector" | "Unsupported selector: unresolved interpolation in reverse component selector" | "Unsupported selector: grouped reverse selector references different components" | "Unsupported selector: unknown component selector" | "Unsupported css`` mixin: after-base mixin style is not a plain object" | "Unsupported css`` mixin: nested contextual conditions in after-base mixin" | "Unsupported css`` mixin: cannot infer base default for after-base contextual override (base value is non-literal)" | "css`` helper function interpolation references closure variable that cannot be hoisted" | "Sibling selector broadened: & + & (adjacent) becomes general sibling (~) in StyleX — interleaved non-matching elements will no longer block the match" | "Using styled-components components as mixins is not supported; use css`` mixins or strings instead" | "styled(ImportedComponent) wraps a component whose file contains internal styled-components — convert the base component's file first to avoid CSS cascade conflicts" | "Transient $-prefixed props renamed on exported component — update consumer call sites to use the new prop names";
+type WarningType = "`css` helper function switch must return css templates in all branches" | "`css` helper usage as a function call (css(...)) is not supported" | "`css` helper used outside of a styled component template cannot be statically transformed" | "Adapter helper call in border interpolation did not resolve to a single CSS value" | "Adapter resolveCall returned an unparseable styles expression" | "Adapter resolveCall returned an unparseable value expression" | "Adapter resolveCall returned StyleX styles for helper call where a CSS value was expected" | "Adapter resolveCall returned undefined for helper call" | "Adapter resolveBaseComponent threw an error" | "Adapter resolved StyleX styles cannot be applied under nested selectors/at-rules" | "Adapter resolved StyleX styles inside pseudo selector but did not provide cssText for property expansion — add cssText to resolveCall result to enable pseudo-wrapping" | 'Adapter resolveCall cssText could not be parsed as CSS declarations — expected semicolon-separated property: value pairs (e.g. "white-space: nowrap; overflow: hidden;")' | "Adapter resolveValue returned an unparseable value expression" | "Adapter resolveValue returned undefined for imported value" | "Arrow function: body is not a recognized pattern (expected ternary, logical, call, or member expression)" | "Arrow function: conditional branches could not be resolved to static or theme values" | "Arrow function: helper call body is not supported" | "Arrow function: indexed theme lookup pattern not matched" | "Arrow function: logical expression pattern not supported" | "Arrow function: prop access cannot be converted to style function for this CSS property" | "Arrow function: theme access path could not be resolved" | "Component selectors like `${OtherComponent}:hover &` are not directly representable in StyleX. Manual refactor is required" | "Conditional `css` block: !important is not supported in StyleX" | "Conditional `css` block: @-rules (e.g., @media, @supports) are not supported" | "CSS block contains unsupported at-rule (only @media and @container are supported; @supports, etc. require manual handling)" | "Conditional `css` block: dynamic interpolation could not be resolved to a single component prop" | "Conditional `css` block: failed to parse expression" | "Conditional `css` block: missing CSS property name" | "Conditional `css` block: missing interpolation expression" | "Conditional `css` block: mixed static/dynamic values with non-theme expressions cannot be safely transformed" | "Conditional `css` block: multiple interpolation slots in a single property value" | "Conditional `css` block: ternary branch value could not be resolved (imported values require adapter support)" | "Conditional `css` block: ternary expressions inside pseudo selectors are not supported" | "Conditional `css` block: media query interpolation must be a simple imported reference (expressions like `value + 1` are not supported)" | "Conditional `css` block: unsupported selector" | "Directional border helper styles are not supported" | "Multi-slot border interpolation could not be resolved" | "Resolved border helper value could not be expanded to longhand properties" | "Resolved conditional border variant could not be expanded to longhand properties" | "createGlobalStyle is not supported in StyleX. Global styles should be handled separately (e.g., in a CSS file or using CSS reset libraries)" | "Dynamic styles inside pseudo elements (::before/::after) are not supported by StyleX. See https://github.com/facebook/stylex/issues/1396" | "Failed to parse theme expressions" | "Heterogeneous background values (mix of gradients and colors) not currently supported" | "Higher-order styled factory wrappers (e.g. hoc(styled)) are not supported" | "Imported CSS helper mixins: cannot determine inherited properties for correct pseudo selector handling" | "Local helper function returns CSS that cannot be decomposed into individual properties" | "Local helper function computes CSS values that cannot be statically traced to the component prop" | "Styled-components specificity hacks like `&&` / `&&&` are not representable in StyleX" | "Theme-dependent block-level conditional could not be fully resolved (branches may contain dynamic interpolations)" | "Theme-dependant call expression could not be resolved (e.g. theme helper calls like theme.highlight() are not supported)" | "Theme value with fallback (props.theme.X ?? / || default) cannot be resolved statically — use adapter.resolveValue to map theme paths to StyleX tokens" | "Theme-dependent nested prop access requires a project-specific theme source (e.g. useTheme())" | "Theme-dependent template literals require a project-specific theme source (e.g. useTheme())" | "Theme prop overrides on styled components are not supported" | "Universal selectors (`*`) are currently unsupported" | "Unsupported call expression (expected imported helper(...) or imported helper(...)(...))" | "Unsupported conditional test in shouldForwardProp" | "Unsupported shouldForwardProp pattern (only !prop.startsWith(), ![].includes(prop), and prop !== are supported)" | "Unsupported interpolation: arrow function" | "Unsupported interpolation: call expression" | "Unsupported interpolation: identifier" | "Unsupported interpolation: member expression" | "Unsupported interpolation: property" | "Unsupported interpolation: unknown" | "Unsupported nested conditional interpolation" | "Unsupported prop-based inline style expression cannot be safely inlined" | "Unsupported prop-based inline style props.theme access is not supported" | "Unsupported selector interpolation: imported value in selector position" | "Unsupported: media query interpolation must be a simple imported reference (expressions like `value + 1` are not supported)" | "Unsupported selector: class selector" | "Unsupported selector: comma-separated selectors must all be simple pseudos or pseudo-elements" | "Unsupported selector: descendant pseudo selector (space before pseudo)" | "Unsupported selector: descendant/child/sibling selector" | "Unsupported selector: interpolated pseudo selector" | "Unsupported selector: sibling combinator" | "Unsupported selector: unresolved interpolation in sibling selector" | "Unsupported selector: ambiguous element selector" | "Unsupported selector: attribute selector on unsupported element" | "Unsupported selector: element selector on exported component" | "Unsupported selector: element selector with combined ancestor and child pseudos" | "Unsupported selector: element selector with dynamic children" | "Unsupported selector: element selector with plain intrinsic children" | "Unsupported selector: element selector pseudo collision" | "Unsupported selector: cross-file component selector target has no JSX usage in this file" | "Unsupported selector: unresolved interpolation in cross-file component selector" | "Unsupported selector: unresolved interpolation in descendant component selector" | "Unsupported selector: unresolved interpolation in element selector" | "Unsupported selector: unresolved interpolation in reverse component selector" | "Unsupported selector: grouped reverse selector references different components" | "Unsupported selector: unknown component selector" | "Unsupported css`` mixin: after-base mixin style is not a plain object" | "Unsupported css`` mixin: nested contextual conditions in after-base mixin" | "Unsupported css`` mixin: cannot infer base default for after-base contextual override (base value is non-literal)" | "css`` helper function interpolation references closure variable that cannot be hoisted" | "Sibling selector broadened: & + & (adjacent) becomes general sibling (~) in StyleX — interleaved non-matching elements will no longer block the match" | "Using styled-components components as mixins is not supported; use css`` mixins or strings instead" | "styled(ImportedComponent) wraps a component whose file contains internal styled-components — convert the base component's file first to avoid CSS cascade conflicts" | "Transient $-prefixed props renamed on exported component — update consumer call sites to use the new prop names" | "Shorthand property has an opaque value that StyleX will expand to longhands — use `directional` in resolveValue to return separate longhand tokens";
 interface WarningLog {
   severity: Severity;
   type: WarningType;

package/dist/{run-prepass-Dl49r3ug.mjs → run-prepass-BInfVTeK.mjs}

@@ -527,6 +527,10 @@ async function runPrepass(options) {
 	const styledCallUsages = [];
 	const styledDefFiles = /* @__PURE__ */ new Map();
 	const classNameStyleUsages = /* @__PURE__ */ new Map();
+	const classNameUsages = /* @__PURE__ */ new Map();
+	const styleUsages = /* @__PURE__ */ new Map();
+	const elementPropUsages = /* @__PURE__ */ new Map();
+	const spreadPropUsages = /* @__PURE__ */ new Map();
 	const styledWrapperUsages = [];
 	const fileContents = /* @__PURE__ */ new Map();
 	const cachedRead = (filePath) => {
@@ -598,12 +602,21 @@ async function runPrepass(options) {
 		for (const names of styledDefFiles.values()) for (const name of names) allStyledNames.add(name);
 		if (allStyledNames.size > 0) {
 			const rgHits = rgClassNameStyleFilter(uniqueAllFiles);
-			for (const [filePath, source] of fileContents) for (const name of scanClassNameStyleUsages(source, allStyledNames)) addToSetMap(classNameStyleUsages, name, filePath);
+			const scanAndRecord = (filePath, source) => {
+				for (const result of scanConsumerProps(source, allStyledNames)) {
+					addToSetMap(classNameStyleUsages, result.name, filePath);
+					if (result.className) addToSetMap(classNameUsages, result.name, filePath);
+					if (result.style) addToSetMap(styleUsages, result.name, filePath);
+					if (result.elementProps) addToSetMap(elementPropUsages, result.name, filePath);
+					if (result.spreadProps) addToSetMap(spreadPropUsages, result.name, filePath);
+				}
+			};
+			for (const [filePath, source] of fileContents) scanAndRecord(filePath, source);
 			const filesToScan = rgHits ? [...rgHits].filter((f) => allFilesSet.has(f) && !fileContents.has(f)) : uniqueAllFiles.filter((f) => !fileContents.has(f));
 			for (const filePath of filesToScan) {
 				const source = cachedRead(filePath);
 				if (!source) continue;
-				for (const name of scanClassNameStyleUsages(source, allStyledNames)) addToSetMap(classNameStyleUsages, name, filePath);
+				scanAndRecord(filePath, source);
 			}
 		}
 	}
@@ -617,7 +630,11 @@ async function runPrepass(options) {
 				entry = {
 					styles: false,
 					as: false,
-					ref: false
+					ref: false,
+					className: false,
+					style: false,
+					elementProps: false,
+					spreadProps: false
 				};
 				consumerAnalysis.set(key, entry);
 			}
@@ -645,6 +662,10 @@ async function runPrepass(options) {
 		matchUsagesToDefinitions(asUsages, "as");
 		matchUsagesToDefinitions(refUsages, "ref");
 		matchUsagesToDefinitions(classNameStyleUsages, "styles");
+		matchUsagesToDefinitions(classNameUsages, "className");
+		matchUsagesToDefinitions(styleUsages, "style");
+		matchUsagesToDefinitions(elementPropUsages, "elementProps");
+		matchUsagesToDefinitions(spreadPropUsages, "spreadProps");
 		{
 			const seen = /* @__PURE__ */ new Set();
 			for (const { file, name } of styledCallUsages) {
@@ -662,7 +683,10 @@ async function runPrepass(options) {
 				} catch {
 					continue;
 				}
-				ensure(defFile, exportedName).styles = true;
+				const entry = ensure(defFile, exportedName);
+				entry.styles = true;
+				entry.elementProps = true;
+				entry.spreadProps = true;
 			}
 		}
 	}
@@ -765,30 +789,65 @@ function buildLocalToImportedMap(source) {
 	}
 	return map;
 }
+/** Props that don't indicate element-specific usage (non-element props). */
+const KNOWN_NON_ELEMENT_PROPS = new Set([
+	"className",
+	"style",
+	"as",
+	"ref",
+	"forwardedAs",
+	"key",
+	"children"
+]);
 /**
-* Scan source for JSX usage of specific components with className or style props.
+* Scan source for JSX usage of specific components with className, style,
+* element-specific props, or JSX spread.
 * Uses a two-step approach: first quick-checks for className/style keywords,
 * then scans JSX open tags to match component names — avoids building a huge
 * alternation regex when there are hundreds of component names.
 * Handles aliased imports (e.g., `import { Alert as MyAlert }`) by resolving
 * local tag names back to their original exported names.
 */
-function scanClassNameStyleUsages(source, componentNames) {
+function scanConsumerProps(source, componentNames) {
 	if (!CLASSNAME_STYLE_QUICK_RE.test(source)) return [];
 	let aliasMap;
-	const matches = [];
-	for (const m of source.matchAll(/<([A-Z][A-Za-z0-9]*)\b[^<>]*\b(?:className|style)\s*[={]/gs)) {
+	const resultMap = /* @__PURE__ */ new Map();
+	for (const m of source.matchAll(/<([A-Z][A-Za-z0-9]*)\b([^<>]*?)(?:\/>|>)/gs)) {
 		const tagName = m[1];
+		const attrText = m[2] ?? "";
 		if (!tagName) continue;
-		if (componentNames.has(tagName)) {
-			matches.push(tagName);
-			continue;
+		let resolvedName;
+		if (componentNames.has(tagName)) resolvedName = tagName;
+		else {
+			aliasMap ??= buildLocalToImportedMap(source);
+			const originalName = aliasMap.get(tagName);
+			if (originalName && componentNames.has(originalName)) resolvedName = originalName;
+		}
+		if (!resolvedName) continue;
+		if (!/\b(?:className|style)\s*[={]/.test(attrText) && !/\{\.\.\./.test(attrText)) continue;
+		let entry = resultMap.get(resolvedName);
+		if (!entry) {
+			entry = {
+				name: resolvedName,
+				className: false,
+				style: false,
+				elementProps: false,
+				spreadProps: false
+			};
+			resultMap.set(resolvedName, entry);
+		}
+		if (/\bclassName\s*[={]/.test(attrText)) entry.className = true;
+		if (/\bstyle\s*[={]/.test(attrText)) entry.style = true;
+		if (/\{\.\.\./.test(attrText)) entry.spreadProps = true;
+		for (const pm of attrText.matchAll(/\b([a-z][a-zA-Z-]*)(?=\s*[={]|\s+[a-z]|\s*$)/gi)) {
+			const propName = pm[1];
+			if (!KNOWN_NON_ELEMENT_PROPS.has(propName) && !propName.startsWith("$")) {
+				entry.elementProps = true;
+				break;
+			}
 		}
-		aliasMap ??= buildLocalToImportedMap(source);
-		const originalName = aliasMap.get(tagName);
-		if (originalName && componentNames.has(originalName)) matches.push(originalName);
 	}
-	return matches;
+	return [...resultMap.values()];
 }
 /**
 * Use ripgrep to find files containing `className` or `style` props.

package/dist/transform.d.mts

@@ -1,4 +1,4 @@
-import { n as WarningLog, r as Adapter } from "./logger-B_bwk2gd.mjs";
+import { n as WarningLog, r as Adapter } from "./logger-DKOqU7as.mjs";
 import "stylis";
 import { API, FileInfo, Options } from "jscodeshift";