refactor: extract shared ExprWithImports type and deduplicate extraClassNames processing

- Extract ExprWithImports type alias to eliminate repeated inline { expr, imports } definitions
- Extract collectExtraClassNames helper to deduplicate identical parsing logic
- Add missing draggableRegion export and CSS module fixture for test/storybook
- Clean up empty section header left after moving escapeTemplateRaw

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: skovhus

src/adapter.ts

@@ -283,10 +283,7 @@ export type CallResolveResultWithExpr = {
    * When present, the codemod merges these expressions into the rendered element's
    * className alongside any existing static className from `.attrs()` or bridge classes.
    */
-  extraClassNames?: Array<{
-    expr: string;
-    imports: ImportSpec[];
-  }>;
+  extraClassNames?: ExprWithImports[];
 };
 
 export type CallResolveRuntimeOnlyResult = {
@@ -312,10 +309,7 @@ export type CallResolveClassNamesResult = {
   /**
    * className expressions to merge into the component's className attribute.
    */
-  extraClassNames: Array<{
-    expr: string;
-    imports: ImportSpec[];
-  }>;
+  extraClassNames: ExprWithImports[];
 };
 
 export type CallResolveResult =
@@ -334,6 +328,9 @@ export type ImportSource =
 
 export type ImportSpec = { from: ImportSource; names: Array<{ imported: string; local?: string }> };
 
+/** An expression string with its required imports, used for className emission. */
+export type ExprWithImports = { expr: string; imports: ImportSpec[] };
+
 // ────────────────────────────────────────────────────────────────────────────
 // Base Component Resolution
 // ────────────────────────────────────────────────────────────────────────────

src/internal/builtin-handlers/types.ts

@@ -6,6 +6,7 @@ import type { API, JSCodeshift } from "jscodeshift";
 import type {
   CallResolveContext,
   CallResolveResult,
+  ExprWithImports,
   ImportSource,
   ImportSpec,
   ResolveValueContext,
@@ -92,15 +93,15 @@ export type HandlerResult =
       /** Raw CSS text from the adapter, enabling pseudo-selector wrapping of individual properties. */
       cssText?: string;
       /** Extra className expressions from CSS modules to merge into the rendered element. */
-      extraClassNames?: Array<{ expr: string; imports: ImportSpec[] }>;
+      extraClassNames?: ExprWithImports[];
     }
   | {
       /**
        * The node was resolved to className expressions only (no StyleX style object).
        * Used for CSS modules or other class-based styles that StyleX cannot express.
        */
       type: "resolvedClassNames";
-      extraClassNames: Array<{ expr: string; imports: ImportSpec[] }>;
+      extraClassNames: ExprWithImports[];
       resolveCallContext?: CallResolveContext;
       resolveCallResult?: CallResolveResult;
     }

src/internal/emit-wrappers/style-expr-builders.ts

@@ -918,7 +918,6 @@ export function buildVariantStyleExprs(opts: {
   }
 }
 
-// ---------------------------------------------------------------------------
 // ---------------------------------------------------------------------------
 // Theme boolean & pseudo style-arg helpers
 // ---------------------------------------------------------------------------

src/internal/lower-rules/rule-interpolated-declaration.ts

@@ -4,7 +4,7 @@
  */
 import type { JSCodeshift } from "jscodeshift";
 import type { CssDeclarationIR, CssRuleIR } from "../css-ir.js";
-import type { CallResolveResult, ResolveValueContext } from "../../adapter.js";
+import type { CallResolveResult, ExprWithImports, ResolveValueContext } from "../../adapter.js";
 import type { CallValueTransform } from "../builtin-handlers/types.js";
 import type { StyledDecl } from "../transform-types.js";
 import type { WarningType } from "../logger.js";
@@ -170,6 +170,18 @@ export function handleInterpolatedDeclaration(args: InterpolatedDeclarationConte
     }
   };
 
+  /** Parse and store extra className expressions (from CSS modules) on the decl. */
+  const collectExtraClassNames = (entries: ExprWithImports[]) => {
+    decl.extraClassNames ??= [];
+    for (const cn of entries) {
+      addResolverImports(cn.imports);
+      const cnExpr = parseExpr(cn.expr);
+      if (cnExpr) {
+        decl.extraClassNames.push({ expr: cnExpr as any });
+      }
+    }
+  };
+
   /**
    * Try to convert an identity prop with a finite string union type into static variant
    * buckets. Returns true if the optimization applied and the caller should `continue`.
@@ -904,14 +916,7 @@ export function handleInterpolatedDeclaration(args: InterpolatedDeclarationConte
       });
       // Store any extra className expressions (from CSS modules) on the decl
       if (res.extraClassNames) {
-        decl.extraClassNames ??= [];
-        for (const cn of res.extraClassNames) {
-          addResolverImports(cn.imports);
-          const cnExpr = parseExpr(cn.expr);
-          if (cnExpr) {
-            decl.extraClassNames.push({ expr: cnExpr as any });
-          }
-        }
+        collectExtraClassNames(res.extraClassNames);
       }
       // Create an after-base segment so subsequent static properties
       // are placed after this helper in the stylex.props() call
@@ -923,14 +928,7 @@ export function handleInterpolatedDeclaration(args: InterpolatedDeclarationConte
     if (res && res.type === "resolvedClassNames") {
       // Adapter returned className-only result (no StyleX expr).
       // Store the className expressions on the decl for the emitter to merge.
-      decl.extraClassNames ??= [];
-      for (const cn of res.extraClassNames) {
-        addResolverImports(cn.imports);
-        const cnExpr = parseExpr(cn.expr);
-        if (cnExpr) {
-          decl.extraClassNames.push({ expr: cnExpr as any });
-        }
-      }
+      collectExtraClassNames(res.extraClassNames);
       decl.needsWrapperComponent = true;
       continue;
     }

test-cases/fixtures.d.ts

@@ -17,6 +17,12 @@ declare module "styled-components" {
   export function useTheme(): TestCaseTheme;
 }
 
+// CSS module type declarations for test fixtures.
+declare module "*.module.css" {
+  const classes: Record<string, string>;
+  export default classes;
+}
+
 // Augment React JSX to accept the `sx` prop on intrinsic elements.
 // The StyleX babel plugin (≥0.18, sxPropName option) transforms
 // `<div sx={styles.base} />` to `<div {...stylex.props(styles.base)} />`

test-cases/lib/electronMixins.module.css

@@ -0,0 +1,7 @@
+.draggableRegionDisableChildren {
+  -webkit-app-region: drag;
+}
+
+.draggableRegionDisableChildren > * {
+  -webkit-app-region: no-drag;
+}

test-cases/lib/helpers.ts

@@ -247,6 +247,15 @@ export const scrollFadeMaskStyles = (size: number, direction?: "top" | "bottom"
   );
 `;
 
+// Draggable region helper — returns a css`` RuleSet that applies electron draggable region styles.
+// The adapter resolves this to a CSS module className instead of a StyleX expression.
+export const draggableRegion = (_enable: boolean) => css`
+  -webkit-app-region: drag;
+  & > * {
+    -webkit-app-region: no-drag;
+  }
+`;
+
 // Shadow helper — returns a box-shadow CSS string for a given level.
 // Used to test adapter resolution for dynamic prop args.
 export const shadow = (level: string): string => {