As and transient fixes (#14)

Author: skovhus

src/internal/emit-wrappers.ts

@@ -1043,6 +1043,10 @@ export function transformWithWarnings(
   }
 
   const wrapperNames = new Set<string>();
+  // Track wrappers that have expression `as` values (not just string literals)
+  // These need generic polymorphic types to accept component-specific props
+  const expressionAsWrapperNames = new Set<string>();
+
   for (const [baseName, children] of extendedBy.entries()) {
     const names = [baseName, ...children];
     const hasPolymorphicUsage = names.some((nm) => {
@@ -1088,6 +1092,38 @@ export function transformWithWarnings(
     }
   }
 
+  // Also check for `as` usage on intrinsic styled components
+  // (e.g., styled.span with as={animated.span})
+  for (const decl of styledDecls) {
+    if (decl.base.kind === "intrinsic" && !wrapperNames.has(decl.localName)) {
+      const el = root.find(j.JSXElement, {
+        openingElement: { name: { type: "JSXIdentifier", name: decl.localName } },
+      });
+      const asAttrs = el.find(j.JSXAttribute, { name: { type: "JSXIdentifier", name: "as" } });
+      const hasAs = asAttrs.size() > 0;
+      const hasForwardedAs =
+        el
+          .find(j.JSXAttribute, {
+            name: { type: "JSXIdentifier", name: "forwardedAs" },
+          })
+          .size() > 0;
+      if (hasAs || hasForwardedAs) {
+        wrapperNames.add(decl.localName);
+        // Check if any `as` value is an expression (not a string literal)
+        // e.g., as={animated.span} vs as="a"
+        const hasExpressionAs = asAttrs.some((path) => {
+          const value = path.node.value;
+          // JSXExpressionContainer means it's an expression like {animated.span}
+          // StringLiteral/Literal means it's a string like "a"
+          return value?.type === "JSXExpressionContainer";
+        });
+        if (hasExpressionAs) {
+          expressionAsWrapperNames.add(decl.localName);
+        }
+      }
+    }
+  }
+
   for (const decl of styledDecls) {
     if (wrapperNames.has(decl.localName)) {
       decl.needsWrapperComponent = true;
@@ -1863,6 +1899,7 @@ export function transformWithWarnings(
     filePath: file.path,
     styledDecls,
     wrapperNames,
+    expressionAsWrapperNames,
     patternProp,
     exportedComponents,
     stylesIdentifier,

src/transform.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+import styled from "styled-components";
+
+// SpringValue simulates react-spring's animated value type
+type SpringValue<T> = { get(): T };
+
+// AnimatedSpanProps accepts SpringValue for style properties (like react-spring)
+type AnimatedSpanProps = Omit<React.ComponentProps<"span">, "style"> & {
+  style?: React.CSSProperties & { width?: number | string | SpringValue<number> };
+};
+
+// Simulates react-spring's animated component which accepts SpringValue in styles
+const animated = {
+  span: React.forwardRef<HTMLSpanElement, AnimatedSpanProps>((props, ref) => (
+    <span ref={ref} {...props} style={props.style as React.CSSProperties} />
+  )),
+};
+
+// When as={animated.span} is used, the component should render as animated.span
+// This pattern is common with animation libraries like react-spring
+const AnimatedText = styled.span`
+  font-variant-numeric: tabular-nums;
+  overflow: visible;
+  display: inline-flex;
+`;
+
+type Props = {
+  width: number | SpringValue<number>;
+  children: React.ReactNode;
+};
+
+export function AnimatedNumber(props: Props) {
+  const { width, children } = props;
+
+  // When width is a SpringValue, we need to use animated.span
+  const isAnimated = typeof width !== "number";
+
+  if (isAnimated) {
+    // This should work: animated.span accepts SpringValue<number> for width
+    return (
+      <AnimatedText as={animated.span} style={{ width }}>
+        {children}
+      </AnimatedText>
+    );
+  }
+
+  return <AnimatedText style={{ width }}>{children}</AnimatedText>;
+}
+
+export const App = () => <AnimatedNumber width={100}>42</AnimatedNumber>;

test-cases/as-component-ref.input.tsx

@@ -0,0 +1,62 @@
+import * as stylex from "@stylexjs/stylex";
+import * as React from "react";
+
+// SpringValue simulates react-spring's animated value type
+type SpringValue<T> = { get(): T };
+
+// AnimatedSpanProps accepts SpringValue for style properties (like react-spring)
+type AnimatedSpanProps = Omit<React.ComponentProps<"span">, "style"> & {
+  style?: React.CSSProperties & { width?: number | string | SpringValue<number> };
+};
+
+// Simulates react-spring's animated component which accepts SpringValue in styles
+const animated = {
+  span: React.forwardRef<HTMLSpanElement, AnimatedSpanProps>((props, ref) => (
+    <span ref={ref} {...props} style={props.style as React.CSSProperties} />
+  )),
+};
+
+type AnimatedTextProps<C extends React.ElementType = "span"> = React.ComponentProps<C> & { as?: C };
+
+function AnimatedText<C extends React.ElementType = "span">(props: AnimatedTextProps<C>) {
+  const { as: Component = "span" as C, children, style, ...rest } = props;
+  return (
+    <Component {...rest} {...stylex.props(styles.animatedText)} style={style}>
+      {children}
+    </Component>
+  );
+}
+
+type Props = {
+  width: number | SpringValue<number>;
+  children: React.ReactNode;
+};
+
+export function AnimatedNumber(props: Props) {
+  const { width, children } = props;
+
+  // When width is a SpringValue, we need to use animated.span
+  const isAnimated = typeof width !== "number";
+
+  if (isAnimated) {
+    // This should work: animated.span accepts SpringValue<number> for width
+    return (
+      <AnimatedText as={animated.span} style={{ width }}>
+        {children}
+      </AnimatedText>
+    );
+  }
+  return <AnimatedText style={{ width }}>{children}</AnimatedText>;
+}
+
+export const App = () => <AnimatedNumber width={100}>42</AnimatedNumber>;
+
+const styles = stylex.create({
+  // When as={animated.span} is used, the component should render as animated.span
+  // This pattern is common with animation libraries like react-spring
+  animatedText: {
+    fontVariantNumeric: "tabular-nums",
+    overflow: "visible",
+    display: "inline-flex",
+  },
+});

test-cases/as-component-ref.output.tsx

@@ -15,8 +15,6 @@ const Button = styled.button`
 
 // Pattern 2: styled(Component) where Component has custom props (like variant)
 // When used with as="label", the component's props must be preserved
-// Bug: Codemod converts <StyledText variant="small" as="label"> to <label variant="small">
-//      but <label> doesn't accept variant - should keep using Text with as="label"
 const StyledText = styled(Text)`
   margin-top: 4px;
 `;
@@ -27,11 +25,12 @@ export const App = () => (
     <Button as="a" href="#">
       Link with Button styles
     </Button>
-    {/* Pattern 2: styled(Component) with as prop - must preserve component's props */}
+    {/* Pattern 2: styled(Component) with as prop */}
     <StyledText variant="small" color="muted">
       Normal styled text
     </StyledText>
-    <StyledText variant="mini" as="label">
+    {/* Pattern 3: as="label" with label-specific props like htmlFor */}
+    <StyledText variant="mini" as="label" htmlFor="my-input">
       Label using Text styles
     </StyledText>
   </div>

test-cases/as-prop.input.tsx

@@ -2,23 +2,38 @@ import * as stylex from "@stylexjs/stylex";
 import * as React from "react";
 import { Text } from "./lib/text";
 
-type StyledTextProps = React.ComponentProps<typeof Text> & { as?: React.ElementType };
+type ButtonProps = React.ComponentProps<"button"> & { as?: React.ElementType; href?: string };
 
-function StyledText(props: StyledTextProps) {
+function Button(props: ButtonProps) {
+  const { as: Component = "button", children, style, ...rest } = props;
+  return (
+    <Component {...rest} {...stylex.props(styles.button)} style={style}>
+      {children}
+    </Component>
+  );
+}
+
+type StyledTextProps<C extends React.ElementType = typeof Text> = React.ComponentProps<
+  typeof Text
+> &
+  Omit<React.ComponentPropsWithoutRef<C>, keyof React.ComponentProps<typeof Text>> & { as?: C };
+
+function StyledText<C extends React.ElementType = typeof Text>(props: StyledTextProps<C>) {
   return <Text {...props} {...stylex.props(styles.text)} />;
 }
 
 export const App = () => (
   <div>
-    <button {...stylex.props(styles.button)}>Normal Button</button>
-    <a href="#" {...stylex.props(styles.button)}>
+    <Button>Normal Button</Button>
+    <Button as="a" href="#">
       Link with Button styles
-    </a>
-    {/* Pattern 2: styled(Component) with as prop - must preserve component's props */}
+    </Button>
+    {/* Pattern 2: styled(Component) with as prop */}
     <StyledText variant="small" color="muted">
       Normal styled text
     </StyledText>
-    <StyledText variant="mini" as="label">
+    {/* Pattern 3: as="label" with label-specific props like htmlFor */}
+    <StyledText variant="mini" as="label" htmlFor="my-input">
       Label using Text styles
     </StyledText>
   </div>

test-cases/as-prop.output.tsx

@@ -51,7 +51,8 @@ const IconButtonInner = (props: IconButtonProps) => {
 };
 
 export function IconButton(props: IconButtonProps) {
-  return <IconButtonInner {...props} {...stylex.props(styles.iconButton)} />;
+  const { $hoverStyles, style, ...rest } = props;
+  return <IconButtonInner {...rest} {...stylex.props(styles.iconButton)} style={style} />;
 }
 
 // Usage shows both interface properties and HTML attributes are needed

test-cases/duplicate-type-identifier.output.tsx

@@ -4,9 +4,9 @@ import * as stylex from "@stylexjs/stylex";
 type ButtonProps = React.ComponentProps<"button"> & { as?: React.ElementType; href?: string };
 
 function Button(props: ButtonProps) {
-  const { as: Component = "button", children, ...rest } = props;
+  const { as: Component = "button", children, style, ...rest } = props;
   return (
-    <Component {...stylex.props(styles.button)} {...rest}>
+    <Component {...rest} {...stylex.props(styles.button)} style={style}>
       {children}
     </Component>
   );

test-cases/forwarded-as.output.tsx

@@ -24,9 +24,9 @@ const Point = styled.div<{ $size?: number }>`
   background-color: white;
 `;
 
-// Pattern 4: styled(Component) where base component REQUIRES the transient prop
-// The transient prop is used for styling AND needed by the base component
-// CollapseArrowIcon pattern - ArrowIcon needs $isOpen, and styled uses it too
+// Pattern 4: styled(Component) where base component declares the transient prop
+// The transient prop is used for styling by the wrapper
+// CollapseArrowIcon pattern - ArrowIcon declares $isOpen in props, wrapper uses it for styling
 import * as React from "react";
 import { Icon, type IconProps } from "./lib/icon";
 
@@ -37,16 +37,17 @@ interface ArrowIconProps {
 }
 
 function ArrowIcon(props: IconProps & ArrowIconProps) {
+  const { $isOpen, ...rest } = props;
   return (
-    <Icon {...props}>
+    <Icon {...rest}>
       <svg viewBox="0 0 16 16">
         <path d="M7 10.6L10.8 7.6L7 5.4V10.6Z" />
       </svg>
     </Icon>
   );
 }
 
-// The wrapper uses $isOpen for styling, but ArrowIcon also NEEDS $isOpen
+// The wrapper uses $isOpen for styling; ArrowIcon declares it in props but filters before spreading
 export const CollapseArrowIcon = styled(ArrowIcon)`
   transform: rotate(${(props) => (props.$isOpen ? "90deg" : "0deg")});
   transition: transform 0.2s;

test-cases/transient-props.input.tsx

@@ -6,9 +6,9 @@ const Link = ({ className, text, ...props }: { className?: string; text: string
   </a>
 );
 
-// Pattern 4: styled(Component) where base component REQUIRES the transient prop
-// The transient prop is used for styling AND needed by the base component
-// CollapseArrowIcon pattern - ArrowIcon needs $isOpen, and styled uses it too
+// Pattern 4: styled(Component) where base component declares the transient prop
+// The transient prop is used for styling by the wrapper
+// CollapseArrowIcon pattern - ArrowIcon declares $isOpen in props, wrapper uses it for styling
 import * as React from "react";
 
 import { Icon, type IconProps } from "./lib/icon";
@@ -20,8 +20,9 @@ interface ArrowIconProps {
 }
 
 function ArrowIcon(props: IconProps & ArrowIconProps) {
+  const { $isOpen, ...rest } = props;
   return (
-    <Icon {...props}>
+    <Icon {...rest}>
       <svg viewBox="0 0 16 16">
         <path d="M7 10.6L10.8 7.6L7 5.4V10.6Z" />
       </svg>