From c10f5894d53fd96c8b569d3a733020dcb801d895 Mon Sep 17 00:00:00 2001
From: Simon He <57086651+Simon-He95@users.noreply.github.com>
Date: Sat, 6 Apr 2024 01:05:11 +0800
Subject: [PATCH] fix(transform): translate

---
 src/transform.ts                    |  7 +++++--
 test/transform.test.ts              | 11 ++++++++---
 test/transformStyleToUnocss.test.ts |  1 -
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/transform.ts b/src/transform.ts
index f58f845..78ec388 100644
--- 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
index f755262..a38095c 100644
--- 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
index 4ea7e99..cfcbb9a 100644
--- a/test/transformStyleToUnocss.test.ts
+++ b/test/transformStyleToUnocss.test.ts
@@ -27,5 +27,4 @@ describe('transformStyleToUnocss', () => {
       'text="[#fff]" text-16px',
     )
   })
-  
 })