Merge pull request #1656 from didi/feat-style-rules-241016

margin&padding 单值有var或者calc的时候编译成两个值
didi · Oct 16, 2024 · 9ed5795 · 9ed5795
2 parents cb720ac + 71681fe
commit 9ed5795
Showing 1 changed file with 17 additions and 13 deletions.
diff --git a/packages/webpack-plugin/lib/platform/style/wx/index.js b/packages/webpack-plugin/lib/platform/style/wx/index.js
@@ -9,7 +9,10 @@ module.exports = function getSpec ({ warn, error }) {
     // React Native android 不支持的 CSS property
     android: /^(text-decoration-style|text-decoration-color|shadow-offset|shadow-opacity|shadow-radius)$/
   }
-  const cssVariableExp = /^var\((.+)\)$/
+  // var(xx)
+  const cssVariableExp = /var\(/
+  // calc(xx)
+  const calcExp = /calc\(/
   // 不支持的属性提示
   const unsupportedPropError = ({ prop, mode }) => {
     error(`Property [${prop}] is not supported in React Native ${mode} environment!`)
@@ -89,12 +92,12 @@ module.exports = function getSpec ({ warn, error }) {
     const tips = isError ? error : warn
     if (cssVariableExp.test(value)) {
       // css variable 类型校验
-      const newVal = (value.match(cssVariableExp)?.[1] || '').split(',')
-      const variable = newVal?.[0]
-      if (!variable || !/^--/.test(variable)) {
-        tips(`The css variable [${prop}:${value}] is invalid, please check again`)
-        return false
-      }
+      // const newVal = (value.match(cssVariableExp)?.[1] || '').split(',')
+      // const variable = newVal?.[0]
+      // if (!variable || !/^--/.test(variable)) {
+      //   tips(`The css variable [${prop}:${value}] is invalid, please check again`)
+      //   return false
+      // }
       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']
@@ -239,6 +242,11 @@ module.exports = function getSpec ({ warn, error }) {
         suffix = ['Top', 'Right', 'Bottom', 'Left']
         break
     }
+    if (values.length === 1 && (calcExp.test(value) || cssVariableExp.test(value))) {
+      // calc() or var() 则分开输出
+      suffix = ['Vertical', 'Horizontal']
+      values.push(values[0])
+    }
     return values.map((value, index) => {
       const newProp = `${prop}${suffix[index] || ''}`
       // validate
@@ -343,15 +351,11 @@ module.exports = function getSpec ({ warn, error }) {
   // border-radius 缩写转换
   const getBorderRadius = ({ prop, value }, { mode }) => {
     const values = value.trim().split(/\s(?![^()]*\))/)
-    if (values.length === 1 && !/^(-?\d+(\.\d+)?)%$/.test(value)) {
-      // 单值且非number%情况下 直接以单值输出（%情况需要展示到组件内计算具体值）
+    if (values.length === 1) {
       verifyValues({ prop, value }, false)
       return { prop, value }
     } else {
-      if (values.length === 1) {
-        const val = values[0]
-        values.push(...[val, val, val])
-      } else if (values.length === 2) {
+      if (values.length === 2) {
         values.push(...values)
       } else if (values.length === 3) {
         values.push(values[1])