chore: update nextjs and tailwindcss (#284)

zce · Jan 23, 2025 · 0349d8b · 0349d8b
1 parent bfdb8a2
commit 0349d8b
Show file tree

Hide file tree

Showing 11 changed files with 1,063 additions and 3,522 deletions.
diff --git a/examples/nextjs/app/[slug]/page.tsx b/examples/nextjs/app/[slug]/page.tsx
@@ -1,7 +1,7 @@
 import { notFound } from 'next/navigation'
 
 import { MDXContent } from '@/components/mdx-content'
-import { pages } from '#site/content'
+import { pages } from '#velite'
 
 type Props = {
   params: Promise<{ slug: string }>

diff --git a/examples/nextjs/app/globals.css b/examples/nextjs/app/globals.css
@@ -1,14 +1,34 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/typography';
+
+@custom-variant dark (&:is(.dark *));
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 @layer base {
   [data-rehype-pretty-code-figure] pre {
     @apply px-0;
   }
 
   [data-rehype-pretty-code-figure] code {
-    @apply text-sm !leading-loose md:text-base;
+    @apply text-sm leading-loose! md:text-base;
   }
 
   [data-rehype-pretty-code-figure] code[data-line-numbers] {
@@ -31,7 +51,7 @@
   }
 
   [data-rehype-pretty-code-figure] [data-highlighted-chars] {
-    @apply rounded bg-zinc-600/50;
+    @apply rounded-sm bg-zinc-600/50;
     box-shadow: 0 0 0 4px rgb(82 82 91 / 0.5);
   }
 

diff --git a/examples/nextjs/app/page.tsx b/examples/nextjs/app/page.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 
-import { posts } from '#site/content'
+import { posts } from '#velite'
 
 export default function Home() {
   return (

diff --git a/examples/nextjs/app/posts/[slug]/page.tsx b/examples/nextjs/app/posts/[slug]/page.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image'
 import { notFound } from 'next/navigation'
 
-import { posts } from '#site/content'
+import { posts } from '#velite'
 
 interface PostProps {
   params: Promise<{ slug: string }>

diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -6,29 +6,23 @@
     "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
     "content": "velite --clean"
   },
-  "eslintConfig": {
-    "extends": "next/core-web-vitals"
-  },
   "dependencies": {
-    "@tailwindcss/typography": "latest",
-    "@types/node": "latest",
-    "@types/react": "latest",
-    "@types/react-dom": "latest",
-    "autoprefixer": "latest",
-    "eslint": "^8",
-    "eslint-config-next": "latest",
-    "next": "latest",
-    "next-themes": "latest",
-    "postcss": "latest",
-    "react": "latest",
-    "react-dom": "latest",
-    "rehype-pretty-code": "latest",
-    "shiki": "latest",
-    "tailwindcss": "latest",
-    "typescript": "latest",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/node": "^22.10.9",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "next": "^15.1.6",
+    "next-themes": "^0.4.4",
+    "postcss": "^8.5.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rehype-pretty-code": "^0.14.0",
+    "shiki": "^1.29.1",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.3",
     "velite": "workspace:*"
   }
 }
diff --git a/examples/nextjs/postcss.config.js b/examples/nextjs/postcss.config.js
@@ -1,6 +1,3 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
-  }
+  plugins: ['@tailwindcss/postcss']
 }
diff --git a/examples/nextjs/readme.md b/examples/nextjs/readme.md
@@ -1,6 +1,6 @@
 # Next.js + MDX + Velite
 
-A template with Next.js 13 app dir, [Velite](https://github.com/zce/velite), Tailwind CSS and dark mode.
+A template with Next.js 15 app dir, [Velite](https://github.com/zce/velite), Tailwind CSS and dark mode.
 
 [MDX Example](content/pages/contact/index.mdx)
 
@@ -23,120 +23,3 @@ A template with Next.js 13 app dir, [Velite](https://github.com/zce/velite), Tai
   }
 }
 ```
-
-#### start Velite with `next dev` and `next build` commands.
-
-**next.config.js**:
-
-```js
-/** @type {import('next').NextConfig} */
-module.exports = {
-  // othor next config here...
-  webpack: config => {
-    config.plugins.push(new VeliteWebpackPlugin())
-    return config
-  }
-}
-
-class VeliteWebpackPlugin {
-  static started = false
-  apply(/** @type {import('webpack').Compiler} */ compiler) {
-    // executed three times in nextjs
-    // twice for the server (nodejs / edge runtime) and once for the client
-    compiler.hooks.beforeCompile.tapPromise('VeliteWebpackPlugin', async () => {
-      if (VeliteWebpackPlugin.started) return
-      VeliteWebpackPlugin.started = true
-      const dev = compiler.options.mode === 'development'
-      const { build } = await import('velite')
-      await build({ watch: dev, clean: !dev })
-    })
-  }
-}
-```
-
-or ESM version (package.json with `"type": "module"`):
-
-```js
-import { build } from 'velite'
-
-/** @type {import('next').NextConfig} */
-export default {
-  // othor next config here...
-  webpack: config => {
-    config.plugins.push(new VeliteWebpackPlugin())
-    return config
-  }
-}
-
-class VeliteWebpackPlugin {
-  static started = false
-  apply(/** @type {import('webpack').Compiler} */ compiler) {
-    // executed three times in nextjs
-    // twice for the server (nodejs / edge runtime) and once for the client
-    compiler.hooks.beforeCompile.tapPromise('VeliteWebpackPlugin', async () => {
-      if (VeliteWebpackPlugin.started) return
-      VeliteWebpackPlugin.started = true
-      const dev = compiler.options.mode === 'development'
-      await build({ watch: dev, clean: !dev })
-    })
-  }
-}
-```
-
-#### MDX Bundle
-
-```typescript
-import { readFile, writeFile } from 'node:fs/promises'
-import { join, resolve } from 'node:path'
-import { globalExternals } from '@fal-works/esbuild-plugin-global-externals'
-import mdxPlugin from '@mdx-js/esbuild'
-import { build } from 'esbuild'
-
-import type { Plugin } from 'esbuild'
-
-const compileMdx = async (source: string): Promise<string> => {
-  const virtualSourse: Plugin = {
-    name: 'virtual-source',
-    setup: build => {
-      build.onResolve({ filter: /^__faker_entry/ }, args => {
-        return {
-          path: join(args.resolveDir, args.path),
-          pluginData: { contents: source } // for mdxPlugin
-        }
-      })
-    }
-  }
-
-  const bundled = await build({
-    entryPoints: [`__faker_entry.mdx`],
-    absWorkingDir: resolve('content'),
-    write: false,
-    bundle: true,
-    target: 'node18',
-    format: 'esm',
-    globalName: 'VELITE_MDX_COMPONENT',
-    treeShaking: true,
-    // minify: true,
-    plugins: [
-      virtualSourse,
-      mdxPlugin({}),
-      globalExternals({
-        react: {
-          varName: 'React',
-          type: 'cjs'
-        },
-        'react-dom': {
-          varName: 'ReactDOM',
-          type: 'cjs'
-        },
-        'react/jsx-runtime': {
-          varName: '_jsx_runtime',
-          type: 'cjs'
-        }
-      })
-    ]
-  })
-
-  return bundled.outputFiles[0].text.replace('var VELITE_MDX_COMPONENT=', 'return ')
-}
-```
diff --git a/examples/nextjs/tailwind.config.js b/examples/nextjs/tailwind.config.js
diff --git a/examples/nextjs/tsconfig.json b/examples/nextjs/tsconfig.json
@@ -1,23 +1,23 @@
 {
   "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
     "strict": true,
     "noEmit": true,
-    "target": "esnext",
+    "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "incremental": true,
-    "allowJs": true,
     "jsx": "preserve",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
     "paths": {
       "@/*": ["./*"],
-      "#site/content": ["./.velite"]
-    },
-    "plugins": [{ "name": "next" }]
+      "#velite": ["./.velite"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]

diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@mdx-js/mdx": "^3.1.0",
-    "esbuild": "^0.24.0",
+    "esbuild": "^0.24.2",
     "sharp": "^0.33.5",
     "terser": "^5.37.0"
   },
@@ -48,14 +48,14 @@
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.4",
-    "@types/node": "^22.10.2",
-    "@types/picomatch": "^3.0.1",
+    "@types/node": "^22.10.8",
+    "@types/picomatch": "^3.0.2",
     "@zce/prettier-config": "^0.4.0",
     "chokidar": "^4.0.3",
-    "fast-glob": "^3.3.2",
+    "fast-glob": "^3.3.3",
     "hast-util-raw": "^9.1.0",
     "hast-util-to-string": "^3.0.1",
-    "lint-staged": "^15.2.11",
+    "lint-staged": "^15.4.1",
     "mdast-util-from-markdown": "^2.0.2",
     "mdast-util-to-hast": "^13.2.0",
     "mdast-util-toc": "^7.1.0",
@@ -66,17 +66,17 @@
     "remark-gfm": "^4.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.1",
-    "rollup": "^4.28.1",
+    "rollup": "^4.31.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-esbuild": "^6.1.1",
     "simple-git-hooks": "^2.11.1",
     "tsx": "^4.19.2",
-    "typescript": "^5.7.2",
+    "typescript": "^5.7.3",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
     "vfile": "^6.0.3",
     "vfile-reporter": "^8.1.1",
-    "yaml": "^2.6.1"
+    "yaml": "^2.7.0"
   },
   "packageManager": "pnpm@9.15.0",
   "engines": {