[v4] process CSS by Tailwind CSS CLI / patch react-compiler (#3848)

* upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * lint * upd * upd * prettier
shuding · Dec 20, 2024 · 3fc12a0 · 3fc12a0
1 parent 25c33dd
commit 3fc12a0
Show file tree

Hide file tree

Showing 43 changed files with 897 additions and 1,087 deletions.
diff --git a/.changeset/eight-swans-own.md b/.changeset/eight-swans-own.md
@@ -0,0 +1,8 @@
+---
+"nextra-theme-blog": patch
+"nextra-theme-docs": patch
+"nextra": patch
+---
+
+- Use Tailwind CSS CLI because CSS processing by `tsup` produce different, weird and broken result
+- Patch react-compiler with some fixes which isn't fixed
diff --git a/docs/package.json b/docs/package.json
@@ -21,11 +21,11 @@
   },
   "devDependencies": {
     "@svgr/webpack": "^8.0.1",
-    "@tailwindcss/postcss": "^4.0.0-beta.2",
+    "@tailwindcss/postcss": "^4.0.0-beta.8",
     "@types/node": "^22.0.0",
     "@types/react": "^18.2.23",
     "pagefind": "^1.1.1",
-    "tailwindcss": "^4.0.0-beta.2"
+    "tailwindcss": "^4.0.0-beta.8"
   },
   "browserslist": [
     ">= .25%",

diff --git a/examples/swr-site/next-env.d.ts b/examples/swr-site/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/examples/swr-site/package.json b/examples/swr-site/package.json
@@ -26,9 +26,9 @@
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^14.2.13",
-    "@tailwindcss/postcss": "^4.0.0-beta.2",
+    "@tailwindcss/postcss": "^4.0.0-beta.8",
     "pagefind": "^1.1.1",
-    "tailwindcss": "^4.0.0-beta.2"
+    "tailwindcss": "^4.0.0-beta.8"
   },
   "browserslist": [
     ">= .25%",

diff --git a/package.json b/package.json
@@ -33,10 +33,13 @@
   },
   "pnpm": {
     "overrides": {
-      "esbuild": "^0.24.0",
+      "postcss": "8.4.49",
+      "lightningcss": "1.28.2",
+      "esbuild": "0.24.0",
       "next": "15.1.2"
     },
     "patchedDependencies": {
+      "babel-plugin-react-compiler@0.0.0-experimental-22c6e49-20241219": "patches/babel-plugin-react-compiler@0.0.0-experimental-22c6e49-20241219.patch",
       "esbuild-plugin-svgr@3.0.0": "patches/esbuild-plugin-svgr.patch",
       "@changesets/assemble-release-plan@6.0.5": "patches/@changesets__assemble-release-plan.patch",
       "tsup@8.3.5": "patches/tsup@8.3.5.patch",

diff --git a/packages/esbuild-react-compiler-plugin/package.json b/packages/esbuild-react-compiler-plugin/package.json
@@ -20,9 +20,10 @@
     "types:check": "tsc --noEmit"
   },
   "dependencies": {
+    "babel-plugin-react-compiler": "0.0.0-experimental-22c6e49-20241219",
     "react-compiler-webpack": "0.1.2"
   },
   "devDependencies": {
-    "@types/node": "^22.0.0"
+    "@types/node": "^22.10.2"
   }
 }
diff --git a/packages/esbuild-react-compiler-plugin/src/index.ts b/packages/esbuild-react-compiler-plugin/src/index.ts
@@ -3,20 +3,49 @@ import path from 'node:path'
 import reactCompilerLoader from 'react-compiler-webpack/dist/react-compiler-loader.js'
 import type { Options } from 'tsup'
 
-const reactCompilerConfig = {
-  sources(_filename: string) {
-    return true
+const DEFAULT_REACT_COMPILER_CONFIG = {
+  sources(filename: string) {
+    return !filename.includes('node_modules')
   },
-  target: '18'
+  // panicThreshold: 'all_errors',
+  target: '18',
+  logger: {
+    logEvent(
+      filename: string,
+      result: { kind: 'CompileError' | 'CompileSuccess' }
+    ) {
+      if (result.kind === 'CompileSuccess') {
+        console.info('🚀 File', filename, 'was optimized with react-compiler')
+        return
+      }
+      console.error(
+        '❌ File',
+        filename,
+        'was not optimized with react-compiler'
+      )
+      console.error(result)
+      if (process.env.NODE_ENV === 'production') {
+        // eslint-disable-next-line unicorn/no-process-exit
+        process.exit(1)
+      }
+    }
+  }
 }
 
 export const reactCompilerPlugin = ({
-  filter
+  filter,
+  config
 }: {
   filter: RegExp
+  config?: object
 }): NonNullable<Options['esbuildPlugins']>[number] => ({
   name: 'react-compiler',
   setup(build) {
+    config = {
+      ...DEFAULT_REACT_COMPILER_CONFIG,
+      ...config
+    }
+
     build.onLoad({ filter }, async args => {
       const {
         contents = await fs.readFile(args.path),
@@ -31,32 +60,13 @@ export const reactCompilerPlugin = ({
             reject(error)
             return
           }
-          const relativePath = path.relative(process.cwd(), args.path)
-
-          if (
-            /^import \{ c as _c } from "react-compiler-runtime";/m.test(result)
-          ) {
-            console.info(
-              '🚀 File',
-              relativePath,
-              'was optimized with react-compiler'
-            )
-          } else if (!/^'use no memo'/m.test(result)) {
-            console.error(
-              '❌ File',
-              relativePath,
-              'was not optimized with react-compiler'
-            )
-            console.log(result)
-          }
-
           resolve({ contents: result, loader })
         }
 
         reactCompilerLoader.call(
           {
             async: () => callback,
-            getOptions: () => reactCompilerConfig,
+            getOptions: () => config,
             resourcePath: args.path
           },
           contents

diff --git a/packages/nextra-theme-blog/package.json b/packages/nextra-theme-blog/package.json
@@ -17,7 +17,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "NODE_ENV=production tsup",
     "dev": "tsup --watch . --watch ../nextra/src --watch ../nextra/styles",
     "prepublishOnly": "pnpm build",
     "test": "vitest run",
@@ -32,19 +32,21 @@
   "dependencies": {
     "next-themes": "^0.4.0",
     "next-view-transitions": "^0.3.0",
-    "react-compiler-runtime": "19.0.0-beta-df7b47d-20241124"
+    "react-compiler-runtime": "0.0.0-experimental-22c6e49-20241219"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.0.0-beta.2",
+    "@tailwindcss/cli": "^4.0.0-beta.8",
+    "@tailwindcss/postcss": "^4.0.0-beta.8",
     "@tailwindcss/typography": "^0.5.15",
     "@types/react": "^18.2.23",
     "esbuild-react-compiler-plugin": "workspace:*",
     "next": "^15.0.2",
     "nextra": "workspace:*",
     "postcss": "^8.4.33",
     "react": "18.3.1",
-    "tailwindcss": "^4.0.0-beta.2",
-    "vitest": "^2.0.3"
+    "tailwindcss": "^4.0.0-beta.8",
+    "vitest": "^2.0.3",
+    "zx": "^8.2.4"
   },
   "sideEffects": false
 }
diff --git a/packages/nextra-theme-blog/src/components/index.ts b/packages/nextra-theme-blog/src/components/index.ts
@@ -1,5 +1,3 @@
-'use no memo'
-
 export { Comments } from './cusdis'
 export { Layout, Footer } from './layout'
 export { Navbar } from './navbar'

diff --git a/packages/nextra-theme-blog/src/components/layout.tsx b/packages/nextra-theme-blog/src/components/layout.tsx
@@ -4,12 +4,10 @@ import type { ComponentProps, FC, ReactElement, ReactNode } from 'react'
 
 export const Footer: FC<{
   children?: ReactNode
-}> = ({
-  children = `CC BY-NC 4.0 ${new Date().getFullYear()} © Shu Ding.`
-}) => {
+}> = ({ children }) => {
   return (
     <small className="x:mt-32 x:block" data-pagefind-ignore="all">
-      {children}
+      {children || `CC BY-NC 4.0 ${new Date().getFullYear()} © Shu Ding.`}
     </small>
   )
 }

diff --git a/packages/nextra-theme-blog/src/index.ts b/packages/nextra-theme-blog/src/index.ts
@@ -1,5 +1,3 @@
-'use no memo'
-
 export { useMDXComponents } from './mdx-components'
 export {
   Comments,

diff --git a/packages/nextra-theme-blog/src/mdx-components.tsx b/packages/nextra-theme-blog/src/mdx-components.tsx
@@ -1,4 +1,4 @@
-// should be used on server
+// throws TypeError: Cannot read properties of null (reading 'useMemo')
 'use no memo'
 
 /* eslint sort-keys: error */

diff --git a/packages/nextra-theme-blog/src/types.ts b/packages/nextra-theme-blog/src/types.ts
@@ -1,5 +1,3 @@
-'use no memo'
-
 /* eslint typescript-sort-keys/interface: error */
 import type { ReadingTime } from 'nextra'
 

diff --git a/packages/nextra-theme-blog/tsup.config.ts b/packages/nextra-theme-blog/tsup.config.ts
@@ -1,20 +1,19 @@
 import { reactCompilerPlugin } from 'esbuild-react-compiler-plugin'
 import { defineConfig } from 'tsup'
-import { defaultEntry } from '../nextra-theme-docs/tsup.config'
+import { $ } from 'zx'
+import { defaultEntry } from '../nextra/default-entry.js'
 import packageJson from './package.json'
 
-export default defineConfig([
-  {
-    name: packageJson.name,
-    entry: defaultEntry,
-    format: 'esm',
-    dts: true,
-    outExtension: () => ({ js: '.js' }),
-    bundle: false,
-    esbuildPlugins: [reactCompilerPlugin({ filter: /\.tsx?$/ })]
-  },
-  {
-    name: `${packageJson.name}/css`,
-    entry: ['src/style.css']
+export default defineConfig({
+  name: packageJson.name,
+  entry: defaultEntry,
+  format: 'esm',
+  dts: true,
+  outExtension: () => ({ js: '.js' }),
+  bundle: false,
+  esbuildPlugins: [reactCompilerPlugin({ filter: /\.tsx?$/ })],
+  async onSuccess() {
+    // Use Tailwind CSS CLI because CSS processing by tsup produce different result
+    await $`npx @tailwindcss/cli -i src/style.css -o dist/style.css`
   }
-])
+})
diff --git a/packages/nextra-theme-docs/package.json b/packages/nextra-theme-docs/package.json
@@ -18,7 +18,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "NODE_ENV=production tsup",
     "dev": "tsup --watch . --watch ../nextra/src --watch ../nextra/styles",
     "prepublishOnly": "pnpm build",
     "test": "vitest run",
@@ -34,14 +34,15 @@
     "@headlessui/react": "^2.1.2",
     "clsx": "^2.1.0",
     "next-themes": "^0.4.0",
-    "react-compiler-runtime": "19.0.0-beta-df7b47d-20241124",
+    "react-compiler-runtime": "0.0.0-experimental-22c6e49-20241219",
     "scroll-into-view-if-needed": "^3.1.0",
     "zod": "^3.22.3",
     "zod-validation-error": "^3.0.0",
     "zustand": "^5.0.1"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.0.0-beta.2",
+    "@tailwindcss/cli": "^4.0.0-beta.8",
+    "@tailwindcss/postcss": "^4.0.0-beta.8",
     "@testing-library/react": "^16.0.0",
     "@types/react": "^18.2.23",
     "@vitejs/plugin-react": "^4.1.0",
@@ -51,8 +52,9 @@
     "nextra": "workspace:*",
     "postcss": "^8.4.49",
     "react": "18.3.1",
-    "tailwindcss": "^4.0.0-beta.2",
-    "vitest": "^2.0.3"
+    "tailwindcss": "^4.0.0-beta.8",
+    "vitest": "^2.0.3",
+    "zx": "^8.2.4"
   },
   "sideEffects": false
 }
diff --git a/packages/nextra-theme-docs/src/components/index.ts b/packages/nextra-theme-docs/src/components/index.ts
@@ -1,5 +1,3 @@
-'use no memo'
-
 export { Breadcrumb } from './breadcrumb'
 export { Footer } from './footer'
 export { LastUpdated } from './last-updated'

diff --git a/packages/nextra-theme-docs/src/components/toc.tsx b/packages/nextra-theme-docs/src/components/toc.tsx
@@ -75,11 +75,11 @@ export const TOC: FC<TOCProps> = ({ toc, filePath, pageTitle }) => {
               className={cn(
                 'x:focus-visible:nextra-focus',
                 {
-                  '2': 'x:font-semibold',
-                  '3': 'x:ms-3',
-                  '4': 'x:ms-6',
-                  '5': 'x:ms-9',
-                  '6': 'x:ms-12'
+                  2: 'x:font-semibold',
+                  3: 'x:ms-3',
+                  4: 'x:ms-6',
+                  5: 'x:ms-9',
+                  6: 'x:ms-12'
                 }[depth],
                 'x:block x:transition-colors x:subpixel-antialiased',
                 id === activeSlug

diff --git a/packages/nextra-theme-docs/src/index.ts b/packages/nextra-theme-docs/src/index.ts
@@ -1,5 +1,3 @@
-'use no memo'
-
 export { useTheme } from 'next-themes'
 export { useThemeConfig, useConfig, useMenu, setMenu } from './stores'
 export { useMDXComponents } from './mdx-components'

diff --git a/packages/nextra-theme-docs/src/mdx-components/heading.tsx b/packages/nextra-theme-docs/src/mdx-components/heading.tsx
@@ -1,4 +1,4 @@
-// TODO: Isn't optimized, due HOC?
+// TODO: check why isn't optimized
 'use no memo'
 
 import cn from 'clsx'

diff --git a/packages/nextra-theme-docs/src/mdx-components/index.tsx b/packages/nextra-theme-docs/src/mdx-components/index.tsx
@@ -1,4 +1,4 @@
-// should be used on server
+// TODO: check why components in object aren't optimized
 'use no memo'
 
 /* eslint sort-keys: error */

diff --git a/packages/nextra-theme-docs/src/stores/index.ts b/packages/nextra-theme-docs/src/stores/index.ts
@@ -1,5 +1,3 @@
-'use no memo'
-
 export { useActiveAnchor, setActiveSlug } from './active-anchor'
 export { useConfig, ConfigProvider } from './config'
 export { useFocusedRoute, setFocusedRoute } from './focused-route'

diff --git a/packages/nextra-theme-docs/src/stores/theme-config.ts b/packages/nextra-theme-docs/src/stores/theme-config.ts
@@ -1,5 +1,4 @@
 'use client'
-'use no memo'
 
 import type { ComponentProps } from 'react'
 import { createContext, createElement, useContext } from 'react'

diff --git a/packages/nextra-theme-docs/src/stores/toc.ts b/packages/nextra-theme-docs/src/stores/toc.ts
@@ -1,3 +1,5 @@
+'use no memo'
+
 import type { Heading } from 'nextra'
 import type { Dispatch } from 'react'
 import { create } from 'zustand'

diff --git a/packages/nextra-theme-docs/src/utils/index.ts b/packages/nextra-theme-docs/src/utils/index.ts
@@ -1,4 +1,2 @@
-'use no memo'
-
 export { getGitIssueUrl } from './get-git-issue-url'
 export { gitUrlParse } from './git-url-parse'