fix(transformer-attributify-jsx): fix curlybraceRE (#1879)

unocss · Nov 15, 2022 · 9710504 · 9710504
1 parent d5a6a6a
commit 9710504
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git 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
@@ -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'}>