refactor: replace template-literal input/link emitters with AST builders (#356)

* refactor: replace template-literal input/link emitters with AST builders

The input and link wrapper emitters used 16 template-literal branches
(8 each, 2×2×2 for allowClassNameProp × allowAsProp × emitTypes) plus
~240 lines of post-processing injection helpers (walkAstBfs,
injectForwardedAsHandling, injectExplicitRefForwarding, etc.) that
existed only because template literals can't be built incrementally.

Replaced with a shared `buildAttrWrapperBody()` function that uses
the same AST builder pattern as the other emitters, removing all
post-processing helpers except `injectDestructureProps` (still needed
by the enum variant emitter).

854 → 665 lines (-189 lines, -22%).

https://claude.ai/code/session_01CEoafpHoAaRMVmm1WtcXu1

* refactor: merge two nearly identical branches in SFP emitter

The shouldForwardProp emitter had two branches (allowClassNameProp/allowStyleProp
vs not) that duplicated ~110 lines of body-building logic. Unified them into a
single flow with conditional attrs processing, reducing the file by ~96 lines.

https://claude.ai/code/session_01CEoafpHoAaRMVmm1WtcXu1

* refactor: deduplicate shared patterns across codebase

- Extract isValidIdentifierName to string-utils.ts (was defined 6 times)
- Consolidate resolveThemeAst in value-patterns.ts to reuse
  resolveThemeFromPropsMember from template-literals.ts
- Extract resolveTplBranch and applyResolvedEntries helpers in
  css-helper-conditional.ts to deduplicate template literal branch handling

https://claude.ai/code/session_01CEoafpHoAaRMVmm1WtcXu1

* fix: deduplicate destructure props to prevent duplicate bindings

buildDestructurePatternProps now skips destructureProps entries that
already exist in baseProps. This prevents duplicate bindings like
`const { href, href, ...rest } = props` when pseudo guard props
overlap with intrinsic props (e.g. href/target on links, type/readOnly
on inputs).

https://claude.ai/code/session_01CEoafpHoAaRMVmm1WtcXu1

---------

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

Author: skovhus

src/__tests__/build-destructure-pattern-props.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+import jscodeshift from "jscodeshift";
+import { buildDestructurePatternProps } from "../internal/emit-wrappers/jsx-builders.js";
+import { patternProp } from "../internal/transform-utils.js";
+
+const j = jscodeshift.withParser("tsx");
+const pp = (name: string) => patternProp(j, name);
+
+describe("buildDestructurePatternProps", () => {
+  it("skips destructureProps that already exist in baseProps", () => {
+    // Simulates the link emitter where baseProps already has "href" and "target"
+    // and pseudoGuardProps also contains "href" from a guard condition.
+    const baseProps = [pp("href"), pp("target"), pp("children")];
+
+    const result = buildDestructurePatternProps(j, pp, {
+      baseProps,
+      destructureProps: ["href", "newProp"],
+      includeRest: true,
+      restId: j.identifier("rest"),
+    });
+
+    const names = result.map((p) => {
+      if (p.type === "RestElement") {
+        return "...rest";
+      }
+      const key = (p as { key?: { name?: string } }).key;
+      return key?.name ?? "?";
+    });
+
+    // "href" should NOT be duplicated; "newProp" should be added
+    expect(names).toEqual(["href", "target", "children", "newProp", "...rest"]);
+  });
+
+  it("skips destructureProps that match 'as' prop with AssignmentPattern value", () => {
+    // The "as" prop in baseProps uses j.property.from() with an AssignmentPattern value
+    const asProp = j.property.from({
+      kind: "init",
+      key: j.identifier("as"),
+      value: j.assignmentPattern(j.identifier("Component"), j.literal("div")),
+      shorthand: false,
+    });
+    const baseProps = [asProp, pp("className")];
+
+    const result = buildDestructurePatternProps(j, pp, {
+      baseProps,
+      destructureProps: ["as", "extraProp"],
+    });
+
+    const names = result.map((p) => {
+      const key = (p as { key?: { name?: string } }).key;
+      return key?.name ?? "?";
+    });
+
+    expect(names).toEqual(["as", "className", "extraProp"]);
+  });
+});

src/internal/emit-wrappers/emit-intrinsic-should-forward-prop.ts

@@ -7,6 +7,7 @@
 import type { StyledDecl } from "../transform-types.js";
 import { getBridgeClassVar } from "../utilities/bridge-classname.js";
 import { buildStyleFnConditionExpr } from "../utilities/jscodeshift-utils.js";
+import { isValidIdentifierName } from "../utilities/string-utils.js";
 import { type ExpressionKind, type InlineStyleProp, type WrapperPropDefaults } from "./types.js";
 import { SX_PROP_TYPE_TEXT, type JsxAttr, type StatementKind } from "./wrapper-emitter.js";
 import { emitStyleMerging } from "./style-merger.js";
@@ -150,10 +151,9 @@ export function emitShouldForwardPropWrappers(ctx: EmitIntrinsicContext): void {
       !!dropPrefixFromFilter &&
       (usedAttrs.has("*") ||
         [...usedAttrs].some((n) => n.startsWith(dropPrefixFromFilter) && !extraProps.has(n)));
-    const isValidIdentifier = (name: string): boolean => /^[$A-Z_][0-9A-Z_$]*$/i.test(name);
     const knownPrefixProps = dropPrefixFromFilter
       ? [...extraProps].filter(
-          (p: string) => p.startsWith(dropPrefixFromFilter) && isValidIdentifier(p),
+          (p: string) => p.startsWith(dropPrefixFromFilter) && isValidIdentifierName(p),
         )
       : [];
     const knownPrefixPropsSet = new Set(knownPrefixProps);
@@ -183,7 +183,7 @@ export function emitShouldForwardPropWrappers(ctx: EmitIntrinsicContext): void {
       const staticVariantPropTypes = buildStaticVariantPropTypes(d);
       const lines: string[] = [];
       for (const p of extraProps) {
-        if (!isValidIdentifier(p)) {
+        if (!isValidIdentifierName(p)) {
           continue;
         }
         const variantType = variantDimByProp.get(p);
@@ -219,7 +219,7 @@ export function emitShouldForwardPropWrappers(ctx: EmitIntrinsicContext): void {
       const staticVariantPropTypes = buildStaticVariantPropTypes(d);
       const lines: string[] = [];
       for (const p of extraProps) {
-        if (!isValidIdentifier(p) || explicitPropNames.has(p) || compoundWhenKeys.has(p)) {
+        if (!isValidIdentifierName(p) || explicitPropNames.has(p) || compoundWhenKeys.has(p)) {
           continue;
         }
         const variantType = variantDimByProp.get(p);
@@ -600,7 +600,6 @@ export function emitShouldForwardPropWrappers(ctx: EmitIntrinsicContext): void {
     const refId = j.identifier("ref");
     const restId = j.identifier("rest");
     const forwardedAsId = j.identifier("forwardedAs");
-    const isVoidTag = tagName === "input";
     const { hasAny: hasLocalUsage } = emitter.getJsxCallsites(d.localName);
 
     const shouldIncludeRest = shouldIncludeRestForProps({
@@ -633,124 +632,10 @@ export function emitShouldForwardPropWrappers(ctx: EmitIntrinsicContext): void {
       (d.supportsExternalStyles ?? false) ||
       (!shouldOmitRestSpread && shouldIncludeRest);
 
-    if (!allowClassNameProp && !allowStyleProp) {
-      const isVoid = VOID_TAGS.has(tagName);
-      // When allowAsProp is true, include children support even for void tags
-      // because the user might use `as="textarea"` which requires children
-      const includeChildrenInner = allowAsProp || !isVoid;
-      const patternProps = emitter.buildDestructurePatternProps({
-        baseProps: [
-          ...(allowAsProp ? [asDestructureProp(tagName)] : []),
-          ...(includesForwardedAs ? [ctx.patternProp("forwardedAs", forwardedAsId)] : []),
-          ...(includeChildrenInner ? [ctx.patternProp("children", childrenId)] : []),
-          ...((d.supportsRefProp ?? false) ? [ctx.patternProp("ref", refId)] : []),
-        ],
-        destructureProps: destructureParts,
-        propDefaults,
-        includeRest,
-        restId,
-      });
-      const declStmt = j.variableDeclaration("const", [
-        j.variableDeclarator(j.objectPattern(patternProps as any), propsId),
-      ]);
-
-      // Generate cleanup loop for prefix props when:
-      // - There's a dropPrefix (like "$" for transient props)
-      // - Either: local usage of unknown prefix props, OR exported/extended component
-      //   (external callers or extending wrappers may pass unknown prefix props)
-      // - Rest spread is included
-      const needsCleanupLoop =
-        dropPrefix &&
-        (isExportedComponent || (d.supportsExternalStyles ?? false) || shouldAllowAnyPrefixProps) &&
-        includeRest;
-      const cleanupPrefixStmt = needsCleanupLoop
-        ? buildPrefixCleanupStatements(j, restId, dropPrefix)
-        : null;
-
-      const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(
-        d.attrsInfo,
-        getBridgeClassVar(d),
-      );
-      const { attrsInfo: attrsInfoRaw, forwardedAsStaticFallback } = splitForwardedAsStaticAttrs({
-        attrsInfo,
-        includeForwardedAs: includesForwardedAs,
-      });
-      const attrsInfoWithoutForwardedAsStatic = filterAttrsForShouldForwardProp(
-        attrsInfoRaw,
-        d.shouldForwardProp,
-      );
-      const merging = emitStyleMerging({
-        j,
-        emitter,
-        styleArgs,
-        classNameId,
-        styleId,
-        allowClassNameProp,
-        allowStyleProp,
-        inlineStyleProps: (d.inlineStyleProps ?? []) as InlineStyleProp[],
-        staticClassNameExpr,
-        isIntrinsicElement: !allowAsProp,
-      });
-
-      const openingAttrs: JsxAttr[] = [
-        ...emitter.buildAttrsFromAttrsInfo({
-          attrsInfo: attrsInfoWithoutForwardedAsStatic,
-          propExprFor: (prop) => j.identifier(prop),
-        }),
-        ...((d.supportsRefProp ?? false)
-          ? [j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(refId))]
-          : []),
-        ...(includeRest ? [j.jsxSpreadAttribute(restId)] : []),
-        ...(includesForwardedAs
-          ? [
-              j.jsxAttribute(
-                j.jsxIdentifier("as"),
-                j.jsxExpressionContainer(
-                  buildForwardedAsValueExpr(forwardedAsId, forwardedAsStaticFallback),
-                ),
-              ),
-            ]
-          : []),
-      ];
-      emitter.appendMergingAttrs(openingAttrs, merging);
-
-      const jsx = emitter.buildJsxElement({
-        tagName: allowAsProp ? "Component" : tagName,
-        attrs: openingAttrs,
-        includeChildren: includeChildrenInner,
-        childrenExpr: childrenId,
-      });
-
-      const fnBodyStmts: StatementKind[] = [declStmt];
-      if (cleanupPrefixStmt) {
-        fnBodyStmts.push(...cleanupPrefixStmt);
-      }
-      if (needsUseTheme) {
-        fnBodyStmts.push(buildUseThemeDeclaration(j, emitter.themeHook.functionName));
-      }
-      if (merging.sxDecl) {
-        fnBodyStmts.push(merging.sxDecl);
-      }
-      fnBodyStmts.push(j.returnStatement(jsx as any));
-
-      emitted.push(
-        withLeadingComments(
-          emitter.buildWrapperFunction({
-            localName: d.localName,
-            params: [propsParamId],
-            bodyStmts: fnBodyStmts,
-            typeParameters:
-              allowAsProp && emitTypes ? buildPolymorphicTypeParams(j, tagName) : undefined,
-          }),
-          d,
-        ),
-      );
-      continue;
-    }
-
     // When allowAsProp is true, include children support even for void tags
     // because the user might use `as="textarea"` which requires children
-    const includeChildrenOuter = allowAsProp || !isVoidTag;
+    const isVoid = VOID_TAGS.has(tagName);
+    const includeChildren = allowAsProp || !isVoid;
     const sxId = j.identifier("sx");
     if (allowSxProp) {
       styleArgs.push(sxId);
@@ -761,7 +646,7 @@ export function emitShouldForwardPropWrappers(ctx: EmitIntrinsicContext): void {
         ...(allowAsProp ? [asDestructureProp(tagName)] : []),
         ...(includesForwardedAs ? [ctx.patternProp("forwardedAs", forwardedAsId)] : []),
         ...(allowClassNameProp ? [ctx.patternProp("className", classNameId)] : []),
-        ...(includeChildrenOuter ? [ctx.patternProp("children", childrenId)] : []),
+        ...(includeChildren ? [ctx.patternProp("children", childrenId)] : []),
         ...(allowStyleProp ? [ctx.patternProp("style", styleId)] : []),
         ...((d.supportsRefProp ?? false) ? [ctx.patternProp("ref", refId)] : []),
         ...(allowSxProp ? [ctx.patternProp("sx", sxId)] : []),
@@ -781,18 +666,32 @@ export function emitShouldForwardPropWrappers(ctx: EmitIntrinsicContext): void {
     // - Either: local usage of unknown prefix props, OR exported/extended component
     //   (external callers or extending wrappers may pass unknown prefix props)
     // - Rest spread is included
-    const needsCleanupLoopOuter =
+    const needsCleanupLoop =
       dropPrefix &&
       (isExportedComponent || (d.supportsExternalStyles ?? false) || shouldAllowAnyPrefixProps) &&
       includeRest;
-    const cleanupPrefixStmt = needsCleanupLoopOuter
+    const cleanupPrefixStmt = needsCleanupLoop
       ? buildPrefixCleanupStatements(j, restId, dropPrefix)
       : null;
 
-    // Extract static className and bridge class for the style merger
-    const { staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d));
+    const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(
+      d.attrsInfo,
+      getBridgeClassVar(d),
+    );
+
+    // When no className/style props, process attrs for JSX rendering and extract forwardedAs fallback
+    let attrsInfoForJsx: StyledDecl["attrsInfo"] | undefined;
+    let forwardedAsStaticFallback: unknown;
+    if (!allowClassNameProp && !allowStyleProp) {
+      const { attrsInfo: attrsInfoRaw, forwardedAsStaticFallback: fallback } =
+        splitForwardedAsStaticAttrs({
+          attrsInfo,
+          includeForwardedAs: includesForwardedAs,
+        });
+      attrsInfoForJsx = filterAttrsForShouldForwardProp(attrsInfoRaw, d.shouldForwardProp);
+      forwardedAsStaticFallback = fallback;
+    }
 
-    // Use the style merger helper
     const merging = emitStyleMerging({
       j,
       emitter,
@@ -807,28 +706,34 @@ export function emitShouldForwardPropWrappers(ctx: EmitIntrinsicContext): void {
       isIntrinsicElement: !allowAsProp,
     });
 
-    // Build attrs: {...rest} then {...mergedStylexProps(...)} so stylex styles override
-    const openingAttrs: JsxAttr[] = [];
-    if (d.supportsRefProp ?? false) {
-      openingAttrs.push(j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(refId)));
-    }
-    if (includeRest) {
-      openingAttrs.push(j.jsxSpreadAttribute(restId));
-    }
-    if (includesForwardedAs) {
-      openingAttrs.push(
-        j.jsxAttribute(
-          j.jsxIdentifier("as"),
-          j.jsxExpressionContainer(buildForwardedAsValueExpr(forwardedAsId)),
-        ),
-      );
-    }
+    const openingAttrs: JsxAttr[] = [
+      ...(attrsInfoForJsx
+        ? emitter.buildAttrsFromAttrsInfo({
+            attrsInfo: attrsInfoForJsx,
+            propExprFor: (prop) => j.identifier(prop),
+          })
+        : []),
+      ...((d.supportsRefProp ?? false)
+        ? [j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(refId))]
+        : []),
+      ...(includeRest ? [j.jsxSpreadAttribute(restId)] : []),
+      ...(includesForwardedAs
+        ? [
+            j.jsxAttribute(
+              j.jsxIdentifier("as"),
+              j.jsxExpressionContainer(
+                buildForwardedAsValueExpr(forwardedAsId, forwardedAsStaticFallback),
+              ),
+            ),
+          ]
+        : []),
+    ];
     emitter.appendMergingAttrs(openingAttrs, merging);
 
     const jsx = emitter.buildJsxElement({
       tagName: allowAsProp ? "Component" : tagName,
       attrs: openingAttrs,
-      includeChildren: includeChildrenOuter,
+      includeChildren,
       childrenExpr: childrenId,
     });
 
@@ -844,7 +749,6 @@ export function emitShouldForwardPropWrappers(ctx: EmitIntrinsicContext): void {
     }
     fnBodyStmts.push(j.returnStatement(jsx as any));
 
-    // Add type parameters when allowAsProp is true
     emitted.push(
       withLeadingComments(
         emitter.buildWrapperFunction({

src/internal/emit-wrappers/emit-intrinsic-simple.ts

@@ -7,6 +7,7 @@
 import type { JSCodeshift } from "jscodeshift";
 import type { StyledDecl } from "../transform-types.js";
 import { getBridgeClassVar } from "../utilities/bridge-classname.js";
+import { isValidIdentifierName } from "../utilities/string-utils.js";
 import {
   collectInlineStylePropNames,
   type ExpressionKind,
@@ -650,11 +651,10 @@ export function emitSimpleExportedIntrinsicWrappers(ctx: EmitIntrinsicContext):
         for (const k of compoundVariantWhenKeys) {
           keys.delete(k);
         }
-        const isValidIdentifier = (name: string): boolean => /^[$A-Z_][0-9A-Z_$]*$/i.test(name);
         const filtered = [...keys].filter(
           (k) =>
             k &&
-            isValidIdentifier(k) &&
+            isValidIdentifierName(k) &&
             k !== "children" &&
             k !== "className" &&
             k !== "style" &&