vite icon indicating copy to clipboard operation
vite copied to clipboard

feat(css): allow specifying `stopDir` for postcss config resolution

Open rexxars opened this issue 1 year ago • 2 comments

Description

postcss-load-config has a behavior where it will find any postcss.config.js (or other supported postcss configuration formats) recursively from the current directory to the home directory of the user.

As of Sanity Studio v3, we're using Vite to power the development experience, and we are seeing quite a large number of reports from people who get an error such as this one upon starting the studio:

[plugin:vite:css] [postcss] Cannot read properties of undefined (reading 'config')
    at getTailwindConfig (/Users/adamsmith/Desktop/codingprojects/portfolio/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:84:63)
    at /Users/adamsmith/Desktop/codingprojects/portfolio/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:96:92
    at /Users/adamsmith/Desktop/codingprojects/portfolio/node_modules/tailwindcss/lib/processTailwindFeatures.js:46:11
    at plugins (/Users/adamsmith/Desktop/codingprojects/portfolio/node_modules/tailwindcss/lib/index.js:38:63)
    ...

This is caused by the user having a postcss configuration file in a parent folder, which while technically speaking is a documented behavior, is not easy to understand or discover for the user.

We are wanting to disable this behavior for our users, instead requiring a postcss configuration to reside inside of the project folder. This can be done by passing a stopDir option to cosmicconfig (technically speaking, lilconfig), which is used by postcss-load-config in order to find the configuration file in vite.

This PR introduces a new option to the CSS options of vite, resolveOptions, which currently only accepts the stopDir option (the other options did not quite make sense to me in the context of vite on first look, so I decided to limit it for now).

Open to other suggestions for how to solve this.


What is the purpose of this pull request?

  • [ ] Bug fix
  • [x] New Feature
  • [ ] Documentation update
  • [ ] Other

Before submitting the PR, please make sure you do the following

  • [x] Read the Contributing Guidelines.
  • [x] Read the Pull Request Guidelines and follow the PR Title Convention.
  • [x] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • [x] Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • [ ] Ideally, include relevant tests that fail without this PR but pass with it.

rexxars avatar Dec 15 '22 23:12 rexxars

I've just stumbled upon this issue and it's annoying. Why an postcss config file that is in the home directory can affect the build process of projects that don't have one? I don't think that anybody would want for anything outside the project root to be able to influence the build process. This just produces wired issues like this one. I think this newly proposed stopDir should actually stop on the project root by default.

There is a quick workaround in the vite config file to disable this behaviour, if anyone stumbles on this issue:

export default defineConfig({
  css: {
    postcss: {} // Disable Post CSS
  }
})

MrBartusek avatar Jul 29 '23 12:07 MrBartusek

I've just come across this and it was very confusing to figure out. On my local I use Docker and only mount the subdirectory so the issue didn't appear there. However, the entire repo is pushed to Vercel, which would cause the error:

Error: Cannot find module 'postcss-import'

This was for a brand new Sanity.io Studio project, which made it even more strange.

erfanimani avatar Jan 10 '24 02:01 erfanimani