Fix cascade ordering for indexed theme lookups in inline path

The indexed lookup mixin (e.g. $colorMixins.backgroundColor[bg]) was placed
before style functions added during attr processing, causing hover's
`default: null` to override the mixin's backgroundColor. Changed from
`afterBase: true` to `afterVariants: true` and added afterVariants handling
in the inline rewrite-jsx path so these entries are appended last.

https://claude.ai/code/session_01EhFJ4W5QixJn7ZLPzMbxPL

Author: claude

src/internal/lower-rules/value-patterns.ts

@@ -665,7 +665,7 @@ export const createValuePatternHandlers = (ctx: ValuePatternContext) => {
           ) as ExpressionKind;
 
           decl.extraStylexPropsArgs ??= [];
-          decl.extraStylexPropsArgs.push({ expr: indexedExpr, afterBase: true });
+          decl.extraStylexPropsArgs.push({ expr: indexedExpr, afterVariants: true });
 
           // Track in mixinOrder for correct cascade interleaving with extraStyleKeys
           const order = decl.mixinOrder ?? [];

src/internal/transform-steps/rewrite-jsx.ts

@@ -404,6 +404,7 @@ export function rewriteJsxStep(ctx: TransformContext): StepResult {
         // Build interleaved extra args based on mixinOrder (if available)
         const extraMixinArgs: ExpressionKind[] = [];
         const extraAfterBaseArgs: ExpressionKind[] = [];
+        const extraAfterVariantsArgs: ExpressionKind[] = [];
         if (mixinOrder && mixinOrder.length > 0) {
           let styleKeyIdx = 0;
           let propsArgIdx = 0;
@@ -426,7 +427,9 @@ export function rewriteJsxStep(ctx: TransformContext): StepResult {
               const arg = extraStylexPropsArgs[propsArgIdx];
               propsArgIdx++;
               if (arg) {
-                if (arg.afterBase) {
+                if (arg.afterVariants) {
+                  extraAfterVariantsArgs.push(arg.expr);
+                } else if (arg.afterBase) {
                   extraAfterBaseArgs.push(arg.expr);
                 } else {
                   extraMixinArgs.push(arg.expr);
@@ -437,7 +440,11 @@ export function rewriteJsxStep(ctx: TransformContext): StepResult {
         } else {
           // Fallback: no order tracking, use legacy behavior (propsArgs first, then styleKeys)
           for (const arg of extraStylexPropsArgs) {
-            extraMixinArgs.push(arg.expr);
+            if (arg.afterVariants) {
+              extraAfterVariantsArgs.push(arg.expr);
+            } else {
+              extraMixinArgs.push(arg.expr);
+            }
           }
           for (const key of extraStyleKeys) {
             const expr = j.memberExpression(
@@ -757,6 +764,9 @@ export function rewriteJsxStep(ctx: TransformContext): StepResult {
           styleAttr = null;
         }
 
+        // Append afterVariants entries last — they must override all variant/attr styles.
+        styleArgs.push(...extraAfterVariantsArgs);
+
         // Build extra className expression from CSS module classes (if any).
         const extraClassNameExpr =
           decl.extraClassNames && decl.extraClassNames.length > 0

test-cases/theme-indexedLookup.output.tsx

@@ -16,8 +16,8 @@ function Box(props: BoxProps) {
     <div
       sx={[
         styles.box,
-        $colorMixins.backgroundColor[bg],
         styles.boxBackgroundColorHover(hoverColor),
+        $colorMixins.backgroundColor[bg],
       ]}
     >
       {children}