From 5326576a2f97e6e65575682f59756542de922cd0 Mon Sep 17 00:00:00 2001 From: huajingwen Date: Fri, 20 Dec 2024 18:01:32 +0800 Subject: [PATCH 1/7] fix transform var --- packages/webpack-plugin/lib/platform/style/wx/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/platform/style/wx/index.js b/packages/webpack-plugin/lib/platform/style/wx/index.js index 8a8cc97e3..327ff32b0 100644 --- a/packages/webpack-plugin/lib/platform/style/wx/index.js +++ b/packages/webpack-plugin/lib/platform/style/wx/index.js @@ -374,7 +374,7 @@ module.exports = function getSpec ({ warn, error }) { // transform 转换 const formatTransform = ({ prop, value, selector }, { mode }) => { // css var & 数组直接返回 - if (Array.isArray(value) || calcExp.test(value)) return { prop, value } + if (Array.isArray(value) || cssVariableExp.test(value)) return { prop, value } const values = parseValues(value) const transform = [] values.forEach(item => { From b6f616c01d07056c7de5368391608a17157c7083 Mon Sep 17 00:00:00 2001 From: wenwen Date: Mon, 23 Dec 2024 13:15:01 +0800 Subject: [PATCH 2/7] add cssVariableExp --- packages/webpack-plugin/lib/platform/style/wx/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/platform/style/wx/index.js b/packages/webpack-plugin/lib/platform/style/wx/index.js index 327ff32b0..702f199f5 100644 --- a/packages/webpack-plugin/lib/platform/style/wx/index.js +++ b/packages/webpack-plugin/lib/platform/style/wx/index.js @@ -374,7 +374,7 @@ module.exports = function getSpec ({ warn, error }) { // transform 转换 const formatTransform = ({ prop, value, selector }, { mode }) => { // css var & 数组直接返回 - if (Array.isArray(value) || cssVariableExp.test(value)) return { prop, value } + if (Array.isArray(value) || cssVariableExp.test(value) || calcExp.test(value)) return { prop, value } const values = parseValues(value) const transform = [] values.forEach(item => { From 664bb7020d1c409a62e22c9abcf634cb8ff8ffe1 Mon Sep 17 00:00:00 2001 From: wenwen Date: Mon, 23 Dec 2024 15:12:45 +0800 Subject: [PATCH 3/7] =?UTF-8?q?add=20parseValueFromParentheses=20=E8=A7=A3?= =?UTF-8?q?=E6=9E=90=20translateY(10px)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/platform/style/wx/index.js | 128 ++++++++++-------- .../components/react/useAnimationHooks.ts | 106 +++++++++------ 2 files changed, 138 insertions(+), 96 deletions(-) diff --git a/packages/webpack-plugin/lib/platform/style/wx/index.js b/packages/webpack-plugin/lib/platform/style/wx/index.js index 702f199f5..d28c27947 100644 --- a/packages/webpack-plugin/lib/platform/style/wx/index.js +++ b/packages/webpack-plugin/lib/platform/style/wx/index.js @@ -108,6 +108,32 @@ module.exports = function getSpec ({ warn, error }) { } return result } + // 解析 translateY(10px) 这种结构 + // 括号外作为key返回，括号内作为val返回 + const parseValueFromParentheses = (values) => { + let i = -1 + const len = values.length + let stack = 0 + let start = 0 + let key = '' + let val = '' + while (++i < len) { + const char = values[i] + if (char === '(') { + if (stack === 0) { + start = i + key = values.substring(0, start) + } + stack++ + } else if (char === ')') { + stack-- + if (stack === 0) { + val = values.substring(start, i + 1) + } + } + } + return { key, val } + } // const getDefaultValueFromVar = (str) => { // const totalVarExp = /^var\((.+)\)$/ // if (!totalVarExp.test(str)) return str @@ -374,65 +400,59 @@ module.exports = function getSpec ({ warn, error }) { // transform 转换 const formatTransform = ({ prop, value, selector }, { mode }) => { // css var & 数组直接返回 - if (Array.isArray(value) || cssVariableExp.test(value) || calcExp.test(value)) return { prop, value } + if (Array.isArray(value) || cssVariableExp.test(value)) return { prop, value } const values = parseValues(value) const transform = [] values.forEach(item => { - const match = item.match(/([/\w]+)\(([^)]+)\)/) - if (match && match.length >= 3) { - let key = match[1] - const val = match[2] - switch (key) { - case 'translateX': - case 'translateY': - case 'scaleX': - case 'scaleY': - case 'rotateX': - case 'rotateY': - case 'rotateZ': - case 'rotate': - case 'skewX': - case 'skewY': - case 'perspective': - // 单个值处理 - transform.push({ [key]: val }) - break - case 'matrix': - case 'matrix3d': - transform.push({ [key]: parseValues(val, ',').map(val => +val) }) - break - case 'translate': - case 'scale': - case 'skew': - case 'rotate3d': // x y z angle - case 'translate3d': // x y 支持 z不支持 - case 'scale3d': // x y 支持 z不支持 - { - // 2 个以上的值处理 - key = key.replace('3d', '') - const vals = parseValues(val, ',').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`, value, selector }, { mode }) - } - return { [`${key}${xyz[index] || ''}`]: v.trim() } - })) - break + let { key, val } = parseValueFromParentheses(item) + switch (key) { + case 'translateX': + case 'translateY': + case 'scaleX': + case 'scaleY': + case 'rotateX': + case 'rotateY': + case 'rotateZ': + case 'rotate': + case 'skewX': + case 'skewY': + case 'perspective': + // 单个值处理 + transform.push({ [key]: val }) + break + case 'matrix': + case 'matrix3d': + transform.push({ [key]: parseValues(val, ',').map(val => +val) }) + break + case 'translate': + case 'scale': + case 'skew': + case 'rotate3d': // x y z angle + case 'translate3d': // x y 支持 z不支持 + case 'scale3d': // x y 支持 z不支持 + { + // 2 个以上的值处理 + key = key.replace('3d', '') + const vals = parseValues(val, ',').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`, value, selector }, { mode }) } - case 'translateZ': - case 'scaleZ': - default: - // 不支持的属性处理 - unsupportedPropError({ prop, value, selector }, { mode }) - break + return { [`${key}${xyz[index] || ''}`]: v.trim() } + })) + break } - } else { - error(`Property [${prop}] is invalid in ${selector}, received [${value}], please check again!`) + case 'translateZ': + case 'scaleZ': + default: + // 不支持的属性处理 + unsupportedPropError({ prop, value, selector }, { mode }) + break } }) return { diff --git a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts index 77d1ac050..4dd83152e 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts @@ -105,54 +105,76 @@ const parseValues = (str: string, char = ' ') => { } return result } +// 解析 translateY(10px) 这种结构 +// 括号外作为key返回，括号内作为val返回 +const parseValueFromParentheses = (values: string) => { + let i = -1 + const len = values.length + let stack = 0 + let start = 0 + let key = '' + let val = '' + while (++i < len) { + const char = values[i] + if (char === '(') { + if (stack === 0) { + start = i + key = values.substring(0, start) + } + stack++ + } else if (char === ')') { + stack-- + if (stack === 0) { + val = values.substring(start, i + 1) + } + } + } + return { key, val } +} // parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)' const parseTransform = (transformStr: string) => { const values = parseValues(transformStr) const transform: {[propName: string]: string|number|number[]}[] = [] values.forEach(item => { - const match = item.match(/([/\w]+)\(([^)]+)\)/) - if (match && match.length >= 3) { - let key = match[1] - const val = match[2] - switch (key) { - case 'translateX': - case 'translateY': - case 'scaleX': - case 'scaleY': - case 'rotateX': - case 'rotateY': - case 'rotateZ': - case 'rotate': - case 'skewX': - case 'skewY': - case 'perspective': - // 单个值处理 - transform.push({ [key]: global.__formatValue(val) }) - break - case 'matrix': - case 'matrix3d': - transform.push({ [key]: parseValues(val, ',').map(val => +val) }) - break - case 'translate': - case 'scale': - case 'skew': - case 'rotate3d': // x y z angle - case 'translate3d': // x y 支持 z不支持 - case 'scale3d': // x y 支持 z不支持 - { - // 2 个以上的值处理 - key = key.replace('3d', '') - const vals = parseValues(val, ',').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) => { - return { [`${key}${xyz[index] || ''}`]: global.__formatValue(v.trim()) } - })) - break + let { key, val } = parseValueFromParentheses(item) + switch (key) { + case 'translateX': + case 'translateY': + case 'scaleX': + case 'scaleY': + case 'rotateX': + case 'rotateY': + case 'rotateZ': + case 'rotate': + case 'skewX': + case 'skewY': + case 'perspective': + // 单个值处理 + transform.push({ [key]: global.__formatValue(val) }) + break + case 'matrix': + case 'matrix3d': + transform.push({ [key]: parseValues(val, ',').map(val => +val) }) + break + case 'translate': + case 'scale': + case 'skew': + case 'rotate3d': // x y z angle + case 'translate3d': // x y 支持 z不支持 + case 'scale3d': // x y 支持 z不支持 + { + // 2 个以上的值处理 + key = key.replace('3d', '') + const vals = parseValues(val, ',').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) => { + return { [`${key}${xyz[index] || ''}`]: global.__formatValue(v.trim()) } + })) + break } } }) From ad20862f2f4cafda3a78eb67ca2804c192d80838 Mon Sep 17 00:00:00 2001 From: wenwen Date: Mon, 23 Dec 2024 17:07:03 +0800 Subject: [PATCH 4/7] =?UTF-8?q?add=20parseValueFromParentheses=20=E8=A7=A3?= =?UTF-8?q?=E6=9E=90=20translateY(10px)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/webpack-plugin/lib/platform/style/wx/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/platform/style/wx/index.js b/packages/webpack-plugin/lib/platform/style/wx/index.js index d28c27947..054ba0542 100644 --- a/packages/webpack-plugin/lib/platform/style/wx/index.js +++ b/packages/webpack-plugin/lib/platform/style/wx/index.js @@ -128,7 +128,7 @@ module.exports = function getSpec ({ warn, error }) { } else if (char === ')') { stack-- if (stack === 0) { - val = values.substring(start, i + 1) + val = values.substring(start + 1, i) } } } From 3f781aa6c31f364e8209179b095b569f1e9f30c7 Mon Sep 17 00:00:00 2001 From: wenwen Date: Mon, 23 Dec 2024 17:28:02 +0800 Subject: [PATCH 5/7] fix Parentheses --- .../lib/runtime/components/react/useAnimationHooks.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts index 4dd83152e..f9adad4c5 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts @@ -125,7 +125,7 @@ const parseValueFromParentheses = (values: string) => { } else if (char === ')') { stack-- if (stack === 0) { - val = values.substring(start, i + 1) + val = values.substring(start + 1, i) } } } From eb8a771fe00731a1099f2b29747e16b161f5853b Mon Sep 17 00:00:00 2001 From: wenwen Date: Mon, 23 Dec 2024 20:56:19 +0800 Subject: [PATCH 6/7] fix del parseValueFromParentheses & update match transform --- .../lib/platform/style/wx/index.js | 126 ++++++++---------- .../components/react/useAnimationHooks.ts | 106 ++++++--------- 2 files changed, 95 insertions(+), 137 deletions(-) diff --git a/packages/webpack-plugin/lib/platform/style/wx/index.js b/packages/webpack-plugin/lib/platform/style/wx/index.js index 054ba0542..3ff144c1a 100644 --- a/packages/webpack-plugin/lib/platform/style/wx/index.js +++ b/packages/webpack-plugin/lib/platform/style/wx/index.js @@ -108,32 +108,6 @@ module.exports = function getSpec ({ warn, error }) { } return result } - // 解析 translateY(10px) 这种结构 - // 括号外作为key返回，括号内作为val返回 - const parseValueFromParentheses = (values) => { - let i = -1 - const len = values.length - let stack = 0 - let start = 0 - let key = '' - let val = '' - while (++i < len) { - const char = values[i] - if (char === '(') { - if (stack === 0) { - start = i - key = values.substring(0, start) - } - stack++ - } else if (char === ')') { - stack-- - if (stack === 0) { - val = values.substring(start + 1, i) - } - } - } - return { key, val } - } // const getDefaultValueFromVar = (str) => { // const totalVarExp = /^var\((.+)\)$/ // if (!totalVarExp.test(str)) return str @@ -404,55 +378,61 @@ module.exports = function getSpec ({ warn, error }) { const values = parseValues(value) const transform = [] values.forEach(item => { - let { key, val } = parseValueFromParentheses(item) - switch (key) { - case 'translateX': - case 'translateY': - case 'scaleX': - case 'scaleY': - case 'rotateX': - case 'rotateY': - case 'rotateZ': - case 'rotate': - case 'skewX': - case 'skewY': - case 'perspective': - // 单个值处理 - transform.push({ [key]: val }) - break - case 'matrix': - case 'matrix3d': - transform.push({ [key]: parseValues(val, ',').map(val => +val) }) - break - case 'translate': - case 'scale': - case 'skew': - case 'rotate3d': // x y z angle - case 'translate3d': // x y 支持 z不支持 - case 'scale3d': // x y 支持 z不支持 - { - // 2 个以上的值处理 - key = key.replace('3d', '') - const vals = parseValues(val, ',').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`, value, selector }, { mode }) + const match = item.match(/([/\w]+)\(([^]+)\)/) + if (match && match.length >= 3) { + let key = match[1] + const val = match[2] + switch (key) { + case 'translateX': + case 'translateY': + case 'scaleX': + case 'scaleY': + case 'rotateX': + case 'rotateY': + case 'rotateZ': + case 'rotate': + case 'skewX': + case 'skewY': + case 'perspective': + // 单个值处理 + transform.push({ [key]: val }) + break + case 'matrix': + case 'matrix3d': + transform.push({ [key]: parseValues(val, ',').map(val => +val) }) + break + case 'translate': + case 'scale': + case 'skew': + case 'rotate3d': // x y z angle + case 'translate3d': // x y 支持 z不支持 + case 'scale3d': // x y 支持 z不支持 + { + // 2 个以上的值处理 + key = key.replace('3d', '') + const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3) + // scale(.5) === scaleX(.5) scaleY(.5) + if (vals.length === 1 && key === 'scale') { + vals.push(vals[0]) } - return { [`${key}${xyz[index] || ''}`]: v.trim() } - })) - break + 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, value, selector }, { mode }) + break } - case 'translateZ': - case 'scaleZ': - default: - // 不支持的属性处理 - unsupportedPropError({ prop, value, selector }, { mode }) - break + } else { + error(`Property [${prop}] is invalid in ${selector}, received [${value}], please check again!`) } }) return { diff --git a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts index f9adad4c5..feb8966ba 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts @@ -105,76 +105,54 @@ const parseValues = (str: string, char = ' ') => { } return result } -// 解析 translateY(10px) 这种结构 -// 括号外作为key返回，括号内作为val返回 -const parseValueFromParentheses = (values: string) => { - let i = -1 - const len = values.length - let stack = 0 - let start = 0 - let key = '' - let val = '' - while (++i < len) { - const char = values[i] - if (char === '(') { - if (stack === 0) { - start = i - key = values.substring(0, start) - } - stack++ - } else if (char === ')') { - stack-- - if (stack === 0) { - val = values.substring(start + 1, i) - } - } - } - return { key, val } -} // parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)' const parseTransform = (transformStr: string) => { const values = parseValues(transformStr) const transform: {[propName: string]: string|number|number[]}[] = [] values.forEach(item => { - let { key, val } = parseValueFromParentheses(item) - switch (key) { - case 'translateX': - case 'translateY': - case 'scaleX': - case 'scaleY': - case 'rotateX': - case 'rotateY': - case 'rotateZ': - case 'rotate': - case 'skewX': - case 'skewY': - case 'perspective': - // 单个值处理 - transform.push({ [key]: global.__formatValue(val) }) - break - case 'matrix': - case 'matrix3d': - transform.push({ [key]: parseValues(val, ',').map(val => +val) }) - break - case 'translate': - case 'scale': - case 'skew': - case 'rotate3d': // x y z angle - case 'translate3d': // x y 支持 z不支持 - case 'scale3d': // x y 支持 z不支持 - { - // 2 个以上的值处理 - key = key.replace('3d', '') - const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3) - // scale(.5) === scaleX(.5) scaleY(.5) - if (vals.length === 1 && key === 'scale') { - vals.push(vals[0]) + const match = item.match(/([/\w]+)\(([^]+)\)/) + if (match && match.length >= 3) { + let key = match[1] + const val = match[2] + switch (key) { + case 'translateX': + case 'translateY': + case 'scaleX': + case 'scaleY': + case 'rotateX': + case 'rotateY': + case 'rotateZ': + case 'rotate': + case 'skewX': + case 'skewY': + case 'perspective': + // 单个值处理 + transform.push({ [key]: global.__formatValue(val) }) + break + case 'matrix': + case 'matrix3d': + transform.push({ [key]: parseValues(val, ',').map(val => +val) }) + break + case 'translate': + case 'scale': + case 'skew': + case 'rotate3d': // x y z angle + case 'translate3d': // x y 支持 z不支持 + case 'scale3d': // x y 支持 z不支持 + { + // 2 个以上的值处理 + key = key.replace('3d', '') + const vals = parseValues(val, ',').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) => { + return { [`${key}${xyz[index] || ''}`]: global.__formatValue(v.trim()) } + })) + break } - const xyz = ['X', 'Y', 'Z'] - transform.push(...vals.map((v, index) => { - return { [`${key}${xyz[index] || ''}`]: global.__formatValue(v.trim()) } - })) - break } } }) From 2a73cadb472e9bf7d61e7b1c5f62cc57fd5742aa Mon Sep 17 00:00:00 2001 From: wenwen Date: Tue, 24 Dec 2024 14:53:56 +0800 Subject: [PATCH 7/7] fix match exp --- packages/webpack-plugin/lib/platform/style/wx/index.js | 2 +- .../lib/runtime/components/react/useAnimationHooks.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/webpack-plugin/lib/platform/style/wx/index.js b/packages/webpack-plugin/lib/platform/style/wx/index.js index 3ff144c1a..4a8c5768a 100644 --- a/packages/webpack-plugin/lib/platform/style/wx/index.js +++ b/packages/webpack-plugin/lib/platform/style/wx/index.js @@ -378,7 +378,7 @@ module.exports = function getSpec ({ warn, error }) { const values = parseValues(value) const transform = [] values.forEach(item => { - const match = item.match(/([/\w]+)\(([^]+)\)/) + const match = item.match(/([/\w]+)\((.+)\)/) if (match && match.length >= 3) { let key = match[1] const val = match[2] diff --git a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts index feb8966ba..d2fe90334 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts +++ b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts @@ -110,7 +110,7 @@ const parseTransform = (transformStr: string) => { const values = parseValues(transformStr) const transform: {[propName: string]: string|number|number[]}[] = [] values.forEach(item => { - const match = item.match(/([/\w]+)\(([^]+)\)/) + const match = item.match(/([/\w]+)\((.+)\)/) if (match && match.length >= 3) { let key = match[1] const val = match[2]