From 7241eed4d56a32d3294818447d03d2e9b247c1cd Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 23 Jun 2026 20:36:54 +0000 Subject: [PATCH 1/3] Migrate theming example off styled-components Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com> --- examples/theming/package.json | 2 -- .../ThemePreference/ThemePreference.tsx | 3 +-- examples/theming/src/app/layout.tsx | 11 +++----- examples/theming/src/app/registry.tsx | 25 ------------------- package-lock.json | 2 -- 5 files changed, 5 insertions(+), 38 deletions(-) delete mode 100644 examples/theming/src/app/registry.tsx diff --git a/examples/theming/package.json b/examples/theming/package.json index fc44db63d80..f100e31c335 100644 --- a/examples/theming/package.json +++ b/examples/theming/package.json @@ -12,12 +12,10 @@ "dependencies": { "@primer/octicons-react": "^19.21.0", "@primer/react": "38.29.0", - "@primer/styled-react": "1.1.0", "clsx": "^2.1.1", "next": "^16.1.7", "react": "^19.2.0", "react-dom": "^19.2.0", - "styled-components": "5.x", "typescript": "^6.0.3" }, "devDependencies": { diff --git a/examples/theming/src/app/components/ThemePreference/ThemePreference.tsx b/examples/theming/src/app/components/ThemePreference/ThemePreference.tsx index 63e8310d0d3..e5c8c6b7fb8 100644 --- a/examples/theming/src/app/components/ThemePreference/ThemePreference.tsx +++ b/examples/theming/src/app/components/ThemePreference/ThemePreference.tsx @@ -1,8 +1,7 @@ 'use client' import {SunIcon, MoonIcon} from '@primer/octicons-react' -import {useTheme} from '@primer/styled-react' -import {Button} from '@primer/react' +import {Button, useTheme} from '@primer/react' import classes from './ThemePreference.module.css' diff --git a/examples/theming/src/app/layout.tsx b/examples/theming/src/app/layout.tsx index 3f632308872..026b941fa7e 100644 --- a/examples/theming/src/app/layout.tsx +++ b/examples/theming/src/app/layout.tsx @@ -1,7 +1,6 @@ import './global.css' import {cookies} from 'next/headers' -import {BaseStyles, ThemeProvider} from '@primer/styled-react' -import {StyledComponentsRegistry} from './registry' +import {BaseStyles, ThemeProvider} from '@primer/react' export const metadata = { title: 'Next.js', @@ -24,11 +23,9 @@ export default async function RootLayout({children}: {children: React.ReactNode} data-dark-theme="dark" > - - - {children} - - + + {children} + ) diff --git a/examples/theming/src/app/registry.tsx b/examples/theming/src/app/registry.tsx deleted file mode 100644 index ce3e54643f6..00000000000 --- a/examples/theming/src/app/registry.tsx +++ /dev/null @@ -1,25 +0,0 @@ -'use client' - -import {useServerInsertedHTML} from 'next/navigation' -import type React from 'react' -import {useState} from 'react' -import {ServerStyleSheet, StyleSheetManager} from 'styled-components' - -/** - * @see https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components - */ -export function StyledComponentsRegistry({children}: React.PropsWithChildren) { - // 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 {children} -} diff --git a/package-lock.json b/package-lock.json index 87cadb77973..4e2fb258378 100644 --- a/package-lock.json +++ b/package-lock.json @@ -143,12 +143,10 @@ "dependencies": { "@primer/octicons-react": "^19.21.0", "@primer/react": "38.28.0", - "@primer/styled-react": "1.1.0", "clsx": "^2.1.1", "next": "^16.1.7", "react": "^19.2.0", "react-dom": "^19.2.0", - "styled-components": "5.x", "typescript": "^6.0.3" }, "devDependencies": { From f94dc7cb14148575161355716461d352fbc61b54 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 23 Jun 2026 20:44:25 +0000 Subject: [PATCH 2/3] Document theming provider wrapper behavior Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com> --- examples/theming/src/app/layout.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/theming/src/app/layout.tsx b/examples/theming/src/app/layout.tsx index 026b941fa7e..44dc3f6f580 100644 --- a/examples/theming/src/app/layout.tsx +++ b/examples/theming/src/app/layout.tsx @@ -23,6 +23,7 @@ export default async function RootLayout({children}: {children: React.ReactNode} data-dark-theme="dark" > + {/* Theme attributes are set on so Next.js can hydrate without an extra ThemeProvider wrapper. */} {children} From 6898feb8a0340dd30a1ebaf7287eedabf0c2bca1 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 23 Jun 2026 15:52:06 -0500 Subject: [PATCH 3/3] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- examples/theming/src/app/layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/theming/src/app/layout.tsx b/examples/theming/src/app/layout.tsx index 44dc3f6f580..c16415fc72d 100644 --- a/examples/theming/src/app/layout.tsx +++ b/examples/theming/src/app/layout.tsx @@ -23,7 +23,7 @@ export default async function RootLayout({children}: {children: React.ReactNode} data-dark-theme="dark" > - {/* Theme attributes are set on so Next.js can hydrate without an extra ThemeProvider wrapper. */} + {/* Theme attributes are set on so Next.js can hydrate without ThemeProvider adding an extra DOM wrapper. */} {children}