Merge branch 'bugfix-hjw-241220' into fix-drn

didi · Dec 24, 2024 · 8a0119c · 8a0119c
2 parents 62d15e1 + 2a73cad
commit 8a0119c
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 137 deletions.
diff --git 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
@@ -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
       }
     }
   })