Switch to postcss.config.mjs, add type #63380

karlhorky · 2024-03-17T16:13:58Z

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 because create-next-app scaffolds CommonJS apps by default.

This will also work with ESM projects which have added "type": "module" in their package.json

Why?

To convert one more file to ESM
To use the modern format
To follow other similar migrations that have taken place in the Next.js codebase (eg. next.config.mjs)

How?

Change file extensions from .cjs to .mjs (change similar to PR Switch to .cjs PostCSS config #58380)
Change module format from CommonJS to ESM
Add type for the config, for users who enable checkJs: true in tsconfig.json

ijjk · 2024-03-17T16:14:21Z

Allow CI Workflow Run

approve CI run for commit: 089b0a9

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

ijjk · 2024-03-17T16:14:21Z

Allow CI Workflow Run

approve CI run for commit: 089b0a9

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

ijjk · 2024-03-17T16:14:21Z

Allow CI Workflow Run

approve CI run for commit: 089b0a9

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

ijjk · 2024-03-17T19:41:43Z

Failing test suites

Commit: be9b2c6

pnpm test-start test/e2e/app-dir/app-client-cache/client-cache.test.ts

app dir client cache semantics > prefetch={true} > should prefetch again after 5 mins if the link is visible again

Expand output

● app dir client cache semantics › prefetch={true} › should prefetch again after 5 mins if the link is visible again

TIMED OUT: success

fail

undefined

  636 |
  637 |   if (hardError) {
> 638 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content + '\n\n' + lastErr)
      |           ^
  639 |   }
  640 |   return false
  641 | }

  at check (lib/next-test-utils.ts:638:11)
  at Object.<anonymous> (e2e/app-dir/app-client-cache/client-cache.test.ts:176:11)

Read more about building and testing Next.js in contributing.md.

ijjk · 2024-03-17T19:43:37Z

Stats from current PR

Default Build (Increase detected ⚠️)

General

	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	⚠️ +921 B
Overall change	105 kB	106 kB	⚠️ +921 B

Diff details

Diff for middleware.js

Diff too large to display

Commit: be9b2c6

karlhorky · 2024-03-27T11:51:05Z

Thanks for the review and merge @huozhi ! 🙌 I saw that it was released in [email protected]

Confirmed the latest canary ([email protected]) to be working:

➜  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

> [email protected] 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)

karlhorky · 2024-03-27T12:07:38Z

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 canary changes

Switch to postcss.config.mjs, add type

089b0a9

karlhorky requested review from a team, timneutkens, ijjk, shuding, huozhi, feedthejim, ztanner and wyattjoh as code owners March 17, 2024 16:13

ijjk added create-next-app Related to our CLI tool for quickly starting a new Next.js application. area: tests labels Mar 17, 2024

This was referenced Mar 17, 2024

Switch to .cjs PostCSS config #58380

Merged

next/lib/find-config does not support ESM config files #34448

Closed

Merge branch 'canary' into switch-to-esm-postcss-config

be9b2c6

huozhi approved these changes Mar 18, 2024

View reviewed changes

huozhi enabled auto-merge (squash) March 18, 2024 16:51

huozhi merged commit 51b878f into vercel:canary Mar 18, 2024
60 checks passed

karlhorky deleted the switch-to-esm-postcss-config branch March 27, 2024 11:51

github-actions bot added the locked label Apr 11, 2024

github-actions bot locked as resolved and limited conversation to collaborators Apr 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Switch to postcss.config.mjs, add type #63380

Switch to postcss.config.mjs, add type #63380

karlhorky commented Mar 17, 2024 •

edited

Loading

ijjk commented Mar 17, 2024 •

edited by samcx

Loading

ijjk commented Mar 17, 2024 •

edited by samcx

Loading

ijjk commented Mar 17, 2024 •

edited by samcx

Loading

ijjk commented Mar 17, 2024

ijjk commented Mar 17, 2024

karlhorky commented Mar 27, 2024 •

edited

Loading

karlhorky commented Mar 27, 2024 •

edited

Loading

Switch to postcss.config.mjs, add type #63380

Switch to postcss.config.mjs, add type #63380

Conversation

karlhorky commented Mar 17, 2024 • edited Loading

What?

Why?

How?

ijjk commented Mar 17, 2024 • edited by samcx Loading

ijjk commented Mar 17, 2024 • edited by samcx Loading

ijjk commented Mar 17, 2024 • edited by samcx Loading

ijjk commented Mar 17, 2024

Failing test suites

ijjk commented Mar 17, 2024

Stats from current PR

karlhorky commented Mar 27, 2024 • edited Loading

karlhorky commented Mar 27, 2024 • edited Loading

karlhorky commented Mar 17, 2024 •

edited

Loading

ijjk commented Mar 17, 2024 •

edited by samcx

Loading

ijjk commented Mar 17, 2024 •

edited by samcx

Loading

ijjk commented Mar 17, 2024 •

edited by samcx

Loading

karlhorky commented Mar 27, 2024 •

edited

Loading

karlhorky commented Mar 27, 2024 •

edited

Loading