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

package/README.md

@@ -36,6 +36,13 @@ const adapter = defineAdapter({
   styleMerger: null,
   // Emit sx={} JSX attributes instead of {...stylex.props()} spreads (requires StyleX ≥0.18)
   useSxProp: false,
+  // Optional override for sx-aware wrapped components. Auto-detection is on by
+  // default when `useSxProp: true` — the codemod scans the imported component's
+  // prop type for an `sx?:` member. Use this hook to override (e.g. for package
+  // imports that cannot be resolved to source on disk).
+  wrappedComponentInterface(ctx) {
+    return undefined;
+  },
   // Optional: customize the runtime theme hook import/call used for theme conditionals
   // Defaults to { functionName: "useTheme", importSource: { kind: "specifier", value: "styled-components" } }
   themeHook: {
@@ -172,6 +179,27 @@ const adapter = defineAdapter({
    */
   useSxProp: false,
 
+  /**
+   * Optional override for sx-aware wrapped components.
+   *
+   * When `useSxProp: true`, the codemod auto-detects whether an imported
+   * component accepts an `sx` prop by walking its declared prop type
+   * (intersections, type aliases, and interfaces in the same file). When
+   * `styled(Component)` wraps an sx-aware component, the codemod emits
+   * `<Component sx={styles.x} />` instead of `<Component {...stylex.props(styles.x)} />`
+   * and lets the wrapped component merge className/style itself.
+   *
+   * Use this hook to override auto-detection for cases it can't see, such as
+   * unresolvable package imports or components whose sx support is added by a
+   * HOC at runtime. Returning `undefined` falls through to auto-detection.
+   */
+  wrappedComponentInterface(ctx) {
+    if (ctx.importSource.startsWith("@company/ui/")) {
+      return { acceptsSx: true };
+    }
+    return undefined;
+  },
+
   /**
    * Optional: customize the runtime theme hook used when wrappers need theme booleans.
    * Defaults to useTheme from styled-components.
@@ -203,6 +231,7 @@ Adapters are the main extension point, see full example above. They let you cont
 - how helper calls are resolved (via `resolveCall({ ... })` returning `{ expr, imports }`, or `{ preserveRuntimeCall: true }` to keep only the original helper runtime call; `null`/`undefined` bails the file)
 - which exported components should support external className/style extension and/or polymorphic `as` prop (`externalInterface`)
 - how className/style merging is handled for components accepting external styling (`styleMerger`)
+- which imported components already accept a StyleX `sx` prop (auto-detected from the imported component's prop type when `useSxProp: true`; can be overridden via `wrappedComponentInterface`). When detected, the codemod emits `sx={styles.x}` on the wrapped component instead of `{...stylex.props(styles.x)}`.
 - which runtime theme hook import/call to use for emitted wrapper theme conditionals (`themeHook`)
 - how `styled(ImportedComponent)` wrapping an external base component can be inlined into an intrinsic element with static StyleX styles (`resolveBaseComponent`)
 
@@ -306,6 +335,7 @@ resolveBaseComponent(ctx) {
 When the codemod encounters an interpolation inside a styled template literal, it runs an internal dynamic resolution pipeline which covers common cases like:
 
 - theme access (`props.theme...`) via `resolveValue({ kind: "theme", path })`
+- indexed theme lookups (`props.theme.color[props.$bg]`) — when `ctx.indexedLookup` is true, return `{ usage: "props", dynamicArgUsage: "memberAccess" }` to emit a prebuilt per-property mixin map (e.g., `$colorMixins.backgroundColor[bg]`) instead of a dynamic style function
 - imported value access (`import { zIndex } ...; ${zIndex.popover}`) via `resolveValue({ kind: "importedValue", importedName, source, path })`
 - prop access (`props.foo`) and conditionals (`props.foo ? "a" : "b"`, `props.foo && "color: red;"`)
 - helper calls (`transitionSpeed("slowTransition")`) via `resolveCall({ ... })` — the codemod infers usage from context:

package/dist/{bridge-consumer-patcher-BbjyGr2R.mjs → bridge-consumer-patcher-DbMPzKPE.mjs}

@@ -1,6 +1,6 @@
-import { n as escapeRegex } from "./string-utils-5EMAWj3q.mjs";
-import { t as toRealPath } from "./path-utils-BlOXGcCF.mjs";
-import { t as isSelectorContext } from "./selector-context-heuristic-Dualf7ac.mjs";
+import { r as escapeRegex } from "./string-utils-Bq7DbB2x.mjs";
+import { n as toRealPath } from "./path-utils-GG-vEb5-.mjs";
+import { t as isSelectorContext } from "./selector-context-heuristic-DE3JAmpc.mjs";
 import { readFileSync } from "node:fs";
 //#region src/internal/bridge-consumer-patcher.ts
 /**

package/dist/{forwarded-as-consumer-patcher-Rd7QcRNR.mjs → forwarded-as-consumer-patcher-CXfXrvkk.mjs}

@@ -1,5 +1,5 @@
-import { n as escapeRegex } from "./string-utils-5EMAWj3q.mjs";
-import { t as toRealPath } from "./path-utils-BlOXGcCF.mjs";
+import { r as escapeRegex } from "./string-utils-Bq7DbB2x.mjs";
+import { n as toRealPath } from "./path-utils-GG-vEb5-.mjs";
 import { readFileSync } from "node:fs";
 //#region src/internal/forwarded-as-consumer-patcher.ts
 /**

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { a as defineAdapter, i as AdapterInput, t as CollectedWarning } from "./logger-C-Mherh5.mjs";
+import { a as ImportSource, i as AdapterInput, o as MarkerFileContext, s as defineAdapter, t as CollectedWarning } from "./logger-BoGU2nCP.mjs";
 
 //#region src/run.d.ts
 interface RunTransformOptions {
@@ -64,6 +64,18 @@ interface RunTransformOptions {
    * @default false
    */
   silent?: boolean;
+  /**
+   * When true, allow the codemod to leave individual styled declarations as-is when
+   * they hit an unsupported pattern while transforming the rest of the file. This
+   * enables incremental migration: a file with one unconvertible component still
+   * produces useful output for the others.
+   *
+   * When false (default), any per-decl bail escalates to a whole-file bail — the
+   * safer/stricter behavior matching the pre-partial-migration semantics.
+   *
+   * @default false
+   */
+  allowPartialMigration?: boolean;
 }
 interface RunTransformResult {
   /** Number of files that had errors */
@@ -107,4 +119,4 @@ interface RunTransformResult {
  */
 declare function runTransform(options: RunTransformOptions): Promise<RunTransformResult>;
 //#endregion
-export { type AdapterInput, defineAdapter, runTransform };
+export { type AdapterInput, type ImportSource, type MarkerFileContext, defineAdapter, runTransform };

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { a as assertValidAdapterInput, n as defineAdapter, o as describeValue } from "./adapter-Cu-LRuPc.mjs";
-import { t as Logger } from "./logger-C2O81VeU.mjs";
+import { o as assertValidAdapterInput, r as defineAdapter, s as describeValue, t as mergeMarkerDeclarations } from "./merge-markers-Bp-ELxFV.mjs";
+import { t as Logger } from "./logger-fIHHMZYO.mjs";
 import { run } from "jscodeshift/src/Runner.js";
 import { fileURLToPath } from "node:url";
 import { dirname, join, resolve } from "node:path";
@@ -141,9 +141,9 @@ async function runTransform(options) {
 		`Pattern(s): ${consumerPatterns.join(", ")}`,
 		"Check that the glob pattern is correct and files exist."
 	].join("\n"));
-	const { createModuleResolver } = await import("./resolve-imports-DKohVjNI.mjs");
+	const { createModuleResolver } = await import("./resolve-imports-BlxKezSJ.mjs").then((n) => n.n);
 	const sharedResolver = createModuleResolver();
-	const { runPrepass } = await import("./run-prepass-4gxoyZ8y.mjs");
+	const { runPrepass } = await import("./run-prepass-DUxB6hxo.mjs");
 	const absoluteFiles = filePaths.map((f) => resolve(f));
 	const absoluteConsumers = consumerFilePaths.map((f) => resolve(f));
 	let prepassResult;
@@ -204,7 +204,9 @@ async function runTransform(options) {
 		resolveCall: resolveCallWithLogging,
 		resolveSelector: resolveSelectorWithLogging,
 		resolveBaseComponent: adapterInput.resolveBaseComponent ? resolveBaseComponentWithLogging : void 0,
-		resolveThemeCall: resolvedAdapter.resolveThemeCall
+		resolveThemeCall: resolvedAdapter.resolveThemeCall,
+		wrappedComponentInterface: resolvedAdapter.wrappedComponentInterface,
+		markerFile: resolvedAdapter.markerFile
 	};
 	const transformPath = (() => {
 		const adjacent = join(__dirname, "transform.mjs");
@@ -232,12 +234,13 @@ async function runTransform(options) {
 		bridgeResults,
 		transformedFiles,
 		transientPropRenames,
+		allowPartialMigration: options.allowPartialMigration ?? false,
 		runInBand: true,
 		silent: options.silent ?? false
 	});
 	if (sidecarFiles.size > 0 && !dryRun) for (const [sidecarPath, content] of sidecarFiles) await writeFile(sidecarPath, mergeSidecarContent(sidecarPath, content), "utf-8");
 	if (bridgeResults.size > 0 && !dryRun) {
-		const { buildConsumerReplacements, patchConsumerFile } = await import("./bridge-consumer-patcher-BbjyGr2R.mjs");
+		const { buildConsumerReplacements, patchConsumerFile } = await import("./bridge-consumer-patcher-DbMPzKPE.mjs");
 		const consumerReplacements = buildConsumerReplacements(crossFilePrepassResult.selectorUsages, bridgeResults, transformedFiles);
 		const patchedFiles = [];
 		for (const [consumerPath, replacements] of consumerReplacements) {
@@ -250,7 +253,7 @@ async function runTransform(options) {
 		if (formatterCommands && patchedFiles.length > 0) await runFormatters(formatterCommands, patchedFiles);
 	}
 	if (prepassResult.forwardedAsConsumers.size > 0 && !dryRun) {
-		const { buildForwardedAsReplacements, patchConsumerForwardedAs } = await import("./forwarded-as-consumer-patcher-Rd7QcRNR.mjs");
+		const { buildForwardedAsReplacements, patchConsumerForwardedAs } = await import("./forwarded-as-consumer-patcher-CXfXrvkk.mjs");
 		const forwardedAsReplacements = buildForwardedAsReplacements(prepassResult.forwardedAsConsumers, transformedFiles);
 		const patchedFiles = [];
 		for (const [consumerPath, entries] of forwardedAsReplacements) {
@@ -263,7 +266,7 @@ async function runTransform(options) {
 		if (formatterCommands && patchedFiles.length > 0) await runFormatters(formatterCommands, patchedFiles);
 	}
 	if (transientPropRenames.size > 0 && !dryRun) {
-		const { collectTransientPropPatches } = await import("./transient-prop-consumer-patcher-CeMJEJG9.mjs");
+		const { collectTransientPropPatches } = await import("./transient-prop-consumer-patcher-C5KQ2iFe.mjs");
 		const patches = collectTransientPropPatches({
 			transientPropRenames,
 			consumerFilePaths: consumerFilePaths.map((p) => resolve(p)),
@@ -307,10 +310,6 @@ function createAutoPrepassFailureError(err, consumerPatterns, parser) {
 /**
 * Merge new sidecar marker content into an existing .stylex.ts file, preserving
 * user-owned exports (e.g. defineVars). If the file doesn't exist, returns content as-is.
-*
-* New marker declarations (`export const XMarker = stylex.defineMarker()`) are
-* appended only if they don't already exist in the file. The stylex import is
-* ensured at the top.
 */
 function mergeSidecarContent(sidecarPath, newContent) {
 	let existing;
@@ -319,17 +318,7 @@ function mergeSidecarContent(sidecarPath, newContent) {
 	} catch {
 		return newContent;
 	}
-	const markerLineRe = /^export const \w+ = stylex\.defineMarker\(\);$/gm;
-	const newMarkers = [];
-	for (const m of newContent.matchAll(markerLineRe)) newMarkers.push(m[0]);
-	if (newMarkers.length === 0) return newContent;
-	const markersToAdd = newMarkers.filter((line) => !existing.includes(line));
-	if (markersToAdd.length === 0) return existing;
-	let merged = existing;
-	if (!merged.includes("@stylexjs/stylex")) merged = `import * as stylex from "@stylexjs/stylex";\n\n${merged}`;
-	const trailingNewline = merged.endsWith("\n") ? "" : "\n";
-	merged = merged + trailingNewline + markersToAdd.join("\n") + "\n";
-	return merged;
+	return mergeMarkerDeclarations(existing, newContent);
 }
 /** Run formatter commands on a list of files, logging warnings on failure. */
 async function runFormatters(commands, files) {

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

@@ -25,6 +25,13 @@ type ThemeResolveContext = {
    * Example: "padding", "margin", "border"
    */
   cssProperty?: string;
+  /**
+   * When true, this resolution is for an indexed (bracket) lookup like
+   * `props.theme.color[props.$bg]`. The adapter can use this to return a
+   * CSS-property-aware prebuilt mixin map (`usage: "props"`) instead of a
+   * raw token object used in `stylex.create()`.
+   */
+  indexedLookup?: boolean;
 };
 type CssVariableResolveContext = {
   kind: "cssVariable";
@@ -200,12 +207,22 @@ type ResolveValueResult = {
   /**
    * Disambiguates how the resolved expression is used:
    * - "props": a StyleX style object suitable for passing to `stylex.props(...)`.
-   *   Use this when resolving imported styled component mixins to their StyleX equivalent.
+   *   Use this when resolving imported styled component mixins to their StyleX equivalent,
+   *   or for indexed theme lookups that resolve to prebuilt per-property mixin maps.
    * - undefined (default): a value that can be used inside `stylex.create(...)`.
    *
-   * Note: Only meaningful for `{ kind: "importedValue" }`.
+   * Meaningful for `{ kind: "importedValue" }` and `{ kind: "theme" }` with `indexedLookup`.
    */
   usage?: "props";
+  /**
+   * When `usage` is `"props"` and the resolved expression should be indexed with a
+   * dynamic prop value (e.g., `$colorMixins.backgroundColor[propValue]`):
+   * - `"memberAccess"`: the codemod applies `expr[propValue]` computed member access
+   *
+   * Only meaningful when `usage` is `"props"` and the resolution context is an indexed
+   * theme lookup (`indexedLookup: true`).
+   */
+  dynamicArgUsage?: "memberAccess";
 };
 type CallResolveResultWithExpr = {
   /**
@@ -500,6 +517,45 @@ type ExternalInterfaceResult = {
   elementProps?: boolean; /** Whether cross-file consumers use JSX spread ({...props}) */
   spreadProps?: boolean;
 };
+interface MarkerFileContext {
+  /** Absolute path of the file being transformed */
+  filePath: string;
+}
+/**
+ * Context for `adapter.wrappedComponentInterface(...)`.
+ *
+ * Called for each `styled(Component)` declaration where `Component` is
+ * imported from another module. Lets the adapter declare that the wrapped
+ * component already accepts a StyleX `sx` prop so the codemod can emit
+ * `sx={style}` instead of `{...stylex.props(style)}`.
+ */
+interface WrappedComponentInterfaceContext {
+  /**
+   * Import source for the wrapped base component.
+   * - package import: e.g. `"@company/ui"`
+   * - relative import: resolved absolute path
+   */
+  importSource: string;
+  /**
+   * Imported binding name for the wrapped base component.
+   * Example: `import { Button as UiButton } ...` -> importedName: "Button"
+   */
+  importedName: string;
+  /**
+   * Absolute path of the file currently being transformed.
+   */
+  filePath: string;
+}
+/**
+ * Result for `adapter.wrappedComponentInterface(...)`.
+ *
+ * - `acceptsSx: true` — the wrapped component accepts an `sx` prop. The codemod
+ *   emits `sx={style}` instead of `{...stylex.props(style)}` and skips
+ *   className/style merging in the wrapper (the wrapped component owns that).
+ */
+interface WrappedComponentInterfaceResult {
+  acceptsSx: boolean;
+}
 /**
  * Configuration for a custom style merger function that combines stylex.props()
  * results with external className/style props.
@@ -659,6 +715,49 @@ interface Adapter {
    * @default false
    */
   usePhysicalProperties?: boolean;
+  /**
+   * Optional override for sx-aware wrapped component detection.
+   *
+   * When `useSxProp: true`, the codemod auto-detects whether an imported
+   * component accepts a StyleX `sx` prop by reading its definition file and
+   * walking its declared prop type (intersections, type aliases, interfaces
+   * in the same file). When detected, `styled(Component)` emits
+   * `<Component sx={styles.x} />` instead of
+   * `<Component {...stylex.props(styles.x)} />`.
+   *
+   * Use this hook to override auto-detection for cases it cannot see — for
+   * example unresolvable package imports or components whose sx support is
+   * added by a HOC at runtime.
+   *
+   * Return:
+   * - `{ acceptsSx: true }` to force the `sx={...}` path
+   * - `{ acceptsSx: false }` to force the `{...stylex.props(...)}` path
+   * - `undefined` to fall through to auto-detection (default)
+   *
+   * Only consulted for `styled(ImportedComponent)` declarations.
+   */
+  wrappedComponentInterface?: (context: WrappedComponentInterfaceContext) => WrappedComponentInterfaceResult | undefined;
+  /**
+   * Optional function to customize where marker sidecar files (`stylex.defineMarker()`)
+   * are written. By default, markers are placed in a `.stylex.ts` file next to the source.
+   *
+   * When provided, the function receives the source file path and returns an `ImportSource`
+   * that determines both the import path in the transformed file and the file path where
+   * markers are written. Return `undefined` to fall back to the default behavior (local
+   * sidecar file next to the source).
+   *
+   * Only consulted when a file has cross-file marker relations. Files that only
+   * reference markers internally (e.g., sibling selectors within the same file)
+   * always use a local sidecar file regardless of this setting.
+   *
+   * Example:
+   * ```typescript
+   * markerFile(ctx) {
+   *   return { kind: "absolutePath", value: "/path/to/shared/markers.stylex.ts" };
+   * }
+   * ```
+   */
+  markerFile?: (context: MarkerFileContext) => ImportSource | undefined;
 }
 /**
  * User-facing adapter input type accepted by `defineAdapter()`.
@@ -686,6 +785,8 @@ interface AdapterInput {
   themeHook?: Adapter["themeHook"];
   useSxProp: Adapter["useSxProp"];
   usePhysicalProperties?: Adapter["usePhysicalProperties"];
+  wrappedComponentInterface?: Adapter["wrappedComponentInterface"];
+  markerFile?: Adapter["markerFile"];
 }
 /**
  * Helper for nicer user authoring + type inference.
@@ -763,7 +864,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)" | "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: unresolved interpolation in cross-component sibling selector" | "Unsupported selector: grouped reverse selector references different components" | "Unsupported selector: computed media query inside ancestor attribute selector" | "Unsupported selector: computed media query inside cross-component sibling selector" | "Unsupported selector: computed media query inside sibling selector" | "Unsupported selector: computed media query inside :has() component selector" | "Unsupported selector: cross-file :has() component selector not yet supported" | "Unsupported selector: unresolved interpolation in :has() component selector" | "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" | "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";
+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)" | "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: adjacent sibling combinator" | "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: unresolved interpolation in cross-component sibling selector" | "Unsupported selector: grouped reverse selector references different components" | "Unsupported selector: computed media query inside ancestor attribute selector" | "Unsupported selector: computed media query inside cross-component sibling selector" | "Unsupported selector: computed media query inside sibling selector" | "Unsupported selector: computed media query inside :has() component selector" | "Unsupported selector: cross-file :has() component selector not yet supported" | "Unsupported selector: unresolved interpolation in :has() component selector" | "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" | "Using styled-components components as mixins is not supported; use css`` mixins or strings instead" | "styled(ImportedComponent) wraps a component whose file uses styled-components — convert the base component's file first to avoid CSS cascade conflicts" | "Partial transform would have a StyleX leaf wrap a styled-components base — the extending component was transformed but its base was not, so the leaf's StyleX overrides cannot reliably beat the base's styled-components styles" | "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" | "animation shorthand contains a var() with no classifiable fallback — its longhand position cannot be determined statically; bind the variable to a specific longhand (e.g. animation-duration: var(--x)) instead";
 interface WarningLog {
   severity: Severity;
   type: WarningType;
@@ -777,4 +878,4 @@ interface CollectedWarning extends WarningLog {
   filePath: string;
 }
 //#endregion
-export { defineAdapter as a, AdapterInput as i, WarningLog as n, Adapter as r, CollectedWarning as t };
+export { ImportSource as a, AdapterInput as i, WarningLog as n, MarkerFileContext as o, Adapter as r, defineAdapter as s, CollectedWarning as t };

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

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

package/dist/path-utils-GG-vEb5-.mjs

@@ -0,0 +1,30 @@
+import { resolve } from "node:path";
+import { realpathSync } from "node:fs";
+//#region src/internal/utilities/path-utils.ts
+/**
+* Shared path utilities for symlink resolution and path normalization.
+*/
+/**
+* Resolve a file path to its real (symlink-resolved) absolute path.
+* Falls back to pathResolve if realpathSync fails (e.g. file doesn't exist yet).
+*/
+function toRealPath(filePath) {
+	const resolved = resolve(filePath);
+	try {
+		return realpathSync(resolved);
+	} catch {
+		return resolved;
+	}
+}
+/**
+* Returns `true` for ESM/CJS module specifiers that should be resolved
+* relative to the importing file (e.g. `./foo`, `../bar`, `.`, `..`). Bare
+* specifiers like `react` or `@scope/pkg` return `false`. Backslash-prefixed
+* forms are accepted to match how authoring tools sometimes emit Windows
+* paths into source.
+*/
+function isRelativeSpecifier(specifier) {
+	return specifier === "." || specifier === ".." || specifier.startsWith("./") || specifier.startsWith("../") || specifier.startsWith(".\\") || specifier.startsWith("..\\");
+}
+//#endregion
+export { toRealPath as n, isRelativeSpecifier as t };

package/dist/{resolve-imports-DKohVjNI.mjs → resolve-imports-BlxKezSJ.mjs}

@@ -1,4 +1,16 @@
 import { ResolverFactory } from "oxc-resolver";
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
 //#region src/internal/prepass/resolve-imports.ts
 /**
 * Module resolution using oxc-resolver.
@@ -10,6 +22,7 @@ import { ResolverFactory } from "oxc-resolver";
 * - Package exports field
 * - Symlink resolution (pnpm/Yarn workspaces)
 */
+var resolve_imports_exports = /* @__PURE__ */ __exportAll({ createModuleResolver: () => createModuleResolver });
 /**
 * Shared resolver config for TypeScript projects.
 *
@@ -61,4 +74,4 @@ function createModuleResolver(config = DEFAULT_CONFIG) {
 	} };
 }
 //#endregion
-export { createModuleResolver };
+export { resolve_imports_exports as n, createModuleResolver as t };

package/dist/{run-prepass-4gxoyZ8y.mjs → run-prepass-DUxB6hxo.mjs}

@@ -1,7 +1,7 @@
-import { t as Logger } from "./logger-C2O81VeU.mjs";
-import { n as escapeRegex } from "./string-utils-5EMAWj3q.mjs";
-import { t as PLACEHOLDER_RE } from "./styled-css-C3QKH6Od.mjs";
-import { t as isSelectorContext } from "./selector-context-heuristic-Dualf7ac.mjs";
+import { t as Logger } from "./logger-fIHHMZYO.mjs";
+import { r as escapeRegex } from "./string-utils-Bq7DbB2x.mjs";
+import { t as PLACEHOLDER_RE } from "./styled-css-Bu2bjAUW.mjs";
+import { t as isSelectorContext } from "./selector-context-heuristic-DE3JAmpc.mjs";
 import path, { relative, resolve } from "node:path";
 import { readFileSync, realpathSync } from "node:fs";
 import { execSync } from "node:child_process";
@@ -665,12 +665,14 @@ async function runPrepass(options) {
 		{
 			const seen = /* @__PURE__ */ new Set();
 			for (const { file, name } of styledCallUsages) {
-				const importInfo = findImportSource(cachedRead(file), name);
-				if (!importInfo) continue;
-				const { source: importSource, exportedName } = importInfo;
-				let defFile = resolve$1(importSource, file);
-				if (!defFile) continue;
-				defFile = resolveBarrelReExport(defFile, exportedName, resolve$1, cachedRead) ?? defFile;
+				const def = resolveDefinitionFile({
+					file,
+					localName: name,
+					cachedRead,
+					resolve: resolve$1
+				});
+				if (!def) continue;
+				const { defFile, exportedName } = def;
 				const key = `${defFile}:${exportedName}`;
 				if (seen.has(key)) continue;
 				seen.add(key);
@@ -689,12 +691,14 @@ async function runPrepass(options) {
 	const forwardedAsConsumers = /* @__PURE__ */ new Map();
 	if (createExternalInterface && styledWrapperUsages.length > 0) for (const { file, localStyledName, wrappedName } of styledWrapperUsages) {
 		if (transformSet.has(file)) continue;
-		const importInfo = findImportSource(cachedRead(file), wrappedName);
-		if (!importInfo) continue;
-		const { source: importSource, exportedName } = importInfo;
-		let defFile = resolve$1(importSource, file);
-		if (!defFile) continue;
-		defFile = resolveBarrelReExport(defFile, exportedName, resolve$1, cachedRead) ?? defFile;
+		const def = resolveDefinitionFile({
+			file,
+			localName: wrappedName,
+			cachedRead,
+			resolve: resolve$1
+		});
+		if (!def) continue;
+		const { defFile } = def;
 		if (!transformSet.has(defFile)) continue;
 		let entries = forwardedAsConsumers.get(file);
 		if (!entries) {
@@ -1005,5 +1009,22 @@ function logPrepassDebug(scannedFiles, info, consumerAnalysis) {
 	if (consumerAnalysis) lines.push(`  Consumer analysis: ${consumerAnalysis.size} entries`);
 	process.stderr.write(lines.join("\n") + "\n");
 }
+/**
+* Resolve a local identifier in `file` to the absolute path of the module that
+* defines it, following barrel re-exports. Returns `null` when the import
+* cannot be located on disk.
+*/
+function resolveDefinitionFile(args) {
+	const { file, localName, cachedRead, resolve } = args;
+	const importInfo = findImportSource(cachedRead(file), localName);
+	if (!importInfo) return null;
+	const { source: importSource, exportedName } = importInfo;
+	const initialDefFile = resolve(importSource, file);
+	if (!initialDefFile) return null;
+	return {
+		defFile: resolveBarrelReExport(initialDefFile, exportedName, resolve, cachedRead) ?? initialDefFile,
+		exportedName
+	};
+}
 //#endregion
 export { runPrepass };

package/dist/{string-utils-5EMAWj3q.mjs → string-utils-Bq7DbB2x.mjs}

@@ -29,6 +29,18 @@ function kebabToCamelCase(s) {
 	return s.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 }
 /**
+* Converts a camelCase string to kebab-case.
+* Preserves CSS custom property prefixes (`--foo`). React uses leading uppercase
+* to indicate vendor prefixes (e.g. `WebkitAppearance` → `-webkit-appearance`).
+* @example camelToKebabCase("backgroundColor") => "background-color"
+* @example camelToKebabCase("padding") => "padding"
+* @example camelToKebabCase("WebkitAppearance") => "-webkit-appearance"
+*/
+function camelToKebabCase(s) {
+	if (s.startsWith("--")) return s;
+	return s.replace(/([A-Z])/g, (_, ch) => `-${ch.toLowerCase()}`);
+}
+/**
 * Lowercases the first character of a string.
 * @example lowerFirst("Hello") => "hello"
 */
@@ -93,4 +105,4 @@ function normalizeWhitespace(s) {
 	return s.replace(/\s+/g, " ").trim();
 }
 //#endregion
-export { isValidIdentifierName as a, lowerFirst as c, isPrettierIgnoreComment as i, normalizeWhitespace as l, escapeRegex as n, kebabToCamelCase as o, isBackgroundImageValue as r, looksLikeLength as s, capitalize as t, sanitizeIdentifier as u };
+export { isPrettierIgnoreComment as a, looksLikeLength as c, sanitizeIdentifier as d, isBackgroundImageValue as i, lowerFirst as l, capitalize as n, isValidIdentifierName as o, escapeRegex as r, kebabToCamelCase as s, camelToKebabCase as t, normalizeWhitespace as u };