fix: prevent dual theme bindings and bail for dotted defaults

- Return propName: null for bare "theme" in parsePropRef to avoid
  both `const { theme } = props` and `const theme = useTheme()`
- Bail when dotted prop names (e.g., "config.enabled") have root
  binding defaults that can't be propagated to the emitted wrapper
- Add bare theme truthiness test case (ThemeTruthyText)

https://claude.ai/code/session_01DchMcXQzMb1tdBUmKf6Hek

Author: claude

src/internal/builtin-handlers.ts

@@ -344,19 +344,22 @@ 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));
-        if (defaultValue === undefined) {
-          return null;
+      if (bindings.kind === "destructured" && bindings.defaults) {
+        if (propName.includes(".")) {
+          // For dotted prop names (e.g., "config.enabled"), bail if the root binding
+          // has a destructuring default — the emitted wrapper won't propagate the
+          // default, causing a runtime regression (TypeError on undefined member access).
+          const rootBinding = propName.split(".")[0]!;
+          if (bindings.defaults.has(rootBinding)) {
+            return null;
+          }
+        } else if (bindings.defaults.has(propName)) {
+          const defaultValue = extractStaticLiteralValue(bindings.defaults.get(propName));
+          if (defaultValue === undefined) {
+            return null;
+          }
+          conditionalDefaultTruthy = Boolean(defaultValue);
         }
-        conditionalDefaultTruthy = Boolean(defaultValue);
       }
 
       // Both branches must be static literals (use extractStaticLiteralValue

src/internal/emit-wrappers/variant-condition.ts

@@ -91,7 +91,9 @@ export function parseVariantWhenToAst(
       }
       return { propName: null, expr: j.identifier(trimmedRaw) };
     }
-    return { propName: trimmedRaw, expr: j.identifier(trimmedRaw) };
+    // Bare "theme" is resolved via useTheme(), not from component props — same
+    // treatment as dotted theme refs (line 90) to avoid dual-binding conflicts.
+    return { propName: trimmedRaw === "theme" ? null : trimmedRaw, expr: j.identifier(trimmedRaw) };
   };
 
   const trimmed = String(when ?? "").trim();

test-cases/mixin-dynamicArgTheme.input.tsx

@@ -2,14 +2,21 @@
 import styled from "styled-components";
 import { truncateMultiline } from "./lib/helpers";
 
-// Theme-dependent mixin: theme.isDark controls the argument to the helper
+// Dotted theme access: theme.isDark controls the argument
 const ThemeText = styled.div`
   line-height: 1rem;
   ${({ theme }) => truncateMultiline(theme.isDark ? 1 : 2)};
 `;
 
+// Bare theme truthiness check (theme object as condition)
+const ThemeTruthyText = styled.div`
+  line-height: 1rem;
+  ${({ theme }) => truncateMultiline(theme ? 1 : 2)};
+`;
+
 export const App = () => (
   <div style={{ display: "flex", flexDirection: "column", gap: "8px", padding: "16px" }}>
-    <ThemeText>Theme-dependent truncation</ThemeText>
+    <ThemeText>Dotted theme condition</ThemeText>
+    <ThemeTruthyText>Bare theme condition</ThemeTruthyText>
   </div>
 );

test-cases/mixin-dynamicArgTheme.output.tsx

@@ -3,7 +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
+// Dotted theme access: theme.isDark controls the argument
 function ThemeText(props: React.PropsWithChildren<{}>) {
   const theme = useTheme();
 
@@ -19,14 +19,34 @@ function ThemeText(props: React.PropsWithChildren<{}>) {
   );
 }
 
+// Bare theme truthiness check (theme object as condition)
+function ThemeTruthyText(props: React.PropsWithChildren<{}>) {
+  const theme = useTheme();
+
+  return (
+    <div
+      sx={[
+        styles.themeTruthyText,
+        theme ? helpers.truncateMultiline(1) : helpers.truncateMultiline(2),
+      ]}
+    >
+      {props.children}
+    </div>
+  );
+}
+
 export const App = () => (
   <div style={{ display: "flex", flexDirection: "column", gap: "8px", padding: "16px" }}>
-    <ThemeText>Theme-dependent truncation</ThemeText>
+    <ThemeText>Dotted theme condition</ThemeText>
+    <ThemeTruthyText>Bare theme condition</ThemeTruthyText>
   </div>
 );
 
 const styles = stylex.create({
   themeText: {
     lineHeight: "1rem",
   },
+  themeTruthyText: {
+    lineHeight: "1rem",
+  },
 });