fix: Configure Styled Components SSR with SWC

drumnation · drumnation · commit 15889fe608e2 · 2025-04-30T01:36:13.000-04:00
Switched from Babel to SWC for Styled Components SSR transformation by removing Babel config/plugin, ensuring compiler.styledComponents is true in next.config.js, and adding/integrating the StyledComponentsRegistry.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { lexend, inter, manrope, workSans, ibmPlex } from '../src/styles/fonts';
 import ClientLayout from '@components/ClientLayout';
 import { ThemeProvider } from '../src/providers/ThemeProvider';
+import StyledComponentsRegistry from '@providers/StyledComponentsRegistry';
 import '../src/styles/globals.css';
 import '../src/styles/print.css';
 import '@mantine/core/styles.css';
@@ -20,9 +21,11 @@ export default function RootLayout({
   return (
     <html lang="en" className={`${lexend.variable} ${inter.variable} ${manrope.variable} ${workSans.variable} ${ibmPlex.variable}`}>
       <body style={{ overflowX: 'hidden' }}>
-        <ThemeProvider>
-          <ClientLayout>{children}</ClientLayout>
-        </ThemeProvider>
+        <StyledComponentsRegistry>
+          <ThemeProvider>
+            <ClientLayout>{children}</ClientLayout>
+          </ThemeProvider>
+        </StyledComponentsRegistry>
       </body>
     </html>
   );
diff --git a/package.json b/package.json
@@ -116,7 +116,6 @@
     "@vitest/browser": "^3.0.8",
     "@vitest/coverage-v8": "^3.0.8",
     "babel-loader": "^10.0.0",
-    "babel-plugin-styled-components": "^2.1.4",
     "concurrently": "^9.1.2",
     "eslint": "^9",
     "eslint-config-next": "15.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/providers/StyledComponentsRegistry.tsx b/src/providers/StyledComponentsRegistry.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useServerInsertedHTML } from 'next/navigation'
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+
+export default function StyledComponentsRegistry({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    // Only create stylesheet once with lazy initial state
+    // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+    const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
+
+    useServerInsertedHTML(() => {
+        const styles = styledComponentsStyleSheet.getStyleElement()
+        styledComponentsStyleSheet.instance.clearTag()
+        return <>{styles}</>
+    })
+
+    if (typeof window !== 'undefined') return <>{children}</>
+
+    return (
+        <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+            {children}
+        </StyleSheetManager>
+    )
+} 
