From eb8a771fe00731a1099f2b29747e16b161f5853b Mon Sep 17 00:00:00 2001
From: wenwen <huajingwen@didiglobal.com>
Date: Mon, 23 Dec 2024 20:56:19 +0800
Subject: [PATCH 1/2] 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 <huajingwen@didiglobal.com>
Date: Tue, 24 Dec 2024 14:53:56 +0800
Subject: [PATCH 2/2] 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]