@mpxjs/webpack-plugin 2.9.59 → 2.9.64

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

@@ -2,23 +2,49 @@ const { hump2dash } = require('../../../utils/hump-dash')
 
 module.exports = function getSpec ({ warn, error }) {
   // React Native 双端都不支持的 CSS property
-  const unsupportedPropExp = /^(box-sizing|white-space|text-overflow|animation|transition)$/
+  const unsupportedPropExp = /^(white-space|text-overflow|animation|transition|font-variant-caps|font-variant-numeric|font-variant-east-asian|font-variant-alternates|font-variant-ligatures|background-position|caret-color)$/
   const unsupportedPropMode = {
     // React Native ios 不支持的 CSS property
     ios: /^(vertical-align)$/,
     // React Native android 不支持的 CSS property
     android: /^(text-decoration-style|text-decoration-color|shadow-offset|shadow-opacity|shadow-radius)$/
   }
-  const unsupportedPropError = ({ prop, mode }) => {
-    error(`Property [${prop}] is not supported in React Native ${mode} environment!`)
+  // var(xx)
+  const cssVariableExp = /var\(/
+  // calc(xx)
+  const calcExp = /calc\(/
+  // 不支持的属性提示
+  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, selector }, { mode }, isError = true) => {
+    prop = prop.trim()
+    if (unsupportedPropExp.test(prop) || unsupportedPropMode[mode].test(prop)) {
+      unsupportedPropError({ prop, value, selector }, { mode }, isError)
+      return false
+    }
+    return true
+  }
+  // 值类型
+  const ValueType = {
+    number: 'number',
+    color: 'color',
+    enum: 'enum'
   }
-
   // React 属性支持的枚举值
   const SUPPORTED_PROP_VAL_ARR = {
+    'box-sizing': ['border-box'],
+    'backface-visibility': ['visible', 'hidden'],
     overflow: ['visible', 'hidden', 'scroll'],
     'border-style': ['solid', 'dotted', 'dashed'],
+    'object-fit': ['cover', 'contain', 'fill', 'scale-down'],
+    direction: ['inherit', 'ltr', 'rtl'],
     display: ['flex', 'none'],
-    'pointer-events': ['auto', 'none'],
+    'flex-direction': ['row', 'row-reverse', 'column', 'column-reverse'],
+    'flex-wrap': ['wrap', 'nowrap', 'wrap-reverse'],
+    'pointer-events': ['auto', 'box-none', 'box-only', 'none'],
     'vertical-align': ['auto', 'top', 'bottom', 'center'],
     position: ['relative', 'absolute'],
     'font-variant': ['small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums'],
@@ -26,148 +52,149 @@ module.exports = function getSpec ({ warn, error }) {
     'font-style': ['normal', 'italic'],
     'font-weight': ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
     'text-decoration-line': ['none', 'underline', 'line-through', 'underline line-through'],
+    'text-decoration-style': ['solid', 'double', 'dotted', 'dashed'],
     'text-transform': ['none', 'uppercase', 'lowercase', 'capitalize'],
     'user-select': ['auto', 'text', 'none', 'contain', 'all'],
-    'align-content': ['flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around'],
+    'align-content': ['flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly'],
     'align-items': ['flex-start', 'flex-end', 'center', 'stretch', 'baseline'],
     'align-self': ['auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline'],
-    'justify-content': ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly', 'none'],
-    'background-size': ['contain', 'cover', 'auto'],
-    'background-repeat': ['no-repeat']
+    'justify-content': ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'],
+    'background-size': ['contain', 'cover', 'auto', ValueType.number],
+    'background-position': ['left', 'right', 'top', 'bottom', 'center', ValueType.number],
+    'background-repeat': ['no-repeat'],
+    width: ['auto', ValueType.number],
+    height: ['auto', ValueType.number],
+    'flex-basis': ['auto', ValueType.number],
+    margin: ['auto', ValueType.number],
+    'margin-top': ['auto', ValueType.number],
+    'margin-left': ['auto', ValueType.number],
+    'margin-bottom': ['auto', ValueType.number],
+    'margin-right': ['auto', ValueType.number],
+    'margin-horizontal': ['auto', ValueType.number],
+    'margin-vertical': ['auto', ValueType.number]
   }
-  const propValExp = new RegExp('^(' + Object.keys(SUPPORTED_PROP_VAL_ARR).join('|') + ')$')
-  const isIllegalValue = ({ prop, value }) => SUPPORTED_PROP_VAL_ARR[prop]?.length > 0 && !SUPPORTED_PROP_VAL_ARR[prop].includes(value)
-  const unsupportedValueError = ({ prop, value }) => {
-    error(`Property [${prop}] only support value [${SUPPORTED_PROP_VAL_ARR[prop]?.join(',')}] in React Native environment, the value [${value}] does not support!`)
-  }
-
-  // 过滤的不合法的属性
-  const delRule = ({ prop, value }, { mode }) => {
-    if (unsupportedPropExp.test(prop) || unsupportedPropMode[mode].test(prop)) {
-      unsupportedPropError({ prop, mode })
-      return false
-    }
-    if (isIllegalValue({ prop, value })) {
-      unsupportedValueError({ prop, value })
-      return false
+  // 获取值类型
+  const getValueType = (prop) => {
+    const propValueTypeRules = [
+      // 重要！！优先判断是不是枚举类型
+      [ValueType.enum, new RegExp('^(' + Object.keys(SUPPORTED_PROP_VAL_ARR).join('|') + ')$')],
+      [ValueType.number, /^((opacity|flex-grow|flex-shrink|gap|left|right|top|bottom)|(.+-(width|height|left|right|top|bottom|radius|spacing|size|gap|index|offset|opacity)))$/],
+      [ValueType.color, /^(color|(.+-color))$/]
+    ]
+    for (const rule of propValueTypeRules) {
+      if (rule[1].test(prop)) return rule[0]
     }
   }
-
-  // color & number 值校验
-  const ValueType = {
-    number: 'number',
-    color: 'color',
-    default: 'default' // 不校验
-  }
-  // number 类型支持的单位(包含auto)
-  const numberRegExp = /^\s*((-?\d+(\.\d+)?)(rpx|px|%)?)|(auto)\s*$/
-  // RN 不支持的颜色格式
-  const colorRegExp = /^\s*(lab|lch|oklab|oklch|color-mix|color|hwb|lch|light-dark).*$/
-
-  const verifyValues = ({ prop, value, valueType }) => {
-    // 校验 value 枚举 是否支持
-    switch (valueType) {
-      case ValueType.color: {
-        const isNumber = numberRegExp.test(value)
-        const isUnsupporttedColor = colorRegExp.test(value)
-        isNumber && warn(`Property [${prop}] receives a valid color as value, not a number.`)
-        isUnsupporttedColor && warn('React Native\'s supported color format does not contain [lab,lch,oklab,oklch,color-mix,color,hwb,lch,light-dark].')
-        return !isNumber && !isUnsupporttedColor
+  // 属性值校验
+  const verifyValues = ({ prop, value, selector }, isError = true) => {
+    prop = prop.trim()
+    value = value.trim()
+    const tips = isError ? error : warn
+    if (cssVariableExp.test(value) || calcExp.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|%|vw|vh)?|hairlineWidth)$/,
+      color: new RegExp(('^(' + namedColor.join('|') + ')$') + '|(^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$)|^(rgb|rgba|hsl|hsla|hwb)\\(.+\\)$')
+    }
+    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: {
-        const isNumber = numberRegExp.test(value)
-        !isNumber && warn(`React Native property [${prop}] unit only supports [rpx,px,%]`)
-        return isNumber
+        if (!valueExp.number.test(value)) {
+          tipsType(type)
+          return false
+        }
+        return true
+      }
+      case ValueType.color: {
+        if (!valueExp.color.test(value)) {
+          tipsType(type)
+          return false
+        }
+        return true
       }
-      default:
+      case ValueType.enum: {
+        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) {
+          tipsType(type)
+          return false
+        }
         return true
+      }
     }
+    return true
   }
-  // 统一校验 value type 值类型
-  const checkCommonValue = (valueType) => ({ prop, value }) => {
-    verifyValues({ prop, value, valueType })
+  // prop & value 校验：过滤的不合法的属性和属性值
+  const verification = ({ prop, value, selector }, { mode }) => {
+    return verifyProps({ prop, value, selector }, { mode }) && verifyValues({ prop, value, selector }) && ({ prop, value })
   }
 
   // 简写转换规则
   const AbbreviationMap = {
-    'text-shadow': { // 仅支持 offset-x | offset-y | blur-radius | color 排序
-      'textShadowOffset.width': ValueType.number,
-      'textShadowOffset.height': ValueType.number,
-      textShadowRadius: ValueType.number,
-      textShadowColor: ValueType.color
-    },
-    border: { // 仅支持 width | style | color 这种排序
-      borderWidth: ValueType.number,
-      borderStyle: ValueType.default,
-      borderColor: ValueType.color
-    },
-    'border-left': { // 仅支持 width | style | color 这种排序
-      borderLeftWidth: ValueType.number,
-      borderLeftStyle: ValueType.default,
-      borderLeftColor: ValueType.color
-    },
-    'border-right': { // 仅支持 width | style | color 这种排序
-      borderRightWidth: ValueType.number,
-      borderRightStyle: ValueType.default,
-      borderRightColor: ValueType.color
-    },
-    'border-top': { // 仅支持 width | style | color 这种排序
-      borderTopWidth: ValueType.number,
-      borderTopStyle: ValueType.default,
-      borderTopColor: ValueType.color
-    },
-    'border-bottom': { // 仅支持 width | style | color 这种排序
-      borderBottomWidth: ValueType.number,
-      borderBottomStyle: ValueType.default,
-      borderBottomColor: ValueType.color
-    },
-    'box-shadow': { // 仅支持 offset-x | offset-y | blur-radius | color 排序
-      'shadowOffset.width': ValueType.number,
-      'shadowOffset.height': ValueType.number,
-      shadowRadius: ValueType.number,
-      shadowColor: ValueType.color
-    },
-    'text-decoration': { // 仅支持 text-decoration-line text-decoration-style text-decoration-color 这种格式
-      textDecorationLine: ValueType.default,
-      textDecorationStyle: ValueType.default,
-      textDecorationColor: ValueType.color
-    },
-    flex: { // /* Three values: flex-grow | flex-shrink | flex-basis */
-      flexGrow: ValueType.number,
-      flexShrink: ValueType.number,
-      flexBasis: ValueType.number
-    },
-    'flex-flow': { // 仅支持 flex-flow: <'flex-direction'> or flex-flow: <'flex-direction'> and <'flex-wrap'>
-      flexDirection: ValueType.default,
-      flexWrap: ValueType.default
-    },
-    'border-radius': {
-      borderTopLeftRadius: ValueType.number,
-      borderTopRightRadius: ValueType.number,
-      borderBottomRightRadius: ValueType.number,
-      borderBottomLeftRadius: ValueType.number
-    }
+    // 仅支持 offset-x | offset-y | blur-radius | color 排序
+    'text-shadow': ['textShadowOffset.width', 'textShadowOffset.height', 'textShadowRadius', 'textShadowColor'],
+    // 仅支持 width | style | color 这种排序
+    border: ['borderWidth', 'borderStyle', 'borderColor'],
+    // 仅支持 width | style | color 这种排序
+    'border-left': ['borderLeftWidth', 'borderLeftStyle', 'borderLeftColor'],
+    // 仅支持 width | style | color 这种排序
+    'border-right': ['borderRightWidth', 'borderRightStyle', 'borderRightColor'],
+    // 仅支持 width | style | color 这种排序
+    'border-top': ['borderTopWidth', 'borderTopStyle', 'borderTopColor'],
+    // 仅支持 width | style | color 这种排序
+    'border-bottom': ['borderBottomWidth', 'borderBottomStyle', 'borderBottomColor'],
+    // 仅支持 offset-x | offset-y | blur-radius | color 排序
+    'box-shadow': ['shadowOffset.width', 'shadowOffset.height', 'shadowRadius', 'shadowColor'],
+    // 仅支持 text-decoration-line text-decoration-style text-decoration-color 这种格式
+    'text-decoration': ['textDecorationLine', 'textDecorationStyle', 'textDecorationColor'],
+    // flex-grow | flex-shrink | flex-basis
+    flex: ['flexGrow', 'flexShrink', 'flexBasis'],
+    // flex-flow: <'flex-direction'> or flex-flow: <'flex-direction'> and <'flex-wrap'>
+    'flex-flow': ['flexDirection', 'flexWrap'],
+    'border-radius': ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius']
   }
-  const formatAbbreviation = ({ value, keyMap }) => {
+  const formatAbbreviation = ({ prop, value, selector }, { mode }) => {
+    const original = `${prop}:${value}`
+    const props = AbbreviationMap[prop]
     const values = value.trim().split(/\s(?![^()]*\))/)
     const cssMap = []
-    const props = Object.getOwnPropertyNames(keyMap)
     let idx = 0
     let propsIdx = 0
-    // 按值的个数循环赋值
-    while (idx < values.length || propsIdx < props.length) {
+    const diff = values.length - props.length
+    while (idx < values.length) {
       const prop = props[propsIdx]
-      const valueType = keyMap[prop]
-      const dashProp = hump2dash(prop)
+      if (!prop) {
+        error(`Value of [${original}] in ${selector} has not enough props to assign, please check again!`)
+        break
+      }
       const value = values[idx]
-      if (isIllegalValue({ prop: dashProp, value })) {
-        // 过滤 rn prop 不支持 value
-        unsupportedValueError({ prop: dashProp, value })
-        idx += 1
-        propsIdx += 1
-      } else if (!verifyValues({ prop, value, valueType })) {
-        // 校验 value 类型，类型不符则匹配下一个value
-        idx += 1
+      const newProp = hump2dash(prop.replace(/\..+/, ''))
+      if (!verifyProps({ prop: newProp, value, selector }, { mode }, diff === 0)) {
+        // 有 ios or android 不支持的 prop，跳过 prop
+        if (diff === 0) {
+          propsIdx++
+          idx++
+        } else {
+          propsIdx++
+        }
+      } else if (!verifyValues({ prop: newProp, value, selector }, diff === 0)) {
+        // 值不合法 跳过 value
+        if (diff === 0) {
+          propsIdx++
+          idx++
+        } else if (diff < 0) {
+          propsIdx++
+        } else {
+          idx++
+        }
       } else if (prop.includes('.')) {
         // 多个属性值的prop
         const [main, sub] = prop.split('.')
@@ -196,30 +223,10 @@ module.exports = function getSpec ({ warn, error }) {
     }
     return cssMap
   }
-  const getAbbreviation = ({ prop, value }) => {
-    const keyMap = AbbreviationMap[prop]
-    return formatAbbreviation({ prop, value, keyMap })
-  }
-  // 简写过滤安卓不支持的类型
-  const getAbbreviationAndroid = ({ prop, value }, { mode }) => {
-    const cssMap = getAbbreviation({ prop, value })
-    // android 不支持的 shadowOffset shadowOpacity shadowRadius textDecorationStyle 和 textDecorationStyle
-    return cssMap.filter(({ prop }) => { // 不支持的 prop 提示 & 过滤不支持的 prop
-      const dashProp = hump2dash(prop)
-      if (unsupportedPropMode.android.test(dashProp)) {
-        unsupportedPropError({ prop: dashProp, mode })
-        return false
-      }
-      return true
-    })
-  }
 
-  const formatMargins = ({ prop, value }) => {
+  // margin padding
+  const formatMargins = ({ prop, value, selector }) => {
     const values = value.trim().split(/\s(?![^()]*\))/)
-    // validate
-    for (let i = 0; i < values.length; i++) {
-      verifyValues({ prop, value: values[i], valueType: ValueType.number })
-    }
     // format
     let suffix = []
     switch (values.length) {
@@ -235,65 +242,49 @@ module.exports = function getSpec ({ warn, error }) {
         break
     }
     return values.map((value, index) => {
+      const newProp = `${prop}${suffix[index] || ''}`
+      // validate
+      verifyValues({ prop: hump2dash(newProp), value, selector }, false)
       return {
-        prop: `${prop}${suffix[index] || ''}`,
+        prop: newProp,
         value: value
       }
     })
   }
 
-  const formatLineHeight = ({ prop, value }) => {
-    if (!verifyValues({ prop, value, valueType: ValueType.number })) return false
-
-    return {
+  // line-height
+  const formatLineHeight = ({ prop, value, selector }) => {
+    return verifyValues({ prop, value, selector }) && ({
       prop,
       value: /^\s*-?\d+(\.\d+)?\s*$/.test(value) ? `${Math.round(value * 100)}%` : value
-    }
-  }
-
-  const getFontVariant = ({ prop, value }) => {
-    if (/^(font-variant-caps|font-variant-numeric|font-variant-east-asian|font-variant-alternates|font-variant-ligatures)$/.test(prop)) {
-      error(`Property [${prop}] is not supported in React Native environment, please replace [font-variant]!`)
-    }
-    prop = 'font-variant'
-    // 校验枚举值
-    if (isIllegalValue({ prop, value })) {
-      unsupportedValueError({ prop, value })
-      return false
-    }
-    return {
-      prop,
-      value
-    }
+    })
   }
 
-  // background 相关属性的处理，仅支持以下属性，不支持其他背景相关的属性：/^((?!(-color)).)*background((?!(-color)).)*$/ 包含background且不包含background-color
-  const checkBackgroundImage = ({ prop, value }, { mode }) => {
+  // background 相关属性的转换 Todo
+  // 仅支持以下属性，不支持其他背景相关的属性
+  // /^((?!(-color)).)*background((?!(-color)).)*$/ 包含background且不包含background-color
+  const checkBackgroundImage = ({ prop, value, selector }, { mode }) => {
     const bgPropMap = {
       image: 'background-image',
       color: 'background-color',
       size: 'background-size',
       repeat: 'background-repeat',
-      // position: 'background-position',
+      position: 'background-position',
       all: 'background'
     }
     const urlExp = /url\(["']?(.*?)["']?\)/
+    const linerExp = /linear-gradient\(["']?(.*?)["']?\)/
     switch (prop) {
-      case bgPropMap.color: {
-        // background-color 背景色校验一下颜色值
-        verifyValues({ prop, value, valueType: ValueType.color })
-        return { prop, value }
-      }
       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
         }
       }
@@ -303,28 +294,30 @@ 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!`)
+          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 (numberRegExp.test(item) || !isIllegalValue({ prop, value: item })) {
+          if (verifyValues({ prop, value: item, selector })) {
             // 支持 number 值 / container cover auto 枚举
             values.push(item)
-          } else {
-            error(`background size value[${value}] does not support in React Native ${mode} environment!`)
           }
         })
         // value 无有效值时返回false
         return values.length === 0 ? false : { prop, value: values }
       }
-      case bgPropMap.repeat: {
-        // background-repeat 仅支持 no-repeat
-        if (isIllegalValue({ prop, value })) {
-          unsupportedValueError({ prop, value })
-          return false
-        }
-        return { prop, value }
+      case bgPropMap.position: {
+        const values = []
+        value.trim().split(/\s(?![^()]*\))/).forEach(item => {
+          if (verifyValues({ prop, value: item, selector })) {
+            // 支持 number 值 /  枚举, center与50%等价
+            values.push(item === 'center' ? '50%' : item)
+          } else {
+            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
@@ -332,43 +325,48 @@ module.exports = function getSpec ({ warn, error }) {
         const values = value.trim().split(/\s(?![^()]*\))/)
         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 (/^(#[0-9a-f]{3}$|#[0-9a-f]{6}$|rgb|rgba)/i.test(item)) {
+          } 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 (SUPPORTED_PROP_VAL_ARR[bgPropMap.repeat].includes(item)) {
+          } else if (verifyValues({ prop: bgPropMap.repeat, value: item, selector }, false)) {
             bgMap.push({ prop: bgPropMap.repeat, value: item })
           }
-          // else if (SUPPORTED_PROP_VAL_ARR[bgPropMap.size].includes(item)) {
-          //   bgMap.push({ prop: bgPropMap.size, value: item })
-          // }
         })
         return bgMap.length ? bgMap : false
       }
     }
-    unsupportedPropError({ prop, mode })
+    unsupportedPropError({ prop, value, selector }, { mode })
     return false
   }
 
-  const getBorderRadius = ({ prop, value }) => {
+  // border-radius 缩写转换
+  const getBorderRadius = ({ prop, value, selector }, { mode }) => {
     const values = value.trim().split(/\s(?![^()]*\))/)
     if (values.length === 1) {
-      verifyValues({ prop, value, valueType: ValueType.number })
+      verifyValues({ prop, value, selector }, false)
       return { prop, value }
     } else {
-      return getAbbreviation({ prop, value })
+      if (values.length === 2) {
+        values.push(...values)
+      } else if (values.length === 3) {
+        values.push(values[1])
+      }
+      return formatAbbreviation({ prop, value: values.join(' ') }, { mode })
     }
   }
 
-  const formatTransform = ({ prop, value }, { mode }) => {
+  // transform 转换
+  const formatTransform = ({ prop, value, selector }, { mode }) => {
     if (Array.isArray(value)) return { prop, value }
     const values = value.trim().split(/\s(?![^()]*\))/)
     const transform = []
     values.forEach(item => {
       const match = item.match(/([/\w]+)\(([^)]+)\)/)
-      if (match.length >= 3) {
+      if (match && match.length >= 3) {
         let key = match[1]
         const val = match[2]
         switch (key) {
@@ -382,6 +380,7 @@ module.exports = function getSpec ({ warn, error }) {
           case 'rotate':
           case 'skewX':
           case 'skewY':
+          case 'perspective':
             // 单个值处理
             transform.push({ [key]: val })
             break
@@ -395,28 +394,28 @@ module.exports = function getSpec ({ warn, error }) {
           case 'rotate3d': // x y z angle
           case 'translate3d': // x y 支持 z不支持
           case 'scale3d': // x y 支持 z不支持
-          {
-            // 2 个以上的值处理
-            key = key.replace('3d', '')
-            const vals = val.split(',').splice(0, key === 'rotate' ? 4 : 3)
-            const xyz = ['X', 'Y', 'Z']
-            transform.push(...vals.map((v, index) => {
-              if (key !== 'rotate' && index > 1) {
-                unsupportedPropError({ prop: `${key}Z`, mode })
-              }
-              return { [`${key}${xyz[index] || ''}`]: v.trim() }
-            }))
-            break
-          }
+            {
+              // 2 个以上的值处理
+              key = key.replace('3d', '')
+              const vals = val.split(',').splice(0, key === 'rotate' ? 4 : 3)
+              const xyz = ['X', 'Y', 'Z']
+              transform.push(...vals.map((v, index) => {
+                if (key !== 'rotate' && index > 1) {
+                  unsupportedPropError({ prop: `${key}Z`, value, selector }, { mode })
+                }
+                return { [`${key}${xyz[index] || ''}`]: v.trim() }
+              }))
+              break
+            }
           case 'translateZ':
           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 {
@@ -425,47 +424,113 @@ module.exports = function getSpec ({ warn, error }) {
     }
   }
 
-  const spec = {
+  const isNumber = (value) => {
+    return !isNaN(+value)
+  }
+
+  const getIntegersFlex = ({ prop, value, selector }) => {
+    if (isNumber(value) && value >= 0) {
+      return { prop, value }
+    } else {
+      error(`Value of [${prop}] in ${selector} accepts any floating point value >= 0, received [${value}], please check again!`)
+      return false
+    }
+  }
+
+  const formatFlex = ({ prop, value, selector }) => {
+    let values = value.trim().split(/\s(?![^()]*\))/)
+    if (values.length > 3) {
+      error(`Value of [flex] in ${selector} supports up to three values, received [${value}], please check again!`)
+      values = values.splice(0, 3)
+    }
+    const cssMap = []
+    const lastOne = values[values.length - 1]
+    const isAuto = lastOne === 'auto'
+    // 枚举值 none initial
+    if (values.includes('initial') || values.includes('none')) {
+      // css flex: initial ===> flex: 0 1 ===> rn flex 0 1
+      // css flex: none ===> css flex: 0 0 ===> rn flex 0 0
+      if (values.length === 1) {
+        // 添加 basis 和 shrink
+        // value=initial 则 flexShrink=1，其他场景都是0
+        cssMap.push(...[{ prop: 'flexGrow', value: 0 }, { prop: 'flexShrink', value: +(values[0] === 'initial') }])
+      } else {
+        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)) {
+      // 添加 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 })
+        item && cssMap.push(item)
+      }
+      if (!isAuto) {
+        // 有单位(百分比、px等) 的 value 赋值 flexBasis，auto 不处理
+        cssMap.push({
+          prop: 'flexBasis',
+          value: lastOne
+        })
+      }
+      return cssMap
+    }
+    // 纯数值：value 按flex-grow flex-shrink flex-basis 顺序赋值
+    // 兜底 shrink & basis
+    if (values.length === 1) {
+      values.push(...[1, 0])
+    } else if (values.length === 2) {
+      values.push(0)
+    }
+    // 循环赋值
+    for (let i = 0; i < values.length; i++) {
+      const item = getIntegersFlex({ prop: AbbreviationMap[prop][i], value: values[i] })
+      item && cssMap.push(item)
+    }
+    return cssMap
+  }
+
+  const formatFontFamily = ({ prop, value, selector }) => {
+    // 去掉引号 取逗号分隔后的第一个
+    const newVal = value.replace(/"|'/g, '').trim()
+    const values = newVal.split(',').filter(i => i)
+    if (!newVal || !values.length) {
+      error(`Value of [${prop}] is invalid in ${selector}, received [${value}], please check again!`)
+      return false
+    } else if (values.length > 1) {
+      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, selector }, { mode }) => {
+    value = value.trim()
+    if (value === 'none') {
+      return false
+    }
+    const cssMap = formatAbbreviation({ prop, value, selector }, { mode })
+    if (mode === 'android') return cssMap
+    // ios 阴影需要额外设置 shadowOpacity=1
+    cssMap.push({
+      prop: 'shadowOpacity',
+      value: 1
+    })
+    return cssMap
+  }
+
+  return {
     supportedModes: ['ios', 'android'],
     rules: [
       { // 背景相关属性的处理
-        test: /^(background|background-image|background-color|background-size|background-repeat|background-position)$/,
+        test: /^(background|background-image|background-size|background-position)$/,
         ios: checkBackgroundImage,
         android: checkBackgroundImage
       },
-      { // RN 不支持的 CSS property
-        test: unsupportedPropExp,
-        ios: delRule,
-        android: delRule
-      },
-      { // React Native android 不支持的 CSS property
-        test: unsupportedPropMode.android,
-        android: delRule
-      },
-      { // React Native ios 不支持的 CSS property
-        test: unsupportedPropMode.ios,
-        ios: delRule
-      },
-      { // RN 支持的 CSS property value
-        test: propValExp,
-        ios: delRule,
-        android: delRule
-      },
-      {
-        test: 'box-shadow',
-        ios: getAbbreviation,
-        android: getAbbreviationAndroid
-      },
-      {
-        test: 'text-decoration',
-        ios: getAbbreviation,
-        android: getAbbreviationAndroid
-      },
-      {
-        test: /^(font-variant|font-variant-caps|font-variant-numeric|font-variant-east-asian|font-variant-alternates|font-variant-ligatures)$/,
-        ios: getFontVariant,
-        android: getFontVariant
-      },
       {
         test: 'border-radius',
         ios: getBorderRadius,
@@ -476,12 +541,6 @@ module.exports = function getSpec ({ warn, error }) {
         ios: formatMargins,
         android: formatMargins
       },
-      // 通用的简写格式匹配
-      {
-        test: new RegExp('^(' + Object.keys(AbbreviationMap).join('|') + ')$'),
-        ios: getAbbreviation,
-        android: getAbbreviation
-      },
       { // line-height 换算
         test: 'line-height',
         ios: formatLineHeight,
@@ -492,18 +551,33 @@ module.exports = function getSpec ({ warn, error }) {
         ios: formatTransform,
         android: formatTransform
       },
-      // 值类型校验放到最后
-      { // color 颜色值校验 color xx-color 等
-        test: /^(color|(.+-color))$/,
-        ios: checkCommonValue(ValueType.color),
-        android: checkCommonValue(ValueType.color)
+      {
+        test: 'flex',
+        ios: formatFlex,
+        android: formatFlex
+      },
+      {
+        test: 'font-family',
+        ios: formatFontFamily,
+        android: formatFontFamily
       },
-      { // number 值校验 // width height xx-left xx-top 等
-        test: /^((width|height)|(.+-(left|right|top|bottom|radius|spacing|size)))$/,
-        ios: checkCommonValue(ValueType.number),
-        android: checkCommonValue(ValueType.number)
+      {
+        test: 'box-shadow',
+        ios: formatBoxShadow,
+        android: formatBoxShadow
+      },
+      // 通用的简写格式匹配
+      {
+        test: new RegExp('^(' + Object.keys(AbbreviationMap).join('|') + ')$'),
+        ios: formatAbbreviation,
+        android: formatAbbreviation
+      },
+      // 属性&属性值校验
+      {
+        test: () => true,
+        ios: verification,
+        android: verification
       }
     ]
   }
-  return spec
 }