fix(transformer-attributify-jsx): improve attribute capturing (unocss#2334)

sibbng · web-flow · commit 5d472fac9be4 · 2023-03-08T14:06:54.000+01:00
diff --git a/packages/transformer-attributify-jsx/src/index.ts b/packages/transformer-attributify-jsx/src/index.ts
@@ -37,7 +37,7 @@ export interface TransformerAttributifyJsxOptions {
   exclude?: FilterPattern
 }
 
-const elementRE = /<([^>\s]*\s)((?:'.*?'|".*?"|`.*?`|\{.*?\}|[^>]*?)*)/g
+const elementRE = /(<\w[\w:\.$-]*\s)((?:'[^>]*?'|"[^>]*?"|`(?:[^>]|[\S])*?`|\{(?:[^>]|[\S])*?\}|[^>]*?)*)/g
 const attributeRE = /([a-zA-Z()#][\[?a-zA-Z0-9-_:()#%\]?]*)(?:\s*=\s*((?:'[^']*')|(?:"[^"]*")|\S+))?/g
 const valuedAttributeRE = /((?!\d|-{2}|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:!%-.~<]+)=(?:["]([^"]*)["]|[']([^']*)[']|[{]((?:[`(](?:[^`)]*)[`)]|[^}])+)[}])/gms
 
@@ -85,7 +85,7 @@ export default function transformerAttributifyJsx(options: TransformerAttributif
           tasks.push(uno.parseToken(matchedRule).then((matched) => {
             if (matched) {
               const tag = item[1]
-              const startIdx = (item.index || 0) + (attr.index || 0) + tag.length + 1
+              const startIdx = (item.index || 0) + (attr.index || 0) + tag.length
               const endIdx = startIdx + matchedRule.length
               code.overwrite(startIdx, endIdx, `${matchedRule}=""`)
             }
diff --git a/test/transformer-attributify-jsx.test.ts b/test/transformer-attributify-jsx.test.ts
@@ -31,6 +31,11 @@ describe('transformerAttributifyJs', () => {
   mr-10 
   className={cn({ 'c-red': variable > 0 }, 'mr-10')}
 ></section>
+<div 
+  label={
+    <b>1</b>
+  }
+></div>
 <div absolute bottom-5 right-0 left-0 text-center op30 fw300>
   on-demand · instant · fully customizable
 </div>
@@ -72,6 +77,11 @@ describe('transformerAttributifyJs', () => {
         mr-10=\\"\\" 
         className={cn({ 'c-red': variable > 0 }, 'mr-10')}
       ></section>
+      <div 
+        label={
+          <b>1</b>
+        }
+      ></div>
       <div absolute=\\"\\" bottom-5=\\"\\" right-0=\\"\\" left-0=\\"\\" text-center=\\"\\" op30=\\"\\" fw300=\\"\\">
         on-demand · instant · fully customizable
       </div>"
@@ -111,6 +121,11 @@ describe('transformerAttributifyJs', () => {
         mr-10=\\"\\" 
         className={cn({ 'c-red': variable > 0 }, 'mr-10')}
       ></section>
+      <div 
+        label={
+          <b>1</b>
+        }
+      ></div>
       <div absolute bottom-5=\\"\\" right-0=\\"\\" left-0=\\"\\" text-center=\\"\\" op30=\\"\\" fw300=\\"\\">
         on-demand · instant · fully customizable
       </div>"
