Fix CSS variable bridge: preserve static parts and improve type safety

- Compose var() references with surrounding static parts (e.g.,
  `box-shadow: 0 4px 8px ${color}` → `"0 4px 8px var(--name)"`)
- Remove unnecessary type assertion, use proper TypeScript narrowing
  after discriminated union check
- Extend test case with box-shadow (static prefix) and border
  (shorthand expansion) edge cases

https://claude.ai/code/session_01SkMXxV5ASTu66vhriVXRRq

Author: claude

src/internal/lower-rules/process-rules.ts

@@ -1278,16 +1278,15 @@ function tryForwardCssVarBridge(
     if (d.value.kind !== "interpolated" || !d.property) {
       return "bail";
     }
-    const parts = (d.value as { parts?: Array<{ kind: string; slotId?: number }> }).parts;
-    if (!parts) {
-      return "bail";
-    }
-    const slotParts = parts.filter((p) => p.kind === "slot" && p.slotId !== undefined);
+    const slotParts = d.value.parts.filter(
+      (p): p is CssValuePart & { kind: "slot" } => p.kind === "slot",
+    );
     // Only handle single-slot interpolations for now
-    if (slotParts.length !== 1 || slotParts[0]!.slotId === undefined) {
+    const singleSlot = slotParts.length === 1 ? slotParts[0] : undefined;
+    if (!singleSlot) {
       return "bail";
     }
-    const slotId = slotParts[0]!.slotId;
+    const slotId = singleSlot.slotId;
     const expr = decl.templateExpressions[slotId];
     if (
       !expr ||
@@ -1317,12 +1316,14 @@ function tryForwardCssVarBridge(
     // Generate a CSS variable name from the override style key and CSS property
     const varName = `--${overrideStyleKey}-${kebabToCamelCase(d.property)}`;
 
-    // Set bucket value(s) to var(--name) — shorthand expansion produces the right outputs
+    // Set bucket value(s) — shorthand expansion may produce multiple outputs.
+    // Compose static parts with the var() reference to preserve prefixes/suffixes
+    // (e.g., `box-shadow: 0 4px 8px ${color}` → `"0 4px 8px var(--name)"`).
     for (const out of cssDeclarationToStylexDeclarations(d)) {
       if (out.value.kind === "static") {
         bucket[out.prop] = cssValueToJs(out.value, d.important, out.prop);
       } else {
-        bucket[out.prop] = `var(${varName})`;
+        bucket[out.prop] = composeVarReference(out.value.parts, varName);
       }
       writtenProps.add(out.prop);
     }
@@ -1335,6 +1336,14 @@ function tryForwardCssVarBridge(
   return writtenProps;
 }
 
+/**
+ * Builds a CSS value string from parts, replacing slot references with `var(--name)`.
+ * Preserves static prefixes/suffixes around the interpolation slot.
+ */
+function composeVarReference(parts: CssValuePart[], varName: string): string {
+  return parts.map((p) => (p.kind === "static" ? p.value : `var(${varName})`)).join("");
+}
+
 /**
  * Processes rule declarations into a relation override bucket, handling both static
  * and interpolated (theme-resolved) values. Returns "bail" if any interpolated

test-cases/selector-descendantComponentDynamicProp.input.tsx

@@ -16,9 +16,47 @@ const Button = styled.button<{ $color?: string }>`
   }
 `;
 
+// Static parts around the interpolation must be preserved in the var() reference
+// (e.g., `box-shadow: 0 4px 8px ${color}` → `"0 4px 8px var(--name)"`).
+const Badge = styled.span`
+  font-size: 12px;
+`;
+
+const Card = styled.div<{ $shadow?: string }>`
+  padding: 16px;
+  background: white;
+
+  &:hover ${Badge} {
+    box-shadow: 0 4px 8px ${(props) => props.$shadow ?? "rgba(0,0,0,0.2)"};
+  }
+`;
+
+// Shorthand border with interpolation: static longhands stay static,
+// dynamic color is bridged via CSS variable.
+const Tag = styled.span`
+  display: inline-block;
+`;
+
+const Toolbar = styled.div<{ $accent?: string }>`
+  display: flex;
+  gap: 8px;
+
+  &:hover ${Tag} {
+    border: 2px solid ${(props) => props.$accent ?? "gray"};
+  }
+`;
+
 export const App = () => (
-  <Button>
-    <Icon />
-    Click
-  </Button>
+  <div style={{ display: "flex", flexDirection: "column", gap: 16, padding: 16 }}>
+    <Button $color="blue">
+      <Icon />
+      Button hover → Icon color
+    </Button>
+    <Card $shadow="rgba(0,0,255,0.3)">
+      <Badge>Card hover → Badge shadow</Badge>
+    </Card>
+    <Toolbar $accent="red">
+      <Tag>Toolbar hover → Tag border</Tag>
+    </Toolbar>
+  </div>
 );

test-cases/selector-descendantComponentDynamicProp.output.tsx

@@ -26,11 +26,65 @@ function Button(props: ButtonProps) {
   );
 }
 
+type CardProps = React.PropsWithChildren<{
+  shadow?: string;
+}>;
+
+function Card(props: CardProps) {
+  const { children, shadow } = props;
+  const sx = stylex.props(styles.card, stylex.defaultMarker());
+
+  return (
+    <div
+      {...sx}
+      style={
+        {
+          ...sx.style,
+          "--badgeInCard-boxShadow": props.shadow ?? "rgba(0,0,0,0.2)",
+        } as React.CSSProperties
+      }
+    >
+      {children}
+    </div>
+  );
+}
+
+type ToolbarProps = React.PropsWithChildren<{
+  accent?: string;
+}>;
+
+function Toolbar(props: ToolbarProps) {
+  const { children, accent } = props;
+  const sx = stylex.props(styles.toolbar, stylex.defaultMarker());
+
+  return (
+    <div
+      {...sx}
+      style={
+        {
+          ...sx.style,
+          "--tagInToolbar-border": props.accent ?? "gray",
+        } as React.CSSProperties
+      }
+    >
+      {children}
+    </div>
+  );
+}
+
 export const App = () => (
-  <Button>
-    <span sx={[styles.icon, styles.iconInButton]} />
-    Click
-  </Button>
+  <div style={{ display: "flex", flexDirection: "column", gap: 16, padding: 16 }}>
+    <Button color="blue">
+      <span sx={[styles.icon, styles.iconInButton]} />
+      Button hover → Icon color
+    </Button>
+    <Card shadow="rgba(0,0,255,0.3)">
+      <span sx={[styles.badge, styles.badgeInCard]}>Card hover → Badge shadow</span>
+    </Card>
+    <Toolbar accent="red">
+      <span sx={[styles.tag, styles.tagInToolbar]}>Toolbar hover → Tag border</span>
+    </Toolbar>
+  </div>
 );
 
 const styles = stylex.create({
@@ -41,10 +95,48 @@ const styles = stylex.create({
   button: {
     padding: 8,
   },
+  // Static parts around the interpolation must be preserved in the var() reference
+  // (e.g., `box-shadow: 0 4px 8px ${color}` → `"0 4px 8px var(--name)"`).
+  badge: {
+    fontSize: 12,
+  },
+  card: {
+    padding: 16,
+    backgroundColor: "white",
+  },
+  // Shorthand border with interpolation: static longhands stay static,
+  // dynamic color is bridged via CSS variable.
+  tag: {
+    display: "inline-block",
+  },
+  toolbar: {
+    display: "flex",
+    gap: 8,
+  },
   iconInButton: {
     color: {
       default: null,
       [stylex.when.ancestor(":hover")]: "var(--iconInButton-color)",
     },
   },
+  badgeInCard: {
+    boxShadow: {
+      default: null,
+      [stylex.when.ancestor(":hover")]: "0 4px 8px var(--badgeInCard-boxShadow)",
+    },
+  },
+  tagInToolbar: {
+    borderWidth: {
+      default: null,
+      [stylex.when.ancestor(":hover")]: 2,
+    },
+    borderStyle: {
+      default: null,
+      [stylex.when.ancestor(":hover")]: "solid",
+    },
+    borderColor: {
+      default: null,
+      [stylex.when.ancestor(":hover")]: "var(--tagInToolbar-border)",
+    },
+  },
 });