fix: guard indexed theme lookups against CSS shorthand properties

Adds isCssShorthandProperty() check to tryHandleThemeIndexedLookup so it
bails on properties like padding, margin, border, background. These
shorthands cannot be emitted directly in StyleX and the indexed theme
expression produces a single value that cannot be expanded to longhands.

Addresses PR #353 review feedback about shorthand safety.

https://claude.ai/code/session_019qihykXE8bykukYa1Zefe3

Author: claude

src/__tests__/transform.test.ts

@@ -5210,3 +5210,51 @@ export const App = () => <Box $depth={2}>Content</Box>;
     expect(result.code).toContain("props.depth * 16 + 4");
   });
 });
+
+describe("indexed theme lookup shorthand safety", () => {
+  it("should not emit CSS shorthand properties in indexed theme style functions", () => {
+    const source = `
+import styled from "styled-components";
+
+type Spacing = "sm" | "md";
+
+const Pill = styled.span<{ $spacing: Spacing }>\`
+  display: inline-block;
+
+  &::after {
+    content: "";
+    display: block;
+    padding: \${(props) => props.theme.spacing[props.$spacing]};
+  }
+\`;
+
+export const App = () => <Pill $spacing="sm">Content</Pill>;
+`;
+    const result = runTransformWithDiagnostics(source);
+    // The codemod should NOT emit "padding" as a shorthand in the style function.
+    // It should either expand to longhands or bail on the indexed theme path.
+    if (result.code) {
+      expect(result.code).not.toMatch(/\bpadding:/);
+    }
+  });
+
+  it("should not emit CSS shorthand properties in indexed theme style functions without pseudo-element", () => {
+    const source = `
+import styled from "styled-components";
+
+type Spacing = "sm" | "md";
+
+const Box = styled.div<{ $spacing: Spacing }>\`
+  padding: \${(props) => props.theme.spacing[props.$spacing]};
+\`;
+
+export const App = () => <Box $spacing="sm">Content</Box>;
+`;
+    const result = runTransformWithDiagnostics(source);
+    // The codemod should NOT emit "padding" as a shorthand in the style function.
+    // Bailing (code === null) is also acceptable — better than emitting invalid StyleX.
+    if (result.code) {
+      expect(result.code).not.toMatch(/\bpadding:/);
+    }
+  });
+});

src/internal/css-prop-mapping.ts

@@ -6,6 +6,8 @@ import type { CssDeclarationIR, CssValue, CssValuePart } from "./css-ir.js";
 import { splitDirectionalProperty } from "./stylex-shorthands.js";
 import { isBackgroundImageValue, looksLikeLength } from "./utilities/string-utils.js";
 
+export { isCssShorthandProperty };
+
 type StylexPropDecl = { prop: string; value: CssValue };
 
 type DirectionalProp = "padding" | "margin" | "scrollMargin" | "scrollPadding";
@@ -17,6 +19,19 @@ const DIRECTIONAL_SHORTHAND_MAP: Record<string, DirectionalProp> = {
   "scroll-padding": "scrollPadding",
 };
 
+/**
+ * Returns true if the CSS property is a shorthand that StyleX cannot express directly
+ * and requires expansion (e.g., `padding`, `margin`, `border`, `background`).
+ */
+function isCssShorthandProperty(cssProp: string): boolean {
+  return (
+    cssProp in DIRECTIONAL_SHORTHAND_MAP ||
+    cssProp === "border" ||
+    /^border-(top|right|bottom|left)$/.test(cssProp) ||
+    cssProp === "background"
+  );
+}
+
 /**
  * For a `background` CSS property, determine the appropriate StyleX property name.
  * Returns `backgroundImage` for gradients/images, `backgroundColor` for colors.

src/internal/lower-rules/value-patterns.ts

@@ -4,7 +4,7 @@
  */
 import type { StyledDecl } from "../transform-types.js";
 import type { ExpressionKind, StyleFnFromPropsEntry } from "./decl-types.js";
-import { cssDeclarationToStylexDeclarations } from "../css-prop-mapping.js";
+import { cssDeclarationToStylexDeclarations, isCssShorthandProperty } from "../css-prop-mapping.js";
 import { extractStaticPartsForDecl } from "./interpolations.js";
 import { buildTemplateWithStaticParts } from "./inline-styles.js";
 import { ensureShouldForwardPropDrop, literalToStaticValue } from "./types.js";
@@ -572,6 +572,12 @@ export const createValuePatternHandlers = (ctx: ValuePatternContext) => {
     if (!d.property) {
       return false;
     }
+    // Bail on CSS shorthand properties (padding, margin, border, background).
+    // The indexed theme expression emits a single value which can't be expanded
+    // into longhand properties, and StyleX forbids shorthands.
+    if (isCssShorthandProperty(d.property)) {
+      return false;
+    }
     // Skip media/attr buckets for now; these require more complex wiring.
     if (opts.media || opts.attrTarget) {
       return false;