From b94c798bcd0ec47a744ae0d9b3d3053a16773728 Mon Sep 17 00:00:00 2001 From: zhuzhh Date: Fri, 15 Dec 2023 18:16:08 +0800 Subject: [PATCH 01/12] =?UTF-8?q?=E5=AE=8C=E5=96=84=20ignore=E8=AF=AD?= =?UTF-8?q?=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/template-compiler/bind-this.js | 66 ++++++++++++------- .../test/platform/common/bind-this.spec.js | 23 ++++++- 2 files changed, 64 insertions(+), 25 deletions(-) diff --git a/packages/webpack-plugin/lib/template-compiler/bind-this.js b/packages/webpack-plugin/lib/template-compiler/bind-this.js index 3209fc31d6..077b6b4eb4 100644 --- a/packages/webpack-plugin/lib/template-compiler/bind-this.js +++ b/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 ( @@ -207,6 +202,27 @@ module.exports = { const propKeys = [] let isProps = false + const cacheIgnore = new Map() + + // 把ignore的数据过滤出来 + function filterIgnoreKey (bindings) { + if (cacheIgnore.has(bindings)) return cacheIgnore.get(bindings) + + const res = {} + Object.keys(bindings).forEach(key => { + const temp = [] + bindings[key].forEach(sub => { + if (!sub.ignore) { + temp.push(sub) + } + }) + // 避免 bindings[key] 全是ignore + if (temp.length) res[key] = temp + }) + cacheIgnore.set(bindings, res) + return res + } + const collectVisitor = { BlockStatement: { enter (path) { // 收集作用域下所有变量(keyPath) @@ -230,11 +246,12 @@ module.exports = { if (scopeBinding) { if (renderReduce) { const { delPath, canDel, ignore, replace } = checkDelAndGetPath(path) - if (canDel && !ignore) { + if (canDel) { delPath.delInfo = { isLocal: true, canDel, - replace + replace, + ignore } } } @@ -252,19 +269,21 @@ module.exports = { if (!renderReduce) return const { delPath, canDel, ignore, replace } = checkDelAndGetPath(path) - if (ignore) return + // if (ignore) return delPath.delInfo = { keyPath, canDel, - replace + replace, + ignore } const { bindings } = bindingsMap.get(currentBlock) const target = bindings[keyPath] || [] target.push({ path: delPath, - canDel + canDel, + ignore }) bindings[keyPath] = target } @@ -310,23 +329,26 @@ module.exports = { enter (path) { // 删除重复变量 if (path.delInfo) { - const { keyPath, canDel, isLocal, replace } = path.delInfo + const { keyPath, canDel, isLocal, replace, ignore } = path.delInfo delete path.delInfo if (canDel) { - if (isLocal) { // 局部作用域里的变量，可直接删除 + if (isLocal || ignore) { // 局部作用域或可忽略的变量，可直接删除 dealRemove(path, replace) return } const data = bindingsMap.get(currentBlock) - const { bindings, pBindings } = data + let { bindings, pBindings } = data + bindings = filterIgnoreKey(bindings) + pBindings = filterIgnoreKey(pBindings) + const allBindings = Object.assign({}, pBindings, bindings) // 优先判断前缀，再判断全等 if (checkPrefix(Object.keys(allBindings), keyPath) || pBindings[keyPath]) { dealRemove(path, replace) } else { - const currentBlockVars = bindings[keyPath] + const currentBlockVars = bindings[keyPath] || [] // bindings[keyPath] 全是ignore，所以需要兜底一下 if (currentBlockVars.length > 1) { const index = currentBlockVars.findIndex(item => !item.canDel) if (index !== -1 || currentBlockVars[0].path !== path) { // 当前block中存在不可删除的变量 || 不是第一个可删除变量，即可删除该变量 diff --git a/packages/webpack-plugin/test/platform/common/bind-this.spec.js b/packages/webpack-plugin/test/platform/common/bind-this.spec.js index c200e0e272..6d0ad820ce 100644 --- a/packages/webpack-plugin/test/platform/common/bind-this.spec.js +++ b/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,13 @@ global.currentInject.render = function (_i, _c, _r, _sc) { a4 a4 || '' || '' + + a5 + b5 + c5 + a5 && b5 + if (a5 && b5) {} + if (a5 ? b5 : c5) {} obj8 obj8 + 'rpx' @@ -209,6 +216,16 @@ 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("obj8"); "" + 'rpx'; 'height:' + "" + 'rpx'; @@ -288,7 +305,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; }); };` From 57efaebb2c67c69dd5f8faebf646289ea1bb7e94 Mon Sep 17 00:00:00 2001 From: zhuzhh Date: Sun, 17 Dec 2023 13:50:50 +0800 Subject: [PATCH 02/12] =?UTF-8?q?=E5=AE=8C=E5=96=84=20ignore=E8=AF=AD?= =?UTF-8?q?=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/template-compiler/bind-this.js | 13 ++++++++----- .../test/platform/common/bind-this.spec.js | 10 ++++++++++ 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/webpack-plugin/lib/template-compiler/bind-this.js b/packages/webpack-plugin/lib/template-compiler/bind-this.js index 077b6b4eb4..0f6d82184c 100644 --- a/packages/webpack-plugin/lib/template-compiler/bind-this.js +++ b/packages/webpack-plugin/lib/template-compiler/bind-this.js @@ -203,7 +203,6 @@ module.exports = { let isProps = false const cacheIgnore = new Map() - // 把ignore的数据过滤出来 function filterIgnoreKey (bindings) { if (cacheIgnore.has(bindings)) return cacheIgnore.get(bindings) @@ -333,7 +332,7 @@ module.exports = { delete path.delInfo if (canDel) { - if (isLocal || ignore) { // 局部作用域或可忽略的变量，可直接删除 + if (isLocal) { // 局部作用域里的变量，可直接删除 dealRemove(path, replace) return } @@ -348,11 +347,15 @@ module.exports = { if (checkPrefix(Object.keys(allBindings), keyPath) || pBindings[keyPath]) { dealRemove(path, replace) } else { - const currentBlockVars = bindings[keyPath] || [] // bindings[keyPath] 全是ignore，所以需要兜底一下 + const currentBlockVars = bindings[keyPath] || [] // 避免bindings[keyPath] 全是ignore，所以需要兜底一下 if (currentBlockVars.length > 1) { - const index = currentBlockVars.findIndex(item => !item.canDel) - if (index !== -1 || currentBlockVars[0].path !== path) { // 当前block中存在不可删除的变量 || 不是第一个可删除变量，即可删除该变量 + if (ignore) { dealRemove(path, replace) + } else { + const index = currentBlockVars.findIndex(item => !item.canDel) + if (index !== -1 || currentBlockVars[0].path !== path) { // 当前block中存在不可删除的变量 || 不是第一个可删除变量，即可删除该变量 + dealRemove(path, replace) + } } } } diff --git a/packages/webpack-plugin/test/platform/common/bind-this.spec.js b/packages/webpack-plugin/test/platform/common/bind-this.spec.js index 6d0ad820ce..aff00108dc 100644 --- a/packages/webpack-plugin/test/platform/common/bind-this.spec.js +++ b/packages/webpack-plugin/test/platform/common/bind-this.spec.js @@ -171,6 +171,11 @@ global.currentInject.render = function (_i, _c, _r, _sc) { if (a5 && b5) {} if (a5 ? b5 : c5) {} + a6 ? b6 : c6 // b6 c6只出现一次，不会被删除 + + b7 + a7 ? b7.name : c7 + obj8 obj8 + 'rpx' 'height:' + obj8 + 'rpx' @@ -225,6 +230,11 @@ global.currentInject.render = function (_i, _c, _r, _sc) { 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'; From dd03a92978dd49c956dc5fbcb5661b419d6f63f0 Mon Sep 17 00:00:00 2001 From: zhuzhh Date: Tue, 19 Dec 2023 15:09:53 +0800 Subject: [PATCH 03/12] =?UTF-8?q?=E5=AE=8C=E5=96=84=20ignore=20=E8=AF=AD?= =?UTF-8?q?=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/template-compiler/bind-this.js | 38 +++++++------------ 1 file changed, 14 insertions(+), 24 deletions(-) diff --git a/packages/webpack-plugin/lib/template-compiler/bind-this.js b/packages/webpack-plugin/lib/template-compiler/bind-this.js index 0f6d82184c..9842b80400 100644 --- a/packages/webpack-plugin/lib/template-compiler/bind-this.js +++ b/packages/webpack-plugin/lib/template-compiler/bind-this.js @@ -167,6 +167,17 @@ function checkPrefix (keys, key) { return false } +// 把ignore的node节点过滤出来 +function filterIgnoreNode (bindings) { + const res = {} + Object.keys(bindings).forEach(key => { + const temp = bindings[key].filter(sub => !sub.ignore) + // 避免 bindings[key] 全是ignore + if (temp.length) res[key] = temp + }) + return res +} + function dealRemove (path, replace) { try { if (replace) { @@ -202,26 +213,6 @@ module.exports = { const propKeys = [] let isProps = false - const cacheIgnore = new Map() - // 把ignore的数据过滤出来 - function filterIgnoreKey (bindings) { - if (cacheIgnore.has(bindings)) return cacheIgnore.get(bindings) - - const res = {} - Object.keys(bindings).forEach(key => { - const temp = [] - bindings[key].forEach(sub => { - if (!sub.ignore) { - temp.push(sub) - } - }) - // 避免 bindings[key] 全是ignore - if (temp.length) res[key] = temp - }) - cacheIgnore.set(bindings, res) - return res - } - const collectVisitor = { BlockStatement: { enter (path) { // 收集作用域下所有变量(keyPath) @@ -294,6 +285,7 @@ module.exports = { enter (path) { const scope = bindingsMap.get(path) const parentScope = bindingsMap.get(scope.parent) + scope.bindings = filterIgnoreNode(scope.bindings) scope.pBindings = parentScope ? Object.assign({}, parentScope.bindings, parentScope.pBindings) : {} currentBlock = path }, @@ -337,9 +329,7 @@ module.exports = { return } const data = bindingsMap.get(currentBlock) - let { bindings, pBindings } = data - bindings = filterIgnoreKey(bindings) - pBindings = filterIgnoreKey(pBindings) + const { bindings, pBindings } = data const allBindings = Object.assign({}, pBindings, bindings) @@ -348,7 +338,7 @@ module.exports = { dealRemove(path, replace) } else { const currentBlockVars = bindings[keyPath] || [] // 避免bindings[keyPath] 全是ignore，所以需要兜底一下 - if (currentBlockVars.length > 1) { + if (currentBlockVars.length >= 1) { if (ignore) { dealRemove(path, replace) } else { From e87ef11024b1f9301685ac569a908b4552b1dfd3 Mon Sep 17 00:00:00 2001 From: zhuzhh Date: Tue, 19 Dec 2023 17:10:55 +0800 Subject: [PATCH 04/12] =?UTF-8?q?=E7=AE=80=E5=8C=96=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/template-compiler/bind-this.js | 33 +++++-------------- 1 file changed, 8 insertions(+), 25 deletions(-) diff --git a/packages/webpack-plugin/lib/template-compiler/bind-this.js b/packages/webpack-plugin/lib/template-compiler/bind-this.js index 9842b80400..abb507b18f 100644 --- a/packages/webpack-plugin/lib/template-compiler/bind-this.js +++ b/packages/webpack-plugin/lib/template-compiler/bind-this.js @@ -167,17 +167,6 @@ function checkPrefix (keys, key) { return false } -// 把ignore的node节点过滤出来 -function filterIgnoreNode (bindings) { - const res = {} - Object.keys(bindings).forEach(key => { - const temp = bindings[key].filter(sub => !sub.ignore) - // 避免 bindings[key] 全是ignore - if (temp.length) res[key] = temp - }) - return res -} - function dealRemove (path, replace) { try { if (replace) { @@ -259,21 +248,20 @@ module.exports = { if (!renderReduce) return const { delPath, canDel, ignore, replace } = checkDelAndGetPath(path) - // if (ignore) return delPath.delInfo = { keyPath, canDel, - replace, - ignore + replace } + if (ignore) return // ignore不计数，不需要被统计 + const { bindings } = bindingsMap.get(currentBlock) const target = bindings[keyPath] || [] target.push({ path: delPath, - canDel, - ignore + canDel }) bindings[keyPath] = target } @@ -285,7 +273,6 @@ module.exports = { enter (path) { const scope = bindingsMap.get(path) const parentScope = bindingsMap.get(scope.parent) - scope.bindings = filterIgnoreNode(scope.bindings) scope.pBindings = parentScope ? Object.assign({}, parentScope.bindings, parentScope.pBindings) : {} currentBlock = path }, @@ -320,7 +307,7 @@ module.exports = { enter (path) { // 删除重复变量 if (path.delInfo) { - const { keyPath, canDel, isLocal, replace, ignore } = path.delInfo + const { keyPath, canDel, isLocal, replace } = path.delInfo delete path.delInfo if (canDel) { @@ -337,15 +324,11 @@ module.exports = { if (checkPrefix(Object.keys(allBindings), keyPath) || pBindings[keyPath]) { dealRemove(path, replace) } else { - const currentBlockVars = bindings[keyPath] || [] // 避免bindings[keyPath] 全是ignore，所以需要兜底一下 + const currentBlockVars = bindings[keyPath] if (currentBlockVars.length >= 1) { - if (ignore) { + const index = currentBlockVars.findIndex(item => !item.canDel) + if (index !== -1 || currentBlockVars[0].path !== path) { // 当前block中存在不可删除的变量 || 不是第一个可删除变量，即可删除该变量 dealRemove(path, replace) - } else { - const index = currentBlockVars.findIndex(item => !item.canDel) - if (index !== -1 || currentBlockVars[0].path !== path) { // 当前block中存在不可删除的变量 || 不是第一个可删除变量，即可删除该变量 - dealRemove(path, replace) - } } } } From f24bc627e8bd8d80cb1d109819a6bc1a50376fa8 Mon Sep 17 00:00:00 2001 From: zhuzhh Date: Tue, 19 Dec 2023 17:23:35 +0800 Subject: [PATCH 05/12] fix error --- packages/webpack-plugin/lib/template-compiler/bind-this.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/webpack-plugin/lib/template-compiler/bind-this.js b/packages/webpack-plugin/lib/template-compiler/bind-this.js index abb507b18f..6fe8390f0f 100644 --- a/packages/webpack-plugin/lib/template-compiler/bind-this.js +++ b/packages/webpack-plugin/lib/template-compiler/bind-this.js @@ -317,14 +317,13 @@ module.exports = { } 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] + const currentBlockVars = bindings[keyPath] || [] // 对于只出现一次的可忽略变量，需要兜底 if (currentBlockVars.length >= 1) { const index = currentBlockVars.findIndex(item => !item.canDel) if (index !== -1 || currentBlockVars[0].path !== path) { // 当前block中存在不可删除的变量 || 不是第一个可删除变量，即可删除该变量 From efc8f2b66ca296b1dba90e7f242776f05f71a5fa Mon Sep 17 00:00:00 2001 From: zhuzhh Date: Tue, 19 Dec 2023 17:26:11 +0800 Subject: [PATCH 06/12] fix error --- packages/webpack-plugin/lib/template-compiler/bind-this.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/webpack-plugin/lib/template-compiler/bind-this.js b/packages/webpack-plugin/lib/template-compiler/bind-this.js index 6fe8390f0f..401436db58 100644 --- a/packages/webpack-plugin/lib/template-compiler/bind-this.js +++ b/packages/webpack-plugin/lib/template-compiler/bind-this.js @@ -229,8 +229,7 @@ module.exports = { delPath.delInfo = { isLocal: true, canDel, - replace, - ignore + replace } } } From 17a831ae4f4e2c4255da21f6846c18f619268569 Mon Sep 17 00:00:00 2001 From: zhuzhh Date: Wed, 20 Dec 2023 11:50:46 +0800 Subject: [PATCH 07/12] fix eslint --- packages/webpack-plugin/lib/template-compiler/bind-this.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/template-compiler/bind-this.js b/packages/webpack-plugin/lib/template-compiler/bind-this.js index 401436db58..99f108ff7c 100644 --- a/packages/webpack-plugin/lib/template-compiler/bind-this.js +++ b/packages/webpack-plugin/lib/template-compiler/bind-this.js @@ -224,7 +224,7 @@ module.exports = { // 删除局部作用域的变量 if (scopeBinding) { if (renderReduce) { - const { delPath, canDel, ignore, replace } = checkDelAndGetPath(path) + const { delPath, canDel, replace } = checkDelAndGetPath(path) if (canDel) { delPath.delInfo = { isLocal: true, From fdb5134c4d66aef3e86c95ac503fe3b4832dd776 Mon Sep 17 00:00:00 2001 From: anotherso1a <1181581742@qq.com> Date: Wed, 20 Dec 2023 19:20:46 +0800 Subject: [PATCH 08/12] =?UTF-8?q?build(style):=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E5=89=8D=E7=BD=AEpostcss=E6=8F=92=E4=BB=B6=E8=83=BD=E5=8A=9B?= =?UTF-8?q?=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-vuepress/api/compile.md | 31 +++++++++++++++++++ .../lib/style-compiler/index.js | 12 +++++-- 2 files changed, 41 insertions(+), 2 deletions(-) diff --git a/docs-vuepress/api/compile.md b/docs-vuepress/api/compile.md index c707187c28..21361704eb 100644 --- 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 index 82835caeb3..f9fad4b43e 100644 --- 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差异 From 5195c1b6f6b0068fa5e5a65a379621816943b6c7 Mon Sep 17 00:00:00 2001 From: zhuzhh Date: Thu, 21 Dec 2023 12:21:15 +0800 Subject: [PATCH 09/12] =?UTF-8?q?=E4=BC=98=E5=8C=96=20delInfo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/template-compiler/bind-this.js | 48 +++++++++---------- 1 file changed, 23 insertions(+), 25 deletions(-) diff --git a/packages/webpack-plugin/lib/template-compiler/bind-this.js b/packages/webpack-plugin/lib/template-compiler/bind-this.js index 99f108ff7c..b50be9df02 100644 --- a/packages/webpack-plugin/lib/template-compiler/bind-this.js +++ b/packages/webpack-plugin/lib/template-compiler/bind-this.js @@ -228,7 +228,6 @@ module.exports = { if (canDel) { delPath.delInfo = { isLocal: true, - canDel, replace } } @@ -248,10 +247,11 @@ module.exports = { const { delPath, canDel, ignore, replace } = checkDelAndGetPath(path) - delPath.delInfo = { - keyPath, - canDel, - replace + if (canDel) { + delPath.delInfo = { + keyPath, + replace + } } if (ignore) return // ignore不计数，不需要被统计 @@ -306,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) } } } From 2a7513dcadbf6b93a4ecdab3e76ed2911c4fa5bb Mon Sep 17 00:00:00 2001 From: anotherso1a <1181581742@qq.com> Date: Thu, 21 Dec 2023 19:19:42 +0800 Subject: [PATCH 10/12] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E5=89=8D?= =?UTF-8?q?=E7=BD=AE=E6=8F=92=E4=BB=B6=E7=9A=84=E9=85=8D=E7=BD=AE=E6=96=B9?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-vuepress/api/compile.md | 18 +++++++++++------- .../webpack-plugin/lib/style-compiler/index.js | 13 ++----------- .../lib/style-compiler/load-postcss-config.js | 13 ++++++++++--- 3 files changed, 23 insertions(+), 21 deletions(-) diff --git a/docs-vuepress/api/compile.md b/docs-vuepress/api/compile.md index 21361704eb..e77efd7fe0 100644 --- a/docs-vuepress/api/compile.md +++ b/docs-vuepress/api/compile.md @@ -719,15 +719,15 @@ module.exports = defineConfig({ plugins: [ require('postcss-import'), require('postcss-preset-env'), - require('cssnano')({ mpxPrePlugin: true }), - require('autoprefixer')({ remove: true, mpxPrePlugin: true }) + ], + mpxPrePlugins: [ + require('cssnano'), + require('autoprefixer') ] // 以下写法同理 - // plugins: { - // 'postcss-import': {}, - // 'postcss-preset-env': {}, - // 'cssnano': { mpxPrePlugin: true }, - // 'autoprefixer': { remove: true, mpxPrePlugin: true } + // mpxPrePlugins: { + // 'cssnano': {}, + // 'autoprefixer': {} // } } } @@ -738,6 +738,10 @@ module.exports = defineConfig({ 在上面这个例子当中，postcss 插件处理的最终顺序为：`cssnano` -> `autoprefixer` -> `mpx内置插件` -> `postcss-import` -> `postcss-preset-env` +::: warning +注意：在 `mpxPrePlugins` 中配置的 postcss 插件如果不通过 mpx 进行处理，那么将不会生效。 +::: + ### decodeHTMLText `boolean = false` diff --git a/packages/webpack-plugin/lib/style-compiler/index.js b/packages/webpack-plugin/lib/style-compiler/index.js index f9fad4b43e..5ba54f509e 100644 --- a/packages/webpack-plugin/lib/style-compiler/index.js +++ b/packages/webpack-plugin/lib/style-compiler/index.js @@ -27,7 +27,6 @@ module.exports = function (css, map) { return matchCondition(this.resourcePath, { include, exclude }) } - const inlineConfig = Object.assign({}, mpx.postcssInlineConfig, { defs }) loadPostcssConfig(this, inlineConfig).then(config => { const plugins = [] // init with trim plugin const options = Object.assign( @@ -82,17 +81,9 @@ module.exports = function (css, map) { } } - const prePlugins = [] + const finalPlugins = config.prePlugins.concat(plugins, config.plugins) - config.plugins.forEach(e => { - if (e.options && e.options.mpxPrePlugin) { - prePlugins.push(e) - } else { - plugins.push(e) - } - }) - - return postcss(prePlugins.concat(plugins)) + return postcss(finalPlugins) .process(css, options) .then(result => { // ali环境添加全局样式抹平root差异 diff --git a/packages/webpack-plugin/lib/style-compiler/load-postcss-config.js b/packages/webpack-plugin/lib/style-compiler/load-postcss-config.js index cc94f28756..fe601baae1 100644 --- a/packages/webpack-plugin/lib/style-compiler/load-postcss-config.js +++ b/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,25 @@ 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) { options = Object.assign({}, config.options, options) + if (config.options.mpxPrePlugins) { + // 使入参和postcss格式保持一致 + prePlugins = prePlugins.concat(loadPlugins({ plugins: config.options.mpxPrePlugins }, config.file)) + } } return { + prePlugins, plugins, options } From 7f10d11364805089d0413c655cfdd864e4cf738f Mon Sep 17 00:00:00 2001 From: anotherso1a <1181581742@qq.com> Date: Thu, 21 Dec 2023 19:22:56 +0800 Subject: [PATCH 11/12] style: lint fix --- packages/webpack-plugin/lib/style-compiler/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/webpack-plugin/lib/style-compiler/index.js b/packages/webpack-plugin/lib/style-compiler/index.js index 5ba54f509e..760397aac2 100644 --- a/packages/webpack-plugin/lib/style-compiler/index.js +++ b/packages/webpack-plugin/lib/style-compiler/index.js @@ -27,6 +27,7 @@ module.exports = function (css, map) { return matchCondition(this.resourcePath, { include, exclude }) } + const inlineConfig = Object.assign({}, mpx.postcssInlineConfig, { defs }) loadPostcssConfig(this, inlineConfig).then(config => { const plugins = [] // init with trim plugin const options = Object.assign( From 1bbeecfa6b7781b9d54d1eaab67bd39aabd6f22d Mon Sep 17 00:00:00 2001 From: anotherso1a <1181581742@qq.com> Date: Thu, 21 Dec 2023 19:28:33 +0800 Subject: [PATCH 12/12] =?UTF-8?q?docs:=20=E8=B0=83=E6=95=B4=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-vuepress/api/compile.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs-vuepress/api/compile.md b/docs-vuepress/api/compile.md index e77efd7fe0..b6bc98a559 100644 --- a/docs-vuepress/api/compile.md +++ b/docs-vuepress/api/compile.md @@ -707,7 +707,7 @@ module.exports = defineConfig({ }) ``` -**注意：**默认添加的 postcss 插件均会在`mpx的内置插件`（例如如rpx插件等）之后处理。如需使配置的插件优先于内置插件，可以在插件 options 中设置 `mpxPrePlugin` 选项为 `true`。 +**注意：**默认添加的 postcss 插件均会在`mpx的内置插件`（例如如rpx插件等）之后处理。如需使配置的插件优先于内置插件，可以在 `postcssInlineConfig` 中添加 `mpxPrePlugins` 配置： ```js // vue.config.js