postcss config should not be searched outside of project root

[pqnet]

Describe the bug

The default behavior of postcss-load-config is to search configuration in the parent directory until it either find some matching file or reaches the home directory.

It will look for files named package.json or any of the postcss default configuration files.

This can result in unpredictable outcome of cloud builds and such. Moreover, if any of such files exists but is not readable/not a file, the error message does not narrow down the issue to the file causing the problem but reports a generic "failed to load PostCSS config" error.

The correct behavior should be to not search outside of the project.

To solve this issue it would be advisable to either

• lobby to change the default postcss-load-config behavior (although it may be by design in their case)
• workaround it at Vite level by passing the absolute path of the project dir as stopDir n the lilconfig options, (third parameter of postcssrc call at

  vite/packages/vite/src/node/plugins/css.ts

  Line 1574 in dad7f4f

  result = postcssrc({}, searchPath).catch((e) => {

  ):

    result = postcssrc({}, searchPath, { stopDir }).catch((e) => {

If neither is possible it would advisable to generate an empty .postcssrc.json during the initial scaffolding (npm create vite), although this should propagate to other generators using Vite as well such as npm create vue

Reproduction

n/a

Steps to reproduce

• mkdir -p parent/child
• mkdir parent/package.json
• cd parent/child
• npm init es6 -y
• npm i [email protected]
• touch index.html
• npx vite

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 12.84 GB / 15.60 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
  npmPackages:
    vite: ^5.2.2 => 5.2.2

Used Package Manager

npm

Logs

No response

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.

[pqnet]

related documentation:

https://github.com/postcss/postcss-load-config/blob/865523080f8f39559b3c6570fe1c70fc593eeb61/src/index.d.ts#L7
https://www.npmjs.com/package/lilconfig

[jacobbogers]

I encountered this issue while debugging through vite code, this is not good issue, because it is very hard to resolve if it occurs

if any of these files below are found in the os.user() dir (or parent dir thereof) it will use that if it is not defined in project root

[
  "package.json",
  ".postcssrc",
  ".postcssrc.json",
  ".postcssrc.yaml",
  ".postcssrc.yml",
  ".postcssrc.ts",
  ".postcssrc.cts",
  ".postcssrc.js",
  ".postcssrc.cjs",
  ".postcssrc.mjs",
  "postcss.config.ts",
  "postcss.config.cts",
  "postcss.config.js",
  "postcss.config.cjs",
  "postcss.config.mjs",
]

[codingwithchris]

+1 same problem for me using vitest for tests. To bypass this issue, you can change your postcss config to: postcss.config.json. It seems this file format is not loaded automatically by vitest.

BUT, unfortunately I am unable to do this in my cause because I have custom rules/imports in my postcss.config.cjs file and when I move to postcss.config.json I lose all of that functionality 😞 I suspect others will have this issue as well.

This has actually become a blocker for my team and we have continually failing tests in our pipelines because of this.