chore(cli): upgrade postcss version to 8.x

affects: @varlet/cli

packages/varlet-cli/package.json

@@ -48,7 +48,6 @@
     "@vue/babel-plugin-jsx": "^1.0.6",
     "@vue/compiler-sfc": "3.1.4",
     "@vue/test-utils": "^2.0.0-rc.6",
-    "autoprefixer": "9",
     "babel-jest": "26.6.3",
     "babel-loader": "^8.2.2",
     "babel-plugin-import": "^1.13.3",
@@ -60,7 +59,7 @@
     "commitizen": "^4.2.2",
     "conventional-changelog-cli": "^2.1.1",
     "copy-webpack-plugin": "^9.0.1",
-    "css-loader": "^5.0.0",
+    "css-loader": "^5.2.7",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^7.30.0",
     "execa": "^5.0.0",
@@ -77,8 +76,9 @@
     "lodash": "^4.17.21",
     "ora": "^5.4.0",
     "portfinder": "^1.0.28",
-    "postcss": "7",
+    "postcss": "^8.3.7",
     "postcss-loader": "^4.0.4",
+    "postcss-preset-env": "^6.7.0",
     "prettier": "^2.3.2",
     "release-it": "^14.11.5",
     "slash": "^3.0.0",

packages/varlet-cli/src/config/postcss.config.ts

@@ -1,12 +1,18 @@
+import { merge } from 'lodash'
 import { pathExistsSync } from 'fs-extra'
+import { POSTCSS_CONFIG } from '../shared/constant'
 
-export function createPostcssOptions(path: string) {
-  const rawOptions = (pathExistsSync(path) && require(path)) || {}
+export const defaultConfig = {
+  plugins: [require.resolve('postcss-preset-env')],
+}
 
-  const rawPlugins = Array.isArray(rawOptions.plugins) ? rawOptions.plugins : []
+export function getPostcssOptions() {
+  let config: any = {}
 
-  return {
-    ...rawOptions,
-    plugins: [require.resolve('autoprefixer'), ...rawPlugins],
+  if (pathExistsSync(POSTCSS_CONFIG)) {
+    delete require.cache[require.resolve(POSTCSS_CONFIG)]
+    config = require(POSTCSS_CONFIG)
   }
+
+  return merge(defaultConfig, config)
 }

packages/varlet-cli/src/config/webpack.base.config.ts

@@ -1,5 +1,4 @@
 import {
-  POSTCSS_CONFIG,
   SITE_CONFIG,
   SITE_MOBILE_MAIN,
   SITE_MOBILE_ROUTES,
@@ -12,7 +11,7 @@ import { ForkTsCheckerWebpackPlugin } from 'fork-ts-checker-webpack-plugin/lib/F
 import { VueLoaderPlugin } from 'vue-loader'
 import { pathExistsSync } from 'fs-extra'
 import { WebpackPluginInstance } from 'webpack'
-import { createPostcssOptions } from './postcss.config'
+import { getPostcssOptions } from './postcss.config'
 import { getVarletConfig } from './varlet.config'
 import { get } from 'lodash'
 
@@ -21,7 +20,7 @@ export const CSS_LOADERS = [
   require.resolve('css-loader'),
   {
     loader: require.resolve('postcss-loader'),
-    options: { postcssOptions: createPostcssOptions(POSTCSS_CONFIG) },
+    options: { postcssOptions: getPostcssOptions() },
   },
 ]