@mpxjs/webpack-plugin 2.9.62 → 2.9.65

package/lib/config.js

@@ -1,3 +1,5 @@
+const { dash2hump } = require('./utils/hump-dash')
+
 const reactConfig = {
   event: {
     parseEvent (attr) {
@@ -70,7 +72,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -132,9 +138,7 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'on') {
-        return prefix + eventName.replace(/^./, (matched) => {
-          return matched.toUpperCase()
-        })
+        return dash2hump(prefix + '-' + eventName)
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -192,7 +196,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -249,7 +257,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -306,7 +318,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -377,7 +393,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -434,7 +454,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -491,7 +515,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',

package/lib/index.js

@@ -1812,7 +1812,6 @@ try {
         }
 
         if (isWeb(mpx.mode)) {
-          const mpxStyleOptions = queryObj.mpxStyleOptions
           const firstLoader = loaders[0] ? toPosix(loaders[0].loader) : ''
           const isPitcherRequest = firstLoader.includes('node_modules/vue-loader/lib/loaders/pitcher')
           let cssLoaderIndex = -1
@@ -1837,8 +1836,7 @@ try {
             }
             if (loaderIndex > -1) {
               loaders.splice(loaderIndex + 1, 0, {
-                loader: styleCompilerPath,
-                options: (mpxStyleOptions && JSON.parse(mpxStyleOptions)) || {}
+                loader: styleCompilerPath
               })
             }
           }

package/lib/platform/style/wx/index.js

@@ -9,16 +9,21 @@ module.exports = function getSpec ({ warn, error }) {
     // React Native android 不支持的 CSS property
     android: /^(text-decoration-style|text-decoration-color|shadow-offset|shadow-opacity|shadow-radius)$/
   }
+  // var(xx)
+  const cssVariableExp = /var\(/
+  // calc(xx)
+  const calcExp = /calc\(/
+  const envExp = /env\(/
   // 不支持的属性提示
-  const unsupportedPropError = ({ prop, mode }) => {
-    error(`Property [${prop}] is not supported in React Native ${mode} environment!`)
+  const unsupportedPropError = ({ prop, value, selector }, { mode }, isError = true) => {
+    const tips = isError ? error : warn
+    tips(`Property [${prop}] on ${selector} is not supported in ${mode} environment!`)
   }
   // prop 校验
-  const verifyProps = ({ prop, value }, { mode }, isError = true) => {
+  const verifyProps = ({ prop, value, selector }, { mode }, isError = true) => {
     prop = prop.trim()
-    const tips = isError ? error : warn
     if (unsupportedPropExp.test(prop) || unsupportedPropMode[mode].test(prop)) {
-      tips(`Property [${prop}] is not supported in React Native ${mode} environment!`)
+      unsupportedPropError({ prop, value, selector }, { mode }, isError)
       return false
     }
     return true
@@ -81,28 +86,67 @@ module.exports = function getSpec ({ warn, error }) {
       if (rule[1].test(prop)) return rule[0]
     }
   }
+  // 多value解析
+  const parseValues = (str, char = ' ') => {
+    let stack = 0
+    let temp = ''
+    const result = []
+    for (let i = 0; i < str.length; i++) {
+      if (str[i] === '(') {
+        stack++
+      } else if (str[i] === ')') {
+        stack--
+      }
+      // 非括号内 或者 非分隔字符且非空
+      if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
+        temp += str[i]
+      }
+      if ((stack === 0 && str[i] === char) || i === str.length - 1) {
+        result.push(temp)
+        temp = ''
+      }
+    }
+    return result
+  }
+  // const getDefaultValueFromVar = (str) => {
+  //   const totalVarExp = /^var\((.+)\)$/
+  //   if (!totalVarExp.test(str)) return str
+  //   const newVal = parseValues((str.match(totalVarExp)?.[1] || ''), ',')
+  //   if (newVal.length <= 1) return ''
+  //   if (!totalVarExp.test(newVal[1])) return newVal[1]
+  //   return getDefaultValueFromVar(newVal[1])
+  // }
   // 属性值校验
-  const verifyValues = ({ prop, value }, isError = true) => {
+  const verifyValues = ({ prop, value, selector }, isError = true) => {
     prop = prop.trim()
     value = value.trim()
-    const type = getValueType(prop)
+    const tips = isError ? error : warn
+    if (cssVariableExp.test(value) || calcExp.test(value) || envExp.test(value)) return true
     const namedColor = ['transparent', 'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'rebeccapurple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue', 'slategray', 'snow', 'springgreen', 'steelblue', 'tan', 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen']
     const valueExp = {
-      number: /^(-?\d+(\.\d+)?)(rpx|px|%)?$/,
+      number: /^((-?(\d+(\.\d+)?|\.\d+))(rpx|px|%|vw|vh)?|hairlineWidth)$/,
       color: new RegExp(('^(' + namedColor.join('|') + ')$') + '|(^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$)|^(rgb|rgba|hsl|hsla|hwb)\\(.+\\)$')
     }
-    const tips = isError ? error : warn
+    const type = getValueType(prop)
+    const tipsType = (type) => {
+      const info = {
+        [ValueType.number]: '2rpx,10%,30rpx',
+        [ValueType.color]: 'rgb,rgba,hsl,hsla,hwb,named color,#000000',
+        [ValueType.enum]: `${SUPPORTED_PROP_VAL_ARR[prop]?.join(',')}`
+      }
+      tips(`Value of ${prop} in ${selector} should be ${type}, eg ${info[type]}, received [${value}], please check again!`)
+    }
     switch (type) {
       case ValueType.number: {
         if (!valueExp.number.test(value)) {
-          tips(`The value type of [${prop}] only supports [Number] in React Native environment, eg 10rpx, 10px, 10%, 10, please check again`)
+          tipsType(type)
           return false
         }
         return true
       }
       case ValueType.color: {
         if (!valueExp.color.test(value)) {
-          tips(`The value type of [${prop}] only supports [Color] in React Native environment, eg #000, rgba(0,0,0,0), please check again`)
+          tipsType(type)
           return false
         }
         return true
@@ -111,7 +155,7 @@ module.exports = function getSpec ({ warn, error }) {
         const isIn = SUPPORTED_PROP_VAL_ARR[prop].includes(value)
         const isType = Object.keys(valueExp).some(item => valueExp[item].test(value) && SUPPORTED_PROP_VAL_ARR[prop].includes(ValueType[item]))
         if (!isIn && !isType) {
-          tips(`Property [${prop}] only support value [${SUPPORTED_PROP_VAL_ARR[prop]?.join(',')}] in React Native environment, the value [${value}] does not support!`)
+          tipsType(type)
           return false
         }
         return true
@@ -120,8 +164,8 @@ module.exports = function getSpec ({ warn, error }) {
     return true
   }
   // prop & value 校验：过滤的不合法的属性和属性值
-  const verification = ({ prop, value }, { mode }) => {
-    return verifyProps({ prop, value }, { mode }) && verifyValues({ prop, value }) && ({ prop, value })
+  const verification = ({ prop, value, selector }, { mode }) => {
+    return verifyProps({ prop, value, selector }, { mode }) && verifyValues({ prop, value, selector }) && ({ prop, value })
   }
 
   // 简写转换规则
@@ -148,10 +192,10 @@ module.exports = function getSpec ({ warn, error }) {
     'flex-flow': ['flexDirection', 'flexWrap'],
     'border-radius': ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius']
   }
-  const formatAbbreviation = ({ prop, value }, { mode }) => {
+  const formatAbbreviation = ({ prop, value, selector }, { mode }) => {
     const original = `${prop}:${value}`
     const props = AbbreviationMap[prop]
-    const values = value.trim().split(/\s(?![^()]*\))/)
+    const values = parseValues(value)
     const cssMap = []
     let idx = 0
     let propsIdx = 0
@@ -159,12 +203,12 @@ module.exports = function getSpec ({ warn, error }) {
     while (idx < values.length) {
       const prop = props[propsIdx]
       if (!prop) {
-        error(`the value of [${original}] has not enough props to assign in React Native environment, please check again`)
+        warn(`Value of [${original}] in ${selector} has not enough props to assign, please check again!`)
         break
       }
       const value = values[idx]
       const newProp = hump2dash(prop.replace(/\..+/, ''))
-      if (!verifyProps({ prop: newProp, value }, { mode }, diff === 0)) {
+      if (!verifyProps({ prop: newProp, value, selector }, { mode }, diff === 0)) {
         // 有 ios or android 不支持的 prop，跳过 prop
         if (diff === 0) {
           propsIdx++
@@ -172,7 +216,7 @@ module.exports = function getSpec ({ warn, error }) {
         } else {
           propsIdx++
         }
-      } else if (!verifyValues({ prop: newProp, value }, diff === 0)) {
+      } else if (!verifyValues({ prop: newProp, value, selector }, diff === 0)) {
         // 值不合法 跳过 value
         if (diff === 0) {
           propsIdx++
@@ -212,8 +256,8 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   // margin padding
-  const formatMargins = ({ prop, value }) => {
-    const values = value.trim().split(/\s(?![^()]*\))/)
+  const formatMargins = ({ prop, value, selector }) => {
+    const values = parseValues(value)
     // format
     let suffix = []
     switch (values.length) {
@@ -231,7 +275,7 @@ module.exports = function getSpec ({ warn, error }) {
     return values.map((value, index) => {
       const newProp = `${prop}${suffix[index] || ''}`
       // validate
-      verifyValues({ prop: hump2dash(newProp), value }, false)
+      verifyValues({ prop: hump2dash(newProp), value, selector }, false)
       return {
         prop: newProp,
         value: value
@@ -240,17 +284,17 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   // line-height
-  const formatLineHeight = ({ prop, value }) => {
-    return verifyValues({ prop, value }) && ({
+  const formatLineHeight = ({ prop, value, selector }) => {
+    return verifyValues({ prop, value, selector }) && ({
       prop,
-      value: /^\s*-?\d+(\.\d+)?\s*$/.test(value) ? `${Math.round(value * 100)}%` : value
+      value: /^\s*(-?(\d+(\.\d+)?|\.\d+))\s*$/.test(value) ? `${Math.round(value * 100)}%` : value
     })
   }
 
   // background 相关属性的转换 Todo
   // 仅支持以下属性，不支持其他背景相关的属性
   // /^((?!(-color)).)*background((?!(-color)).)*$/ 包含background且不包含background-color
-  const checkBackgroundImage = ({ prop, value }, { mode }) => {
+  const checkBackgroundImage = ({ prop, value, selector }, { mode }) => {
     const bgPropMap = {
       image: 'background-image',
       color: 'background-color',
@@ -260,17 +304,18 @@ module.exports = function getSpec ({ warn, error }) {
       all: 'background'
     }
     const urlExp = /url\(["']?(.*?)["']?\)/
+    const linerExp = /linear-gradient\(.*\)\s*$/
     switch (prop) {
       case bgPropMap.image: {
         // background-image 仅支持背景图
         const imgUrl = value.match(urlExp)?.[0]
-        if (/.*linear-gradient*./.test(value)) {
-          error(`<linear-gradient()> is not supported in React Native ${mode} environment!`)
-        }
+        const linerVal = value.match(linerExp)?.[0]
         if (imgUrl) {
           return { prop, value: imgUrl }
+        } else if (linerVal) {
+          return { prop, value: linerVal }
         } else {
-          error(`[${prop}] only support value <url()>`)
+          error(`Value of ${prop} in ${selector} selector only support value <url()> or <linear-gradient()>, received ${value}, please check again!`)
           return false
         }
       }
@@ -279,13 +324,13 @@ module.exports = function getSpec ({ warn, error }) {
         // 不支持逗号分隔的多个值：设置多重背景!!!
         // 支持一个值:这个值指定图片的宽度，图片的高度隐式的为 auto
         // 支持两个值:第一个值指定图片的宽度，第二个值指定图片的高度
-        if (value.includes(',')) { // commas are not allowed in values
-          error(`background size value[${value}] does not support commas in React Native ${mode} environment!`)
+        if (parseValues(value, ',').length > 1) { // commas are not allowed in values
+          error(`Value of [${bgPropMap.size}] in ${selector} does not support commas, received [${value}], please check again!`)
           return false
         }
         const values = []
-        value.trim().split(/\s(?![^()]*\))/).forEach(item => {
-          if (verifyValues({ prop, value: item })) {
+        parseValues(value).forEach(item => {
+          if (verifyValues({ prop, value: item, selector })) {
             // 支持 number 值 / container cover auto 枚举
             values.push(item)
           }
@@ -295,45 +340,45 @@ module.exports = function getSpec ({ warn, error }) {
       }
       case bgPropMap.position: {
         const values = []
-        value.trim().split(/\s(?![^()]*\))/).forEach(item => {
-          if (verifyValues({ prop, value: item })) {
+        parseValues(value).forEach(item => {
+          if (verifyValues({ prop, value: item, selector })) {
             // 支持 number 值 /  枚举, center与50%等价
             values.push(item === 'center' ? '50%' : item)
           } else {
-            error(`background position value[${value}] does not support in React Native ${mode} environment!`)
+            error(`Value of [${bgPropMap.size}] in ${selector} does not support commas, received [${value}], please check again!`)
           }
         })
-
         return { prop, value: values }
       }
       case bgPropMap.all: {
         // background: 仅支持 background-image & background-color & background-repeat
         const bgMap = []
-        const values = value.trim().split(/\s(?![^()]*\))/)
+        const values = parseValues(value)
         values.forEach(item => {
           const url = item.match(urlExp)?.[0]
-          if (/.*linear-gradient*./.test(item)) {
-            error(`<linear-gradient()> is not supported in React Native ${mode} environment!`)
-          } else if (url) {
+          const linerVal = item.match(linerExp)?.[0]
+          if (url) {
             bgMap.push({ prop: bgPropMap.image, value: url })
+          } else if (linerVal) {
+            bgMap.push({ prop: bgPropMap.image, value: linerVal })
           } else if (verifyValues({ prop: bgPropMap.color, value: item }, false)) {
             bgMap.push({ prop: bgPropMap.color, value: item })
-          } else if (verifyValues({ prop: bgPropMap.repeat, value: item }, false)) {
+          } else if (verifyValues({ prop: bgPropMap.repeat, value: item, selector }, false)) {
             bgMap.push({ prop: bgPropMap.repeat, value: item })
           }
         })
         return bgMap.length ? bgMap : false
       }
     }
-    unsupportedPropError({ prop, mode })
+    unsupportedPropError({ prop, value, selector }, { mode })
     return false
   }
 
   // border-radius 缩写转换
-  const getBorderRadius = ({ prop, value }, { mode }) => {
-    const values = value.trim().split(/\s(?![^()]*\))/)
+  const getBorderRadius = ({ prop, value, selector }, { mode }) => {
+    const values = parseValues(value)
     if (values.length === 1) {
-      verifyValues({ prop, value }, false)
+      verifyValues({ prop, value, selector }, false)
       return { prop, value }
     } else {
       if (values.length === 2) {
@@ -346,9 +391,9 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   // transform 转换
-  const formatTransform = ({ prop, value }, { mode }) => {
+  const formatTransform = ({ prop, value, selector }, { mode }) => {
     if (Array.isArray(value)) return { prop, value }
-    const values = value.trim().split(/\s(?![^()]*\))/)
+    const values = parseValues(value)
     const transform = []
     values.forEach(item => {
       const match = item.match(/([/\w]+)\(([^)]+)\)/)
@@ -384,10 +429,14 @@ module.exports = function getSpec ({ warn, error }) {
               // 2 个以上的值处理
               key = key.replace('3d', '')
               const vals = val.split(',').splice(0, key === 'rotate' ? 4 : 3)
+              // scale(.5) === scaleX(.5) scaleY(.5)
+              if (vals.length === 1 && key === 'scale') {
+                vals.push(vals[0])
+              }
               const xyz = ['X', 'Y', 'Z']
               transform.push(...vals.map((v, index) => {
                 if (key !== 'rotate' && index > 1) {
-                  unsupportedPropError({ prop: `${key}Z`, mode })
+                  unsupportedPropError({ prop: `${key}Z`, value, selector }, { mode })
                 }
                 return { [`${key}${xyz[index] || ''}`]: v.trim() }
               }))
@@ -397,11 +446,11 @@ module.exports = function getSpec ({ warn, error }) {
           case 'scaleZ':
           default:
             // 不支持的属性处理
-            unsupportedPropError({ prop: key, mode })
+            unsupportedPropError({ prop, value, selector }, { mode })
             break
         }
       } else {
-        error(`Property [${prop}] is invalid, please check the value!`)
+        error(`Property [${prop}] is invalid in ${selector}, received [${value}], please check again!`)
       }
     })
     return {
@@ -414,19 +463,19 @@ module.exports = function getSpec ({ warn, error }) {
     return !isNaN(+value)
   }
 
-  const getIntegersFlex = ({ prop, value }) => {
-    if (isNumber(value) && value >= 0) {
+  const getIntegersFlex = ({ prop, value, selector }) => {
+    if ((isNumber(value) && value >= 0) || cssVariableExp.test(value)) {
       return { prop, value }
     } else {
-      error(`The value of ${prop} accepts any floating point value >= 0.`)
+      error(`Value of [${prop}] in ${selector} accepts any floating point value >= 0, received [${value}], please check again!`)
       return false
     }
   }
 
-  const formatFlex = ({ prop, value }, { mode }) => {
-    let values = value.trim().split(/\s(?![^()]*\))/)
+  const formatFlex = ({ prop, value, selector }) => {
+    let values = parseValues(value)
     if (values.length > 3) {
-      error('The value of prop [flex] supports up to three values')
+      error(`Value of [flex] in ${selector} supports up to three values, received [${value}], please check again!`)
       values = values.splice(0, 3)
     }
     const cssMap = []
@@ -441,20 +490,20 @@ module.exports = function getSpec ({ warn, error }) {
         // value=initial 则 flexShrink=1，其他场景都是0
         cssMap.push(...[{ prop: 'flexGrow', value: 0 }, { prop: 'flexShrink', value: +(values[0] === 'initial') }])
       } else {
-        error('When setting the value of flex to none or initial, only one value is supported.')
+        error(`Value of [${prop}] in ${selector} is invalid, When setting the value of flex to none or initial, only one value is supported.`)
       }
       return cssMap
     }
     // 最后一个值是flexBasis 的有效值（auto或者有单位百分比、px等）
     // flex 0 1 auto flex auto flex 1 auto flex 1 30px flex 1 10% flex 1 1 auto
-    if (!isNumber(lastOne)) {
+    if (!isNumber(lastOne) || !cssVariableExp.test(value)) {
       // 添加 grow 和 shrink
       // 在设置 flex basis 有效值的场景下，如果没有设置 grow 和 shrink，则默认为1
       // 单值 flex: 1 1 <flex-basis>
       // 双值 flex: <flex-grow> 1 <flex-basis>
       // 三值 flex: <flex-grow> <flex-shrink> <flex-basis>
       for (let i = 0; i < 2; i++) {
-        const item = getIntegersFlex({ prop: AbbreviationMap[prop][i], value: isNumber(values[i]) ? values[i] : 1 })
+        const item = getIntegersFlex({ prop: AbbreviationMap[prop][i], value: isNumber(values[i]) || cssVariableExp.test(value) ? values[i] : 1 })
         item && cssMap.push(item)
       }
       if (!isAuto) {
@@ -481,25 +530,25 @@ module.exports = function getSpec ({ warn, error }) {
     return cssMap
   }
 
-  const formatFontFamily = ({ prop, value }) => {
+  const formatFontFamily = ({ prop, value, selector }) => {
     // 去掉引号 取逗号分隔后的第一个
     const newVal = value.replace(/"|'/g, '').trim()
     const values = newVal.split(',').filter(i => i)
     if (!newVal || !values.length) {
-      error(`The value of prop [${prop}: ${value}] is invaild, please check again`)
+      error(`Value of [${prop}] is invalid in ${selector}, received [${value}], please check again!`)
       return false
     } else if (values.length > 1) {
-      warn(`The value of prop [${prop}] only supports one, and the first one is used by default`)
+      warn(`Value of [${prop}] only supports one in ${selector}, received [${value}], and the first one is used by default.`)
     }
     return { prop, value: values[0].trim() }
   }
 
-  const formatBoxShadow = ({ prop, value }, { mode }) => {
+  const formatBoxShadow = ({ prop, value, selector }, { mode }) => {
     value = value.trim()
     if (value === 'none') {
       return false
     }
-    const cssMap = formatAbbreviation({ prop, value }, { mode })
+    const cssMap = formatAbbreviation({ prop, value, selector }, { mode })
     if (mode === 'android') return cssMap
     // ios 阴影需要额外设置 shadowOpacity=1
     cssMap.push({

package/lib/platform/template/wx/index.js

@@ -5,6 +5,7 @@ const normalizeComponentRules = require('../normalize-component-rules')
 const isValidIdentifierStr = require('../../../utils/is-valid-identifier-str')
 const { parseMustacheWithContext, stringifyWithResolveComputed } = require('../../../template-compiler/compiler')
 const normalize = require('../../../utils/normalize')
+const { dash2hump } = require('../../../utils/hump-dash')
 
 module.exports = function getSpec ({ warn, error }) {
   const spec = {
@@ -301,9 +302,7 @@ module.exports = function getSpec ({ warn, error }) {
           const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'ali' })
           const rEventName = runRules(eventRules, eventName, { mode: 'ali' })
           return {
-            name: rPrefix + rEventName.replace(/^./, (matched) => {
-              return matched.toUpperCase()
-            }) + modifierStr,
+            name: dash2hump(rPrefix + '-' + rEventName) + modifierStr,
             value
           }
         },
@@ -312,8 +311,9 @@ module.exports = function getSpec ({ warn, error }) {
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'swan' })
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'swan' })
           const rEventName = runRules(eventRules, eventName, { mode: 'swan' })
+          if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
@@ -324,8 +324,9 @@ module.exports = function getSpec ({ warn, error }) {
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'qq' })
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'qq' })
           const rEventName = runRules(eventRules, eventName, { mode: 'qq' })
+          if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
@@ -336,8 +337,9 @@ module.exports = function getSpec ({ warn, error }) {
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'jd' })
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'jd' })
           const rEventName = runRules(eventRules, eventName, { mode: 'jd' })
+          if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
@@ -360,8 +362,9 @@ module.exports = function getSpec ({ warn, error }) {
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'tt' })
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'tt' })
           const rEventName = runRules(eventRules, eventName, { mode: 'tt' })
+          if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
@@ -372,8 +375,9 @@ module.exports = function getSpec ({ warn, error }) {
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'dd' })
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'dd' })
           const rEventName = runRules(eventRules, eventName, { mode: 'dd' })
+          if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value

package/lib/react/processStyles.js

@@ -31,6 +31,7 @@ module.exports = function (styles, {
         scoped,
         extract: false
       }
+      // todo 建立新的request在内部导出classMap，便于样式模块复用
       loaderContext.importModule(JSON.parse(getRequestString('styles', style, extraOptions, i))).then((result) => {
         if (Array.isArray(result)) {
           result = result.map((item) => {

package/lib/react/processTemplate.js

@@ -113,13 +113,12 @@ module.exports = function (template, {
         try {
           const ignoreMap = Object.assign({
             createElement: true,
-            getComponent: true,
-            rootProps: true
+            getComponent: true
           }, meta.wxsModuleMap)
           const bindResult = bindThis.transform(rawCode, {
             ignoreMap
           })
-          output += `global.currentInject.render = function (createElement, getComponent, rootProps) {
+          output += `global.currentInject.render = function (createElement, getComponent) {
   return ${bindResult.code}
 };\n`
         } catch (e) {