@mpxjs/webpack-plugin 2.6.115 → 2.7.0-alpha

package/lib/style-compiler/index.js

@@ -1,35 +1,29 @@
-const getMainCompilation = require('../utils/get-main-compilation')
 const postcss = require('postcss')
-const loaderUtils = require('loader-utils')
 const loadPostcssConfig = require('./load-postcss-config')
-const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID } = require('../staticConfig')
+const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID } = require('../utils/const')
 const trim = require('./plugins/trim')
 const rpx = require('./plugins/rpx')
 const vw = require('./plugins/vw')
 const pluginCondStrip = require('./plugins/conditional-strip')
 const scopeId = require('./plugins/scope-id')
 const transSpecial = require('./plugins/trans-special')
-const matchCondition = require('../utils/match-condition')
+const { matchCondition } = require('../utils/match-condition')
 const parseRequest = require('../utils/parse-request')
 
 module.exports = function (css, map) {
   this.cacheable()
   const cb = this.async()
-  const loaderOptions = loaderUtils.getOptions(this) || {}
-  const mainCompilation = getMainCompilation(this._compilation)
-  const mpx = mainCompilation.__mpx__
-  const defs = mpx.defs
   const { resourcePath, queryObj } = parseRequest(this.resource)
-  const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
-  const componentsMap = mpx.componentsMap[packageName]
-  const pagesMap = mpx.pagesMap
-  const isApp = (!componentsMap[resourcePath] && !pagesMap[resourcePath])
-
+  const mpx = this.getMpx()
+  const id = queryObj.moduleId || queryObj.mid || 'm' + mpx.pathHash(resourcePath)
+  const appInfo = mpx.appInfo
+  const defs = mpx.defs
+  const mode = mpx.mode
+  const isApp = resourcePath === appInfo.resourcePath
   const transRpxRulesRaw = mpx.transRpxRules
-
   const transRpxRules = transRpxRulesRaw ? (Array.isArray(transRpxRulesRaw) ? transRpxRulesRaw : [transRpxRulesRaw]) : []
 
-  const transRpxFn = mpx.webConfig.transRpxFn
+  const transRpxFn = mpx.webConfig && mpx.webConfig.transRpxFn
   const testResolveRange = (include = () => true, exclude) => {
     return matchCondition(this.resourcePath, { include, exclude })
   }
@@ -45,14 +39,12 @@ module.exports = function (css, map) {
       },
       config.options
     )
-    // ali环境处理host选择器
-    if (mpx.mode === 'ali') {
-      plugins.push(transSpecial({ id: loaderOptions.moduleId || loaderOptions.mid }))
-    }
-
-    if (loaderOptions.scoped) {
-      const moduleId = loaderOptions.moduleId || loaderOptions.mid
-      plugins.push(scopeId({ id: moduleId }))
+    // ali平台下处理scoped和host选择器
+    if (mode === 'ali') {
+      if (queryObj.scoped) {
+        plugins.push(scopeId({ id }))
+      }
+      plugins.push(transSpecial({ id }))
     }
 
     plugins.push(pluginCondStrip({
@@ -91,7 +83,7 @@ module.exports = function (css, map) {
       .process(css, options)
       .then(result => {
         // ali环境添加全局样式抹平root差异
-        if (mpx.mode === 'ali' && isApp) {
+        if (mode === 'ali' && isApp) {
           result.css += `\n.${MPX_ROOT_VIEW} { display: initial }\n.${MPX_APP_MODULE_ID} { line-height: normal }`
         }
         if (result.messages) {

package/lib/style-compiler/load-postcss-config.js

@@ -16,7 +16,9 @@ module.exports = function loadPostcssConfig (loaderContext, inlineConfig = {}) {
       webpack: loaderContext,
       defs: inlineConfig.defs || {}
     }
-    loaded = load(ctx, config.path, { argv: false }).catch(err => {
+    loaded = load(ctx, config.path, {
+      loaders: { '.json': (_, content) => JSON.parse(content) }
+    }).catch(err => {
       // postcss-load-config throws error when no config file is found,
       // but for us it's optional. only emit other errors
       if (err.message.indexOf('No PostCSS Config found') >= 0) {

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,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