merged from master & delete options.mpxPrePlugins

docs-vuepress/api/compile.md

@@ -707,6 +707,41 @@ module.exports = defineConfig({
 })
 ```
 
+**注意：**默认添加的 postcss 插件均会在`mpx的内置插件`（例如如rpx插件等）之后处理。如需使配置的插件优先于内置插件，可以在 `postcssInlineConfig` 中添加 `mpxPrePlugins` 配置：
+
+```js
+// vue.config.js
+module.exports = defineConfig({
+  pluginOptions: {
+    mpx: {
+      plugin: {
+        postcssInlineConfig: {
+          plugins: [
+            require('postcss-import'),
+            require('postcss-preset-env'),
+          ],
+          mpxPrePlugins: [
+            require('cssnano'),
+            require('autoprefixer')
+          ]
+          // 以下写法同理
+          // mpxPrePlugins: {
+          //   'cssnano': {},
+          //   'autoprefixer': {}
+          // }
+        }
+      }
+    }
+  }
+})
+```
+
+在上面这个例子当中，postcss 插件处理的最终顺序为：`cssnano` -> `autoprefixer` -> `mpx内置插件` -> `postcss-import` -> `postcss-preset-env`
+
+::: warning
+注意：在 `mpxPrePlugins` 中配置的 postcss 插件如果不通过 mpx 进行处理，那么将不会生效。
+:::
+
 ### decodeHTMLText
 
 `boolean = false`

packages/webpack-plugin/lib/style-compiler/index.js

@@ -82,9 +82,9 @@ module.exports = function (css, map) {
       }
     }
 
-    plugins.push(...config.plugins) // push user config plugins
+    const finalPlugins = config.prePlugins.concat(plugins, config.plugins)
 
-    return postcss(plugins)
+    return postcss(finalPlugins)
       .process(css, options)
       .then(result => {
         // ali环境添加全局样式抹平root差异

packages/webpack-plugin/lib/style-compiler/load-postcss-config.js

@@ -1,4 +1,5 @@
 const load = require('postcss-load-config')
+const loadPlugins = require('postcss-load-config/src/plugins')
 
 let loaded
 
@@ -28,19 +29,26 @@ module.exports = function loadPostcssConfig (loaderContext, inlineConfig = {}) {
     })
   }
 
-  return loaded.then(config => {
+  return loaded.then((config = {}) => {
     let plugins = inlineConfig.plugins || []
     let options = inlineConfig.options || {}
+    let prePlugins = inlineConfig.prePlugins || []
 
     // merge postcss config file
-    if (config && config.plugins) {
+    if (config.plugins) {
       plugins = plugins.concat(config.plugins)
     }
-    if (config && config.options) {
+    if (config.options) {
+      if (config.options.mpxPrePlugins) {
+        // 使入参和postcss格式保持一致
+        prePlugins = prePlugins.concat(loadPlugins({ plugins: config.options.mpxPrePlugins }, config.file))
+        delete config.options.mpxPrePlugins
+      }
       options = Object.assign({}, config.options, options)
     }
 
     return {
+      prePlugins,
       plugins,
       options
     }

packages/webpack-plugin/lib/template-compiler/bind-this.js

@@ -121,24 +121,19 @@ function checkDelAndGetPath (path) {
     }
 
     if (t.isLogicalExpression(container)) { // case: a || ((b || c) && d)
-      ignore = true
-      break
-    }
-
-    // case: a ??= b
-    if (
-      key === 'right' &&
-      t.isAssignmentExpression(container) &&
-      ['??=', '||=', '&&='].includes(container.operator)
-    ) {
+      canDel = false
       ignore = true
       break
     }
 
     if (t.isConditionalExpression(container)) {
-      if (key === 'test') canDel = false
-      else ignore = true
-      break
+      if (key === 'test') {
+        canDel = false
+        break
+      } else {
+        ignore = true
+        replace = true
+      }
     }
 
     if (
@@ -229,11 +224,10 @@ module.exports = {
           // 删除局部作用域的变量
           if (scopeBinding) {
             if (renderReduce) {
-              const { delPath, canDel, ignore, replace } = checkDelAndGetPath(path)
-              if (canDel && !ignore) {
+              const { delPath, canDel, replace } = checkDelAndGetPath(path)
+              if (canDel) {
                 delPath.delInfo = {
                   isLocal: true,
-                  canDel,
                   replace
                 }
               }
@@ -252,14 +246,16 @@ module.exports = {
           if (!renderReduce) return
 
           const { delPath, canDel, ignore, replace } = checkDelAndGetPath(path)
-          if (ignore) return
 
-          delPath.delInfo = {
-            keyPath,
-            canDel,
-            replace
+          if (canDel) {
+            delPath.delInfo = {
+              keyPath,
+              replace
+            }
           }
 
+          if (ignore) return // ignore不计数，不需要被统计
+
           const { bindings } = bindingsMap.get(currentBlock)
           const target = bindings[keyPath] || []
           target.push({
@@ -310,28 +306,26 @@ module.exports = {
       enter (path) {
         // 删除重复变量
         if (path.delInfo) {
-          const { keyPath, canDel, isLocal, replace } = path.delInfo
+          const { keyPath, isLocal, replace } = path.delInfo
           delete path.delInfo
 
-          if (canDel) {
-            if (isLocal) { // 局部作用域里的变量，可直接删除
-              dealRemove(path, replace)
-              return
-            }
-            const data = bindingsMap.get(currentBlock)
-            const { bindings, pBindings } = data
-            const allBindings = Object.assign({}, pBindings, bindings)
-
-            // 优先判断前缀，再判断全等
-            if (checkPrefix(Object.keys(allBindings), keyPath) || pBindings[keyPath]) {
-              dealRemove(path, replace)
-            } else {
-              const currentBlockVars = bindings[keyPath]
-              if (currentBlockVars.length > 1) {
-                const index = currentBlockVars.findIndex(item => !item.canDel)
-                if (index !== -1 || currentBlockVars[0].path !== path) { // 当前block中存在不可删除的变量 || 不是第一个可删除变量，即可删除该变量
-                  dealRemove(path, replace)
-                }
+          if (isLocal) { // 局部作用域里的变量，可直接删除
+            dealRemove(path, replace)
+            return
+          }
+          const data = bindingsMap.get(currentBlock)
+          const { bindings, pBindings } = data
+          const allBindings = Object.assign({}, pBindings, bindings)
+
+          // 优先判断前缀，再判断全等
+          if (checkPrefix(Object.keys(allBindings), keyPath) || pBindings[keyPath]) {
+            dealRemove(path, replace)
+          } else {
+            const currentBlockVars = bindings[keyPath] || [] // 对于只出现一次的可忽略变量，需要兜底
+            if (currentBlockVars.length >= 1) {
+              const index = currentBlockVars.findIndex(item => !item.canDel)
+              if (index !== -1 || currentBlockVars[0].path !== path) { // 当前block中存在不可删除的变量 || 不是第一个可删除变量，即可删除该变量
+                dealRemove(path, replace)
               }
             }
           }

packages/webpack-plugin/test/platform/common/bind-this.spec.js

@@ -64,14 +64,14 @@ global.currentInject.render = function (_i, _c, _r, _sc) {
   _sc("b");
   _sc("c");
 
-  _sc("a") ? _sc("b") : _sc("c");
+  _sc("a") ? "" : "";
   _sc("a") && _sc("b");
 
   _sc("d");
 
   _sc("e");
 
-  _sc("a") ? _sc("d") : _sc("e");
+  _sc("a") ? "" : "";
 
   if (_sc("f") + _sc("g")) {}
 
@@ -163,6 +163,18 @@ global.currentInject.render = function (_i, _c, _r, _sc) {
         
         a4
         a4 || '' || ''
+        
+        a5
+        b5
+        c5
+        a5 && b5
+        if (a5 && b5) {}
+        if (a5 ? b5 : c5) {}
+
+        a6 ? b6 : c6 // b6 c6只出现一次，不会被删除
+        
+        b7
+        a7 ? b7.name : c7
 
         obj8
         obj8 + 'rpx'
@@ -209,6 +221,21 @@ global.currentInject.render = function (_i, _c, _r, _sc) {
 
   _sc("a4");
 
+  _sc("b5");
+
+  _sc("c5");
+
+  _sc("a5") && _sc("b5");
+
+  if (_sc("a5") && _sc("b5")) {}
+
+  if (_sc("a5") ? _sc("b5") : _sc("c5")) {}
+  
+  _sc("a6") ? _sc("b6") : _sc("c6"); // b6 c6只出现一次，不会被删除
+
+  _sc("b7");
+  _sc("a7") ? "" : _sc("c7");
+
   _sc("obj8");
   "" + 'rpx';
   'height:' + "" + 'rpx';
@@ -288,7 +315,7 @@ global.currentInject.render = function (_i, _c, _r, _sc) {
     const output = `
 global.currentInject.render = function (_i, _c, _r, _sc) {
   this._i(this.list, function (item, index) {
-    item.a ? "" : item.b;
+    item.a ? "" : "";
     item.a || item.b;
   });
 };`