Use different postcss.config.js file in vite.config.js then default postcss.config

[whitespacecode]

Describe the bug

Having multiple app builds i need multiple postcss config's,
I tried using inline postcss configuration and linking to a file. Non of that works.
Adding a postcss.config.js to the root does work, but i can't use that since i have other vite.config's that need different postcss config files and have different configurations

Reproduction

I'm using Vite + Vue2

//vite.config.js using postcss file
import { createVuePlugin } from 'vite-plugin-vue2';
export default ({ command }) => ({
    plugins: [ createVuePlugin() ],
    resolve: { alias: { vue: 'vue/dist/vue.js' } },
    sourcemap: true,
    css: { postcss: './postcssapp.config.js' },
});

//vite.config.js using postcss inline
import { createVuePlugin } from 'vite-plugin-vue2';
export default ({ command }) => ({
    plugins: [ createVuePlugin() ],
    resolve: { alias: { vue: 'vue/dist/vue.js' } },
    sourcemap: true,
    css: {
            postcss: {
                plugins: {
                    tailwindcss: {config: './tailwindapp-config.js'},
                    autoprefixer: {},
                  },
            },
    },
});

System Info

System:
OS: macOS 11.3
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 303.24 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
Browsers:
Brave Browser: 91.1.25.68
Firefox: 89.0
Safari: 14.1
npmPackages:
vite: ^2.3.4 => 2.3.4

[github-actions]

Hello @JoeriTheGreat. Please provide a online reproduction by codesandbox or a minimal GitHub repository. Issues labeled by need reproduction will be closed if no activities in 3 days.

[whitespacecode]

I forked an existing sandbox and edited the vite.config and postcss.config giving me the same results.
https://codesandbox.io/s/adoring-sun-52t4z?file=/vite.config.ts

[haoqunjiang]

https://vitejs.dev/config/#css-postcss

a custom path to search PostCSS config from (default is project root). The search is done using postcss-load-config.

So it is a directory path.

https://github.com/postcss/postcss-load-config#usage
The filename can only be one of the specified names.

---

So for your use case, please either use a canonical configuration file and put conditional loading logic in it, or pass an inline config.

[haoqunjiang]

The Vite documentation isn't very clear on this, so I marked this issue as a documentation one.

[whitespacecode]

I prefer using inline instead of another package. When using inline i get following error trying to load the app (so not when compiling and running the localhost server)

[vite] Internal server error: postcssConfig.plugins.slice is not a function
  Plugin: vite:css
  File: /Users/user/Code/project/resources/assets/css/app/app.css
      at compileCSS (/Users/joeri/Code/jobtoolz-app/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:19155:91)
      at async TransformContext.transform (/Users/joeri/Code/jobtoolz-app/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:18809:50)
      at async Object.transform (/Users/user/Code/project/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:44285:30)
      at async transformRequest (/Users/user/Code/project/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:58557:29)
      at async viteTransformMiddleware (/user/Code/project/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:58695:32)

My inline configuration (can't use required i think because i use esm build))

//vite.config.ts
css: {
        postcss: {
            plugins: {
                tailwindcss: { config: './tailwindapp-config.js' },
                autoprefixer: {},
            }
        },
    },

EDIT
Okay so i need my configuration to look like

 css: {
        postcss: {
            plugins: [
                require('tailwindcss')({
                    config: './tailwindapp-config.js'
                }),
             ],
        }
    },

Please update documentation with an example.