Add PostCSS handling to Vite (#3467)

* Add postcss handling to Vite

* Update yarn.lock

package.json

@@ -100,7 +100,6 @@
     "postcss": "^8.2.10",
     "postcss-dir-pseudo-class": "^5.0.0",
     "postcss-logical": "^4.0.2",
-    "postcss-safe-important": "^1.2.0",
     "pre-commit": "^1.2.2",
     "remark-cli": "^10.0.0",
     "replacestream": "^4.0.3",

private/dev/package.json

@@ -9,7 +9,10 @@
   "devDependencies": {
     "@babel/core": "^7.4.4",
     "@babel/plugin-transform-react-jsx": "^7.10.4",
+    "autoprefixer": "^10.2.6",
     "babel-plugin-transform-commonjs": "1.1.6",
+    "postcss-dir-pseudo-class": "^5.0.0",
+    "postcss-logical": "^4.0.2",
     "vite": "^2.7.1"
   },
   "private": true,

private/dev/vite.config.js

@@ -1,5 +1,8 @@
 import { fileURLToPath } from 'node:url'
 import { transformAsync } from '@babel/core'
+import autoprefixer from 'autoprefixer'
+import postcssLogical from 'postcss-logical'
+import postcssDirPseudoClass from 'postcss-dir-pseudo-class'
 
 const ROOT = new URL('../../', import.meta.url)
 const PACKAGES_ROOT = fileURLToPath(new URL('./packages/', ROOT))
@@ -18,6 +21,15 @@ const config = {
       defaultIsModuleExports: true,
     },
   },
+  css: {
+    postcss: {
+      plugins: [
+        autoprefixer,
+        postcssLogical(),
+        postcssDirPseudoClass(),
+      ],
+    },
+  },
   esbuild: {
     jsxFactory: 'h',
     jsxFragment: 'Fragment',

yarn.lock

@@ -7702,7 +7702,6 @@ __metadata:
     postcss: ^8.2.10
     postcss-dir-pseudo-class: ^5.0.0
     postcss-logical: ^4.0.2
-    postcss-safe-important: ^1.2.0
     pre-commit: ^1.2.2
     remark-cli: ^10.0.0
     replacestream: ^4.0.3
@@ -7727,7 +7726,10 @@ __metadata:
   dependencies:
     "@babel/core": ^7.4.4
     "@babel/plugin-transform-react-jsx": ^7.10.4
+    autoprefixer: ^10.2.6
     babel-plugin-transform-commonjs: 1.1.6
+    postcss-dir-pseudo-class: ^5.0.0
+    postcss-logical: ^4.0.2
     vite: ^2.7.1
   languageName: unknown
   linkType: soft
@@ -24859,7 +24861,7 @@ hexo-filter-github-emojis@arturi/hexo-filter-github-emojis:
   languageName: node
   linkType: hard
 
-"js-base64@npm:^2.1.9, js-base64@npm:^2.4.9, js-base64@npm:^2.6.1":
+"js-base64@npm:^2.4.9, js-base64@npm:^2.6.1":
   version: 2.6.4
   resolution: "js-base64@npm:2.6.4"
   checksum: 5f4084078d6c46f8529741d110df84b14fac3276b903760c21fa8cc8521370d607325dfe1c1a9fbbeaae1ff8e602665aaeef1362427d8fef704f9e3659472ce8
@@ -32550,15 +32552,6 @@ hexo-filter-github-emojis@arturi/hexo-filter-github-emojis:
   languageName: node
   linkType: hard
 
-"postcss-safe-important@npm:^1.2.0":
-  version: 1.2.1
-  resolution: "postcss-safe-important@npm:1.2.1"
-  dependencies:
-    postcss: ^5.0.10
-  checksum: 9b054bef6ed17ab3b3d95ea56820897e26efb7a00127e5728bfdb3745243c3cb13ef9f6bd1f066aca9ec88aecea4de0b29628b1900c9c4d73d106f9b8b886822
-  languageName: node
-  linkType: hard
-
 "postcss-safe-parser@npm:^4.0.0, postcss-safe-parser@npm:^4.0.2":
   version: 4.0.2
   resolution: "postcss-safe-parser@npm:4.0.2"
@@ -32786,18 +32779,6 @@ hexo-filter-github-emojis@arturi/hexo-filter-github-emojis:
   languageName: node
   linkType: hard
 
-"postcss@npm:^5.0.10":
-  version: 5.2.18
-  resolution: "postcss@npm:5.2.18"
-  dependencies:
-    chalk: ^1.1.3
-    js-base64: ^2.1.9
-    source-map: ^0.5.6
-    supports-color: ^3.2.3
-  checksum: 0cb88e7c887b9b55d0362159846ec9fbf330892c5853b0e346929e723d215295ffae48d9a0f219f64f74767f9114802dc1b5cd21c327184f958b7efaa93dd629
-  languageName: node
-  linkType: hard
-
 "postcss@npm:^6.0.1":
   version: 6.0.23
   resolution: "postcss@npm:6.0.23"