@mpxjs/webpack-plugin 2.7.0-alpha.0 → 2.7.0-alpha.2

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/hm.js

@@ -0,0 +1,20 @@
+const postcss = require('postcss')
+const rpxRegExp = /\b(\d+(\.\d+)?)rpx\b/
+const rpxRegExpG = /\b(\d+(\.\d+)?)rpx\b/g
+
+module.exports = postcss.plugin('hm', (options = {}) => root => {
+  function transHm (declaration) {
+    if (rpxRegExp.test(declaration.value)) {
+      declaration.value = declaration.value.replace(rpxRegExpG, function (match, $1) {
+        if ($1 === '0') return $1
+        return `${$1}hm`
+      })
+    }
+  }
+
+  root.walkRules(rule => {
+    rule.walkDecls(declaration => {
+      transHm(declaration)
+    })
+  })
+})

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,22 +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)
 
-  function transVw (declaration) {
-    if (rpxRegExp.test(declaration.value)) {
-      declaration.value = declaration.value.replace(rpxRegExpG, function (match, $1) {
+      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/bind-this.js

@@ -1,7 +1,7 @@
-const babylon = require('babylon')
-const traverse = require('babel-traverse').default
-const t = require('babel-types')
-const generate = require('babel-generator').default
+const babylon = require('@babel/parser')
+const traverse = require('@babel/traverse').default
+const t = require('@babel/types')
+const generate = require('@babel/generator').default
 
 let names = 'Infinity,undefined,NaN,isFinite,isNaN,' +
   'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +