Vite: PostCSS modules that rely on fs don't work

[sampullman]

Describe the bug

When a PostCSS module that imports fs is added to .postcss.config.js, the Vite dev server fails to start. In the below error log, postcss-functions was added to a functioning app via:

npm i -S [email protected]

It is reproducible with postcss-import as well. It seems obvious that code run in a browser environment can't use fs, but I figured I'd add this issue to see if there's any possible workaround.

Reproduction

I can set up a minimal reproduction if the issue isn't clear enough. I have solved the problem by maintaining local versions of PostCSS modules, and disabling features that use fs.

System Info

• vite version: 1.0.0-rc.13
• Operating System: MacOS Catalina 10.15.7
• Node version: 12.20.0

Logs (Optional if provided reproduction)

[test-app]$ npm run dev

> [email protected] dev /Users/sampullman/git/test/test-app
> vite

[vite] Optimizable dependencies detected:
autoprefixer, postcss-functions, postcss-nested, vue, vue-i18n

[vite] Dep optimization failed with error:
Could not load fs (imported by node_modules/glob/glob.js): ENOENT: no such file or directory, open 'fs'
[Error: Could not load fs (imported by node_modules/glob/glob.js): ENOENT: no such file or directory, open 'fs'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: 'fs',
  watchFiles: [
    '/Users/sampullman/git/test/test-app/node_modules/postcss-nested/index.js',
    '/Users/sampullman/git/test/test-app/node_modules/vue-i18n/dist/vue-i18n.esm-bundler.js',
    ... 319 more items
  ]
}

glob is a dependency of postcss-functions. This specific problem will be solved with the PostCSS 8 version bump since the latest postcss-functions removed glob.

[underfin]

Put autoprefixer, postcss-functions, postcss-nested into devDependencies. The module inside dependencies filed will be auto pre-optimizer.