fix: address review comments for theme-dependent mixin support

- Mark useTheme() hook for splitVariantsResolvedValue branches too,
  not just splitVariantsResolvedStyles
- Extract shared markThemeHookForVariants helper to avoid duplication
- Skip destructured defaults check for dotted prop names (e.g.,
  theme.isDark) since root-binding defaults don't inform member
  truthiness

https://claude.ai/code/session_01DchMcXQzMb1tdBUmKf6Hek

Author: claude

src/internal/builtin-handlers.ts

@@ -344,9 +344,12 @@ function tryResolveArrowFnCallWithConditionalArgs(
       // Support destructured defaults when we can statically determine their truthiness.
       // Destructuring defaults only apply when the prop is `undefined`, so we must
       // preserve that distinction in the emitted condition.
+      // Skip for dotted prop names (e.g., "theme.isDark") since the default applies
+      // to the root binding, not the member access — truthiness would be semantically wrong.
       if (
         bindings.kind === "destructured" &&
         bindings.defaults &&
+        !propName.includes(".") &&
         bindings.defaults.has(propName)
       ) {
         const defaultValue = extractStaticLiteralValue(bindings.defaults.get(propName));

src/internal/lower-rules/rule-interpolated-declaration.ts

@@ -1253,17 +1253,7 @@ export function handleInterpolatedDeclaration(args: InterpolatedDeclarationConte
       if (bail) {
         break;
       }
-      // If any variant condition references theme, trigger useTheme() hook import/declaration
-      const referencesTheme = res.variants.some(
-        (v: { when: string }) =>
-          v.when === "theme" ||
-          v.when.startsWith("theme.") ||
-          v.when === "!theme" ||
-          v.when.startsWith("!theme."),
-      );
-      if (referencesTheme) {
-        markDeclNeedsUseThemeHook(decl);
-      }
+      markThemeHookForVariants(decl, res.variants);
       decl.needsWrapperComponent = true;
       continue;
     }
@@ -1289,6 +1279,9 @@ export function handleInterpolatedDeclaration(args: InterpolatedDeclarationConte
         bailUnsupported: bailUnsupportedLocal,
       })
     ) {
+      if (res && "variants" in res) {
+        markThemeHookForVariants(decl, res.variants as ReadonlyArray<{ when: string }>);
+      }
       continue;
     }
 
@@ -2884,3 +2877,27 @@ function tryHandleMultiSlotTernary(ctx: DeclProcessingState, d: CssDeclarationIR
 
   return true;
 }
+
+/**
+ * If any variant `when` condition references the styled-components theme object,
+ * mark the declaration as needing the `useTheme()` hook so the emitted wrapper
+ * has `const theme = useTheme()` in scope.
+ */
+function markThemeHookForVariants(
+  decl: StyledDecl,
+  variants: ReadonlyArray<{ when: string }> | undefined,
+): void {
+  if (!variants) {
+    return;
+  }
+  const needsTheme = variants.some(
+    (v) =>
+      v.when === "theme" ||
+      v.when.startsWith("theme.") ||
+      v.when === "!theme" ||
+      v.when.startsWith("!theme."),
+  );
+  if (needsTheme) {
+    markDeclNeedsUseThemeHook(decl);
+  }
+}

test-cases/mixin-dynamicArgTheme.input.tsx

@@ -2,6 +2,7 @@
 import styled from "styled-components";
 import { truncateMultiline } from "./lib/helpers";
 
+// Theme-dependent mixin: theme.isDark controls the argument to the helper
 const ThemeText = styled.div`
   line-height: 1rem;
   ${({ theme }) => truncateMultiline(theme.isDark ? 1 : 2)};

test-cases/mixin-dynamicArgTheme.output.tsx

@@ -3,6 +3,7 @@ import * as stylex from "@stylexjs/stylex";
 import { useTheme } from "styled-components";
 import { helpers } from "./lib/helpers.stylex";
 
+// Theme-dependent mixin: theme.isDark controls the argument to the helper
 function ThemeText(props: React.PropsWithChildren<{}>) {
   const theme = useTheme();