Update keyframes-multiAnimationInterpolatedDuration: use interpolated duration for both animations

Co-authored-by: Kenneth Skovhus <skovhus@users.noreply.github.com>

Author: cursoragent

test-cases/keyframes-multiAnimationInterpolatedDuration.input.tsx

@@ -1,4 +1,4 @@
-// Multi-animation with interpolated duration in one segment
+// Multi-animation with interpolated duration in both segments
 import * as React from "react";
 import styled, { keyframes } from "styled-components";
 
@@ -20,20 +20,18 @@ const slideIn = keyframes`
   }
 `;
 
-// First animation has interpolated duration, second has static duration
-// When $duration is provided, animationDuration should be "${$duration}ms, 1s"
-// not just "${$duration}ms" which would drop the second animation's duration
+// Both animations share the same interpolated duration prop
 const AnimatedCard = styled.div<{ $duration?: number }>`
-  animation: ${fadeIn} ${(props) => props.$duration ?? 200}ms ease, ${slideIn} 1s linear;
+  animation: ${fadeIn} ${(props) => props.$duration ?? 200}ms ease, ${slideIn} ${(props) => props.$duration ?? 1000}ms linear;
   padding: 20px;
   background: white;
 `;
 
 export function App() {
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: 16, padding: 16 }}>
-      <AnimatedCard>Default (200ms, 1s)</AnimatedCard>
-      <AnimatedCard $duration={500}>Custom (500ms, 1s)</AnimatedCard>
+      <AnimatedCard>Default (200ms, 1000ms)</AnimatedCard>
+      <AnimatedCard $duration={500}>Custom (500ms, 500ms)</AnimatedCard>
     </div>
   );
 }

test-cases/keyframes-multiAnimationInterpolatedDuration.output.tsx

@@ -1,4 +1,4 @@
-// Multi-animation with interpolated duration in one segment
+// Multi-animation with interpolated duration in both segments
 import * as React from "react";
 import * as stylex from "@stylexjs/stylex";
 
@@ -26,17 +26,16 @@ type AnimatedCardProps = React.PropsWithChildren<{
   duration?: number;
 }>;
 
-// First animation has interpolated duration, second has static duration
-// When $duration is provided, animationDuration should be "${$duration}ms, 1s"
-// not just "${$duration}ms" which would drop the second animation's duration
+// Both animations share the same interpolated duration prop
 function AnimatedCard(props: AnimatedCardProps) {
   const { children, duration } = props;
 
   return (
     <div
       sx={[
         styles.animatedCard,
-        duration != null && styles.animatedCardAnimationDuration(`${duration ?? 200}ms, 1s`),
+        duration != null &&
+          styles.animatedCardAnimationDuration(`${duration ?? 200}ms, ${duration ?? 1000}ms`),
       ]}
     >
       {children}
@@ -47,16 +46,16 @@ function AnimatedCard(props: AnimatedCardProps) {
 export function App() {
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: 16, padding: 16 }}>
-      <AnimatedCard>Default (200ms, 1s)</AnimatedCard>
-      <AnimatedCard duration={500}>Custom (500ms, 1s)</AnimatedCard>
+      <AnimatedCard>Default (200ms, 1000ms)</AnimatedCard>
+      <AnimatedCard duration={500}>Custom (500ms, 500ms)</AnimatedCard>
     </div>
   );
 }
 
 const styles = stylex.create({
   animatedCard: {
     animationName: `${fadeIn}, ${slideIn}`,
-    animationDuration: "200ms, 1s",
+    animationDuration: "200ms, 1000ms",
     animationTimingFunction: "ease, linear",
     padding: 20,
     backgroundColor: "white",