diff --git a/examples/with-styled-components-rtl/.gitignore b/examples/with-styled-components-rtl/.gitignore deleted file mode 100644 index 8777267507c0e..0000000000000 --- a/examples/with-styled-components-rtl/.gitignore +++ /dev/null @@ -1,40 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.* -.yarn/* -!.yarn/patches -!.yarn/plugins -!.yarn/releases -!.yarn/versions - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# local env files -.env*.local - -# vercel -.vercel - -# typescript -*.tsbuildinfo -next-env.d.ts diff --git a/examples/with-styled-components-rtl/README.md b/examples/with-styled-components-rtl/README.md deleted file mode 100644 index a5370e29109fb..0000000000000 --- a/examples/with-styled-components-rtl/README.md +++ /dev/null @@ -1,37 +0,0 @@ -# Example with styled-components RTL - -This example shows how to use nextjs with right to left (RTL) styles using styled-components. - -## Deploy your own - -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-styled-components-rtl) - -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-styled-components-rtl&project-name=with-styled-components-rtl&repository-name=with-styled-components-rtl) - -## How to use - -Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: - -```bash -npx create-next-app --example with-styled-components-rtl with-styled-components-rtl-app -``` - -```bash -yarn create next-app --example with-styled-components-rtl with-styled-components-rtl-app -``` - -```bash -pnpm create next-app --example with-styled-components-rtl with-styled-components-rtl-app -``` - -Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). - -## Notes - -Right to left allows to "flip" every element in your site to fit the needs of the cultures that are read from right to left (like arabic for example). - -This example shows how to enable right to left styles using `styled-components`. - -The good news, is there is no need of doing it manually anymore. `stylis-plugin-rtl` makes the transformation automatic. - -From `pages/index.js` you can see, styles are `text-align: left;`, but what is actually applied is `text-align: right;`. diff --git a/examples/with-styled-components-rtl/next.config.js b/examples/with-styled-components-rtl/next.config.js deleted file mode 100644 index 7b09dd40f78df..0000000000000 --- a/examples/with-styled-components-rtl/next.config.js +++ /dev/null @@ -1,8 +0,0 @@ -/** @type {import('next').NextConfig} */ -const nextConfig = { - compiler: { - styledComponents: true, - }, -}; - -module.exports = nextConfig; diff --git a/examples/with-styled-components-rtl/package.json b/examples/with-styled-components-rtl/package.json deleted file mode 100644 index 95e5fbf7a4ef6..0000000000000 --- a/examples/with-styled-components-rtl/package.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "private": true, - "scripts": { - "dev": "next dev", - "build": "next build", - "start": "next start" - }, - "dependencies": { - "next": "latest", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "styled-components": "^6.1.0", - "stylis-plugin-rtl": "^2.1.1" - }, - "devDependencies": { - "@types/node": "^18.18.3", - "@types/react": "^18.2.33", - "@types/react-dom": "^18.2.14", - "typescript": "^5.2.2" - } -} diff --git a/examples/with-styled-components-rtl/pages/_app.tsx b/examples/with-styled-components-rtl/pages/_app.tsx deleted file mode 100644 index cc7491ae2c058..0000000000000 --- a/examples/with-styled-components-rtl/pages/_app.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import type { AppProps } from "next/app"; -import type { DefaultTheme } from "styled-components"; -import { ThemeProvider } from "styled-components"; - -const theme: DefaultTheme = { - colors: { - primary: "#0070f3", - }, -}; - -export default function App({ Component, pageProps }: AppProps) { - return ( - - - - ); -} diff --git a/examples/with-styled-components-rtl/pages/_document.tsx b/examples/with-styled-components-rtl/pages/_document.tsx deleted file mode 100644 index 57c7e22fc739c..0000000000000 --- a/examples/with-styled-components-rtl/pages/_document.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import type { DocumentContext, DocumentInitialProps } from "next/document"; -import Document from "next/document"; -import { ServerStyleSheet, StyleSheetManager } from "styled-components"; -import stylisRTLPlugin from "stylis-plugin-rtl"; - -export default class MyDocument extends Document { - static async getInitialProps( - ctx: DocumentContext, - ): Promise { - const sheet = new ServerStyleSheet(); - const originalRenderPage = ctx.renderPage; - - try { - ctx.renderPage = () => - originalRenderPage({ - enhanceApp: (App) => (props) => - sheet.collectStyles( - - - , - ), - }); - - const initialProps = await Document.getInitialProps(ctx); - return { - ...initialProps, - styles: [initialProps.styles, sheet.getStyleElement()], - }; - } finally { - sheet.seal(); - } - } -} diff --git a/examples/with-styled-components-rtl/pages/index.tsx b/examples/with-styled-components-rtl/pages/index.tsx deleted file mode 100644 index 15de3917c9436..0000000000000 --- a/examples/with-styled-components-rtl/pages/index.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import styled from "styled-components"; - -const Title = styled.h1` - font-size: 50px; - color: ${({ theme }) => theme.colors.primary}; - text-align: left; -`; - -export default function Home() { - return My page; -} diff --git a/examples/with-styled-components-rtl/styled.d.ts b/examples/with-styled-components-rtl/styled.d.ts deleted file mode 100644 index 8ae51809abd61..0000000000000 --- a/examples/with-styled-components-rtl/styled.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -import "styled-components"; - -declare module "styled-components" { - export interface DefaultTheme { - colors: { - primary: string; - }; - } -} diff --git a/examples/with-styled-components-rtl/tsconfig.json b/examples/with-styled-components-rtl/tsconfig.json deleted file mode 100644 index f25ef74523264..0000000000000 --- a/examples/with-styled-components-rtl/tsconfig.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": ["dom", "dom.iterable", "esnext"], - "allowJs": true, - "skipLibCheck": true, - "strict": true, - "noEmit": true, - "esModuleInterop": true, - "module": "esnext", - "moduleResolution": "bundler", - "resolveJsonModule": true, - "isolatedModules": true, - "jsx": "preserve", - "incremental": true, - "paths": { - "@/*": ["./*"] - } - }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "styled.d.ts"], - "exclude": ["node_modules"] -}