build(style): 增加前置postcss插件能力支持

didi · Dec 20, 2023 · fdb5134 · fdb5134
1 parent ae26ece
commit fdb5134
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 2 deletions.
diff --git a/docs-vuepress/api/compile.md b/docs-vuepress/api/compile.md
@@ -707,6 +707,37 @@ module.exports = defineConfig({
 })
 ```
 
+**注意：**默认添加的 postcss 插件均会在`mpx的内置插件`（例如如rpx插件等）之后处理。如需使配置的插件优先于内置插件，可以在插件 options 中设置 `mpxPrePlugin` 选项为 `true`。
+
+```js
+// vue.config.js
+module.exports = defineConfig({
+  pluginOptions: {
+    mpx: {
+      plugin: {
+        postcssInlineConfig: {
+          plugins: [
+            require('postcss-import'),
+            require('postcss-preset-env'),
+            require('cssnano')({ mpxPrePlugin: true }),
+            require('autoprefixer')({ remove: true, mpxPrePlugin: true })
+          ]
+          // 以下写法同理
+          // plugins: {
+          //   'postcss-import': {},
+          //   'postcss-preset-env': {},
+          //   'cssnano': { mpxPrePlugin: true },
+          //   'autoprefixer': { remove: true, mpxPrePlugin: true }
+          // }
+        }
+      }
+    }
+  }
+})
+```
+
+在上面这个例子当中，postcss 插件处理的最终顺序为：`cssnano` -> `autoprefixer` -> `mpx内置插件` -> `postcss-import` -> `postcss-preset-env`
+
 ### decodeHTMLText
 
 `boolean = false`

diff --git a/packages/webpack-plugin/lib/style-compiler/index.js b/packages/webpack-plugin/lib/style-compiler/index.js
@@ -82,9 +82,17 @@ module.exports = function (css, map) {
       }
     }
 
-    plugins.push(...config.plugins) // push user config plugins
+    const prePlugins = []
 
-    return postcss(plugins)
+    config.plugins.forEach(e => {
+      if (e.options && e.options.mpxPrePlugin) {
+        prePlugins.push(e)
+      } else {
+        plugins.push(e)
+      }
+    })
+
+    return postcss(prePlugins.concat(plugins))
       .process(css, options)
       .then(result => {
         // ali环境添加全局样式抹平root差异