From 9710504f571e204cd2edc9c2a59024abcf2d0586 Mon Sep 17 00:00:00 2001
From: Chris <1633711653@qq.com>
Date: Wed, 16 Nov 2022 00:14:42 +0800
Subject: [PATCH] fix(transformer-attributify-jsx): fix curlybraceRE (#1879)

---
 packages/transformer-attributify-jsx/src/index.ts | 5 ++---
 test/transformer-attributify-jsx.test.ts          | 6 +++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/transformer-attributify-jsx/src/index.ts b/packages/transformer-attributify-jsx/src/index.ts
index cf69be4788..59affaf19b 100644
--- a/packages/transformer-attributify-jsx/src/index.ts
+++ b/packages/transformer-attributify-jsx/src/index.ts
@@ -40,8 +40,7 @@ export interface TransformerAttributifyJsxOptions {
 const elementRE = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][-.:0-9_a-zA-Z]*)((?:\s+[^>]*?(?:(?:'[^']*')|(?:"[^"]*"))?)*)\s*(\/?)>/gs
 const attributeRE = /([a-zA-Z()#][\[?a-zA-Z0-9-_:()#%\]?]*)(?:\s*=\s*((?:'[^']*')|(?:"[^"]*")|\S+))?/g
 const classFilterRE = /(className|class)\s*=\s*\{[^\}]*\}/i
-const curlybraceRE = /\{.+\}/g
-
+const curlybraceRE = /\w+\s?=\s?\{.+?\}/g
 export default function transformerAttributifyJsx(options: TransformerAttributifyJsxOptions = {}): SourceCodeTransformer {
   const {
     blocklist = [],
@@ -80,7 +79,7 @@ export default function transformerAttributifyJsx(options: TransformerAttributif
         if (classNamePart)
           attributifyPart = item[3].replace(classFilterRE, ' '.repeat(classNamePart[0].length))
         if (curlybraceRE.test(attributifyPart))
-          continue
+          attributifyPart = attributifyPart.replace(curlybraceRE, match => ' '.repeat(match.length))
         for (const attr of attributifyPart.matchAll(attributeRE)) {
           const matchedRule = attr[0].replace(/\:/i, '-')
           if (matchedRule.includes('=') || isBlocked(matchedRule))
diff --git a/test/transformer-attributify-jsx.test.ts b/test/transformer-attributify-jsx.test.ts
index c86b9e1acb..d8e49e137c 100644
--- a/test/transformer-attributify-jsx.test.ts
+++ b/test/transformer-attributify-jsx.test.ts
@@ -10,7 +10,7 @@ describe('transformerAttributifyJs', () => {
 <div h-full text-center flex select-none className={red ? 'text-red': 'text-green'}>
   <input value={ target ? '10px' : '20px'} style={{ height: '100px' }}>
   <div ma>
-    <div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s>
+    <div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s key={index}>
       unocss
     </div>
     <div op30 text-lg fw300 m1 className={hidden && 'op0'}>
@@ -46,7 +46,7 @@ describe('transformerAttributifyJs', () => {
       "<div h-full=\\"\\" text-center=\\"\\" flex=\\"\\" select-none=\\"\\" className={red ? 'text-red': 'text-green'}>
         <input value={ target ? '10px' : '20px'} style={{ height: '100px' }}>
         <div ma=\\"\\">
-          <div text-5xl=\\"\\" fw100=\\"\\" animate-bounce-alt=\\"\\" animate-count-infinite=\\"\\" animate-duration-1s=\\"\\">
+          <div text-5xl=\\"\\" fw100=\\"\\" animate-bounce-alt=\\"\\" animate-count-infinite=\\"\\" animate-duration-1s=\\"\\" key={index}>
             unocss
           </div>
           <div op30=\\"\\" text-lg=\\"\\" fw300=\\"\\" m1=\\"\\" className={hidden && 'op0'}>
@@ -80,7 +80,7 @@ describe('transformerAttributifyJs', () => {
       "<div h-full=\\"\\" text-center=\\"\\" flex select-none=\\"\\" className={red ? 'text-red': 'text-green'}>
         <input value={ target ? '10px' : '20px'} style={{ height: '100px' }}>
         <div ma=\\"\\">
-          <div text-5xl=\\"\\" fw100=\\"\\" animate-bounce-alt=\\"\\" animate-count-infinite=\\"\\" animate-duration-1s=\\"\\">
+          <div text-5xl=\\"\\" fw100=\\"\\" animate-bounce-alt=\\"\\" animate-count-infinite=\\"\\" animate-duration-1s=\\"\\" key={index}>
             unocss
           </div>
           <div op30=\\"\\" text-lg=\\"\\" fw300=\\"\\" m1=\\"\\" className={hidden && 'op0'}>