Using .postcssrc.ts results into transpilation error

[ElPrudi]

Describe the bug

Using the typescript format for a postcss config, ts-node does not respect the tsconfig.json target and transpiles the import syntax to require() resulting into an error with "type": "module" in package.json.

Workaround: change it from .postcssrc.ts to .postcssrc.js

Reproduction

https://stackblitz.com/edit/vitejs-vite-l8rdtt

Steps to reproduce

Just use this config in a file called .postcssrc.ts:

import type { Config } from 'postcss-load-config'
import cssnano from 'cssnano'

export default ({ env }): Config => ({
    plugins: [
        cssnano({
            preset: 'default'
        })
    ]
})

System Info

vite version 4.5.0
node: 18.17.1

Used Package Manager

npm

Logs

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: ...\.postcssrc.ts
require() of ES modules is not supported.
require() of ...\.postcssrc.ts from ...\node_modules\vite\dist\node\chunks\dep-bb8a8339.js is an ES module file as it is a .ts file whose nearest parent package.json contains "type": "module" which defines all .ts files in that package scope as ES modules.
Instead change the requiring code to use import(), or remove "type": "module" from ...\package.json.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-l8rdtt (Open reproduction)

[bluwy]

It's a bug in postcss-load-config: postcss/postcss-load-config#239. In Vite 5, we have also provided a workaround to support .postcssrc.cts: https://main.vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated

Closing this for now. I'd suggest following the linked postcss-load-config PR.