From 1b7049af1a56b0696d2c876ca7dddec849ef5c08 Mon Sep 17 00:00:00 2001 From: "huajingwen@didiglobal.com" Date: Wed, 16 Oct 2024 21:04:57 +0800 Subject: [PATCH 1/2] =?UTF-8?q?margin&padding=20=E5=8D=95=E5=80=BC?= =?UTF-8?q?=E6=9C=89var=E6=88=96=E8=80=85calc=E7=9A=84=E6=97=B6=E5=80=99?= =?UTF-8?q?=E7=BC=96=E8=AF=91=E6=88=90=E4=B8=A4=E4=B8=AA=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/platform/style/wx/index.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/webpack-plugin/lib/platform/style/wx/index.js b/packages/webpack-plugin/lib/platform/style/wx/index.js index 5a1183d7c6..06f66a9e42 100644 --- 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)$/ } + // 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!`) @@ -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]) From 71681fe305e91420d75d8ed63c7d1119f3c5b0f4 Mon Sep 17 00:00:00 2001 From: "huajingwen@didiglobal.com" Date: Wed, 16 Oct 2024 21:20:38 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E7=AE=80=E5=8C=96=E4=B8=80=E4=B8=8Bvar(=20?= =?UTF-8?q?calc(=20=E6=AD=A3=E5=88=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/platform/style/wx/index.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/webpack-plugin/lib/platform/style/wx/index.js b/packages/webpack-plugin/lib/platform/style/wx/index.js index 06f66a9e42..f923e35405 100644 --- a/packages/webpack-plugin/lib/platform/style/wx/index.js +++ b/packages/webpack-plugin/lib/platform/style/wx/index.js @@ -10,9 +10,9 @@ module.exports = function getSpec ({ warn, error }) { android: /^(text-decoration-style|text-decoration-color|shadow-offset|shadow-opacity|shadow-radius)$/ } // var(xx) - const cssVariableExp = /^var\((.+)\)$/ + const cssVariableExp = /var\(/ // calc(xx) - const calcExp = /^calc\((.+)\)$/ + const calcExp = /calc\(/ // 不支持的属性提示 const unsupportedPropError = ({ prop, mode }) => { error(`Property [${prop}] is not supported in React Native ${mode} environment!`) @@ -92,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']