fix: style动态计算转换后样式失效问题修复

NervJS · Oct 30, 2023 · 04acf78 · 04acf78
1 parent 6468e36
commit 04acf78
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/packages/taroize/__tests__/wxml.test.ts b/packages/taroize/__tests__/wxml.test.ts
@@ -397,4 +397,10 @@ describe('style属性的解析', () => {
     contentInput = convertStyleUnit(contentInput)
     expect(contentInput).toBe(`<swiper-item style="transform: translate(0%, 0rem) translateZ(0rem);"></swiper-item>`)
   })
+
+  test('style="height: calc(100vh - {{xxx}}rem)"，内联样式使用calc计算，包含变量，变量前有空格，转换后空格保留',() => {
+    let contentInput = `<swiper-item style="height: calc(100vh - {{num}}rem);"></swiper-item>`
+    contentInput = convertStyleUnit(contentInput)
+    expect(contentInput).toBe('<swiper-item style="height: calc(100vh - {{num}}rem);"></swiper-item>')
+  })
 })
diff --git a/packages/taroize/src/wxml.ts b/packages/taroize/src/wxml.ts
@@ -128,9 +128,9 @@ function convertStyleAttrs (styleAttrsMap: any[]) {
     const attrValueReg = /([^{}]*)\{\{([^{}]*)\}\}([^{}]*)/
     const matchs = attrValueReg.exec(attr.value)
     if (matchs !== null) {
-      const tempLeftValue = matchs[1]?.trim() || ''
-      const tempMidValue = matchs[2]?.trim() || ''
-      const tempRightValue = matchs[3]?.trim() || ''
+      const tempLeftValue = matchs[1] || ''
+      const tempMidValue = matchs[2] || ''
+      const tempRightValue = matchs[3] || ''
       // 将模版中的内容转换为 ast 节点
       const tempMidValueAst = parseFile(tempMidValue).program.body[0] as any
       attr.value = t.templateLiteral(