ESM and TypeScript version of PostCSS config, doesn't load.

[xeho91]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

> npx next info

    Operating System:
      Platform: linux
      Arch: x64
      Version: Ubuntu 20.04.0 LTS Sat Apr 01 2023 08:47:57 GMT+0800 (Taipei Standard Time)
    Binaries:
      Node: 16.14.2
      npm: 7.17.0
      Yarn: 1.22.19
      pnpm: 7.13.6
    Relevant packages:
      next: 13.2.5-canary.24
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

TypeScript

Link to the code that reproduces this issue

https://stackblitz.com/edit/vercel-next-js-p7yaj5?file=pages/index.tsx

To Reproduce

1. Initiate a sample next.js project
2. Install TailwindCSS by npm install -D tailwindcss
3. Generate Tailwind & PostCSS config with npx tailwindcss init --esm --postcss --ts

Describe the Bug

Since TailwindCSS as of version ^3.3.0 supports ESM and TypeScript config, the postcss.config.ts doesn't load at all - the content of the config file is not read up - I could confirm by adding a console.log() with a random message.

Expected Behavior

The PostCSS of config - ESM or TypeScript - should load. Hence the styles of the heading message should be applied.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[jeekdong]

I had the same problem

[xeho91]

It's an upstream issue related to postcss-loader.

Apparently, according to this code on the repository:
https://github.com/webpack-contrib/postcss-loader/blob/b5c55fb1c5365d8f84a24b246028569a6eb0003f/src/utils.js#L53

No pattern ends with a .ts extension.

[karlhorky]

@xeho91 thanks for the issue webpack-contrib/postcss-loader#631 and PR webpack-contrib/postcss-loader#632 !

I'm guessing this version of postcss-loader is vendored in Next.js and will be updated over the next weeks...

[xeho91]

@xeho91 thanks for the issue webpack-contrib/postcss-loader#631 and PR webpack-contrib/postcss-loader#632 !

I'm guessing this version of postcss-loader is vendored in Next.js and will be updated over the next weeks...

Wohoo, I contributed to the Next.js!

Well, not indirectly.
Anyway, I'm going to share it with my wife! 😁

[karlhorky]

Hmm... I may be wrong in my assumption above that it will be directly vendored in.

Looking a bit deeper into the Next.js codebase, it seems that the config file resolution for PostCSS is here in Next.js (only JSON + CommonJS supported):

next.js/packages/next/src/lib/find-config.ts

Lines 9 to 27 in da37c01

	export function findConfigPath(
	dir: string,
	key: string
	): Promise<string | undefined> {
	// If we didn't find the configuration in `package.json`, we should look for
	// known filenames.
	return findUp(
	[
	`.${key}rc.json`,
	`${key}.config.json`,
	`.${key}rc.js`,
	`${key}.config.js`,
	`${key}.config.cjs`,
	],
	{
	cwd: dir,
	}
	)
	}

[xeho91]

I am unsure, but from the snippet you provided, I think it's only about loading the Next.js config.

This is what I could find in relation to PostCSS loader, however I have no idea how the dependency is resolved.
https://github.com/vercel/next.js/tree/7556601c19e5ea1c49c4b68014473bee990e1771/packages/next/src/build/webpack/loaders/postcss-loader

I would be happy to provide a PR. However, I need a clue from the Next.js team. How is this postcss-loader dependency(?) resolved?

[karlhorky]

I am unsure, but from the snippet you provided, I think it's only about loading the Next.js config

It does look like it at first glance, but in my debugging, this is the function that was in the stack trace when it failed after I added an ESM postcss.config.js file.

[phuctm97]

Anyone works on this yet, would be a cool feature

[7iomka]

The same question.
I have need to import my theme ts files to add support for css variables values in postcss config,
But currently it is not possible(

[ventsislavnikolov]

Postcss and postcss/postcss-load-config added support for .ts and esm in postcss-load-cofing v5, but still doesnt work in NextJS. You can check more about Postcss here in this PR - postcss/postcss-load-config#249.

[benface]

Support for ESM (e.g. postcss.config.mjs, or postcss.config.js for "type": "module" projects) was added in #34448, but postcss.config.ts is still not supported. :/