Improve the general case

Author: skovhus

.oxlintrc.json

@@ -4,7 +4,19 @@
     "no-unused-vars": "error",
     "no-console": "error",
     "eqeqeq": "error",
-    "curly": "error"
+    "curly": "error",
+    "no-constant-condition": "error",
+    "no-debugger": "error",
+    "no-duplicate-case": "error",
+    "no-empty": "error",
+    "no-ex-assign": "error",
+    "no-extra-boolean-cast": "error",
+    "no-irregular-whitespace": "error",
+    "no-sparse-arrays": "error",
+    "use-isnan": "error",
+    "valid-typeof": "error",
+    "array-callback-return": "error",
+    "no-self-compare": "error"
   },
   "ignorePatterns": [
     "dist/**",

src/__tests__/fixture-adapters.ts

@@ -20,6 +20,13 @@ export const customAdapter = defineAdapter({
 
 // Fixtures don't use theme resolution, but the transformer requires an adapter.
 export const fixtureAdapter = defineAdapter({
+  // Enable external styles for exported components in external-styles-support test case
+  shouldSupportExternalStyles(ctx) {
+    return (
+      ctx.filePath.includes("external-styles-support") && ctx.componentName === "ExportedButton"
+    );
+  },
+
   resolveValue(ctx) {
     if (ctx.kind === "theme") {
       // Test fixtures use a small ThemeProvider theme shape:

src/adapter.ts

@@ -63,13 +63,35 @@ export type ImportSource =
 
 export type ImportSpec = { from: ImportSource; names: Array<{ imported: string; local?: string }> };
 
+// ────────────────────────────────────────────────────────────────────────────
+// External Styles Context
+// ────────────────────────────────────────────────────────────────────────────
+
+export interface ExternalStylesContext {
+  /** Absolute path of the file being transformed */
+  filePath: string;
+  /** Local name of the styled component */
+  componentName: string;
+  /** The export name (may differ from componentName for renamed exports) */
+  exportName: string;
+  /** Whether it's a default export */
+  isDefaultExport: boolean;
+}
+
 // ────────────────────────────────────────────────────────────────────────────
 // Adapter Interface
 // ────────────────────────────────────────────────────────────────────────────
 
 export interface Adapter {
   /** Unified resolver for theme paths + CSS variables. Return null to leave unresolved. */
   resolveValue: (context: ResolveContext) => ResolveResult | null;
+
+  /**
+   * Called for exported styled components to determine if they should support
+   * external className/style extension. Return true to generate wrapper with
+   * className/style/rest merging. Default: false.
+   */
+  shouldSupportExternalStyles?: (context: ExternalStylesContext) => boolean;
 }
 
 // ────────────────────────────────────────────────────────────────────────────
@@ -92,6 +114,12 @@ export interface Adapter {
  *       }
  *       return null;
  *     },
+ *
+ *     // Optional: Enable className/style/rest support for exported components
+ *     shouldSupportExternalStyles(ctx) {
+ *       // Example: Enable for all exported components in a shared components folder
+ *       return ctx.filePath.includes("/shared/components/");
+ *     },
  *   });
  */
 export function defineAdapter(adapter: Adapter): Adapter {

src/internal/css-prop-mapping.ts

@@ -2,6 +2,18 @@ import type { CssDeclarationIR, CssValue } from "./css-ir.js";
 
 export type StylexPropDecl = { prop: string; value: CssValue };
 
+const BORDER_STYLES = new Set([
+  "none",
+  "solid",
+  "dashed",
+  "dotted",
+  "double",
+  "groove",
+  "ridge",
+  "inset",
+  "outset",
+]);
+
 export function cssDeclarationToStylexDeclarations(decl: CssDeclarationIR): StylexPropDecl[] {
   const prop = decl.property.trim();
 
@@ -37,17 +49,6 @@ function borderShorthandToStylex(valueRaw: string): StylexPropDecl[] {
   }
 
   const tokens = v.split(/\s+/);
-  const borderStyles = new Set([
-    "none",
-    "solid",
-    "dashed",
-    "dotted",
-    "double",
-    "groove",
-    "ridge",
-    "inset",
-    "outset",
-  ]);
 
   let width: string | undefined;
   let style: string | undefined;
@@ -58,7 +59,7 @@ function borderShorthandToStylex(valueRaw: string): StylexPropDecl[] {
       width = token;
       continue;
     }
-    if (!style && borderStyles.has(token)) {
+    if (!style && BORDER_STYLES.has(token)) {
       style = token;
       continue;
     }
@@ -83,5 +84,5 @@ function borderShorthandToStylex(valueRaw: string): StylexPropDecl[] {
 }
 
 function looksLikeLength(token: string): boolean {
-  return /^-?\d*\.?\d+(px|rem|em|vh|vw|vmin|vmax|%)?$/.test(token);
+  return /^-?\d*\.?\d+(px|rem|em|vh|vw|vmin|vmax|ch|ex|lh|svh|svw|dvh|dvw|cqw|cqh|%)?$/.test(token);
 }

src/internal/emit-wrappers.ts

@@ -1,6 +1,100 @@
 import type { Collection } from "jscodeshift";
 import type { StyledDecl } from "./transform-types.js";
 
+// Void HTML tags that don't have children
+const VOID_TAGS = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr",
+]);
+
+/**
+ * Generates a minimal wrapper component that only destructures the necessary props
+ * and applies stylex.props() directly without className/style/rest merging.
+ * Uses props.children directly instead of destructuring it.
+ */
+function emitMinimalWrapper(args: {
+  j: any;
+  localName: string;
+  tagName: string;
+  styleArgs: any[];
+  destructureProps: string[];
+  displayName: string | undefined;
+  patternProp: (keyName: string, valueId?: any) => any;
+}): any[] {
+  const { j, localName, tagName, styleArgs, destructureProps, displayName, patternProp } = args;
+  const isVoidTag = VOID_TAGS.has(tagName);
+  const propsId = j.identifier("props");
+
+  // Build destructure pattern for dynamic props only (not children)
+  const patternProps: any[] = destructureProps.filter(Boolean).map((name) => patternProp(name));
+
+  const stylexPropsCall = j.callExpression(
+    j.memberExpression(j.identifier("stylex"), j.identifier("props")),
+    styleArgs,
+  );
+
+  const openingEl = j.jsxOpeningElement(
+    j.jsxIdentifier(tagName),
+    [j.jsxSpreadAttribute(stylexPropsCall)],
+    false,
+  );
+
+  // Use props.children directly
+  const propsChildren = j.memberExpression(propsId, j.identifier("children"));
+
+  const jsx = isVoidTag
+    ? ({
+        type: "JSXElement",
+        openingElement: { ...openingEl, selfClosing: true },
+        closingElement: null,
+        children: [],
+      } as any)
+    : j.jsxElement(openingEl, j.jsxClosingElement(j.jsxIdentifier(tagName)), [
+        j.jsxExpressionContainer(propsChildren),
+      ]);
+
+  // Only emit destructure statement if there are props to destructure
+  const bodyStmts: any[] = [];
+  if (patternProps.length > 0) {
+    bodyStmts.push(
+      j.variableDeclaration("const", [
+        j.variableDeclarator(j.objectPattern(patternProps as any), propsId),
+      ]),
+    );
+  }
+  bodyStmts.push(j.returnStatement(jsx as any));
+
+  const result: any[] = [
+    j.functionDeclaration(j.identifier(localName), [propsId], j.blockStatement(bodyStmts)),
+  ];
+
+  if (displayName) {
+    result.push(
+      j.expressionStatement(
+        j.assignmentExpression(
+          "=",
+          j.memberExpression(j.identifier(localName), j.identifier("displayName")),
+          j.literal(displayName),
+        ),
+      ),
+    );
+  }
+
+  return result;
+}
+
 export function emitWrappers(args: {
   root: Collection<any>;
   j: any;
@@ -300,6 +394,7 @@ export function emitWrappers(args: {
       continue;
     }
     const tagName = d.base.tagName;
+    const supportsExternalStyles = d.supportsExternalStyles ?? false;
 
     // Build style arguments: base + extends + dynamic variants (as conditional expressions).
     const styleArgs: any[] = [
@@ -392,6 +487,22 @@ export function emitWrappers(args: {
     const omitRestSpreadForTransientProps =
       !dropPrefix && dropProps.length > 0 && dropProps.every((p) => p.startsWith("$"));
 
+    // When supportsExternalStyles is false, generate minimal wrapper without className/style/rest merging
+    if (!supportsExternalStyles) {
+      emitted.push(
+        ...emitMinimalWrapper({
+          j,
+          localName: d.localName,
+          tagName,
+          styleArgs,
+          destructureProps: destructureParts,
+          displayName: d.withConfig?.displayName,
+          patternProp,
+        }),
+      );
+      continue;
+    }
+
     const patternProps: any[] = [
       patternProp("className", classNameId),
       // Pull out `children` for non-void elements so we don't forward it as an attribute.
@@ -565,6 +676,7 @@ export function emitWrappers(args: {
     }
     const tagName = d.base.tagName;
     const displayName = d.withConfig?.displayName;
+    const supportsExternalStyles = d.supportsExternalStyles ?? false;
     const styleArgs: any[] = [
       ...(d.extendsStyleKey
         ? [j.memberExpression(j.identifier("styles"), j.identifier(d.extendsStyleKey))]
@@ -578,23 +690,23 @@ export function emitWrappers(args: {
     const styleId = j.identifier("style");
     const restId = j.identifier("rest");
 
-    const voidTags = new Set([
-      "area",
-      "base",
-      "br",
-      "col",
-      "embed",
-      "hr",
-      "img",
-      "input",
-      "link",
-      "meta",
-      "param",
-      "source",
-      "track",
-      "wbr",
-    ]);
-    const isVoidTag = voidTags.has(tagName);
+    const isVoidTag = VOID_TAGS.has(tagName);
+
+    // When supportsExternalStyles is false, generate minimal wrapper
+    if (!supportsExternalStyles) {
+      emitted.push(
+        ...emitMinimalWrapper({
+          j,
+          localName: d.localName,
+          tagName,
+          styleArgs,
+          destructureProps: [],
+          displayName,
+          patternProp,
+        }),
+      );
+      continue;
+    }
 
     const patternProps: any[] = [
       patternProp("className", classNameId),

src/internal/policy.ts

@@ -126,17 +126,6 @@ export function shouldSkipForCreateGlobalStyle(args: {
   });
 }
 
-export function shouldSkipForStyledCssImport(args: {
-  styledImports: Collection<any>;
-  j: any;
-}): boolean {
-  return !!findStyledComponentsNamedImport({
-    styledImports: args.styledImports,
-    j: args.j,
-    importedName: "css",
-  });
-}
-
 export function universalSelectorUnsupportedWarning(
   loc?: { line: number; column: number } | null,
 ): TransformWarning {

src/internal/transform-types.ts

@@ -50,6 +50,11 @@ export type StyledDecl = {
   extendsStyleKey?: string;
   variantStyleKeys?: Record<string, string>; // conditionProp -> styleKey
   needsWrapperComponent?: boolean;
+  /**
+   * Whether this component should support external className/style extension.
+   * True if: (1) extended by another styled component, or (2) exported and adapter opts-in.
+   */
+  supportsExternalStyles?: boolean;
   styleFnFromProps?: Array<{ fnKey: string; jsxProp: string }>;
   shouldForwardProp?: { dropProps: string[]; dropPrefix?: string };
   withConfig?: { displayName?: string; componentId?: string };