fix(astro): Preserve Clerk component stylings across view transitions

.changeset/astro-view-transition-styling-fix.md

@@ -0,0 +1,5 @@
+---
+'@clerk/astro': patch
+---
+
+Fix Clerk component styling being lost after Astro View Transitions navigations.

integration/templates/astro-node/src/pages/transitions/index.astro

@@ -10,6 +10,7 @@ import Layout from '../../layouts/ViewTransitionsLayout.astro';
     </Show>
     <Show when='signed-in'>
       <UserButton />
+      <a href='/transitions/page2'>Page 2</a>
     </Show>
   </div>
 </Layout>

integration/templates/astro-node/src/pages/transitions/page2.astro

@@ -0,0 +1,11 @@
+---
+import { UserButton } from '@clerk/astro/components';
+import Layout from '../../layouts/ViewTransitionsLayout.astro';
+---
+
+<Layout title='Transitions page 2'>
+  <div class='w-full flex justify-center'>
+    <a href='/transitions'>Back</a>
+    <UserButton />
+  </div>
+</Layout>

integration/tests/astro/components.test.ts

@@ -484,6 +484,42 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
     await u.po.userButton.waitForMounted();
   });
 
+  test('preserves clerk component styling after view transitions navigations', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+
+    // Sign in directly (full navigation, not view transition)
+    await u.page.goToRelative('/sign-in');
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+    await u.po.expect.toBeSignedIn();
+
+    // Go to the view-transitions-enabled page
+    await u.page.goToRelative('/transitions');
+    await u.po.userButton.waitForMounted();
+
+    // Navigate to a second transitions page via link click (triggers view transition)
+    await u.page.getByRole('link', { name: /Page 2/i }).click();
+    await u.page.waitForURL(`${app.serverUrl}/transitions/page2`);
+    await u.po.userButton.waitForMounted();
+
+    // Navigate back via link click (triggers another view transition)
+    await u.page.getByRole('link', { name: /Back/i }).click();
+    await u.page.waitForURL(`${app.serverUrl}/transitions`);
+    await u.po.userButton.waitForMounted();
+
+    // Verify Emotion style elements are present in document.head after the round-trip.
+    // Regression: cloneNode() on #clerk-components detached the React root from its host
+    // element, causing Clerk to lose its style injection context on subsequent navigations.
+    const emotionStyleCount = await page.evaluate(() => document.head.querySelectorAll('style[data-emotion]').length);
+    expect(emotionStyleCount).toBeGreaterThan(0);
+
+    // Verify #clerk-components is attached to the live document (not detached from the React root).
+    const clerkRootIsAttached = await page.evaluate(() =>
+      document.body.contains(document.getElementById('clerk-components')),
+    );
+    expect(clerkRootIsAttached).toBe(true);
+  });
+
   test('server islands Show component shows correct states', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
 

packages/astro/src/integration/snippets.ts

@@ -71,29 +71,41 @@ export function buildPageLoadSnippet({
   }
 
   if (transitionEnabledOnThisPage()) {
-    // We must do the dynamic imports within the event listeners because otherwise we may race and miss initial astro:page-load
-    document.addEventListener('astro:before-swap', async (e) => {
-      const { swapFunctions } = await import('astro:transitions/client');
+    // Start loading eagerly without awaiting so both listeners share one module load.
+    // Listeners are registered synchronously here, which avoids the race where awaiting
+    // before addEventListener would cause us to miss the initial astro:page-load event.
+    const transitionClient = import('astro:transitions/client');
 
-      const clerkComponents = document.querySelector('#clerk-components');
-      // Keep the div element added by Clerk
-      if (clerkComponents) {
-        const clonedEl = clerkComponents.cloneNode(true);
-        e.newDocument.body.appendChild(clonedEl);
+    document.addEventListener('astro:before-swap', async (e) => {
+      const nextDocument = e.newDocument;
+      const nextHead = nextDocument?.head;
+      if (!nextDocument || !nextHead) {
+        return;
       }
 
-      e.swap = () => swapDocument(swapFunctions, e.newDocument);
+      const { swapFunctions } = await transitionClient;
+
+      e.swap = () => {
+        const clerkComponents = document.querySelector('#clerk-components');
+        // Move (not clone) the element so Clerk's React root stays bound to its host node
+        // across the body swap. Cloning produces a detached copy with no React associated,
+        // which breaks style injection on subsequent navigations.
+        if (clerkComponents) {
+          nextDocument.body.appendChild(clerkComponents);
+        }
+        swapDocument(swapFunctions, nextDocument);
+      };
     });
 
     document.addEventListener('astro:page-load', async (e) => {
-      const { navigate } = await import('astro:transitions/client');
+      const { navigate } = await transitionClient;
 
       await runInjectionScript({
         ...${JSON.stringify(internalParams)},
         routerPush: navigate,
         routerReplace: (url) => navigate(url, { history: 'replace' }),
       });
-    })
+    });
   } else {
     await runInjectionScript(${JSON.stringify(internalParams)});
   }`;