Fix wrong export {} emit

Author: skovhus

src/__tests__/transform.test.ts

@@ -206,10 +206,29 @@ describe("test case exports", () => {
 });
 
 describe("output invariants", () => {
-  it.each(fixtureCases)("$outputFile should not import styled-components", ({ name }) => {
-    const { output } = readTestCase(name);
-    expect(output).not.toMatch(/from\s+['"]styled-components['"]/);
-  });
+  it.each(fixtureCases)(
+    "$outputFile should not import styled/css/keyframes from styled-components",
+    ({ name }) => {
+      const { output } = readTestCase(name);
+      // Allow imports of useTheme, withTheme, ThemeProvider etc. that aren't transformed
+      // But disallow imports of styled, css, keyframes, createGlobalStyle
+      const disallowedImports = ["styled", "css", "keyframes", "createGlobalStyle"];
+      const importMatch = output.match(
+        /import\s+(?:{([^}]+)}|(\w+))\s+from\s+['"]styled-components['"]/,
+      );
+      if (importMatch) {
+        const namedImports = importMatch[1] || "";
+        const defaultImport = importMatch[2] || "";
+        const importedNames = [
+          defaultImport,
+          ...namedImports.split(",").map((s) => s.trim().split(/\s+as\s+/)[0]),
+        ].filter(Boolean);
+        for (const imp of importedNames) {
+          expect(disallowedImports).not.toContain(imp);
+        }
+      }
+    },
+  );
 });
 
 describe("fixture warning expectations", () => {

src/internal/collect-styled-decls.ts

@@ -541,6 +541,48 @@ export function collectStyledDecls(args: {
           ...(leadingComments ? { leadingComments } : {}),
         });
       }
+
+      // styled("div").withConfig(...)`...` - intrinsic element with string argument
+      if (
+        tag.type === "CallExpression" &&
+        tag.callee.type === "MemberExpression" &&
+        tag.callee.property.type === "Identifier" &&
+        tag.callee.property.name === "withConfig" &&
+        tag.callee.object.type === "CallExpression" &&
+        tag.callee.object.callee.type === "Identifier" &&
+        tag.callee.object.callee.name === styledDefaultImport &&
+        tag.callee.object.arguments.length === 1 &&
+        (tag.callee.object.arguments[0]?.type === "StringLiteral" ||
+          (tag.callee.object.arguments[0]?.type === "Literal" &&
+            typeof (tag.callee.object.arguments[0] as any).value === "string"))
+      ) {
+        const localName = id.name;
+        const arg0 = tag.callee.object.arguments[0] as any;
+        const tagName = arg0.type === "StringLiteral" ? arg0.value : arg0.value;
+        const template = init.quasi;
+        const parsed = parseStyledTemplateLiteral(template);
+        const rules = normalizeStylisAstToIR(parsed.stylisAst, parsed.slots, {
+          rawCss: parsed.rawCss,
+        });
+        if (hasUniversalSelectorInRules(rules)) {
+          noteUniversalSelector(template);
+        }
+        const shouldForwardProp = parseShouldForwardProp(tag.arguments[0]);
+        const withConfigMeta = parseWithConfigMeta(tag.arguments[0]);
+
+        styledDecls.push({
+          ...placementHints,
+          localName,
+          base: { kind: "intrinsic", tagName },
+          styleKey: toStyleKey(localName),
+          rules,
+          templateExpressions: parsed.slots.map((s) => s.expression),
+          rawCss: parsed.rawCss,
+          ...(shouldForwardProp ? { shouldForwardProp } : {}),
+          ...(withConfigMeta ? { withConfig: withConfigMeta } : {}),
+          ...(leadingComments ? { leadingComments } : {}),
+        });
+      }
     });
 
   // Collect: const X = styled.div({ ... }) / styled.div((props) => ({ ... }))

src/internal/emit-styles.ts

@@ -54,9 +54,60 @@ export function emitStylesAndImports(args: {
     addHeaderComments((n as any)?.comments);
   }
 
-  // Remove styled-components import(s)
+  // Remove styled-components import(s), but preserve any named imports that are still referenced
+  // (e.g. useTheme, withTheme, ThemeProvider if they're still used in the code)
+  const preservedSpecifiers: string[] = [];
+  for (const importNode of styledImports.nodes()) {
+    const specifiers = (importNode as any).specifiers ?? [];
+    for (const spec of specifiers) {
+      // Skip default import (styled) and namespace imports
+      if (spec.type !== "ImportSpecifier") {
+        continue;
+      }
+      const localName = spec.local?.name ?? spec.imported?.name;
+      if (!localName) {
+        continue;
+      }
+      // Check if this import is still referenced elsewhere in the code
+      // Skip common styled-components exports that are being transformed away
+      const transformedAway = ["styled", "css", "keyframes", "createGlobalStyle"];
+      if (transformedAway.includes(localName)) {
+        continue;
+      }
+      // Check if the identifier is used anywhere in the code
+      const usages = root.find(j.Identifier, { name: localName });
+      // Filter out usages that are just the import specifier itself
+      const realUsages = usages.filter((p: any) => {
+        const parent = p.parent?.node;
+        return !(parent?.type === "ImportSpecifier");
+      });
+      if (realUsages.size() > 0) {
+        preservedSpecifiers.push(localName);
+      }
+    }
+  }
+
+  // Remove styled-components imports
   styledImports.remove();
 
+  // Re-add preserved imports from styled-components if any
+  if (preservedSpecifiers.length > 0) {
+    const preservedImport = j.importDeclaration(
+      preservedSpecifiers.map((name) => j.importSpecifier(j.identifier(name))),
+      j.literal("styled-components"),
+    );
+    // Insert after stylex import
+    const body = root.get().node.program.body as any[];
+    const stylexIdx = body.findIndex(
+      (s) => s?.type === "ImportDeclaration" && (s.source as any)?.value === "@stylexjs/stylex",
+    );
+    if (stylexIdx >= 0) {
+      body.splice(stylexIdx + 1, 0, preservedImport);
+    } else {
+      body.unshift(preservedImport);
+    }
+  }
+
   // Insert stylex import at top (after existing imports, before code)
   const hasStylexImport =
     root.find(j.ImportDeclaration, { source: { value: "@stylexjs/stylex" } } as any).size() > 0;

src/internal/emit-wrappers.ts

@@ -95,14 +95,17 @@ function emitMinimalWrapper(args: {
   return result;
 }
 
+type ExportInfo = { exportName: string; isDefault: boolean };
+
 export function emitWrappers(args: {
   root: Collection<any>;
   j: any;
   styledDecls: StyledDecl[];
   wrapperNames: Set<string>;
   patternProp: (keyName: string, valueId?: any) => any;
+  exportedComponents: Map<string, ExportInfo>;
 }): void {
-  const { root, j, styledDecls, wrapperNames, patternProp } = args;
+  const { root, j, styledDecls, wrapperNames, patternProp, exportedComponents } = args;
 
   const wrapperDecls = styledDecls.filter((d) => d.needsWrapperComponent);
   if (wrapperDecls.length === 0) {
@@ -886,6 +889,105 @@ export function emitWrappers(args: {
     );
   }
 
+  // Simple exported styled components (styled.div without special features)
+  // These are exported components that need wrapper generation to maintain exports.
+  const simpleExportedIntrinsicWrappers = wrapperDecls.filter((d) => {
+    if (d.base.kind !== "intrinsic") {
+      return false;
+    }
+    // Skip if already handled by other wrapper categories
+    if (d.withConfig?.displayName || d.withConfig?.componentId) {
+      return false;
+    }
+    if (d.shouldForwardProp) {
+      return false;
+    }
+    if (d.enumVariant) {
+      return false;
+    }
+    if (d.siblingWrapper) {
+      return false;
+    }
+    if (d.attrWrapper) {
+      return false;
+    }
+    const tagName = d.base.tagName;
+    // Skip specialized wrapper categories
+    if (tagName === "button" && wrapperNames.has(d.localName)) {
+      return false;
+    }
+    if (tagName === "input" || tagName === "a") {
+      return false;
+    }
+    return true;
+  });
+
+  for (const d of simpleExportedIntrinsicWrappers) {
+    if (d.base.kind !== "intrinsic") {
+      continue;
+    }
+    const tagName = d.base.tagName;
+    const styleArgs: any[] = [
+      ...(d.extendsStyleKey
+        ? [j.memberExpression(j.identifier("styles"), j.identifier(d.extendsStyleKey))]
+        : []),
+      j.memberExpression(j.identifier("styles"), j.identifier(d.styleKey)),
+    ];
+
+    emitted.push(
+      ...emitMinimalWrapper({
+        j,
+        localName: d.localName,
+        tagName,
+        styleArgs,
+        destructureProps: [],
+        displayName: undefined,
+        patternProp,
+      }),
+    );
+  }
+
+  // Component wrappers (styled(Component)) - these wrap another component
+  const componentWrappers = wrapperDecls.filter((d) => d.base.kind === "component");
+
+  for (const d of componentWrappers) {
+    if (d.base.kind !== "component") {
+      continue;
+    }
+    const wrappedComponent = d.base.ident;
+    const styleArgs: any[] = [
+      ...(d.extendsStyleKey
+        ? [j.memberExpression(j.identifier("styles"), j.identifier(d.extendsStyleKey))]
+        : []),
+      j.memberExpression(j.identifier("styles"), j.identifier(d.styleKey)),
+    ];
+
+    const propsId = j.identifier("props");
+    const stylexPropsCall = j.callExpression(
+      j.memberExpression(j.identifier("stylex"), j.identifier("props")),
+      styleArgs,
+    );
+
+    // Create: <WrappedComponent {...props} {...stylex.props(styles.key)} />
+    const jsx = j.jsxElement(
+      j.jsxOpeningElement(
+        j.jsxIdentifier(wrappedComponent),
+        [j.jsxSpreadAttribute(propsId), j.jsxSpreadAttribute(stylexPropsCall)],
+        true,
+      ),
+      null,
+      [],
+    );
+
+    emitted.push(
+      j.functionDeclaration(
+        j.identifier(d.localName),
+        [propsId],
+        j.blockStatement([j.returnStatement(jsx as any)]),
+      ),
+    );
+  }
+
   if (emitted.length > 0) {
     // Re-order emitted wrapper nodes to match `wrapperDecls` source order.
     const groups = new Map<string, any[]>();
@@ -950,6 +1052,27 @@ export function emitWrappers(args: {
     }
     ordered.push(...restNodes);
 
+    // Wrap function declarations in export statements for exported components
+    const wrappedOrdered = ordered.map((node) => {
+      if (node?.type !== "FunctionDeclaration") {
+        return node;
+      }
+      const fnName = node.id?.name;
+      if (!fnName) {
+        return node;
+      }
+      const exportInfo = exportedComponents.get(fnName);
+      if (!exportInfo) {
+        return node;
+      }
+      if (exportInfo.isDefault) {
+        // Create: export default function X(...) { ... }
+        return j.exportDefaultDeclaration(node);
+      }
+      // Create: export function X(...) { ... }
+      return j.exportNamedDeclaration(node, [], null);
+    });
+
     root
       .find(j.VariableDeclaration)
       .filter((p: any) =>
@@ -958,7 +1081,7 @@ export function emitWrappers(args: {
         ),
       )
       .at(0)
-      .insertAfter(ordered);
+      .insertAfter(wrappedOrdered);
   }
 
   if (forceReactImport) {

src/transform.ts

@@ -878,6 +878,12 @@ export function transformWithWarnings(
       decl.needsWrapperComponent = true;
     }
 
+    // Exported styled components need wrapper components to maintain the export.
+    // Without this, removing the styled declaration would leave an empty `export {}`.
+    if (exportedComponents.has(decl.localName)) {
+      decl.needsWrapperComponent = true;
+    }
+
     // Remove variable declarator for styled component
     root
       .find(j.VariableDeclaration)
@@ -891,7 +897,14 @@ export function transformWithWarnings(
       )
       .forEach((p) => {
         if (p.node.declarations.length === 1) {
-          j(p).remove();
+          // Check if this is inside an ExportNamedDeclaration
+          const parent = p.parentPath;
+          if (parent && parent.node?.type === "ExportNamedDeclaration") {
+            // Remove the entire export declaration
+            j(parent).remove();
+          } else {
+            j(p).remove();
+          }
           return;
         }
         p.node.declarations = p.node.declarations.filter(
@@ -1252,6 +1265,7 @@ export function transformWithWarnings(
     styledDecls,
     wrapperNames,
     patternProp,
+    exportedComponents,
   });
 
   const post = postProcessTransformedAst({

test-cases/external-styles-support.output.tsx

@@ -1,9 +1,5 @@
 import * as stylex from "@stylexjs/stylex";
 
-// This component is exported and will use shouldSupportExternalStyles to enable
-// className/style/rest merging for external style extension support.
-export {};
-
 const styles = stylex.create({
   exportedButton: {
     backgroundColor: "#bf4f74",
@@ -21,7 +17,7 @@ const styles = stylex.create({
   },
 });
 
-function ExportedButton(props) {
+export function ExportedButton(props) {
   const { className, children, style, ...rest } = props;
 
   const sx = stylex.props(styles.exportedButton);