refactor: 🔥 migrate the postcss configuration

Author: cwandev

.vscode/settings.json

@@ -4,4 +4,4 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   }
-}
+}

package.json

@@ -15,7 +15,6 @@
     "plop": "plop"
   },
   "dependencies": {
-    "@types/lodash-es": "^4.17.6",
     "@vant/touch-emulator": "^1.4.0",
     "@vant/use": "^1.4.3",
     "axios": "^1.2.0",
@@ -37,12 +36,14 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
     "@babel/register": "^7.18.9",
+    "@types/lodash-es": "^4.17.6",
     "@types/node": "^18.11.9",
     "@types/nprogress": "^0.2.0",
     "@types/store": "^2.0.2",
     "@vitejs/plugin-legacy": "^2.3.1",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitejs/plugin-vue-jsx": "^2.1.1",
+    "@yuo/postcss-px2vw": "^1.0.5",
     "autoprefixer": "^10.4.13",
     "babel-plugin-module-resolver": "^4.1.0",
     "commitizen": "^4.2.5",
@@ -55,8 +56,6 @@
     "mockjs": "^1.1.0",
     "path-to-regexp": "^6.2.1",
     "plop": "^3.1.1",
-    "postcss": "^8.4.19",
-    "postcss-px-to-viewport-8-plugin": "^1.1.5",
     "rollup": "^3.5.0",
     "rollup-plugin-visualizer": "^5.8.3",
     "signale": "^1.4.0",
@@ -70,6 +69,13 @@
     "vitest": "^0.25.3",
     "vue-tsc": "^1.0.9"
   },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "postcss"
+      ]
+    }
+  },
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-emoji-chinese"

pnpm-lock.yaml

@@ -11,6 +11,9 @@ import vue from '@vitejs/plugin-vue'
 import legacy from '@vitejs/plugin-legacy'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 
+import px2vw from '@yuo/postcss-px2vw'
+import autoprefixer from 'autoprefixer'
+
 import { viteVConsole } from 'vite-plugin-vconsole'
 import mock from './build/mock/createMockServer'
 
@@ -73,6 +76,17 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       }),
     ],
 
+    css: {
+      postcss: {
+        plugins: [
+          autoprefixer(),
+          px2vw({
+            viewportWidth: 375,
+          }),
+        ],
+      },
+    },
+
     build: {
       cssCodeSplit: false,
       chunkSizeWarningLimit: 2048,