Add v3 playground

tailwindlabs · Oct 24, 2024 · aa22971 · aa22971
1 parent acc006e
commit aa22971
Show file tree

Hide file tree

Showing 12 changed files with 1,052 additions and 50 deletions.
diff --git a/playgrounds/v3/.eslintrc.json b/playgrounds/v3/.eslintrc.json
@@ -0,0 +1,7 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react/no-unescaped-entities": "off",
+    "react/jsx-no-comment-textnodes": "off"
+  }
+}
diff --git a/playgrounds/v3/.gitignore b/playgrounds/v3/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# 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/playgrounds/v3/app/globals.css b/playgrounds/v3/app/globals.css
@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
diff --git a/playgrounds/v3/app/layout.tsx b/playgrounds/v3/app/layout.tsx
@@ -0,0 +1,23 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en" className="[&_h1]:font-thin">
+      <head>{/* <script src="https://cdn.tailwindcss.com"></script> */}</head>
+      <body className={inter.className}>{children}</body>
+    </html>
+  )
+}
diff --git a/playgrounds/v3/app/page.tsx b/playgrounds/v3/app/page.tsx
@@ -0,0 +1,3 @@
+export default function Home() {
+  return <h1 className="text-3xl font-bold underline border ring">Hello world!</h1>
+}
diff --git a/playgrounds/v3/next.config.mjs b/playgrounds/v3/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+export default nextConfig
diff --git a/playgrounds/v3/package.json b/playgrounds/v3/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "v3-playground",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "upgrade": "node scripts/upgrade.mjs"
+  },
+  "dependencies": {
+    "next": "14.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.8",
+    "@types/react": "^18.3.9",
+    "@types/react-dom": "^18.3.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.11.1",
+    "eslint-config-next": "^14.2.5",
+    "typescript": "^5.5.4"
+  }
+}
diff --git a/playgrounds/v3/postcss.config.js b/playgrounds/v3/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/playgrounds/v3/scripts/upgrade.mjs b/playgrounds/v3/scripts/upgrade.mjs
@@ -0,0 +1,40 @@
+import { execSync } from 'node:child_process'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url))
+const cwd = path.join(__dirname, '..')
+
+let originalLockfile = await fs.readFile(path.join(cwd, '../../pnpm-lock.yaml'), 'utf-8')
+
+console.log('Overwriting dependencies for @tailwindcss/upgrade')
+
+// Apply package patches
+let json = JSON.parse(await fs.readFile('package.json', 'utf-8'))
+json.pnpm = {
+  overrides: {
+    '@tailwindcss/upgrade>tailwindcss': 'file:../../dist/tailwindcss.tgz',
+    '@tailwindcss/upgrade>@tailwindcss/node': 'file:../../dist/tailwindcss-node.tgz',
+  },
+}
+json.devDependencies['@tailwindcss/upgrade'] = 'file:../../dist/tailwindcss-upgrade.tgz'
+await fs.writeFile('package.json', JSON.stringify(json, null, 2))
+
+try {
+  execSync('pnpm install --ignore-workspace', { cwd })
+} catch (error) {
+  console.error(error.stdout?.toString() ?? error)
+}
+
+execSync('npx @tailwindcss/upgrade --force', { cwd, stdio: 'inherit' })
+
+// Undo package patches
+json = JSON.parse(await fs.readFile('package.json', 'utf-8'))
+delete json.pnpm
+delete json.devDependencies['@tailwindcss/upgrade']
+await fs.writeFile('package.json', JSON.stringify(json, null, 2))
+
+// Restore original lockfile (to avoid unnecessary changes in git diff)
+await fs.writeFile(path.join(cwd, '../../pnpm-lock.yaml'), originalLockfile)
+await fs.unlink(path.join(cwd, 'pnpm-lock.yaml'))
diff --git a/playgrounds/v3/tailwind.config.js b/playgrounds/v3/tailwind.config.js
@@ -0,0 +1,4 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./app/**/*.tsx'],
+}
diff --git a/playgrounds/v3/tsconfig.json b/playgrounds/v3/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "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,
+    "plugins": [
+      {
+        "name": "next",
+      },
+    ],
+    "paths": {
+      "@/*": ["./*"],
+    },
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"],
+}