Support multiple interpolations in gradient values (#87)

* Support multiple interpolations in gradient values

Previously, background values with interpolations (like
`linear-gradient(${color1}, ${color2})`) would incorrectly use
`backgroundColor` instead of `backgroundImage` because the gradient
detection only ran for static values.

This fix checks `valueRaw` for gradient patterns regardless of whether
the value is static or interpolated, reusing the existing
`resolveBackgroundStylexProp` helper.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Add more gradient types to test case

Cover radial-gradient, conic-gradient, and repeating-linear-gradient
with multiple interpolations.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: skovhus

src/internal/css-prop-mapping.ts

@@ -144,10 +144,7 @@ export function cssDeclarationToStylexDeclarations(decl: CssDeclarationIR): Styl
   }
 
   if (prop === "background") {
-    const stylexProp =
-      decl.value.kind === "static" && isBackgroundImageValue(decl.valueRaw)
-        ? "backgroundImage"
-        : "backgroundColor";
+    const stylexProp = resolveBackgroundStylexProp(decl.valueRaw ?? "");
     return [{ prop: stylexProp, value: decl.value }];
   }
 

test-cases/multiple-interpolations-in-value.input.tsx

@@ -0,0 +1,38 @@
+import styled from "styled-components";
+
+const color1 = "#ff0000";
+const color2 = "#0000ff";
+const color3 = "#00ff00";
+
+const LinearGradientBox = styled.div`
+  background: linear-gradient(${color1}, ${color2});
+  width: 200px;
+  height: 100px;
+`;
+
+const RadialGradientBox = styled.div`
+  background: radial-gradient(${color1}, ${color2});
+  width: 200px;
+  height: 100px;
+`;
+
+const ConicGradientBox = styled.div`
+  background: conic-gradient(${color1}, ${color2}, ${color3});
+  width: 200px;
+  height: 100px;
+`;
+
+const RepeatingLinearGradientBox = styled.div`
+  background: repeating-linear-gradient(${color1} 0%, ${color2} 10%);
+  width: 200px;
+  height: 100px;
+`;
+
+export const App = () => (
+  <>
+    <LinearGradientBox>Linear</LinearGradientBox>
+    <RadialGradientBox>Radial</RadialGradientBox>
+    <ConicGradientBox>Conic</ConicGradientBox>
+    <RepeatingLinearGradientBox>Repeating</RepeatingLinearGradientBox>
+  </>
+);

test-cases/multiple-interpolations-in-value.output.tsx

@@ -0,0 +1,37 @@
+import * as stylex from "@stylexjs/stylex";
+
+const color1 = "#ff0000";
+const color2 = "#0000ff";
+const color3 = "#00ff00";
+
+export const App = () => (
+  <>
+    <div {...stylex.props(styles.linearGradientBox)}>Linear</div>
+    <div {...stylex.props(styles.radialGradientBox)}>Radial</div>
+    <div {...stylex.props(styles.conicGradientBox)}>Conic</div>
+    <div {...stylex.props(styles.repeatingLinearGradientBox)}>Repeating</div>
+  </>
+);
+
+const styles = stylex.create({
+  linearGradientBox: {
+    backgroundImage: `linear-gradient(${color1}, ${color2})`,
+    width: "200px",
+    height: "100px",
+  },
+  radialGradientBox: {
+    backgroundImage: `radial-gradient(${color1}, ${color2})`,
+    width: "200px",
+    height: "100px",
+  },
+  conicGradientBox: {
+    backgroundImage: `conic-gradient(${color1}, ${color2}, ${color3})`,
+    width: "200px",
+    height: "100px",
+  },
+  repeatingLinearGradientBox: {
+    backgroundImage: `repeating-linear-gradient(${color1} 0%, ${color2} 10%)`,
+    width: "200px",
+    height: "100px",
+  },
+});