From fd4f9c6e319a2f7ecdaeb1b46b574eb4b1f74a85 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Tue, 28 Oct 2025 22:19:36 +0100 Subject: [PATCH] remove styled-react and styled-components --- examples/nextjs/package.json | 2 -- examples/nextjs/src/app/global.css | 5 ---- examples/nextjs/src/app/layout.tsx | 11 +++----- examples/nextjs/src/app/page.tsx | 40 ++-------------------------- examples/nextjs/src/app/registry.tsx | 25 ----------------- package-lock.json | 2 -- 6 files changed, 6 insertions(+), 79 deletions(-) delete mode 100644 examples/nextjs/src/app/registry.tsx diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index ef1915957d9..435b3337d1c 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -11,11 +11,9 @@ }, "dependencies": { "@primer/react": "38.0.0", - "@primer/styled-react": "0.2.0", "next": "^15.2.3", "react": "18.3.1", "react-dom": "18.3.1", - "styled-components": "5.x", "typescript": "^5.9.2" }, "devDependencies": { diff --git a/examples/nextjs/src/app/global.css b/examples/nextjs/src/app/global.css index 64fc7c3ae47..9c25dd53bab 100644 --- a/examples/nextjs/src/app/global.css +++ b/examples/nextjs/src/app/global.css @@ -1,8 +1,3 @@ @import '@primer/primitives/dist/css/primitives.css'; @import '@primer/primitives/dist/css/functional/themes/light.css'; @import '@primer/primitives/dist/css/functional/themes/dark.css'; - -body { - color: var(--fgColor-default); - background-color: var(--bgColor-default); -} diff --git a/examples/nextjs/src/app/layout.tsx b/examples/nextjs/src/app/layout.tsx index 8e845a6afba..ba883091857 100644 --- a/examples/nextjs/src/app/layout.tsx +++ b/examples/nextjs/src/app/layout.tsx @@ -1,6 +1,5 @@ import './global.css' -import {ThemeProvider, BaseStyles} from '@primer/styled-react' -import {StyledComponentsRegistry} from './registry' +import {ThemeProvider, BaseStyles} from '@primer/react' export const metadata = { title: 'Next.js', @@ -13,11 +12,9 @@ export default function RootLayout({children}: {children: React.ReactNode}) { // that cause hydration mismatch errors - - - {children} - - + + {children} + ) diff --git a/examples/nextjs/src/app/page.tsx b/examples/nextjs/src/app/page.tsx index 88a1fb74ce4..7b9ad9f2e0d 100644 --- a/examples/nextjs/src/app/page.tsx +++ b/examples/nextjs/src/app/page.tsx @@ -1,41 +1,5 @@ -'use client' - -import {Button, Stack} from '@primer/react' -import {useTheme} from '@primer/styled-react' -import styled from 'styled-components' - -const StyledDiv = styled.div(({theme}) => { - return { - padding: theme.space[5], - backgroundColor: theme.colors.btn.primary.bg, - } -}) - -const ThemeUser = () => { - const {theme} = useTheme() - return ( -
- Hello world -
- ) -} +import {Button} from '@primer/react' export default function IndexPage() { - return ( - - -
- Hello world -
- Hello world - - - ) + return } diff --git a/examples/nextjs/src/app/registry.tsx b/examples/nextjs/src/app/registry.tsx deleted file mode 100644 index ce3e54643f6..00000000000 --- a/examples/nextjs/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 2d8b845f76f..aa3df51a938 100644 --- a/package-lock.json +++ b/package-lock.json @@ -91,11 +91,9 @@ "version": "0.0.0", "dependencies": { "@primer/react": "38.0.0", - "@primer/styled-react": "0.2.0", "next": "^15.2.3", "react": "18.3.1", "react-dom": "18.3.1", - "styled-components": "5.x", "typescript": "^5.9.2" }, "devDependencies": {