@mpxjs/webpack-plugin 2.6.114-alpha.8 → 2.6.115

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

@@ -1,51 +1,45 @@
+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
-      }
 
-      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`
-          })
-        }
-      }
+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
+  }
 
-      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)
-            }
-          }
-        })
+  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`
       })
     }
   }
-}
 
-module.exports.postcss = true
+  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)
+        }
+      }
+    })
+  })
+})

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

@@ -1,88 +1,81 @@
+const postcss = require('postcss')
 const selectorParser = require('postcss-selector-parser')
-// scope-id
 
-module.exports = ({ id }) => {
-  return {
-    postcssPlugin: 'scope-id',
-    Once: (root) => {
-      const keyframes = Object.create(null)
+module.exports = postcss.plugin('scope-id', ({ id }) => 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
+  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
         }
-        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)
-      })
-
-      // 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(',')
+      }
+      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
           }
-          // 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 (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
+        }))
+      })
+    }).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(',')
+      }
+    })
   }
-}
-
-module.exports.postcss = true
+})

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

@@ -1,28 +1,21 @@
+const postcss = require('postcss')
 const selectorParser = require('postcss-selector-parser')
-// trans-special
 
-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)
+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.postcss = true
+    }).process(node.selector).result
+  })
+})

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

@@ -1,15 +1,9 @@
+const postcss = require('postcss')
 
-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.plugin('trim', opts => css => {
+  css.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,29 +1,23 @@
+const postcss = require('postcss')
 const rpxRegExp = /\b(\d+(\.\d+)?)rpx\b/
 const rpxRegExpG = /\b(\d+(\.\d+)?)rpx\b/g
 
-module.exports = (options = {}) => {
-  return {
-    postcssPlugin: 'vw',
-    Once: (root) => {
-      const rpx2vwRatio = +(100 / 750).toFixed(8)
+module.exports = postcss.plugin('vw', (options = {}) => 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)
-        }
-      }
-
-      root.walkRules(rule => {
-        rule.walkDecls(declaration => {
-          transVw(declaration)
-        })
-      })
+  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)
     }
   }
-}
 
-module.exports.postcss = true
+  root.walkRules(rule => {
+    rule.walkDecls(declaration => {
+      transVw(declaration)
+    })
+  })
+})