@mpxjs/webpack-plugin 2.7.1-beta.8 → 2.7.3

package/lib/dependencies/RecordResourceMapDependency.js

@@ -22,6 +22,7 @@ class RecordResourceMapDependency extends NullDependency {
       resourceType,
       outputPath,
       packageRoot,
+      recordOnly: true,
       warn (e) {
         compilation.warnings.push(e)
       },

package/lib/extractor.js

@@ -92,7 +92,8 @@ module.exports.pitch = async function (remainingRequest) {
               skipEmit: true,
               extractedInfo: {
                 content: `@import "${relativePath}";\n`,
-                index: -1
+                index,
+                pre: true
               }
             })
           }

package/lib/index.js

@@ -566,7 +566,7 @@ class MpxWebpackPlugin {
             const hash = mpx.pathHash(resourcePath)
             const customOutputPath = this.options.customOutputPath
             if (conflictPath) return conflictPath.replace(/(\.[^\\/]+)?$/, match => hash + match)
-            if (typeof customOutputPath === 'function') return customOutputPath(type, name, hash, ext)
+            if (typeof customOutputPath === 'function') return customOutputPath(type, name, hash, ext).replace(/^\//, '')
             if (type === 'component' || type === 'page') return path.join(type + 's', name + hash, 'index' + ext)
             return path.join(type, name + hash + ext)
           },
@@ -597,25 +597,28 @@ class MpxWebpackPlugin {
             mpx.extractedFilesCache.set(resource, file)
             return file
           },
-          recordResourceMap: ({ resourcePath, resourceType, outputPath, packageRoot = '', warn, error }) => {
+          recordResourceMap: ({ resourcePath, resourceType, outputPath, packageRoot = '', recordOnly, warn, error }) => {
             const packageName = packageRoot || 'main'
             const resourceMap = mpx[`${resourceType}sMap`] || mpx.otherResourcesMap
             const currentResourceMap = resourceMap.main ? resourceMap[packageName] = resourceMap[packageName] || {} : resourceMap
+            let alreadyOutputted = false
             if (outputPath) {
               if (!currentResourceMap[resourcePath] || currentResourceMap[resourcePath] === true) {
-                // 输出路径冲突检测，如果存在输出路径冲突，对输出路径进行重命名
-                // todo 用outputPathMap来检测输出路径冲突
-                for (let key in currentResourceMap) {
-                  if (currentResourceMap[key] === outputPath && key !== resourcePath) {
-                    outputPath = mpx.getOutputPath(resourcePath, resourceType, { conflictPath: outputPath })
-                    warn && warn(new Error(`Current ${resourceType} [${resourcePath}] is registered with conflicted outputPath [${currentResourceMap[key]}] which is already existed in system, will be renamed with [${outputPath}], use ?resolve to get the real outputPath!`))
-                    break
+                if (!recordOnly) {
+                  // 在非recordOnly的模式下，进行输出路径冲突检测，如果存在输出路径冲突，则对输出路径进行重命名
+                  for (let key in currentResourceMap) {
+                    // todo 用outputPathMap来检测输出路径冲突
+                    if (currentResourceMap[key] === outputPath && key !== resourcePath) {
+                      outputPath = mpx.getOutputPath(resourcePath, resourceType, { conflictPath: outputPath })
+                      warn && warn(new Error(`Current ${resourceType} [${resourcePath}] is registered with conflicted outputPath [${currentResourceMap[key]}] which is already existed in system, will be renamed with [${outputPath}], use ?resolve to get the real outputPath!`))
+                      break
+                    }
                   }
                 }
                 currentResourceMap[resourcePath] = outputPath
               } else {
                 if (currentResourceMap[resourcePath] === outputPath) {
-                  return true
+                  alreadyOutputted = true
                 } else {
                   error && error(new Error(`Current ${resourceType} [${resourcePath}] is already registered with outputPath [${currentResourceMap[resourcePath]}], you can not register it with another outputPath [${outputPath}]!`))
                 }
@@ -623,7 +626,11 @@ class MpxWebpackPlugin {
             } else if (!currentResourceMap[resourcePath]) {
               currentResourceMap[resourcePath] = true
             }
-            return false
+
+            return {
+              outputPath,
+              alreadyOutputted
+            }
           },
           // 组件和静态资源的输出规则如下：
           // 1. 主包引用的资源输出至主包
@@ -675,20 +682,18 @@ class MpxWebpackPlugin {
 
             if (outputPath) outputPath = toPosix(path.join(packageRoot, outputPath))
 
-            const alreadyOutputted = mpx.recordResourceMap({
-              resourcePath,
-              resourceType,
-              outputPath,
-              packageRoot,
-              warn,
-              error
-            })
-
             return {
               packageName,
               packageRoot,
-              outputPath,
-              alreadyOutputted
+              // 返回outputPath及alreadyOutputted
+              ...mpx.recordResourceMap({
+                resourcePath,
+                resourceType,
+                outputPath,
+                packageRoot,
+                warn,
+                error
+              })
             }
           }
         }
@@ -763,12 +768,13 @@ class MpxWebpackPlugin {
             }
           }
         } else if (independent) {
-          // ContextModule和RawModule只在独立分包的情况下添加分包标记，其余默认不添加
+          // ContextModule/RawModule和ExternalModule等只在独立分包的情况下添加分包标记，其余默认不添加
           const postfix = `|independent=${independent}|${currentPackageRoot}`
-          if (module._identifier) {
-            module._identifier += postfix
-          } else if (module.identifierStr) {
-            module.identifierStr += postfix
+          const rawIdentifier = module.identifier
+          if (rawIdentifier) {
+            module.identifier = () => {
+              return rawIdentifier.call(module) + postfix
+            }
           }
         }
         return rawAddModule.call(compilation, module, callback)
@@ -832,6 +838,23 @@ class MpxWebpackPlugin {
         mpx.assetsModulesMap.set(filename, modules)
       })
 
+      const fillExtractedAssetsMap = (assetsMap, { index, content }, filename) => {
+        if (assetsMap.has(index)) {
+          if (assetsMap.get(index) !== content) {
+            compilation.errors.push(new Error(`The extracted file [${filename}] is filled with same index [${index}] and different content:
+            old content: ${assetsMap.get(index)}
+            new content: ${content}
+            please check!`))
+          }
+        } else {
+          assetsMap.set(index, content)
+        }
+      }
+
+      const sortExtractedAssetsMap = (assetsMap) => {
+        return [...assetsMap.entries()].sort((a, b) => a[0] - b[0]).map(item => item[1])
+      }
+
       compilation.hooks.beforeModuleAssets.tap('MpxWebpackPlugin', () => {
         const extractedAssetsMap = new Map()
         for (const module of compilation.modules) {
@@ -840,19 +863,19 @@ class MpxWebpackPlugin {
             if (extractedInfo) {
               let extractedAssets = extractedAssetsMap.get(filename)
               if (!extractedAssets) {
-                extractedAssets = []
+                extractedAssets = [new Map(), new Map()]
                 extractedAssetsMap.set(filename, extractedAssets)
               }
-              extractedAssets.push(extractedInfo)
+              fillExtractedAssetsMap(extractedInfo.pre ? extractedAssets[0] : extractedAssets[1], extractedInfo, filename)
               compilation.hooks.moduleAsset.call(module, filename)
             }
           }
         }
 
-        for (const [filename, extractedAssets] of extractedAssetsMap) {
-          const sortedExtractedAssets = extractedAssets.sort((a, b) => a.index - b.index)
+        for (const [filename, [pre, normal]] of extractedAssetsMap) {
+          const sortedExtractedAssets = [...sortExtractedAssetsMap(pre), ...sortExtractedAssetsMap(normal)]
           const source = new ConcatSource()
-          sortedExtractedAssets.forEach(({ content }) => {
+          sortedExtractedAssets.forEach((content) => {
             if (content) {
               // 处理replace path
               if (/"mpx_replace_path_.*?"/.test(content)) {
@@ -1338,6 +1361,7 @@ try {
       const fs = compiler.intermediateFileSystem
       const cacheLocation = compiler.options.cache.cacheLocation
       return new Promise((resolve) => {
+        if (!cacheLocation) return resolve()
         if (typeof fs.rm === 'function') {
           fs.rm(cacheLocation, {
             recursive: true,

package/lib/json-compiler/helper.js

@@ -97,7 +97,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
       const ext = path.extname(resourcePath)
       let outputPath
       if (aliasPath) {
-        outputPath = aliasPath
+        outputPath = aliasPath.replace(/^\//, '')
       } else {
         const relative = path.relative(context, resourcePath)
         if (/^\./.test(relative)) {

package/lib/loader.js

@@ -51,7 +51,7 @@ module.exports = function (content) {
   }
 
   // 支持资源query传入isPage或isComponent支持页面/组件单独编译
-  if (queryObj.isComponent || queryObj.isPage) {
+  if (ctorType === 'app' && (queryObj.isComponent || queryObj.isPage)) {
     const entryName = getEntryName(this) || (queryObj.isComponent ? 'noEntryComponent' : 'noEntryPage')
     ctorType = queryObj.isComponent ? 'component' : 'page'
     this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, ctorType, entryName, packageRoot))

package/lib/runtime/components/web/mpx-swiper.vue

@@ -41,7 +41,9 @@
     },
     data () {
       return {
-        currentIndex: this.current
+        currentIndex: this.current,
+        currentChildLength: 0,
+        lastChildLength: 0
       }
     },
     computed: {
@@ -81,6 +83,9 @@
         }
       }
     },
+    updated () {
+      this.currentChildLength = this.$children && this.$children.length
+    },
     watch: {
       current (val) {
         if (this.bs) {
@@ -89,6 +94,15 @@
         }
         this.changeSource = ''
         this.goto(val)
+      },
+      currentChildLength(val) {
+        if (val < this.lastChildLength && val < this.currentIndex) {
+          this.goto(0, 0)
+        }
+        if (this.lastChildLength || (!this.lastChildLength && !this.autoplay)) {
+          this.bs && this.bs.refresh()
+        }
+        this.lastChildLength = val
       }
     },
     activated () {
@@ -167,10 +181,11 @@
       refresh () {
         this.bs && this.bs.refresh()
       },
-      goto (index) {
+      goto (index, time) {
         const x = this.vertical ? 0 : index
         const y = this.vertical ? index : 0
-        this.bs && this.bs.goToPage(x, y)
+        const speed = time === 0 ? 0 : this.duration
+        this.bs && this.bs.goToPage(x, y, speed)
       }
     },
     render (createElement) {

package/lib/runtime/stringify.wxs

@@ -120,6 +120,8 @@ function stringifyArray (value) {
 }
 
 var mpxDashReg = genRegExp('(.+)MpxDash$')
+// 转义字符在wxs正则中存在平台兼容性问题，用[$]规避使用转义字符
+var mpxDashReplaceReg = genRegExp('[$]', 'g')
 
 function stringifyObject (value) {
   var res = ''
@@ -129,7 +131,7 @@ function stringifyObject (value) {
     if (value[key]) {
       if (res) res += ' '
       if (mpxDashReg.test(key)) {
-        key = hump2dash(mpxDashReg.exec(key)[1])
+        key = mpxDashReg.exec(key)[1].replace(mpxDashReplaceReg, '-')
       }
       res += key
     }

package/lib/style-compiler/plugins/conditional-strip.js

@@ -1,5 +1,3 @@
-const postcss = require('postcss')
-
 /**
  * 按平台条件编译CSS，用法如下：
  * @type {postcss.Plugin<any>}
@@ -44,7 +42,7 @@ const postcss = require('postcss')
 //     @mpx-endif
 //     */
 // `
-module.exports = postcss.plugin('conditional-strip', (options = {}) => {
+module.exports = (options = {}) => {
   const { defs } = options
 
   const defKeys = Object.keys(defs)
@@ -91,71 +89,76 @@ module.exports = postcss.plugin('conditional-strip', (options = {}) => {
     return parseCondition(/@mpx-elif[^(]*?\(([\s\S]*)\)/, content)
   }
 
-  return function (root, result) {
-    const condsStacks = []
-    const currentConds = []
-    let curDepth = -1
+  return {
+    postcssPlugin: 'conditional-strip',
+    Once (root) {
+      const condsStacks = []
+      const currentConds = []
+      let curDepth = -1
 
-    root.walk(node => {
-      let isKeyword = false
-      if (node.type === 'comment') {
-        const { text } = node
-        if (isIfStart(text)) {
-          isKeyword = true
-          const cond = parseIf(text)
-          curDepth++
-          const parentCond = currentConds[curDepth - 1]
-          if (parentCond && parentCond.shouldRemove) {
-            cond.shouldRemove = true
-          }
-          cond.children.push(node)
-          condsStacks.push({
-            if: cond
-          })
-          currentConds[curDepth] = cond
-        } else if (isElseIf(text)) {
-          isKeyword = true
-          const cond = parseElseIf(text)
-          const parentCond = currentConds[curDepth - 1]
-          if (parentCond && parentCond.shouldRemove) {
-            cond.shouldRemove = true
-          }
-          cond.children.push(node)
-          condsStacks[curDepth].elif = cond
-          currentConds[curDepth] = cond
-        } else if (isElse(text)) {
-          isKeyword = true
-          const curConds = condsStacks[curDepth]
-          const cond = {
-            shouldRemove: !(curConds.if.shouldRemove && (!curConds.elif || curConds.elif.shouldRemove)),
-            children: [node]
-          }
-          const parentCond = currentConds[curDepth - 1]
-          if (parentCond && parentCond.shouldRemove) {
-            cond.shouldRemove = true
-          }
-          condsStacks[curDepth].else = cond
-          currentConds[curDepth] = cond
-        } else if (isEndIf(text)) {
-          isKeyword = true
-          const curConds = condsStacks.pop()
-          Object.keys(curConds).forEach(k => {
-            curConds[k].children.forEach(node => {
-              node.remove()
+      root.walk(node => {
+        let isKeyword = false
+        if (node.type === 'comment') {
+          const { text } = node
+          if (isIfStart(text)) {
+            isKeyword = true
+            const cond = parseIf(text)
+            curDepth++
+            const parentCond = currentConds[curDepth - 1]
+            if (parentCond && parentCond.shouldRemove) {
+              cond.shouldRemove = true
+            }
+            cond.children.push(node)
+            condsStacks.push({
+              if: cond
             })
-          })
-          currentConds.pop()
-          curDepth--
-          node.remove()
+            currentConds[curDepth] = cond
+          } else if (isElseIf(text)) {
+            isKeyword = true
+            const cond = parseElseIf(text)
+            const parentCond = currentConds[curDepth - 1]
+            if (parentCond && parentCond.shouldRemove) {
+              cond.shouldRemove = true
+            }
+            cond.children.push(node)
+            condsStacks[curDepth].elif = cond
+            currentConds[curDepth] = cond
+          } else if (isElse(text)) {
+            isKeyword = true
+            const curConds = condsStacks[curDepth]
+            const cond = {
+              shouldRemove: !(curConds.if.shouldRemove && (!curConds.elif || curConds.elif.shouldRemove)),
+              children: [node]
+            }
+            const parentCond = currentConds[curDepth - 1]
+            if (parentCond && parentCond.shouldRemove) {
+              cond.shouldRemove = true
+            }
+            condsStacks[curDepth].else = cond
+            currentConds[curDepth] = cond
+          } else if (isEndIf(text)) {
+            isKeyword = true
+            const curConds = condsStacks.pop()
+            Object.keys(curConds).forEach(k => {
+              curConds[k].children.forEach(node => {
+                node.remove()
+              })
+            })
+            currentConds.pop()
+            curDepth--
+            node.remove()
+          }
         }
-      }
 
-      if (!isKeyword) {
-        const curCond = currentConds[curDepth]
-        if (curCond && curCond.shouldRemove) {
-          curCond.children.push(node)
+        if (!isKeyword) {
+          const curCond = currentConds[curDepth]
+          if (curCond && curCond.shouldRemove) {
+            curCond.children.push(node)
+          }
         }
-      }
-    })
+      })
+    }
   }
-})
+}
+
+module.exports.postcss = true

package/lib/style-compiler/plugins/rpx.js

@@ -1,45 +1,51 @@
-const postcss = require('postcss')
 const pxRegExp = /\b(\d+(\.\d+)?)px\b/
 const pxRegExpG = /\b(\d+(\.\d+)?)px\b/g
+// rpx
+module.exports = (options = {}) => {
+  return {
+    postcssPlugin: 'rpx',
+    Once (root) {
+      const mode = options.mode || 'only'
+      const defaultIgnoreComment = mode === 'all' ? 'use px' : 'use rpx'
+      const baseWidth = 750
+      const designWidth = options.designWidth || 750
+      const ratio = +(baseWidth / designWidth).toFixed(2)
+      function isIgnoreComment (node) {
+        let result = node && node.type === 'comment' && node.text.trim() === (options.comment || defaultIgnoreComment)
+        if (result) {
+          node.remove()
+        }
+        return result
+      }
 
-module.exports = postcss.plugin('rpx', (options = {}) => root => {
-  const mode = options.mode || 'only'
-  const defaultIgnoreComment = mode === 'all' ? 'use px' : 'use rpx'
-  const baseWidth = 750
-  const designWidth = options.designWidth || 750
-  const ratio = +(baseWidth / designWidth).toFixed(2)
-  function isIgnoreComment (node) {
-    let result = node && node.type === 'comment' && node.text.trim() === (options.comment || defaultIgnoreComment)
-    if (result) {
-      node.remove()
-    }
-    return result
-  }
+      function transRpx (declaration) {
+        if (pxRegExp.test(declaration.value)) {
+          declaration.value = declaration.value.replace(pxRegExpG, function (match, $1) {
+            if ($1 === '0') return $1
+            return `${$1 * ratio}rpx`
+          })
+        }
+      }
 
-  function transRpx (declaration) {
-    if (pxRegExp.test(declaration.value)) {
-      declaration.value = declaration.value.replace(pxRegExpG, function (match, $1) {
-        if ($1 === '0') return $1
-        return `${$1 * ratio}rpx`
+      root.walkRules(rule => {
+        let ignore = false
+        if (isIgnoreComment(rule.prev()) || isIgnoreComment(rule.last)) {
+          ignore = true
+        }
+        rule.walkDecls(declaration => {
+          if (ignore || isIgnoreComment(declaration.prev())) {
+            if (mode === 'only') {
+              transRpx(declaration)
+            }
+          } else {
+            if (mode === 'all') {
+              transRpx(declaration)
+            }
+          }
+        })
       })
     }
   }
+}
 
-  root.walkRules(rule => {
-    let ignore = false
-    if (isIgnoreComment(rule.prev()) || isIgnoreComment(rule.last)) {
-      ignore = true
-    }
-    rule.walkDecls(declaration => {
-      if (ignore || isIgnoreComment(declaration.prev())) {
-        if (mode === 'only') {
-          transRpx(declaration)
-        }
-      } else {
-        if (mode === 'all') {
-          transRpx(declaration)
-        }
-      }
-    })
-  })
-})
+module.exports.postcss = true

package/lib/style-compiler/plugins/scope-id.js

@@ -1,81 +1,88 @@
-const postcss = require('postcss')
 const selectorParser = require('postcss-selector-parser')
+// scope-id
 
-module.exports = postcss.plugin('scope-id', ({ id }) => root => {
-  const keyframes = Object.create(null)
+module.exports = ({ id }) => {
+  return {
+    postcssPlugin: 'scope-id',
+    Once: (root) => {
+      const keyframes = Object.create(null)
 
-  root.each(function rewriteSelector (node) {
-    if (!node.selector) {
-      // handle media queries
-      if (node.type === 'atrule') {
-        if (node.name === 'media' || node.name === 'supports') {
-          node.each(rewriteSelector)
-        } else if (/-?keyframes$/.test(node.name)) {
-          // register keyframes
-          keyframes[node.params] = node.params = node.params + '-' + id
-        }
-      }
-      return
-    }
-    node.selector = selectorParser(selectors => {
-      selectors.each(selector => {
-        let node = null
-        selector.each(n => {
-          // ">>>" combinator
-          if (n.type === 'combinator' && n.value === '>>>') {
-            n.value = ' '
-            n.spaces.before = n.spaces.after = ''
-            return false
-          }
-          // /deep/ alias for >>>, since >>> doesn't work in SASS
-          if (n.type === 'tag' && n.value === '/deep/') {
-            const prev = n.prev()
-            if (prev && prev.type === 'combinator' && prev.value === ' ') {
-              prev.remove()
+      root.each(function rewriteSelector (node) {
+        if (!node.selector) {
+          // handle media queries
+          if (node.type === 'atrule') {
+            if (node.name === 'media' || node.name === 'supports') {
+              node.each(rewriteSelector)
+            } else if (/-?keyframes$/.test(node.name)) {
+              // register keyframes
+              keyframes[node.params] = node.params = node.params + '-' + id
             }
-            n.remove()
-            return false
           }
-          if (n.type !== 'pseudo' && n.type !== 'combinator') {
-            node = n
-          }
-        })
-        // 对于page selector不添加scope id
-        if (node && node.type === 'tag' && node.value === 'page') return
-        selector.insertAfter(node, selectorParser.className({
-          value: id
-        }))
+          return
+        }
+        node.selector = selectorParser(selectors => {
+          selectors.each(selector => {
+            let node = null
+            selector.each(n => {
+              // ">>>" combinator
+              if (n.type === 'combinator' && n.value === '>>>') {
+                n.value = ' '
+                n.spaces.before = n.spaces.after = ''
+                return false
+              }
+              // /deep/ alias for >>>, since >>> doesn't work in SASS
+              if (n.type === 'tag' && n.value === '/deep/') {
+                const prev = n.prev()
+                if (prev && prev.type === 'combinator' && prev.value === ' ') {
+                  prev.remove()
+                }
+                n.remove()
+                return false
+              }
+              if (n.type !== 'pseudo' && n.type !== 'combinator') {
+                node = n
+              }
+            })
+            // 对于page selector不添加scope id
+            if (node && node.type === 'tag' && node.value === 'page') return
+            selector.insertAfter(node, selectorParser.className({
+              value: id
+            }))
+          })
+        }).processSync(node.selector)
       })
-    }).process(node.selector).result
-  })
 
-  // If keyframes are found in this <style>, find and rewrite animation names
-  // in declarations.
-  // Caveat: this only works for keyframes and animation rules in the same
-  // <style> element.
-  if (Object.keys(keyframes).length) {
-    root.walkDecls(decl => {
-      // individual animation-name declaration
-      if (/-?animation-name$/.test(decl.prop)) {
-        decl.value = decl.value.split(',')
-          .map(v => keyframes[v.trim()] || v.trim())
-          .join(',')
-      }
-      // shorthand
-      if (/-?animation$/.test(decl.prop)) {
-        decl.value = decl.value.split(',')
-          .map(v => {
-            const vals = v.trim().split(/\s+/)
-            const i = vals.findIndex(val => keyframes[val])
-            if (i !== -1) {
-              vals.splice(i, 1, keyframes[vals[i]])
-              return vals.join(' ')
-            } else {
-              return v
-            }
-          })
-          .join(',')
+      // If keyframes are found in this <style>, find and rewrite animation names
+      // in declarations.
+      // Caveat: this only works for keyframes and animation rules in the same
+      // <style> element.
+      if (Object.keys(keyframes).length) {
+        root.walkDecls(decl => {
+          // individual animation-name declaration
+          if (/-?animation-name$/.test(decl.prop)) {
+            decl.value = decl.value.split(',')
+              .map(v => keyframes[v.trim()] || v.trim())
+              .join(',')
+          }
+          // shorthand
+          if (/-?animation$/.test(decl.prop)) {
+            decl.value = decl.value.split(',')
+              .map(v => {
+                const vals = v.trim().split(/\s+/)
+                const i = vals.findIndex(val => keyframes[val])
+                if (i !== -1) {
+                  vals.splice(i, 1, keyframes[vals[i]])
+                  return vals.join(' ')
+                } else {
+                  return v
+                }
+              })
+              .join(',')
+          }
+        })
       }
-    })
+    }
   }
-})
+}
+
+module.exports.postcss = true

package/lib/style-compiler/plugins/trans-special.js

@@ -1,21 +1,28 @@
-const postcss = require('postcss')
 const selectorParser = require('postcss-selector-parser')
+// trans-special
 
-module.exports = postcss.plugin('trans-special', ({ id }) => root => {
-  root.each(function rewriteSelector (node) {
-    if (!node.selector) return
-    node.selector = selectorParser(selectors => {
-      selectors.each(selector => {
-        selector.each(n => {
-          if (/^:host$/.test(n.value)) {
-            const compoundSelectors = n.nodes
-            n.replaceWith(selectorParser.className({
-              value: 'host-' + id
-            }))
-            selector.insertAfter(n, compoundSelectors)
-          }
-        })
+module.exports = ({ id }) => {
+  return {
+    postcssPlugin: 'trans-special',
+    Once: (root) => {
+      root.each(function rewriteSelector (node) {
+        if (!node.selector) return
+        node.selector = selectorParser(selectors => {
+          selectors.each(selector => {
+            selector.each(n => {
+              if (/^:host$/.test(n.value)) {
+                const compoundSelectors = n.nodes
+                n.replaceWith(selectorParser.className({
+                  value: 'host-' + id
+                }))
+                selector.insertAfter(n, compoundSelectors)
+              }
+            })
+          })
+        }).processSync(node.selector)
       })
-    }).process(node.selector).result
-  })
-})
+    }
+  }
+}
+
+module.exports.postcss = true

package/lib/style-compiler/plugins/trim.js

@@ -1,9 +1,15 @@
-const postcss = require('postcss')
 
-module.exports = postcss.plugin('trim', opts => css => {
-  css.walk(({ type, raws }) => {
-    if (type === 'rule' || type === 'atrule') {
-      raws.before = raws.after = '\n'
+module.exports = (opts) => {
+  return {
+    postcssPlugin: 'trim',
+    Once: (root) => {
+      root.walk(({ type, raws }) => {
+        if (type === 'rule' || type === 'atrule') {
+          raws.before = raws.after = '\n'
+        }
+      })
     }
-  })
-})
+  }
+}
+
+module.exports.postcss = true

package/lib/style-compiler/plugins/vw.js

@@ -1,23 +1,29 @@
-const postcss = require('postcss')
 const rpxRegExp = /\b(\d+(\.\d+)?)rpx\b/
 const rpxRegExpG = /\b(\d+(\.\d+)?)rpx\b/g
 
-module.exports = postcss.plugin('vw', (options = {}) => root => {
-  const rpx2vwRatio = +(100 / 750).toFixed(8)
+module.exports = (options = {}) => {
+  return {
+    postcssPlugin: 'vw',
+    Once: (root) => {
+      const rpx2vwRatio = +(100 / 750).toFixed(8)
 
-  const transRpxFn = options.transRpxFn && typeof options.transRpxFn === 'function' ? options.transRpxFn : function (match, $1) {
-    if ($1 === '0') return $1
-    return `${$1 * rpx2vwRatio}vw`
-  }
-  function transVw (declaration) {
-    if (rpxRegExp.test(declaration.value)) {
-      declaration.value = declaration.value.replace(rpxRegExpG, transRpxFn)
+      const transRpxFn = options.transRpxFn && typeof options.transRpxFn === 'function' ? options.transRpxFn : function (match, $1) {
+        if ($1 === '0') return $1
+        return `${$1 * rpx2vwRatio}vw`
+      }
+      function transVw (declaration) {
+        if (rpxRegExp.test(declaration.value)) {
+          declaration.value = declaration.value.replace(rpxRegExpG, transRpxFn)
+        }
+      }
+
+      root.walkRules(rule => {
+        rule.walkDecls(declaration => {
+          transVw(declaration)
+        })
+      })
     }
   }
+}
 
-  root.walkRules(rule => {
-    rule.walkDecls(declaration => {
-      transVw(declaration)
-    })
-  })
-})
+module.exports.postcss = true

package/lib/template-compiler/compiler.js

@@ -1619,7 +1619,9 @@ function processClass (el, meta) {
   staticClass = staticClass.replace(/\s+/g, ' ')
   if (dynamicClass) {
     let staticClassExp = parseMustache(staticClass).result
-    let dynamicClassExp = transDynamicClassExpr(parseMustache(dynamicClass).result)
+    let dynamicClassExp = transDynamicClassExpr(parseMustache(dynamicClass).result, {
+      error: error$1
+    })
     addAttrs(el, [{
       name: targetType,
       // swan中externalClass是通过编译时静态实现，因此需要保留原有的staticClass形式避免externalClass失效

package/lib/template-compiler/index.js

@@ -53,7 +53,8 @@ module.exports = function (raw) {
     externalClasses,
     hasScoped,
     moduleId,
-    filePath: this.resourcePath,
+    // 这里需传递resourcePath和wxsContentMap保持一致
+    filePath: resourcePath,
     i18n,
     checkUsingComponents: mpx.checkUsingComponents,
     globalComponents: Object.keys(mpx.usingComponents),

package/lib/template-compiler/trans-dynamic-class-expr.js

@@ -1,27 +1,32 @@
 const babylon = require('@babel/parser')
 const t = require('@babel/types')
 const generate = require('@babel/generator').default
-const dash2hump = require('../utils/hump-dash').dash2hump
 
-module.exports = function transDynamicClassExpr (expr) {
-  expr = babylon.parseExpression(expr, {
-    plugins: [
-      'objectRestSpread'
-    ]
-  })
-  if (t.isObjectExpression(expr)) {
-    expr.properties.forEach((property) => {
-      if (t.isObjectProperty(property) && !property.computed) {
-        const propertyName = property.key.name || property.key.value
-        if (/-/.test(propertyName)) {
-          property.key = t.identifier(dash2hump(propertyName) + 'MpxDash')
-        } else {
-          property.key = t.identifier(propertyName)
-        }
-      }
+module.exports = function transDynamicClassExpr (expr, { error } = {}) {
+  try {
+    const ast = babylon.parseExpression(expr, {
+      plugins: [
+        'objectRestSpread'
+      ]
     })
+    if (t.isObjectExpression(ast)) {
+      ast.properties.forEach((property) => {
+        if (t.isObjectProperty(property) && !property.computed) {
+          const propertyName = property.key.name || property.key.value
+          if (/-/.test(propertyName)) {
+            if (/\$/.test(propertyName)) {
+              error && error(`Dynamic classname [${propertyName}] is not supported, which includes [-] char and [$] char at the same time.`)
+            } else {
+              property.key = t.identifier(propertyName.replace(/-/g, '$$') + 'MpxDash')
+            }
+          }
+        }
+      })
+    }
+    return generate(ast, {
+      compact: true
+    }).code
+  } catch (e) {
+    return expr
   }
-  return generate(expr, {
-    compact: true
-  }).code
 }

package/lib/web/processTemplate.js

@@ -96,7 +96,7 @@ module.exports = function (template, {
           // todo 后续输出web也采用mpx的scoped处理
           hasScoped: false,
           moduleId,
-          filePath: loaderContext.resourcePath,
+          filePath: resourcePath,
           i18n: null,
           checkUsingComponents,
           // web模式下全局组件不会被合入usingComponents中，故globalComponents可以传空

package/lib/wxs/WxsModuleIdsPlugin.js

@@ -1,7 +1,10 @@
 const {
   compareModulesByPreOrderIndexOrIdentifier
 } = require('webpack/lib/util/comparators')
-const { assignAscendingModuleIds } = require('webpack/lib/ids/IdHelpers')
+const {
+  assignAscendingModuleIds,
+  getUsedModuleIdsAndModules
+} = require('webpack/lib/ids/IdHelpers')
 
 /** @typedef {import("../Compiler")} Compiler */
 /** @typedef {import("../Module")} Module */
@@ -12,19 +15,13 @@ class WxsModuleIdsPlugin {
       name: 'WxsModuleIdsPlugin',
       // 放在最前面执行，确保生成的代码模块为数组形式，符合wxs规范
       stage: -1000
-    }, modules => {
-      const chunkGraph = compilation.chunkGraph
-      const modulesInNaturalOrder = Array.from(modules)
-        .filter(
-          m =>
-            m.needId &&
-            chunkGraph.getNumberOfModuleChunks(m) > 0 &&
-            chunkGraph.getModuleId(m) === null
-        )
-        .sort(
-          compareModulesByPreOrderIndexOrIdentifier(compilation.moduleGraph)
-        )
-      assignAscendingModuleIds(modulesInNaturalOrder, compilation)
+    }, () => {
+      const [usedIds, modulesInNaturalOrder] =
+        getUsedModuleIdsAndModules(compilation)
+      modulesInNaturalOrder.sort(
+        compareModulesByPreOrderIndexOrIdentifier(compilation.moduleGraph)
+      )
+      assignAscendingModuleIds(usedIds, modulesInNaturalOrder, compilation)
     })
   }
 }

package/lib/wxss/loader.js

@@ -65,7 +65,7 @@ module.exports = function (content, map) {
         alreadyImported[imp.url] = true
       }
       return true
-    }).map((imp) => {
+    }).map((imp, i) => {
       if (!isUrlRequest(imp.url, root, externals)) {
         return 'exports.push([module.id, ' +
           JSON.stringify('@import url(' + imp.url + ');') + ', ' +
@@ -75,7 +75,7 @@ module.exports = function (content, map) {
           isStatic: true,
           issuerFile: mpx.getExtractedFile(this.resource),
           fromImport: true
-        })
+        }, i)
         return 'exports.push([module.id, ' +
           JSON.stringify('@import "') +
           '+ require(' + requestString + ') +' +

package/lib/wxss/processCss.js

@@ -17,129 +17,133 @@ const modulesScope = require('postcss-modules-scope')
 const modulesValues = require('postcss-modules-values')
 const valueParser = require('postcss-value-parser')
 const isUrlRequest = require('../utils/is-url-request')
+// css-loader-parser
 
-const parserPlugin = postcss.plugin('css-loader-parser', function (options) {
-  return function (css) {
-    const imports = {}
-    let exports = {}
-    const importItems = []
-    const urlItems = []
+const parserPlugin = function (options) {
+  return {
+    postcssPlugin: 'css-loader-parser',
+    Once (css) {
+      const imports = {}
+      let exports = {}
+      const importItems = []
+      const urlItems = []
+
+      function replaceImportsInString (str) {
+        if (options.import) {
+          const tokens = valueParser(str)
+          tokens.walk(function (node) {
+            if (node.type !== 'word') {
+              return
+            }
+            const token = node.value
+            const importIndex = imports['$' + token]
+            if (typeof importIndex === 'number') {
+              node.value = '___CSS_LOADER_IMPORT___' + importIndex + '___'
+            }
+          })
+          return tokens.toString()
+        }
+        return str
+      }
 
-    function replaceImportsInString (str) {
       if (options.import) {
-        const tokens = valueParser(str)
-        tokens.walk(function (node) {
-          if (node.type !== 'word') {
+        css.walkAtRules(/^import$/i, function (rule) {
+          const values = Tokenizer.parseValues(rule.params)
+          let url = values.nodes[0].nodes[0]
+          if (url && url.type === 'url') {
+            url = url.url
+          } else if (url && url.type === 'string') {
+            url = url.value
+          } else throw rule.error('Unexpected format ' + rule.params)
+          if (!url.replace(/\s/g, '').length) {
             return
           }
-          const token = node.value
-          const importIndex = imports['$' + token]
-          if (typeof importIndex === 'number') {
-            node.value = '___CSS_LOADER_IMPORT___' + importIndex + '___'
+          values.nodes[0].nodes.shift()
+          const mediaQuery = Tokenizer.stringifyValues(values)
+
+          if (isUrlRequest(url, options.root)) {
+            url = loaderUtils.urlToRequest(url, options.root)
           }
+
+          importItems.push({
+            url: url,
+            mediaQuery: mediaQuery
+          })
+          rule.remove()
         })
-        return tokens.toString()
       }
-      return str
-    }
-
-    if (options.import) {
-      css.walkAtRules(/^import$/i, function (rule) {
-        const values = Tokenizer.parseValues(rule.params)
-        let url = values.nodes[0].nodes[0]
-        if (url && url.type === 'url') {
-          url = url.url
-        } else if (url && url.type === 'string') {
-          url = url.value
-        } else throw rule.error('Unexpected format ' + rule.params)
-        if (!url.replace(/\s/g, '').length) {
-          return
-        }
-        values.nodes[0].nodes.shift()
-        const mediaQuery = Tokenizer.stringifyValues(values)
 
-        if (isUrlRequest(url, options.root)) {
-          url = loaderUtils.urlToRequest(url, options.root)
-        }
-
-        importItems.push({
-          url: url,
-          mediaQuery: mediaQuery
+      const icss = icssUtils.extractICSS(css)
+      exports = icss.icssExports
+      Object.keys(icss.icssImports).forEach(function (key) {
+        const url = loaderUtils.parseString(key)
+        Object.keys(icss.icssImports[key]).forEach(function (prop) {
+          imports['$' + prop] = importItems.length
+          importItems.push({
+            url: url,
+            export: icss.icssImports[key][prop]
+          })
         })
-        rule.remove()
       })
-    }
 
-    const icss = icssUtils.extractICSS(css)
-    exports = icss.icssExports
-    Object.keys(icss.icssImports).forEach(function (key) {
-      const url = loaderUtils.parseString(key)
-      Object.keys(icss.icssImports[key]).forEach(function (prop) {
-        imports['$' + prop] = importItems.length
-        importItems.push({
-          url: url,
-          export: icss.icssImports[key][prop]
-        })
+      Object.keys(exports).forEach(function (exportName) {
+        exports[exportName] = replaceImportsInString(exports[exportName])
       })
-    })
-
-    Object.keys(exports).forEach(function (exportName) {
-      exports[exportName] = replaceImportsInString(exports[exportName])
-    })
 
-    function isAlias (url) {
-      // Handle alias starting by / and root disabled
-      return url !== options.resolve(url)
-    }
+      function isAlias (url) {
+        // Handle alias starting by / and root disabled
+        return url !== options.resolve(url)
+      }
 
-    function processNode (item) {
-      switch (item.type) {
-        case 'value':
-          item.nodes.forEach(processNode)
-          break
-        case 'nested-item':
-          item.nodes.forEach(processNode)
-          break
-        case 'item':
-          const importIndex = imports['$' + item.name]
-          if (typeof importIndex === 'number') {
-            item.name = '___CSS_LOADER_IMPORT___' + importIndex + '___'
-          }
-          break
-        case 'url':
-          if (options.url && item.url.replace(/\s/g, '').length && !/^#/.test(item.url) && (isAlias(item.url) || isUrlRequest(item.url, options.root))) {
-            // Strip quotes, they will be re-added if the module needs them
-            item.stringType = ''
-            delete item.innerSpacingBefore
-            delete item.innerSpacingAfter
-            const url = item.url
-            item.url = '___CSS_LOADER_URL___' + urlItems.length + '___'
-            urlItems.push({
-              url: url
-            })
-          }
-          break
+      function processNode (item) {
+        switch (item.type) {
+          case 'value':
+            item.nodes.forEach(processNode)
+            break
+          case 'nested-item':
+            item.nodes.forEach(processNode)
+            break
+          case 'item':
+            const importIndex = imports['$' + item.name]
+            if (typeof importIndex === 'number') {
+              item.name = '___CSS_LOADER_IMPORT___' + importIndex + '___'
+            }
+            break
+          case 'url':
+            if (options.url && item.url.replace(/\s/g, '').length && !/^#/.test(item.url) && (isAlias(item.url) || isUrlRequest(item.url, options.root))) {
+              // Strip quotes, they will be re-added if the module needs them
+              item.stringType = ''
+              delete item.innerSpacingBefore
+              delete item.innerSpacingAfter
+              const url = item.url
+              item.url = '___CSS_LOADER_URL___' + urlItems.length + '___'
+              urlItems.push({
+                url: url
+              })
+            }
+            break
+        }
       }
-    }
 
-    css.walkDecls(function (decl) {
-      const values = Tokenizer.parseValues(decl.value)
-      values.nodes.forEach(function (value) {
-        value.nodes.forEach(processNode)
+      css.walkDecls(function (decl) {
+        const values = Tokenizer.parseValues(decl.value)
+        values.nodes.forEach(function (value) {
+          value.nodes.forEach(processNode)
+        })
+        decl.value = Tokenizer.stringifyValues(values)
+      })
+      css.walkAtRules(function (atrule) {
+        if (typeof atrule.params === 'string') {
+          atrule.params = replaceImportsInString(atrule.params)
+        }
       })
-      decl.value = Tokenizer.stringifyValues(values)
-    })
-    css.walkAtRules(function (atrule) {
-      if (typeof atrule.params === 'string') {
-        atrule.params = replaceImportsInString(atrule.params)
-      }
-    })
 
-    options.importItems = importItems
-    options.urlItems = urlItems
-    options.exports = exports
+      options.importItems = importItems
+      options.urlItems = urlItems
+      options.exports = exports
+    }
   }
-})
+}
 
 module.exports = function processCss (inputSource, inputMap, options, callback) {
   const query = options.query

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.7.1-beta.8",
+  "version": "2.7.3",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -32,7 +32,7 @@
     "consolidate": "^0.15.1",
     "css": "^2.2.1",
     "css-selector-tokenizer": "^0.7.0",
-    "cssnano": "^3.10.0",
+    "cssnano": "^5.0.16",
     "de-indent": "^1.0.2",
     "fastparse": "^1.1.1",
     "hash-sum": "^1.0.2",
@@ -46,14 +46,14 @@
     "lru-cache": "^4.1.2",
     "mime": "^2.2.2",
     "object-assign": "^4.1.1",
-    "postcss": "^6.0.19",
-    "postcss-load-config": "^1.2.0",
-    "postcss-modules-extract-imports": "^1.2.0",
-    "postcss-modules-local-by-default": "^1.2.0",
-    "postcss-modules-scope": "^1.1.0",
-    "postcss-modules-values": "^1.3.0",
-    "postcss-selector-parser": "^2.0.0",
-    "postcss-value-parser": "^3.3.0",
+    "postcss": "^8.4.5",
+    "postcss-load-config": "^3.1.1",
+    "postcss-modules-extract-imports": "^3.0.0",
+    "postcss-modules-local-by-default": "^4.0.0",
+    "postcss-modules-scope": "^3.0.0",
+    "postcss-modules-values": "^4.0.0",
+    "postcss-selector-parser": "^6.0.8",
+    "postcss-value-parser": "^4.0.2",
     "source-list-map": "^2.0.0"
   },
   "peerDependencies": {
@@ -80,5 +80,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "1220be327d19323bbd05eeac10e24b4dd5add2c2"
+  "gitHead": "0cb7ce760316aa22f7c96ba8561a96f3eab2b8d6"
 }