fix(transform): translate

Simon-He95 · Apr 5, 2024 · c10f589 · c10f589
1 parent 63d14d0
commit c10f589
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/src/transform.ts b/src/transform.ts
@@ -16,12 +16,12 @@ export function transform(key: string, val: string) {
   return joinEmpty(v)
     .split(' ')
     .map((v) => {
-      const matcher = v.match(/([a-z]+)([A-Z])?\((.*)\)/)
+      const matcher = v.match(/([a-z]+)(3d)?([A-Z])?\((.*)\)/)
 
       if (!matcher)
         return undefined
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const [_, namePrefix, nameSuffix, value] = matcher
+      const [_, namePrefix, is3d, nameSuffix, value] = matcher
       if (nameSuffix) {
         const values = value.replace(
           /,(?![^()]*\))/g,
@@ -46,6 +46,9 @@ export function transform(key: string, val: string) {
           ' ',
         ).split(' ')
         if (values.length > 1) {
+          if (namePrefix === 'translate')
+            return `${namePrefix}="[${values.join(',')}]"`
+
           return `${namePrefix}="${values.map(v => isVar(v)
             ? `[${v}]`
             : namePrefix === 'scale'

diff --git a/test/transform.test.ts b/test/transform.test.ts
@@ -35,7 +35,7 @@ describe('transform', () => {
   })
   it('transform: ranslate(10%, 20%);', () => {
     expect(toUnocss('transform: translate(10%, 20%);')).toBe(
-      'translate="10% 20%"',
+      'translate="[10%,20%]"',
     )
   })
 
@@ -58,12 +58,17 @@ describe('transform', () => {
   it('transform: translate(-26px, 16px) skew(50deg) scaleY(0.6);', () => {
     expect(
       toUnocss('transform: translate(-26px, 16px) skew(50deg) scaleY(0.6)'),
-    ).toBe('translate="-26px 16px" skew="50" scale="y-60"')
+    ).toBe('translate="[-26px,16px]" skew="50" scale="y-60"')
   })
 
   it('transform: translate(-26px, var(--translatey)) skew(var(--skew,60)) scaleY(var(--scale));', () => {
     expect(
       toUnocss('transform: translate(-26px, var(--translatey,20px)) skew(var(--skew,60)) scale(var(--scale, 30%))'),
-    ).toBe('translate="-26px [var(--translatey,20px)]" skew="[var(--skew,60)]" scale="[var(--scale,30%)]"')
+    ).toBe('translate="[-26px,var(--translatey,20px)]" skew="[var(--skew,60)]" scale="[var(--scale,30%)]"')
+  })
+  it('transform: translate3d(-50%, -50%, 0);', () => {
+    expect(
+      toUnocss('transform: translate3d(-50%, -50%, 0)'),
+    ).toBe('translate="[-50%,-50%,0]"')
   })
 })
diff --git a/test/transformStyleToUnocss.test.ts b/test/transformStyleToUnocss.test.ts
@@ -27,5 +27,4 @@ describe('transformStyleToUnocss', () => {
       'text="[#fff]" text-16px',
     )
   })
-
 })
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,5 +27,4 @@ describe('transformStyleToUnocss', () => { @@
           'text="[#fff]" text-16px',
         )
       })
     })