[turbopack] Unable to resolve path to CSS file within postcss.config.js

[dstaley]

What version of Next.js are you using Turbopack in?

13.4.1

What package manager are you using / does the bug impact?

npm

What operating system are you using?

Linux

Describe the Bug

In our project we use postcss-global-data to load a CSS file containing custom media queries to then pass to postcss-preset-env. Since we load this CSS file from an npm package within our monorepo, we use require.resolve to get the path to the CSS file. It appears that attempting to call require.resolve on a CSS file path from within postcss.config.js results in a Cannot find module error, despite calls to require.resolve working when the path provided is a file of another type (such as require.resolve('p/package.json').

When attempting to use require.resolve inside postcss.config.js to get the path to a CSS file (either in the app's src directory or in a package inside node_modules) I receive these Turbopack errors:

bug - [code generation] [project]/postcss.config.js  non-ecmascript placeable asset
  asset [project]/src/styles/globals.css (css) is not placeable in ESM chunks, so it doesn't have a module id

error - [build] [project]/src/styles/Home.module.css  Error evaluating Node.js code
  Error: Cannot find module 'relative "./src/styles/globals.css"'
      [at /home/dstaley/git/dstaley/turbopack-postcss-issue/.next/build/chunks/postcss/postcss.config_48758f.js:12:35]
      [at Object.<anonymous> (/home/dstaley/git/dstaley/turbopack-postcss-issue/.next/build/chunks/postcss/postcss.config_48758f.js:15:23)]
      [at Object.[project]/postcss.config.js (ecmascript, postcss) (/home/dstaley/git/dstaley/turbopack-postcss-issue/.next/build/chunks/postcss/postcss.config_48758f.js:22:3)]
      [at /home/dstaley/git/dstaley/turbopack-postcss-issue/.next/build/chunks/postcss/[turbopack-node]_ipc_evaluate.ts_evaluate_47f482.js:496:21]
      [at runModuleExecutionHooks (/home/dstaley/git/dstaley/turbopack-postcss-issue/.next/build/chunks/postcss/[turbopack-node]_ipc_evaluate.ts_evaluate_47f482.js:542:3)]
      [at instantiateModule (/home/dstaley/git/dstaley/turbopack-postcss-issue/.next/build/chunks/postcss/[turbopack-node]_ipc_evaluate.ts_evaluate_47f482.js:494:3)]
      [at getOrInstantiateModuleFromParent (/home/dstaley/git/dstaley/turbopack-postcss-issue/.next/build/chunks/postcss/[turbopack-node]_ipc_evaluate.ts_evaluate_47f482.js:587:10)]
      [at esmImport (/home/dstaley/git/dstaley/turbopack-postcss-issue/.next/build/chunks/postcss/[turbopack-node]_ipc_evaluate.ts_evaluate_47f482.js:217:18)]
      [at /home/dstaley/git/dstaley/turbopack-postcss-issue/.next/build/chunks/postcss/postcss.config.js_transform_de6bd5.js:9:101]
      [at Module.[project]/postcss.config.js/transform.js/(CONFIG)/[project]/postcss.config.js (ecmascript) (ecmascript, postcss) (/home/dstaley/git/dstaley/turbopack-postcss-issue/.next/build/chunks/postcss/postcss.config.js_transform_de6bd5.js:118:3)]
      [at /home/dstaley/git/dstaley/turbopack-postcss-issue/.next/build/chunks/postcss/[turbopack-node]_ipc_evaluate.ts_evaluate_47f482.js:496:21]
      [at runModuleExecutionHooks (/home/dstaley/git/dstaley/turbopack-postcss-issue/.next/build/chunks/postcss/[turbopack-node]_ipc_evaluate.ts_evaluate_47f482.js:542:3)]
      [at instantiateModule (/home/dstaley/git/dstaley/turbopack-postcss-issue/.next/build/chunks/postcss/[turbopack-node]_ipc_evaluate.ts_evaluate_47f482.js:494:3)]
      [at getOrInstantiateModuleFromParent (/home/dstaley/git/dstaley/turbopack-postcss-issue/.next/build/chunks/postcss/[turbopack-node]_ipc_evaluate.ts_evaluate_47f482.js:587:10)]
      [at commonJsRequire (/home/dstaley/git/dstaley/turbopack-postcss-issue/.next/build/chunks/postcss/[turbopack-node]_ipc_evaluate.ts_evaluate_47f482.js:232:18)]
      at /turbopack/[turbopack-node]/ipc/evaluate.ts/evaluate.js:1:50 [/home/dstaley/git/dstaley/turbopack-postcss-issue/.next/build/chunks/postcss/[turbopack-node]_ipc_evaluate.ts_evaluate_11e7f7.js:8:121]
      at Module.run (/turbopack/[turbopack-node]/ipc/evaluate.ts:49:31) [/home/dstaley/git/dstaley/turbopack-postcss-issue/.next/build/chunks/postcss/[turbopack-node]_ipc_evaluate.ts_e88791._.js:179:45]
      [at processTicksAndRejections (node:internal/process/task_queues:96:5)]

postcss.config.js

module.exports = {
  plugins: [
    [
      "@csstools/postcss-global-data",
      {
        files: [require.resolve("./src/styles/globals.css")],
      },
    ],
  ],
};

Expected Behavior

Calling require.resolve('<path to css file>') correctly resolves to the path of the CSS file, and the postcss-global-data plugin is able to provide the file's contents to subsequent plugins.

To Reproduce

1. Clone https://github.com/dstaley/turbopack-postcss-issue
2. npm i
3. npx next dev --turbo

Reproduction Repo

https://github.com/dstaley/turbopack-postcss-issue

_PACK-2452

[cool-little-fish]

Hi @dstaley , the reproduction link seems invalid, could you update the reproduction repo link?

[dstaley]

@cool-little-fish sorry about that! I've made the repo public, so the links should now work.

[ForsakenHarmony]

fixed with https://github.com/vercel/turbo/pull/7503