-
Notifications
You must be signed in to change notification settings - Fork 26.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Switch to postcss.config.mjs, add type #63380
Conversation
Allow CI Workflow Run
Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer |
2 similar comments
Allow CI Workflow Run
Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer |
Allow CI Workflow Run
Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer |
Failing test suitesCommit: be9b2c6
Expand output● app dir client cache semantics › prefetch={true} › should prefetch again after 5 mins if the link is visible again
Read more about building and testing Next.js in contributing.md. |
Stats from current PRDefault Build (Increase detected
|
vercel/next.js canary | karlhorky/next.js switch-to-esm-postcss-config | Change | |
---|---|---|---|
buildDuration | 15s | 13.6s | N/A |
buildDurationCached | 7.4s | 6.2s | N/A |
nodeModulesSize | 198 MB | 198 MB | ✓ |
nextStartRea..uration (ms) | 454ms | 430ms | N/A |
Client Bundles (main, webpack)
vercel/next.js canary | karlhorky/next.js switch-to-esm-postcss-config | Change | |
---|---|---|---|
2453-HASH.js gzip | 30.5 kB | 30.5 kB | N/A |
3304.HASH.js gzip | 181 B | 181 B | ✓ |
3f784ff6-HASH.js gzip | 53.7 kB | 53.7 kB | N/A |
8299-HASH.js gzip | 5.04 kB | 5.04 kB | N/A |
framework-HASH.js gzip | 45.2 kB | 45.2 kB | ✓ |
main-app-HASH.js gzip | 242 B | 242 B | ✓ |
main-HASH.js gzip | 32.2 kB | 32.2 kB | N/A |
webpack-HASH.js gzip | 1.68 kB | 1.68 kB | N/A |
Overall change | 45.6 kB | 45.6 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | karlhorky/next.js switch-to-esm-postcss-config | Change | |
---|---|---|---|
polyfills-HASH.js gzip | 31 kB | 31 kB | ✓ |
Overall change | 31 kB | 31 kB | ✓ |
Client Pages
vercel/next.js canary | karlhorky/next.js switch-to-esm-postcss-config | Change | |
---|---|---|---|
_app-HASH.js gzip | 196 B | 197 B | N/A |
_error-HASH.js gzip | 184 B | 184 B | ✓ |
amp-HASH.js gzip | 505 B | 505 B | ✓ |
css-HASH.js gzip | 324 B | 325 B | N/A |
dynamic-HASH.js gzip | 2.5 kB | 2.5 kB | N/A |
edge-ssr-HASH.js gzip | 258 B | 258 B | ✓ |
head-HASH.js gzip | 352 B | 352 B | ✓ |
hooks-HASH.js gzip | 370 B | 371 B | N/A |
image-HASH.js gzip | 4.21 kB | 4.21 kB | ✓ |
index-HASH.js gzip | 259 B | 259 B | ✓ |
link-HASH.js gzip | 2.67 kB | 2.67 kB | N/A |
routerDirect..HASH.js gzip | 314 B | 312 B | N/A |
script-HASH.js gzip | 386 B | 386 B | ✓ |
withRouter-HASH.js gzip | 309 B | 309 B | ✓ |
1afbb74e6ecf..834.css gzip | 106 B | 106 B | ✓ |
Overall change | 6.57 kB | 6.57 kB | ✓ |
Client Build Manifests
vercel/next.js canary | karlhorky/next.js switch-to-esm-postcss-config | Change | |
---|---|---|---|
_buildManifest.js gzip | 481 B | 484 B | N/A |
Overall change | 0 B | 0 B | ✓ |
Rendered Page Sizes
vercel/next.js canary | karlhorky/next.js switch-to-esm-postcss-config | Change | |
---|---|---|---|
index.html gzip | 528 B | 527 B | N/A |
link.html gzip | 540 B | 540 B | ✓ |
withRouter.html gzip | 523 B | 523 B | ✓ |
Overall change | 1.06 kB | 1.06 kB | ✓ |
Edge SSR bundle Size
vercel/next.js canary | karlhorky/next.js switch-to-esm-postcss-config | Change | |
---|---|---|---|
edge-ssr.js gzip | 95.1 kB | 95.1 kB | N/A |
page.js gzip | 3.05 kB | 3.05 kB | N/A |
Overall change | 0 B | 0 B | ✓ |
Middleware size
vercel/next.js canary | karlhorky/next.js switch-to-esm-postcss-config | Change | |
---|---|---|---|
middleware-b..fest.js gzip | 626 B | 622 B | N/A |
middleware-r..fest.js gzip | 151 B | 151 B | ✓ |
middleware.js gzip | 25.5 kB | 25.5 kB | N/A |
edge-runtime..pack.js gzip | 839 B | 839 B | ✓ |
Overall change | 990 B | 990 B | ✓ |
Next Runtimes
vercel/next.js canary | karlhorky/next.js switch-to-esm-postcss-config | Change | |
---|---|---|---|
app-page-exp...dev.js gzip | 171 kB | 171 kB | ✓ |
app-page-exp..prod.js gzip | 96.6 kB | 96.6 kB | ✓ |
app-page-tur..prod.js gzip | 98.3 kB | 98.3 kB | ✓ |
app-page-tur..prod.js gzip | 92.8 kB | 92.8 kB | ✓ |
app-page.run...dev.js gzip | 149 kB | 149 kB | ✓ |
app-page.run..prod.js gzip | 91.3 kB | 91.3 kB | ✓ |
app-route-ex...dev.js gzip | 21.3 kB | 21.3 kB | ✓ |
app-route-ex..prod.js gzip | 15 kB | 15 kB | ✓ |
app-route-tu..prod.js gzip | 15 kB | 15 kB | ✓ |
app-route-tu..prod.js gzip | 14.8 kB | 14.8 kB | ✓ |
app-route.ru...dev.js gzip | 21 kB | 21 kB | ✓ |
app-route.ru..prod.js gzip | 14.8 kB | 14.8 kB | ✓ |
pages-api-tu..prod.js gzip | 9.52 kB | 9.52 kB | ✓ |
pages-api.ru...dev.js gzip | 9.8 kB | 9.8 kB | ✓ |
pages-api.ru..prod.js gzip | 9.52 kB | 9.52 kB | ✓ |
pages-turbo...prod.js gzip | 22.3 kB | 22.3 kB | ✓ |
pages.runtim...dev.js gzip | 22.9 kB | 22.9 kB | ✓ |
pages.runtim..prod.js gzip | 22.3 kB | 22.3 kB | ✓ |
server.runti..prod.js gzip | 50.6 kB | 50.6 kB | ✓ |
Overall change | 948 kB | 948 kB | ✓ |
build cache Overall increase ⚠️
vercel/next.js canary | karlhorky/next.js switch-to-esm-postcss-config | Change | |
---|---|---|---|
0.pack gzip | 1.56 MB | 1.55 MB | N/A |
index.pack gzip | 105 kB | 106 kB | |
Overall change | 105 kB | 106 kB |
Diff details
Diff for middleware.js
Diff too large to display
Thanks for the review and merge @huozhi ! 🙌 I saw that it was released in Confirmed the latest canary ( ➜ p mkdir a
➜ p cd a
➜ a pnpm create next-app@canary . --app --no-eslint --no-src-dir --import-alias @/\* --tailwind
.../Library/pnpm/store/v3/tmp/dlx-59703 | +1 +
.../Library/pnpm/store/v3/tmp/dlx-59703 | Progress: resolved 1, reused 0, downloaded 1, added 1, done
✔ Would you like to use TypeScript? … No / Yes
Creating a new Next.js app in /Users/k/p/a.
Using pnpm.
Initializing project with template: app-tw
Installing dependencies:
- react
- react-dom
- next
Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
Downloading registry.npmjs.org/next/14.2.0-canary.44: 20.54 MB/20.54 MB, done
Packages: +131
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Downloading registry.npmjs.org/@next/swc-darwin-arm64/14.2.0-canary.44: 36.81 MB/36.81 MB, done
Progress: resolved 139, reused 126, downloaded 5, added 131, done
dependencies:
+ next 14.2.0-canary.44
+ react 18.2.0
+ react-dom 18.2.0
devDependencies:
+ @types/node 20.11.30
+ @types/react 18.2.72
+ @types/react-dom 18.2.22
+ postcss 8.4.38
+ tailwindcss 3.4.1
+ typescript 5.4.3
Done in 4.5s
Initialized a git repository.
Success! Created a at /Users/k/p/a
➜ a git:(main) ls -al
total 136
drwxr-xr-x 15 k staff 480 Mar 27 12:48 .
drwxr-xr-x 64 k staff 2048 Mar 27 12:47 ..
drwxr-xr-x 12 k staff 384 Mar 27 12:48 .git
-rw-r--r-- 1 k staff 391 Mar 27 12:48 .gitignore
-rw-r--r-- 1 k staff 1383 Mar 27 12:48 README.md
drwxr-xr-x 6 k staff 192 Mar 27 12:48 app
-rw-r--r-- 1 k staff 201 Mar 27 12:48 next-env.d.ts
-rw-r--r-- 1 k staff 92 Mar 27 12:48 next.config.mjs
drwxr-xr-x 12 k staff 384 Mar 27 12:48 node_modules
-rw-r--r-- 1 k staff 465 Mar 27 12:48 package.json
-rw-r--r-- 1 k staff 34432 Mar 27 12:48 pnpm-lock.yaml
-rw-r--r-- 1 k staff 135 Mar 27 12:48 postcss.config.mjs
drwxr-xr-x 4 k staff 128 Mar 27 12:48 public
-rw-r--r-- 1 k staff 498 Mar 27 12:48 tailwind.config.ts
-rw-r--r-- 1 k staff 574 Mar 27 12:48 tsconfig.json
➜ a git:(main) cat postcss.config.mjs
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
},
};
export default config;
➜ a git:(main) pnpm dev
> a@0.1.0 dev /Users/k/p/a
> next dev
▲ Next.js 14.2.0-canary.44
- Local: http://localhost:3000
✓ Starting...
✓ Ready in 2.6s
○ Compiling / ...
✓ Compiled / in 1855ms (527 modules)
GET / 200 in 2044ms
✓ Compiled in 120ms (246 modules) |
As for a release in a stable version, I'll look forward to seeing it in one of the following next releases:
* next patch release will possibly not include this change, as other recent patch releases have not included all |
What?
Now that @phanect added support for ESM PostCSS config files in PR #63109 (original issue #34448), PostCSS can use ESM config by default.
It needs to use an
.mjs
extension by default becausecreate-next-app
scaffolds CommonJS apps by default.This will also work with ESM projects which have added
"type": "module"
in theirpackage.json
Why?
next.config.mjs
)How?
.cjs
to.mjs
(change similar to PR Switch to .cjs PostCSS config #58380)checkJs: true
intsconfig.json