@mpxjs/webpack-plugin 2.10.22 → 2.10.24-test.1

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

@@ -1,9 +1,10 @@
 const { hump2dash } = require('../../../utils/hump-dash')
 const { parseValues } = require('../../../utils/string')
 
-module.exports = function getSpec({ warn, error }) {
+module.exports = function getSpec ({ warn, error }) {
   // React Native 双端都不支持的 CSS property
-  const unsupportedPropExp = /^(white-space|text-overflow|animation|font-variant-caps|font-variant-numeric|font-variant-east-asian|font-variant-alternates|font-variant-ligatures|caret-color|float|clear)$/
+  // border-*-style 在 RN 双端都不支持，仅支持统一的 border-style；shorthand 路径会展开到 border-style，长属性写法直接拦截
+  const unsupportedPropExp = /^(white-space|text-overflow|animation|font-variant-caps|font-variant-numeric|font-variant-east-asian|font-variant-alternates|font-variant-ligatures|caret-color|float|clear|border-(top|right|bottom|left)-style)$/
   const unsupportedPropMode = {
     // React Native ios 不支持的 CSS property
     ios: /^(vertical-align)$/,
@@ -12,12 +13,22 @@ module.exports = function getSpec({ warn, error }) {
     // TODO: rnoh 文档暂未找到 css 属性支持说明，暂时同步 android，同时需要注意此处校验是否有缺失，类似 will-change 之类属性
     harmony: /^(text-decoration-style|text-decoration-color|shadow-offset|shadow-opacity|shadow-radius)$/
   }
+  const isNum = (v) => !isNaN(+v)
   // var(xx)
   const cssVariableExp = /var\(/
   // calc(xx)
   const calcExp = /calc\(/
   const envExp = /env\(/
   const silentVerify = 'silent'
+  const namedColorSet = new Set(['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 hexColorExp = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
+  const colorFnExp = /^(rgb|rgba|hsl|hsla|hwb)\(.+\)$/
+  const valueExp = {
+    integer: { test: isNum },
+    length: /^((-?(\d+(\.\d+)?|\.\d+))(rpx|px|%|vw|vh)?|hairlineWidth)$/,
+    color: { test: (v) => namedColorSet.has(v) || hexColorExp.test(v) || colorFnExp.test(v) }
+  }
+
   // 不支持的属性提示
   const unsupportedPropError = ({ prop, value, selector }, { mode }, isError = true) => {
     const tips = isError ? error : warn
@@ -39,12 +50,18 @@ module.exports = function getSpec({ warn, error }) {
     color: 'color',
     enum: 'enum'
   }
+  // 校验失败提示中的示例值（按类型）。enum 依赖具体 prop 的白名单，在 tipsType 内动态拼。
+  const valueTypeExample = {
+    [ValueType.length]: '2rpx,10%,30rpx',
+    [ValueType.color]: 'rgb,rgba,hsl,hsla,hwb,named color,#000000'
+  }
   // React 属性支持的枚举值
   const SUPPORTED_PROP_VAL_ARR = {
     'box-sizing': ['border-box', 'content-box'],
     'backface-visibility': ['visible', 'hidden'],
     overflow: ['visible', 'hidden', 'scroll'],
-    'border-style': ['solid', 'dotted', 'dashed'],
+    // RN 实测仅支持 solid/dotted/dashed；none 作为 CSS 合法值保留到运行时统一转换为 borderWidth: 0
+    'border-style': ['solid', 'dotted', 'dashed', 'none'],
     'object-fit': ['cover', 'contain', 'fill', 'scale-down'],
     direction: ['inherit', 'ltr', 'rtl'],
     display: ['flex', 'none'],
@@ -77,7 +94,9 @@ module.exports = function getSpec({ warn, error }) {
     'margin-bottom': ['auto', ValueType.length],
     'margin-right': ['auto', ValueType.length],
     'margin-horizontal': ['auto', ValueType.length],
-    'margin-vertical': ['auto', ValueType.length]
+    'margin-vertical': ['auto', ValueType.length],
+    // outline-style 走 enum 校验；与 border-style 对齐，不支持 double / groove / ridge
+    'outline-style': ['solid', 'dotted', 'dashed', 'none']
   }
   // 获取值类型
   const getValueType = (prop) => {
@@ -119,7 +138,7 @@ module.exports = function getSpec({ warn, error }) {
   const verifyValues = ({ prop, value, selector }, isError = true) => {
     prop = prop.trim()
     const rawValue = value.trim()
-    const tips = isError === silentVerify ? () => {} : isError ? error : warn
+    const tips = isError === silentVerify ? () => { } : isError ? error : warn
 
     // CSS 自定义属性（--xxx）是变量定义，不属于 RN 样式属性：
     // 不能按 `-height/-color` 等后缀推断类型去校验，否则会把变量定义错误过滤，导致运行时 var() 取值失败
@@ -145,20 +164,12 @@ module.exports = function getSpec({ warn, error }) {
 
     // calc() / env() 跳过值校验，但保留 rawValue 输出
     if (calcExp.test(valueForVerify) || envExp.test(valueForVerify)) 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 = {
-      integer: /^(-?(\d+(\.\d+)?|\.\d+))$/,
-      length: /^((-?(\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 type = getValueType(prop)
     const tipsType = (type) => {
-      const info = {
-        [ValueType.length]: '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}${info[type] ? `, eg ${info[type]}` : ''}, received [${rawValue}], please check again!`)
+      const example = type === ValueType.enum
+        ? SUPPORTED_PROP_VAL_ARR[prop]?.join(',')
+        : valueTypeExample[type]
+      tips(`Value of ${prop} in ${selector} should be ${type}${example ? `, eg ${example}` : ''}, received [${rawValue}], please check again!`)
     }
     switch (type) {
       case ValueType.length: {
@@ -183,6 +194,17 @@ module.exports = function getSpec({ warn, error }) {
         return true
       }
       case ValueType.enum: {
+        // font-variant 长属性允许空格分隔的多值（如 `small-caps tabular-nums`），
+        // 走整串比对会误杀多值场景；拆 token 后逐个命中枚举白名单即放行。
+        // 输出仍保留 raw value，运行时由 RN `processFontVariant` 自行 `split(' ')` 归一为数组。
+        if (prop === 'font-variant') {
+          const tokens = parseValues(valueForVerify)
+          if (!tokens.length || !tokens.every(t => SUPPORTED_PROP_VAL_ARR[prop].includes(t))) {
+            tipsType(type)
+            return false
+          }
+          return true
+        }
         const isIn = SUPPORTED_PROP_VAL_ARR[prop].includes(valueForVerify)
         const isType = Object.keys(valueExp).some(item => valueExp[item].test(valueForVerify) && SUPPORTED_PROP_VAL_ARR[prop].includes(ValueType[item]))
         if (!isIn && !isType) {
@@ -201,22 +223,15 @@ module.exports = function getSpec({ warn, error }) {
 
   // 简写转换规则
   const AbbreviationMap = {
-    // 仅支持 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'],
-    // 0.76 及以上版本RN支持 box-shadow，实测0.77版本drn红米note12pro Android12 不支持内阴影，其他表现和web一致
-    // 仅支持 offset-x | offset-y | blur-radius | color 排序
-    // 'box-shadow': ['shadowOffset.width', 'shadowOffset.height', 'shadowRadius', 'shadowColor'],
-    // 仅支持 text-decoration-line text-decoration-style text-decoration-color 这种格式
+    // RN 不支持单边 border-*-style，统一展开到 borderStyle
+    // 实测 RN 上当 borderStyle 不为 solid 时单边 border-*-color 不生效，
+    // 这里把单边 color 也统一展开到 borderColor 规避（width 不能这样做，否则会覆盖其它三边）
+    'border-left': ['borderLeftWidth', 'borderStyle', 'borderColor'],
+    'border-right': ['borderRightWidth', 'borderStyle', 'borderColor'],
+    'border-top': ['borderTopWidth', 'borderStyle', 'borderColor'],
+    'border-bottom': ['borderBottomWidth', 'borderStyle', 'borderColor'],
     'text-decoration': ['textDecorationLine', 'textDecorationStyle', 'textDecorationColor'],
     // flex-grow | flex-shrink | flex-basis
     flex: ['flexGrow', 'flexShrink', 'flexBasis'],
@@ -226,17 +241,166 @@ module.exports = function getSpec({ warn, error }) {
     'border-width': ['borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'],
     'border-color': ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'],
     margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],
-    padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft']
+    padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
+    // gap：CSS 2 槽位（row-gap / column-gap），单值复制行列
+    gap: ['rowGap', 'columnGap'],
+    // inset：4 槽位等价 margin 四值语法；RN inset 长属性不稳定，单值也强制展开
+    inset: ['top', 'right', 'bottom', 'left'],
+    // outline：RN 0.74 不支持、0.76+ 生效；走无序展开，与 border 共享缺省补齐
+    outline: ['outlineWidth', 'outlineStyle', 'outlineColor']
   }
+
+  // 这些简写按 CSS 规范允许 token 顺序自由排列，按值类型识别归位
+  const UnorderedAbbreviationMap = {
+    'text-shadow': true,
+    'text-decoration': true,
+    'flex-flow': true,
+    border: true,
+    'border-left': true,
+    'border-right': true,
+    'border-top': true,
+    'border-bottom': true,
+    // outline: <outline-width> || <outline-style> || <outline-color>，顺序不敏感
+    outline: true
+  }
+
+  // CSS border-width: medium 的实测值（各主流浏览器一致取 3px）
+  // CSS 规范允许 medium 实现自定，这里取业界事实标准；调整此值需与运行时同名常量一起改
+  const BORDER_MEDIUM_WIDTH = 3
+  // 简写槽位缺省值表（数据驱动；新增简写或调整缺省值只改这里）
+  // 值即槽位缺省时追加的补齐值；none 清除语义统一保留到运行时处理
+  // 注意：borderColor / textShadowRadius 因 RN 有内置缺省值，无需补齐，不进此表
+  const ShorthandDefaultMap = {
+    border: { borderWidth: BORDER_MEDIUM_WIDTH, borderStyle: 'none' },
+    'border-top': { borderTopWidth: BORDER_MEDIUM_WIDTH, borderStyle: 'none' },
+    'border-right': { borderRightWidth: BORDER_MEDIUM_WIDTH, borderStyle: 'none' },
+    'border-bottom': { borderBottomWidth: BORDER_MEDIUM_WIDTH, borderStyle: 'none' },
+    'border-left': { borderLeftWidth: BORDER_MEDIUM_WIDTH, borderStyle: 'none' },
+    // outline 与 border 缺省值完全对齐：缺 width → BORDER_MEDIUM_WIDTH；
+    // 缺 style → outlineStyle: none，运行时统一转换为 outlineWidth: 0
+    outline: { outlineWidth: BORDER_MEDIUM_WIDTH, outlineStyle: 'none' },
+    'text-shadow': {
+      // textShadowOffset.height 的「width 存在才补 0」由 formatUnorderedAbbreviation 内既有 fallback 处理
+      // 值不带 quote，由后续 style-helper 的 formatValue 统一 JSON.stringify
+      textShadowColor: '#000'
+    }
+    // text-decoration / flex-flow 暂不配置，与 RN 默认一致
+  }
+
+  // 通用补齐：扫描完所有 token 后，将 ShorthandDefaultMap 中未被占用（不在 used）的槽位追加到 cssMap
+  // used 即主循环的占用记录，key 是完整目标 prop 名（含 textShadowOffset.width 这类 dot 路径）
+  const applyShorthandDefaults = (cssMap, prop, used) => {
+    const defaults = ShorthandDefaultMap[prop]
+    if (!defaults) return cssMap
+    for (const target in defaults) {
+      if (!used[target]) {
+        pushAbbreviationValue(cssMap, target, defaults[target])
+      }
+    }
+    return cssMap
+  }
+
+  const pushAbbreviationValue = (cssMap, prop, value) => {
+    if (prop.includes('.')) {
+      // 多个属性值的prop
+      const [main, sub] = prop.split('.')
+      const cssData = cssMap.find(item => item.prop === main)
+      if (cssData) { // 设置过
+        cssData.value[sub] = value
+      } else { // 第一次设置
+        cssMap.push({
+          prop: main,
+          value: {
+            [sub]: value
+          }
+        })
+      }
+    } else {
+      // 单个值的属性
+      cssMap.push({
+        prop,
+        value
+      })
+    }
+  }
+
+  const getVerifiedProp = (props, value, selector, mode, used) => {
+    return props.find(prop => {
+      if (used[prop]) return false
+      const newProp = hump2dash(prop.replace(/\..+/, ''))
+      return verifyValues({ prop: newProp, value, selector }, silentVerify) &&
+        verifyProps({ prop: newProp, value, selector }, { mode }, false)
+    })
+  }
+
+  const formatUnorderedAbbreviation = ({ prop, value, selector }, { mode }) => {
+    const originalValue = value
+    const values = Array.isArray(value) ? value : parseValues(value)
+    const original = `${prop}:${originalValue}`
+    const props = AbbreviationMap[prop]
+    const cssMap = []
+    const used = {}
+    let hasTextDecorationNone = false
+    let hasUnderline = false
+    let hasLineThrough = false
+    // values[0] 而非 originalValue：避免 originalValue 是数组时 toString() 误命中
+    if (values.length === 1 && cssVariableExp.test(values[0])) {
+      return { prop, value: values[0] }
+    }
+    values.forEach(value => {
+      if (prop === 'text-decoration' && verifyValues({ prop: 'text-decoration-line', value, selector }, silentVerify)) {
+        switch (value) {
+          case 'underline':
+            hasUnderline = true
+            return
+          case 'line-through':
+            hasLineThrough = true
+            return
+          case 'none':
+            hasTextDecorationNone = true
+            return
+          // verifyValues 通过但分支未处理的 line token：落到通用 getVerifiedProp 流程
+        }
+      }
+      const matchedProp = getVerifiedProp(props, value, selector, mode, used)
+      if (!matchedProp) {
+        warn(`Value of [${original}] in ${selector} is invalid, received [${value}], please check again!`)
+        return
+      }
+      used[matchedProp] = true
+      pushAbbreviationValue(cssMap, matchedProp, value)
+    })
+    if (prop === 'text-decoration') {
+      if (hasUnderline || hasLineThrough) {
+        pushAbbreviationValue(cssMap, 'textDecorationLine', hasUnderline && hasLineThrough ? 'underline line-through' : hasUnderline ? 'underline' : 'line-through')
+      } else if (hasTextDecorationNone) {
+        pushAbbreviationValue(cssMap, 'textDecorationLine', 'none')
+      }
+    }
+    if (prop === 'text-shadow') {
+      // text-shadow 至少需要 offset-x 与 offset-y；缺省 height 时按 CSS 默认补 0，避免 RN 上 textShadowOffset.height 缺失
+      const shadowOffsetEntry = cssMap.find(item => item.prop === 'textShadowOffset')
+      if (shadowOffsetEntry) {
+        const offsetVal = shadowOffsetEntry.value
+        if (offsetVal && offsetVal.width !== undefined && offsetVal.height === undefined) {
+          warn(`Value of [${original}] in ${selector} is missing offset-y, fallback to 0, please check again!`)
+          offsetVal.height = 0
+        }
+      }
+    }
+    return applyShorthandDefaults(cssMap, prop, used)
+  }
+
   const formatAbbreviation = ({ prop, value, selector }, { mode }) => {
+    if (UnorderedAbbreviationMap[prop]) {
+      return formatUnorderedAbbreviation({ prop, value, selector }, { mode })
+    }
     const original = `${prop}:${value}`
     const props = AbbreviationMap[prop]
     const values = Array.isArray(value) ? value : parseValues(value)
     const cssMap = []
-    // 复合属性不支持单个css var（css var可以接收单个值可以是复合值，复合值运行时不处理，这里前置提示一下）
-    if (values.length === 1 && cssVariableExp.test(value)) {
-      error(`Property ${prop} in ${selector} is abbreviated property and does not support a single CSS var`)
-      return cssMap
+    if (values.length === 1 && cssVariableExp.test(values[0])) {
+      return { prop, value: values[0] }
     }
     let idx = 0
     let propsIdx = 0
@@ -267,28 +431,8 @@ module.exports = function getSpec({ warn, error }) {
         } else {
           idx++
         }
-      } else if (prop.includes('.')) {
-        // 多个属性值的prop
-        const [main, sub] = prop.split('.')
-        const cssData = cssMap.find(item => item.prop === main)
-        if (cssData) { // 设置过
-          cssData.value[sub] = value
-        } else { // 第一次设置
-          cssMap.push({
-            prop: main,
-            value: {
-              [sub]: value
-            }
-          })
-        }
-        idx += 1
-        propsIdx += 1
       } else {
-        // 单个值的属性
-        cssMap.push({
-          prop,
-          value
-        })
+        pushAbbreviationValue(cssMap, prop, value)
         idx += 1
         propsIdx += 1
       }
@@ -296,18 +440,31 @@ module.exports = function getSpec({ warn, error }) {
     return cssMap
   }
 
+  // 单值直接返回（RN 原生支持单值 DimensionValue）的属性：margin / padding / border-* 四值简写
+  // 不含 gap / inset：
+  // - inset：RN inset 长属性非稳定，单值透传会留下不可靠的 inset key，必须展开到 top/right/bottom/left
+  // - gap：RN gap / rowGap / columnGap 只接受 number；单值串虽然后续 style-helper formatValue 也会处理，
+  //   但展开到 rowGap / columnGap 与运行时 runtimeForceExpandCompositeMap 行为保持对齐，更可读
+  const compositeSingleValuePassthrough = (prop) => prop !== 'gap' && prop !== 'inset'
+
   const formatCompositeVal = ({ prop, value, selector }, { mode }) => {
-    const values = parseValues(value).splice(0, 4)
-    switch (values.length) {
-      case 1:
-        verifyValues({ prop, value, selector }, false)
-        return { prop, value }
-      case 2:
-        values.push(...values)
-        break
-      case 3:
-        values.push(values[1])
-        break
+    // 槽位数由 AbbreviationMap[prop].length 决定（gap=2，inset/margin/padding/border-*=4）
+    const count = AbbreviationMap[prop].length
+    const values = parseValues(value).splice(0, count)
+    // 单值短路：margin / padding 等 RN 原生支持单值，原样透传；gap / inset 单值也需展开，不走此捷径
+    if (values.length === 1 && compositeSingleValuePassthrough(prop)) {
+      verifyValues({ prop, value, selector }, false)
+      return { prop, value }
+    }
+    if (count === 2) {
+      // gap：单值复制到行列两槽；双值原样
+      if (values.length === 1) values.push(values[0])
+    } else {
+      switch (values.length) {
+        case 1: values.push(values[0], values[0], values[0]); break // 仅 inset 命中（margin/padding 已被上面短路）
+        case 2: values.push(...values); break
+        case 3: values.push(values[1]); break
+      }
     }
     return formatAbbreviation({ prop, value: values, selector }, { mode })
   }
@@ -318,19 +475,19 @@ module.exports = function getSpec({ warn, error }) {
     if (+value === 0) {
       return {
         prop,
-        value
+        value: 0
       }
     }
     return verifyValues({ prop, value, selector }) && ({
       prop,
-      value: /^\s*(-?(\d+(\.\d+)?|\.\d+))\s*$/.test(value) ? `${Math.round(value * 100)}%` : value
+      value: isNum(value) ? `${Math.round(value * 100)}%` : value
     })
   }
 
   // background 相关属性的转换 Todo
   // 仅支持以下属性，不支持其他背景相关的属性
   // /^((?!(-color)).)*background((?!(-color)).)*$/ 包含background且不包含background-color
-  const checkBackgroundImage = ({ prop, value, selector }, { mode }) => {
+  const formatBackground = ({ prop, value, selector }, { mode }) => {
     const bgPropMap = {
       image: 'background-image',
       color: 'background-color',
@@ -360,15 +517,21 @@ module.exports = function getSpec({ warn, error }) {
       return values.length === 0 ? false : { prop: bgPropMap.size, value: values }
     }
     const formatBackgroundPosition = (value) => {
+      const yAxisKeywords = ['top', 'bottom']
       const values = []
       parseValues(value).forEach(item => {
         if (verifyValues({ prop: bgPropMap.position, 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!`)
+          // 仅丢这一 token，其它 push 的位置仍输出，按规范使用 warn
+          warn(`Value of [${bgPropMap.position}] in ${selector} does not support value [${item}], please check again!`)
         }
       })
+      // CSS 允许 y x 顺序的关键字（如 top left），但输出需要 [x, y] 顺序
+      if (values.length === 2 && yAxisKeywords.includes(values[0])) {
+        ;[values[0], values[1]] = [values[1], values[0]]
+      }
       return { prop: bgPropMap.position, value: values }
     }
     switch (prop) {
@@ -391,8 +554,7 @@ module.exports = function getSpec({ warn, error }) {
       case bgPropMap.all: {
         // background: 支持 image/color/repeat 与 position/size
         if (cssVariableExp.test(value)) {
-          error(`Property [${bgPropMap.all}] in ${selector} is abbreviated property and does not support CSS var`)
-          return false
+          return { prop, value }
         }
         // background: none
         if (value === 'none') {
@@ -409,9 +571,13 @@ module.exports = function getSpec({ warn, error }) {
           if (isSize) {
             if (verifyValues({ prop: bgPropMap.size, value: item, selector }, silentVerify)) {
               sizeValues.push(item)
+            } else {
+              warn(`Value of [${bgPropMap.all}:${value}] in ${selector} does not support background-size token [${item}], please check again!`)
             }
           } else if (verifyValues({ prop: bgPropMap.position, value: item, selector }, silentVerify)) {
             positionValues.push(item)
+          } else {
+            warn(`Value of [${bgPropMap.all}:${value}] in ${selector} does not support background-position token [${item}], please check again!`)
           }
         }
         const handlePositionSize = (item) => {
@@ -445,8 +611,10 @@ module.exports = function getSpec({ warn, error }) {
             bgMap.push({ prop: bgPropMap.color, value: item })
           } else if (verifyValues({ prop: bgPropMap.repeat, value: item, selector }, silentVerify)) {
             bgMap.push({ prop: bgPropMap.repeat, value: item })
-          } else {
-            handlePositionSize(item)
+          } else if (!handlePositionSize(item)) {
+            // 既不是 url / linear-gradient / color / repeat / position-size，也不是合法 position 起头的 token
+            // 典型场景：background-attachment / background-origin / background-clip 及拼写错误，RN 均不支持
+            warn(`Value of [${bgPropMap.all}:${value}] in ${selector} does not support token [${item}], please check again!`)
           }
         })
         if (positionValues.length) {
@@ -495,9 +663,6 @@ module.exports = function getSpec({ warn, error }) {
             key = key === 'rotate' ? 'rotateZ' : key
             transform.push({ [key]: val })
             break
-          case 'matrix':
-            transform.push({ [key]: parseValues(val, ',').map(val => +val) })
-            break
           case 'translate':
           case 'scale':
           case 'skew':
@@ -512,25 +677,69 @@ module.exports = function getSpec({ warn, error }) {
                 vals.push(vals[0])
               }
               const xyz = ['X', 'Y', 'Z']
-              transform.push(...vals.map((v, index) => {
+              vals.forEach((v, index) => {
                 if (key !== 'rotate' && index > 1) {
-                  unsupportedPropError({ prop: `${key}Z`, value, selector }, { mode })
+                  // 局部丢弃：仅这一维 (Z) 对应的子项被推出去也是错的，但 X/Y 仍正常输出，按规范使用 warn
+                  unsupportedPropError({ prop: `${key}Z`, value, selector }, { mode }, false)
+                  return
                 }
-                return { [`${key}${xyz[index] || ''}`]: v.trim() }
-              }))
+                // parseValues 内部已 trim，这里不再重复
+                transform.push({ [`${key}${xyz[index] || ''}`]: v })
+              })
+              break
+            }
+          case 'rotate3d': {
+            const parts = parseValues(val, ',')
+            if (parts.length === 4) {
+              // parseValues 内部已 trim
+              const x = +parts[0]
+              const y = +parts[1]
+              const z = +parts[2]
+              const angle = parts[3]
+              if (x && !y && !z) transform.push({ rotateX: angle })
+              else if (!x && y && !z) transform.push({ rotateY: angle })
+              else if (!x && !y && z) transform.push({ rotateZ: angle })
+              // 仅丢这一 transform 项，其它项仍输出，按规范使用 warn
+              else unsupportedPropError({ prop, value, selector }, { mode }, false)
+            } else {
+              warn(`Value of [transform] in ${selector} does not support rotate3d with ${parts.length} values, only 4 values are supported, please check again!`)
+            }
+            break
+          }
+          case 'matrix':
+            {
+              const matrixValues = parseValues(val, ',').map(val => +val)
+              if (matrixValues.length === 6) {
+                const [a, b, c, d, tx, ty] = matrixValues
+                transform.push({ matrix: [a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1] })
+              } else {
+                // 仅丢这一 transform 项，其它项仍输出，按规范使用 warn
+                warn(`Value of [transform] in ${selector} does not support matrix with ${matrixValues.length} values, only 6 values are supported in ${mode} environment, please check again!`)
+              }
               break
             }
+          case 'matrix3d':
+            {
+              const matrixValues = parseValues(val, ',').map(val => +val)
+              if (matrixValues.length === 16) {
+                transform.push({ matrix: matrixValues })
+              } else {
+                // 仅丢这一 transform 项，其它项仍输出，按规范使用 warn
+                warn(`Value of [transform] in ${selector} does not support matrix3d with ${matrixValues.length} values, only 16 values are supported in ${mode} environment, please check again!`)
+              }
+              break
+            }
+          // 不支持的属性处理
           case 'translateZ':
           case 'scaleZ':
-          case 'rotate3d': // x y z angle
-          case 'matrix3d':
           default:
-            // 不支持的属性处理
-            unsupportedPropError({ prop, value, selector }, { mode })
+            // 仅丢这一 transform 项，其它项仍输出，按规范使用 warn
+            unsupportedPropError({ prop, value, selector }, { mode }, false)
             break
         }
       } else {
-        error(`Property [${prop}] is invalid in ${selector}, received [${value}], please check again!`)
+        // 仅丢这一 transform 项，其它项仍输出，按规范使用 warn
+        warn(`Property [${prop}] is invalid in ${selector}, received [${value}], please check again!`)
       }
     })
     return {
@@ -547,7 +756,8 @@ module.exports = function getSpec({ warn, error }) {
     if ((isNumber(value) && value >= 0) || cssVariableExp.test(value)) {
       return { prop, value }
     } else {
-      error(`Value of [${prop}] in ${selector} accepts any floating point value >= 0, received [${value}], please check again!`)
+      // 仅这一槽位被丢，调用侧 cssMap 仍会输出其它槽位，按规范使用 warn
+      warn(`Value of [${prop}] in ${selector} accepts any floating point value >= 0, received [${value}], please check again!`)
       return false
     }
   }
@@ -616,7 +826,8 @@ module.exports = function getSpec({ warn, error }) {
     } 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() }
+    // parseValues 内部已 trim，这里无需再 trim
+    return { prop, value: values[0] }
   }
 
   // const formatBoxShadow = ({ prop, value, selector }, { mode }) => {
@@ -633,16 +844,90 @@ module.exports = function getSpec({ warn, error }) {
   //   })
   //   return cssMap
   // }
-  const formatBorder = ({ prop, value, selector }, { mode }) => {
+
+  // font 简写专用 formatter。RN 等效子集语法：
+  //   font: [ <font-style> ] [ <font-variant-css2> ] [ <font-weight> ] <font-size> [ / <line-height> ] <font-family>
+  // - 必填项：font-size 与 font-family；缺其一整条声明丢弃（error）
+  // - 非必填 token（font-stretch / 数字型 font-variant-numeric / system 关键字等）：warn 提示并忽略，保留其余槽位
+  // - font-variant 仅支持 small-caps（CSS font 简写规范 <font-variant-css2>），与 RN processFontVariant 同口径（字符串透传，内部 split 为数组）
+  const formatFont = ({ prop, value, selector }, { mode }) => {
     value = value.trim()
-    if (value === 'none') {
-      return {
-        prop: 'borderWidth',
-        value: 0
+    // 单 var() 兜底：编译期无法判断内部 token，原样返回交给运行时解析
+    if (cssVariableExp.test(value) && parseValues(value).length === 1) {
+      return { prop, value }
+    }
+    const tokens = parseValues(value)
+    const cssMap = []
+    let sizeIdx = -1
+    let lineHeight
+    // 1. 定位 font-size（第一个 length 类型 token，可能带 /<line-height>）
+    //   注意：unit-less 数字也命中 length 正则，需要先排除 font-weight 数字（100..900 / bold / normal），
+    //   否则 `font: small-caps 500 28rpx Arial` 会把 500 误判为 fontSize。
+    for (let i = 0; i < tokens.length; i++) {
+      let t = tokens[i]
+      if (t.endsWith('/') && tokens[i + 1]) {
+        t += tokens[i + 1]
+        tokens.splice(i + 1, 1)
+      } else if (tokens[i + 1] === '/' && tokens[i + 2]) {
+        t += `/${tokens[i + 2]}`
+        tokens.splice(i + 1, 2)
+      } else if (tokens[i + 1]?.startsWith('/') && tokens[i + 1].length > 1) {
+        t += tokens[i + 1]
+        tokens.splice(i + 1, 1)
       }
-    } else {
-      return formatAbbreviation({ prop, value, selector }, { mode })
+      const [sizePart, lhPart] = parseValues(t, '/')
+      if (verifyValues({ prop: 'font-weight', value: sizePart, selector }, silentVerify)) continue
+      if (verifyValues({ prop: 'font-size', value: sizePart, selector }, silentVerify)) {
+        sizeIdx = i
+        cssMap.push({ prop: 'fontSize', value: sizePart })
+        if (lhPart) lineHeight = lhPart
+        break
+      }
+    }
+    if (sizeIdx === -1) {
+      // 缺必填 font-size → 整条声明丢弃
+      error(`Value of [${prop}:${value}] in ${selector} is missing required <font-size>, please check again!`)
+      return false
+    }
+    // 2. 前导段（font-size 之前）：识别 font-style / font-variant(small-caps) / font-weight，顺序不敏感
+    for (let i = 0; i < sizeIdx; i++) {
+      const t = tokens[i]
+      if (t === 'normal') continue // 默认值跳过
+      if (verifyValues({ prop: 'font-style', value: t, selector }, silentVerify)) {
+        cssMap.push({ prop: 'fontStyle', value: t })
+      } else if (t === 'small-caps') {
+        // CSS font 简写的 variant 槽位仅 <font-variant-css2>（normal | small-caps）；
+        // 字符串透传，RN processFontVariant 会 split 归一为数组，与 font-variant 长属性同口径
+        cssMap.push({ prop: 'fontVariant', value: t })
+      } else if (verifyValues({ prop: 'font-weight', value: t, selector }, silentVerify)) {
+        cssMap.push({ prop: 'fontWeight', value: t })
+      } else {
+        // font-stretch / 数字型 font-variant-numeric / system 关键字等 → 非必填槽位，warn 并忽略该 token、保留其余
+        warn(`Value of [${prop}:${value}] in ${selector}: token [${t}] is not supported (only font-style / small-caps / font-weight are valid before <font-size>), ignored.`)
+      }
+    }
+    // 3. line-height（数值复用 formatLineHeight 口径换算为百分比）
+    if (lineHeight !== undefined) {
+      const lh = formatLineHeight({ prop: 'line-height', value: lineHeight, selector })
+      if (lh) cssMap.push(lh)
+    }
+    // 4. font-family（font-size 之后剩余部分）
+    const familyStr = tokens.slice(sizeIdx + 1).join(' ').trim()
+    if (!familyStr) {
+      // 缺必填 font-family → 整条声明丢弃
+      error(`Value of [${prop}:${value}] in ${selector} is missing required <font-family>, please check again!`)
+      return false
     }
+    const family = formatFontFamily({ prop: 'font-family', value: familyStr, selector })
+    if (family) cssMap.push({ prop: 'fontFamily', value: family.value })
+    return cssMap
+  }
+
+  // border / outline 简写只负责按值类型展开和补齐缺省值；
+  // none 清除语义不在编译期折叠，统一保留到运行时最终处理。
+  const formatBorder = ({ prop, value, selector }, { mode }) => {
+    value = value.trim()
+    return formatUnorderedAbbreviation({ prop, value, selector }, { mode })
   }
 
   return {
@@ -650,12 +935,12 @@ module.exports = function getSpec({ warn, error }) {
     rules: [
       { // 背景相关属性的处理
         test: /^(background|background-image|background-size|background-position)$/,
-        ios: checkBackgroundImage,
-        android: checkBackgroundImage,
-        harmony: checkBackgroundImage
+        ios: formatBackground,
+        android: formatBackground,
+        harmony: formatBackground
       },
-      { // margin padding 内外边距的处理
-        test: /^(margin|padding|border-radius|border-width|border-color)$/,
+      { // margin padding 内外边距 / gap / inset 的处理（统一走复合值展开）
+        test: /^(margin|padding|border-radius|border-width|border-color|gap|inset)$/,
         ios: formatCompositeVal,
         android: formatCompositeVal,
         harmony: formatCompositeVal
@@ -684,14 +969,20 @@ module.exports = function getSpec({ warn, error }) {
         android: formatFontFamily,
         harmony: formatFontFamily
       },
+      { // font 简写专用处理：必须置于通用 AbbreviationMap 匹配规则之前
+        test: 'font',
+        ios: formatFont,
+        android: formatFont,
+        harmony: formatFont
+      },
       // {
       //   test: 'box-shadow',
       //   ios: formatBoxShadow,
       //   android: formatBoxShadow,
       //   harmony: formatBoxShadow
       // },
-      {
-        test: 'border',
+      { // border / outline 简写共享 formatBorder（按值类型展开 + 缺省补齐；none 清除语义留到运行时处理）
+        test: /^(border|border-left|border-right|border-top|border-bottom|outline)$/,
         ios: formatBorder,
         android: formatBorder,
         harmony: formatBorder