feat(bundler-vite): auto load postcss plugins from postcss config files (#1088)

Author: azat-io

packages/bundler-vite/package.json

@@ -41,6 +41,7 @@
     "autoprefixer": "^10.4.11",
     "connect-history-api-fallback": "^2.0.0",
     "postcss": "^8.4.16",
+    "postcss-load-config": "^4.0.1",
     "rollup": "^2.79.0",
     "vite": "~3.1.1",
     "vue": "^3.2.39",

packages/bundler-vite/src/plugins/mainPlugin.ts

@@ -2,6 +2,8 @@ import type { App } from '@vuepress/core'
 import { fs } from '@vuepress/utils'
 import autoprefixer from 'autoprefixer'
 import history from 'connect-history-api-fallback'
+import type { AcceptedPlugin } from 'postcss'
+import postcssrc from 'postcss-load-config'
 import type { AliasOptions, Connect, Plugin, UserConfig } from 'vite'
 
 /**
@@ -48,6 +50,14 @@ import '@vuepress/client/app'
         .map(({ name }) => name),
     ]
 
+    let postcssPlugins: AcceptedPlugin[]
+    try {
+      const postcssConfigResult = await postcssrc()
+      postcssPlugins = postcssConfigResult.plugins
+    } catch (error) {
+      postcssPlugins = [autoprefixer]
+    }
+
     return {
       root: app.dir.temp('vite-root'),
       base: app.options.base,
@@ -60,7 +70,7 @@ import '@vuepress/client/app'
       },
       css: {
         postcss: {
-          plugins: isServer ? [] : [autoprefixer],
+          plugins: isServer ? [] : postcssPlugins,
         },
         preprocessorOptions: {
           scss: { charset: false },